Como adicionar tags Open Graph no WordPress usando PHP

Open Graph (OG) tags are essential for ensuring that your website content is displayed correctly on social media platforms when shared. These tags help platforms determine which image, title, and description to use when showcasing your content. In this article, you’ll learn how to add these tags to your WordPress theme using PHP, ensuring that the featured image is correctly displayed for each shared post.

Etapa 1: Entendendo as tags do Open Graph

Before diving into the code, let’s review what Open Graph tags are and why they are important.

• og:título: Define o título da postagem.
• og:descrição: Fornece uma breve descrição da postagem.
• og:image: Especifica a imagem a ser usada ao compartilhar a postagem.
• og:url: Especifica a URL canônica da postagem.
• og:tipo: Defines the type of content, such as an article, video, etc. For blog posts, we use “article”.

Essas tags são colocadas dentro do seção do HTML do seu site e são lidos por plataformas de mídia social como Facebook, Twitter e LinkedIn, entre outras.

Etapa 2: Adicionando o código ao seu tema

Now that you understand the importance of Open Graph tags, let’s add the necessary code to your theme’s funções.php file. If you’re using a child theme, add the code to the child theme’s funções.php arquivo para garantir que suas alterações não sejam substituídas durante futuras atualizações do tema pai.

1. Acesse o painel do WordPress e vá para Aparência > Editor de Temas.
2. Selecione o funções.php arquivo do seu tema ou tema filho.
3. Adicione o seguinte código PHP no final do arquivo:
4. função add_opengraph_tags() {
   se (é_único() || é_pagina()) {
   postagem global $;
   se (tem_miniatura_do_post($post->ID)) {
   $img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘full’);
   } outro {
   // URL da imagem padrão se a postagem não tiver imagem em destaque
   $img_src = array(‘https://www.example.com/default-image.jpg’);
   }// Título da postagem
   $title = obter_o_título();
   // Descrição da postagem
   $description = get_the_excerpt();echo ‘’;
   echo ‘’;
   echo ‘’;
   echo ‘’;
   echo ‘’;
   }
   }
   add_action(‘wp_head’, ‘add_opengraph_tags’);

Explicação do código:

• adicionar_tags_opengraph(): Esta função verifica se a página atual é uma postagem ou página e, se for, gera as tags Open Graph apropriadas.
• Imagem em destaque:
  • tem_post_thumbnail($post->ID): Verifica se a postagem tem um conjunto de imagens em destaque.
  • wp_get_attachment_image_src(): Recupera a URL em tamanho real da imagem em destaque. Se o post não tiver uma imagem em destaque, uma imagem padrão será usada.
• Título e Descrição:
  • obter_o_título() e obter_o_trecho(): Recupere o título e a descrição da postagem, que são usados para og:título e og:descrição tags, respectivamente.
• URL canônica e tipo de conteúdo:
  • obter_link_permanente(): Recupera a URL da postagem atual para o og:url marcação.
  • og:tipo: Set to “article” to indicate that the content is an article.

Etapa 3: Verificando a implementação

Depois de adicionar o código para funções.php, é importante verificar se as tags do Open Graph estão sendo geradas corretamente.

1. Ver a fonte da página: Em qualquer post ou página, clique com o botão direito e selecione “Exibir código-fonte da página” ou uma opção semelhante. Procure as tags Open Graph dentro do seção.
2. Use o depurador de compartilhamento do Facebook:
   • Visite o Depurador de compartilhamento do Facebook.
   • Enter the URL of your post and click “Debug”.
   • O Facebook mostrará as informações que detectar, incluindo a imagem, o título e a descrição. Isso ajuda a identificar se as tags estão sendo geradas corretamente.

Etapa 4: Solução de problemas comuns

• Imagem não exibida: Certifique-se de que a imagem em destaque esteja definida no post. Se uma imagem padrão for usada, verifique se a URL da imagem está correta e acessível publicamente.
• Conflitos com outros plugins: Alguns plugins de SEO ou mídia social podem interferir na geração de tags Open Graph. Tente desabilitar temporariamente esses plugins para ver se o problema persiste.
• Armazenamento em cache: Se você estiver usando um plugin de cache, limpe o cache do site para garantir que as novas configurações sejam aplicadas.

Resumo

Adicionar tags Open Graph manualmente ao seu tema WordPress usando PHP é uma excelente maneira de garantir que seu conteúdo seja exibido corretamente em plataformas de mídia social. Com esse código, você tem controle total sobre como suas postagens são compartilhadas, incluindo qual imagem, título e descrição são usados. Além disso, você evita depender de plugins extras, mantendo seu site mais leve e rápido.

Agora que você configurou as tags do Open Graph, suas postagens devem ser compartilhadas corretamente nas mídias sociais, com as imagens em destaque aparecendo conforme o esperado. Se você tiver alguma dúvida ou precisar de mais assistência, sinta-se à vontade para deixar um comentário abaixo!

Foto por Espaço Negativo