Como adicionar tags Open Graph no WordPress

As tags Open Graph são pequenos trechos de metadados no HTML da sua página que controlam como seu conteúdo aparece quando alguém o compartilha nas redes sociais. Sem elas, plataformas como Facebook, LinkedIn e Twitter precisam adivinhar qual título, descrição e imagem mostrar, e geralmente erram. Um link compartilhado com uma imagem ausente ou um título distorcido parece pouco profissional, e as pessoas têm muito menos probabilidade de clicar nele. Configurar as tags Open Graph corretamente leva alguns minutos e faz uma diferença real no tráfego das redes sociais.

Por que as tags Open Graph importam para o compartilhamento social

Toda vez que alguém compartilha um link no Facebook, LinkedIn, Twitter ou aplicativos de mensagens como WhatsApp e Telegram, essas plataformas buscam os metadados Open Graph da sua página para construir um cartão de visualização. Esse cartão geralmente inclui um título, uma descrição e uma imagem. Se suas tags OG estiverem ausentes ou mal configuradas, você pode ver a imagem errada extraída de um anúncio na barra lateral, a meta description cortada no meio da frase, ou nenhuma visualização.

Os números falam por si. Posts com cartões de visualização ricos obtêm engajamento significativamente maior do que links de texto simples. No Facebook, posts com imagens recebem aproximadamente 2-3x mais engajamento do que aqueles sem. No LinkedIn, artigos com imagens de visualização atraentes recebem mais cliques e compartilhamentos. Acertar suas tags OG é uma das maneiras mais fáceis de aumentar a visibilidade do conteúdo compartilhado.

Checklist das tags Open Graph obrigatórias

Nem todas as tags OG são igualmente importantes. Aqui estão as que você deve sempre incluir:

• og:title: O título da sua página como deve aparecer nos compartilhamentos sociais. Mantenha-o abaixo de 60 caracteres para evitar truncamento na maioria das plataformas.
• og:description: Um resumo breve do conteúdo da página. Procure entre 120-200 caracteres. Esta é sua chance de escrever um gancho convincente que faça as pessoas clicarem.
• og:url: A URL canonical da página. Isso garante que todos os compartilhamentos apontem para a mesma URL, consolidando as métricas de engajamento.
• og:type: O tipo de conteúdo. Use article para posts de blog, website para sua página inicial e product para itens de e-commerce.
• og:image: A imagem de visualização. Esta é a tag OG mais importante para o engajamento. Mais sobre as melhores práticas de imagem abaixo.

Tags opcionais, mas recomendadas, incluem og:site_name (o nome do seu site), og:locale (idioma e região, por exemplo, en_US) e article:published_time para posts de blog.

Melhores práticas de og:image para impacto máximo

A imagem de visualização é o que as pessoas notam primeiro ao percorrer seus feeds sociais. Acertar nela vale o esforço:

• Tamanho: Use imagens com pelo menos 1200x630 pixels. O Facebook recomenda isso como mínimo para telas de alta resolução. Para o LinkedIn, 1200x627 pixels funciona melhor.
• Proporção: Mantenha 1.91:1 para a melhor compatibilidade entre plataformas. Essa proporção funciona bem no Facebook, LinkedIn, Twitter e aplicativos de mensagens.
• Formato de arquivo: JPEG e PNG são universalmente suportados. Evite WebP para imagens OG, pois algumas plataformas e rastreadores ainda não os suportam.
• Tamanho do arquivo: Mantenha as imagens abaixo de 5MB. O Facebook pode pular imagens que demoram muito para baixar.
• Conteúdo: Evite imagens com muito texto. O Facebook costumava aplicar uma regra de 20% de texto para anúncios, e embora isso não se aplique mais a compartilhamentos orgânicos, imagens limpas com texto mínimo tendem a ter melhor desempenho.
• Imagem de fallback: Sempre defina uma imagem OG padrão para todo o site para páginas que não tenham uma imagem destacada. Uma imagem com a marca contendo seu logotipo funciona bem como fallback.

Configurando tags Open Graph com o Yoast SEO

O Yoast SEO gera automaticamente tags Open Graph e Twitter Card para cada página do seu site. Veja como configurá-lo:

Para configurações em todo o site:

1. Instale e ative o Yoast SEO.
2. Vá em Yoast SEO, depois Social no menu de administração.
3. Na aba Facebook, ative "Add Open Graph meta data".
4. Faça upload de uma imagem padrão que será usada quando um post ou página não tiver uma imagem destacada.
5. Na aba Twitter, ative os metadados do Twitter Card e escolha "Summary" ou "Summary with large image" como tipo padrão de cartão.

Para posts e páginas individuais:

1. Edite o post ou página.
2. Na meta box do Yoast SEO, clique na aba "Social" (o ícone de compartilhamento).
3. Em "Facebook preview", personalize o título, a descrição e a imagem para compartilhamento social.
4. Em "Twitter preview", defina um título, descrição ou imagem diferente, se necessário (caso contrário, o Twitter usará os valores OG do Facebook).

O Yoast extrai a imagem destacada automaticamente como og:image se você não definir uma personalizada. Ele também gera o og:title a partir do título de SEO e o og:description a partir da meta description, para que seus compartilhamentos sociais permaneçam consistentes com suas configurações de SEO.

Configurando tags Open Graph com o Rank Math

O Rank Math lida com tags OG de forma similar ao Yoast:

1. Instale e ative o Rank Math.
2. Vá em Rank Math, depois General Settings, depois Social Meta.
3. Ative "Add Open Graph meta data to your site's header".
4. Defina uma imagem padrão de compartilhamento social para posts sem imagem destacada.

Para personalização individual de posts, clique no ícone do Rank Math ao editar um post e navegue até a aba "Social". Você pode definir títulos, descrições e imagens separados para Facebook e Twitter.

Adicionando tags Open Graph manualmente via functions.php

Se preferir não usar um plugin de SEO, você pode adicionar tags OG pelo functions.php do seu tema. Essa abordagem oferece controle completo sobre cada tag:

function custom_open_graph_tags() {
    if (is_singular()) {
        global $post;
        $title = get_the_title();
        $description = has_excerpt() ? get_the_excerpt() : wp_trim_words($post->post_content, 30);
        $url = get_permalink();
        $image = get_the_post_thumbnail_url($post->ID, 'large');
        $site_name = get_bloginfo('name');

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url($url) . '" />' . "\n";
        echo '<meta property="og:type" content="article" />' . "\n";
        echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />' . "\n";
        if ($image) {
            echo '<meta property="og:image" content="' . esc_url($image) . '" />' . "\n";
            echo '<meta property="og:image:width" content="1200" />' . "\n";
            echo '<meta property="og:image:height" content="630" />' . "\n";
        }
    } elseif (is_front_page()) {
        $site_name = get_bloginfo('name');
        $description = get_bloginfo('description');
        echo '<meta property="og:title" content="' . esc_attr($site_name) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url(home_url('/')) . '" />' . "\n";
        echo '<meta property="og:type" content="website" />' . "\n";
    }
}
add_action('wp_head', 'custom_open_graph_tags');

Certifique-se de não adicionar isso junto com um plugin de SEO que já emite tags OG. Ter tags OG duplicadas pode confundir os rastreadores de redes sociais.

Tags Open Graph para produtos WooCommerce

Se você administra uma loja WooCommerce, suas páginas de produto se beneficiam de tags OG adicionais. Tanto o Yoast SEO quanto o Rank Math têm integrações com WooCommerce que automaticamente definem og:type como product e incluem metadados específicos do produto, como preço e disponibilidade.

Para implementações manuais, você pode utilizar os dados do produto do WooCommerce:

function woo_product_og_tags() {
    if (is_product()) {
        global $product;
        $price = $product->get_price();
        $currency = get_woocommerce_currency();
        echo '<meta property="og:type" content="product" />' . "\n";
        echo '<meta property="product:price:amount" content="' . esc_attr($price) . '" />' . "\n";
        echo '<meta property="product:price:currency" content="' . esc_attr($currency) . '" />' . "\n";
    }
}
add_action('wp_head', 'woo_product_og_tags');

Testando suas tags Open Graph

Após configurar suas tags OG, você deve testá-las antes de compartilhar algo importante. Aqui estão as ferramentas que você precisa:

• Facebook Sharing Debugger: Visite developers.facebook.com/tools/debug e insira sua URL. Ele mostra exatamente o que o Facebook vê, incluindo título, descrição e imagem. Clique em "Scrape Again" para atualizar o cache se você fez alterações.
• LinkedIn Post Inspector: Visite linkedin.com/post-inspector e insira sua URL. O LinkedIn faz cache agressivamente, então use essa ferramenta para forçar uma atualização após atualizar suas tags OG.
• Twitter Card Validator: Visite cards-dev.twitter.com/validator. Insira sua URL para ver uma prévia de como seu Twitter Card aparecerá.
• Varredura do InspectWP: Execute uma varredura para verificar se suas tags OG estão presentes na saída HTML da página.

Limpando os caches das redes sociais após mudanças

As plataformas de redes sociais armazenam seus dados OG em cache de forma intensa. Se você atualizar suas tags OG e a visualização antiga ainda aparecer ao compartilhar, é necessário limpar o cache:

• Facebook: Use a ferramenta Sharing Debugger e clique em "Scrape Again". Pode ser necessário clicar duas vezes para caches teimosos.
• LinkedIn: Use a ferramenta Post Inspector para forçar uma nova raspagem. O LinkedIn pode levar até 7 dias para atualizar seu cache naturalmente.
• Twitter: Use o Card Validator para solicitar uma nova varredura. O Twitter geralmente atualiza em poucos minutos.
• WhatsApp e Telegram: Esses aplicativos armazenam visualizações em cache no lado do cliente. Peça às pessoas para limparem o cache do app, ou aguarde o cache expirar naturalmente (geralmente 24-72 horas).

Erros comuns de Open Graph a evitar

• og:image ausente: O erro mais comum. Sem imagem, os compartilhamentos sociais parecem simples e são ignorados. Sempre defina uma imagem destacada ou um padrão para todo o site.
• Imagem muito pequena: Imagens abaixo de 200x200 pixels podem nem ser exibidas no Facebook. Procure pelo menos 1200x630 pixels.
• Tags OG duplicadas: Executar dois plugins de SEO, ou um plugin de SEO mais um plugin de redes sociais que emitem tags OG, resulta em metadados conflitantes. Use apenas uma fonte para suas tags OG.
• Incompatibilidade de og:url: A og:url deve corresponder à sua URL canonical. Se apontarem para URLs diferentes, as plataformas sociais podem ficar confusas sobre qual página creditar com o engajamento.
• Não definir og:type: Algumas plataformas usam website como padrão se og:type estiver ausente, o que é bom para sua página inicial, mas não é ideal para posts de blog. Defina article para posts para que as plataformas exibam a data de publicação e as informações do autor.
• Esquecer das tags específicas do Twitter: Embora o Twitter possa recorrer às tags OG, adicionar tags twitter:card e twitter:site dá mais controle sobre o formato de visualização do Twitter.