As tags Open Graph (OG) são essenciais para garantir que o conteúdo do seu site seja exibido corretamente em plataformas de mídia social quando compartilhado. Essas tags ajudam as plataformas a determinar qual imagem, título e descrição usar ao exibir seu conteúdo. Neste artigo, você aprenderá como adicionar essas tags ao seu tema WordPress usando PHP, garantindo que a imagem em destaque seja exibida corretamente para cada postagem compartilhada.
Etapa 1: Entendendo as tags do Open Graph
Antes de mergulhar no código, vamos revisar o que são as tags Open Graph e por que elas são importantes.
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: Define o tipo de conteúdo, como um artigo, vídeo, etc. Para postagens de blog, usamos “artigo”.
Essas tags são colocadas dentro do <head> 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
Agora que você entende a importância das tags Open Graph, vamos adicionar o código necessário ao seu tema funções.php arquivo. Se você estiver usando um tema filho, adicione o código ao tema filho funções.php arquivo para garantir que suas alterações não sejam substituídas durante futuras atualizações do tema pai.
- Acesse o painel do WordPress e vá para Aparência > Editor de Temas.
- Selecione o
funções.phparquivo do seu tema ou tema filho. - Adicione o seguinte código PHP no final do arquivo:
- 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), 'completo');
} 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 = obter_o_trecho();echo ' ';
eco ' ';
eco ' ';
eco ' ';
eco ' ';
}
}
adicionar_ação('wp_head', 'adicionar_tags_opengraph');
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()eobter_o_trecho(): Recupere o título e a descrição da postagem, que são usados paraog:títuloeog:descriçãotags, respectivamente.
- URL canônica e tipo de conteúdo:
obter_link_permanente(): Recupera a URL da postagem atual para oog:urlmarcação.og:tipo: Defina como “artigo” para indicar que o conteúdo é um artigo.
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.
- 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
<head>seção. - Use o depurador de compartilhamento do Facebook:
- Visite o Depurador de compartilhamento do Facebook.
- Insira a URL da sua postagem e clique em “Depurar”.
- 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
