Open Graph: Aprenda Como Usá-lo no WordPress #134

0
133
Imagem Destacada do Post #134

Quer adicionar metadados do Facebook Open Graph aos seus temas do WordPress?

Os metadados do Open Graph são essenciais para fornecer informações às redes sociais, como o Facebook, sobre suas postagens, controlando a aparência do conteúdo quando compartilhado.

Neste artigo, explicaremos três métodos simples para adicionar facilmente os metadados do Open Graph do Facebook aos temas do WordPress. Assim, você poderá escolher o que melhor se adequa às suas necessidades. Dessa forma, suas postagens serão mais atrativas quando compartilhadas nas mídias sociais.

O Que é Open Graph?

O Open Graph é um protocolo de metadados desenvolvido pelo Facebook. Ele permite que proprietários de sites controlem como o conteúdo é apresentado quando compartilhado em plataformas de mídia social, como o Facebook.

Com o Open Graph, é possível definir títulos, descrições e imagens específicas para cada página ou postagem, garantindo que o conteúdo seja apresentado de forma atrativa e relevante ao ser compartilhado, aumentando o engajamento e o alcance nas redes sociais.

1. Adicionando Metadados Do Facebook Open Graph Com AIOSEO

AIOSEO é um popular plugin de SEO para WordPress usado por mais de 2 milhões de sites. Ele permite que você otimize facilmente seu site para mecanismos de pesquisa, bem como plataformas sociais como Facebook e Twitter.

Primeiro, você precisa instalar e ativar o plugin.

Após a ativação, você precisa visitar a página All in One SEO » Social Networks. Aqui você pode inserir o URL da sua página do Facebook e todas as suas outras redes sociais.

Configurações de rede social AIOSEO

Após isso, na parte superior da página, clique na guia “Facebook”. Você notará que a marcação de gráfico aberto está ativada por padrão.

Caso um artigo não possua uma imagem gráfica aberta, você pode clicar no botão “Fazer upload ou selecionar imagem” para escolher uma imagem padrão do Facebook OG.

Isso garantirá que suas postagens tenham uma imagem adequada quando compartilhadas na plataforma.

Definir imagem Open Graph padrão

Após rolar para baixo, você poderá personalizar o nome do site, a descrição e outras configurações. Lembre-se de clicar no botão azul “Salvar” ao concluir suas alterações.

Agora que as meta tags de gráfico aberto estão configuradas para todo o site, o próximo passo é adicionar metadados de gráfico aberto para postagens e páginas individuais.

Por padrão, o AIOSEO usará o título e a descrição da sua postagem para definir o título e a descrição do gráfico aberto. Além disso, você tem a opção de definir manualmente a miniatura do Facebook para cada página e postagem.

Para fazer isso, basta editar a postagem ou página desejada e rolar para baixo até encontrar a seção “All in One SEO” abaixo do editor. A partir daí, selecione a guia “Social” e você verá uma prévia da miniatura da sua postagem ou página. Faça as alterações necessárias para garantir que a miniatura apareça corretamente ao compartilhar o conteúdo nas redes sociais. Não se esqueça de salvar as alterações antes de sair.

Antevisão da AIOSEO no Facebook

Nesta seção, você tem o controle total sobre a imagem da mídia social, assim como o título e a descrição. Basta rolar para baixo até encontrar o campo “Image Source”.

Aqui, você tem várias opções disponíveis. Pode optar por usar a imagem em destaque do seu post ou página, fazer o upload de uma imagem personalizada específica para as redes sociais ou até mesmo escolher outras opções conforme necessário.

Certifique-se de ajustar a imagem, o título e a descrição de acordo com o conteúdo da postagem ou página para garantir que as informações sejam apresentadas de forma clara e atraente quando compartilhadas em plataformas de mídia social. Depois de fazer as alterações, não esqueça de salvar antes de sair para que as configurações sejam aplicadas corretamente.

Escolha qual imagem WordPress usar como miniatura do Facebook

2. Definindo Metadados Do Facebook Open Graph Usando Yoast SEO

Yoast SEO é outro excelente plugin de SEO para WordPress que você pode usar para adicionar metadados de gráfico aberto do Facebook em qualquer site WordPress.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Yoast SEO.

Uma vez ativado, você precisa ir para SEO » Social e simplesmente marcar a caixa ao lado de “Add Open Graph meta data”.

Habilitar Facebook Open Graph

Após fazer suas configurações, você tem a opção de salvar ou continuar e configurar outras opções sociais do Facebook.

Caso utilize um ID de aplicativo do Facebook para sua página e insights, você pode fornecê-lo aqui. Além disso, é possível personalizar o meta título, a descrição e a imagem do Open Graph da sua página inicial.

Uma funcionalidade interessante é a possibilidade de definir uma imagem padrão para ser usada quando nenhuma imagem é definida para uma postagem ou página.

Com o Yoast SEO, você pode configurar metadados Open Graph individualmente para cada postagem ou página. Basta editar a postagem ou página desejada, rolar para baixo até encontrar a seção SEO abaixo do editor e realizar as configurações necessárias. Essas opções garantem que seu conteúdo seja apresentado de forma otimizada nas redes sociais, aumentando seu alcance e atraindo mais leitores.

Definir meta dados de gráfico aberto para postagem e páginas

A partir daqui, você pode definir a miniatura do Facebook para aquela postagem ou página específica. Se você não definir um título ou uma descrição para o post, o plugin usará o seu meta título e descrição de SEO.

Agora você pode salvar sua postagem ou página e o plugin armazenará seus metadados de gráfico aberto do Facebook.

3. Adicionando Manualmente Os Metadados Open Graph Do Facebook

Este método requer que você edite seus arquivos de tema, portanto, certifique-se de fazer backup de seus arquivos de tema antes de fazer qualquer alteração.

Depois disso, basta copiar e colar este código no arquivo functions.php do seu tema ou em um plugin específico do site.

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');


//Lets add Open Graph Meta Info


function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
        echo '<meta property="fb:app_id" content="Your Facebook App ID" />';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Your Site NAME Goes HERE"/>';
    if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
        $default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Nota: Lembre-se de alterar o nome do site onde diz “O nome do seu site vai aqui”. Depois disso, altere o URL da imagem padrão com a imagem sua. Você também precisa adicionar seu próprio ID de aplicativo do Facebook. Se você não tiver um aplicativo do Facebook, poderá remover a linha de ID do aplicativo do Facebook do código.

Uma sugestão importante é adicionar uma imagem com o logotipo do seu site. Dessa forma, caso uma postagem não possua uma miniatura definida, a imagem do logotipo será utilizada.

Seguindo essas etapas, você terá concluído o processo. Assim que salvar o arquivo functions.php (ou o plugin específico do site) com as configurações feitas, os metadados de gráfico aberto do Facebook serão automaticamente exibidos no cabeçalho do WordPress. Isso tornará o compartilhamento nas redes sociais mais atraente e profissional.

Se este artigo foi útil para você, não deixe de se inscrever em nosso canal do YouTube. Lá você encontrará diversos tutoriais de WordPress para iniciantes.

Além disso, você pode nos seguir no Twitter, LinkedIn, Instagram ou Facebook para se manter atualizado com as nossas novidades. Estamos sempre prontos para ajudar!