Meta Tags Open Graph - O Que Você Precisa Saber

Você quer que as pessoas notem suas publicações nas redes sociais?

Todos os dias, mais de 4 milhões de posts de blog são escritos, então é crucial compartilhar seu trabalho nas redes sociais. Open Graph é um dos componentes mais importantes para alcançar um público mais amplo.

Nem todo mundo conhece a importância do Open Graph. Afinal, o que é? Como ele pode te ajudar a ser notado?

O que é Open Graph?

“As Open Graph meta tags, assim como meta descriptions e títulos, governam como as URLs são escritas quando compartilhadas nas redes sociais.”

É mais simples definir o conteúdo da página em sites de redes sociais devido ao projeto Open Graph do Facebook para padronizar informações sociais entre websites.

Essas tags fornecem aos serviços de redes sociais informações como o título, a descrição e a imagem em destaque da página na seção head de uma página da web. Esse processo preserva a consistência e a autenticidade das informações exibidas.

Por que usar Open Graph?

Open Graph é suportado em várias redes sociais, como:

• Facebook;
• Twitter/X;
• Pinterest;
• Viber;
• Telegram;
• WhatsApp.

De acordo com o Google, o protocolo melhora os “Recommended Content Blocks”.

O que acontece se o Open Graph não for usado?

Como o Facebook não tem certeza do que exibir na prévia, ele pode usar qualquer imagem que encontrar (pode até pegar um banner de anúncio ou algo do seu cabeçalho).

Como resultado, o Facebook não consegue determinar quais seções da prévia exibir.

• Open Graph cria prévias para websites relacionados a redes sociais.
• As tags Open Graph ajudam as pessoas a localizar material em feeds sociais, o que leva a um aumento de visitas.

À medida que os visitantes rolam a página do seu website, quanto mais alto seu material aparece, mais atenção ele recebe. Isso permite que os usuários obtenham uma prévia antes de clicar.

Use as tags OG para ajudar as pessoas a localizar seu material no Facebook e em outras plataformas de redes sociais.

Os elementos meta OG são usados para criar snippets quando URLs são compartilhadas em conversas privadas em sites que utilizam o protocolo.

A importância do protocolo Open Graph para o seu negócio

Esse tipo de interação é simplificado pelo protocolo Open Graph do Facebook. A marcação Open Graph é um método de organizar e rastrear dados de prévia. Ela te dá controle total sobre como seu material é exibido em redes sociais além das suas.

Para facilitar a integração, foram criados objetos de grafo ricos que compartilham o conjunto padrão de características do Facebook. O Facebook tem controle sobre o fluxo de informações de fontes externas (ou curtidas, etc.). Essas informações são fornecidas pelas meta tags Open Graph à medida que passam pelo cabeçalho de um website.

Como muitas pessoas acessam uma página via redes sociais, as tags Open Graph são mais vitais do que nunca. O CTR pode aumentar quando a busca é melhorada. Open Graph facilita o processo de compartilhamento em redes sociais. Open Graph é amplamente suportado em sites de redes sociais. As tags Open Graph do Twitter/X são um bom exemplo; o Twitter/X suporta Open Graph.

O que isso significa exatamente?

Por que se preocupar em rotular seu conteúdo server-side usando Open Graph? Existe a possibilidade de que as tags extras melhorem o desempenho do seu website e atraiam mais visitantes? Aqui estão algumas das razões pelas quais acreditamos que o Open Graph pode fazer uma enorme diferença.

As redes sociais mais proeminentes utilizam tags Open Graph

Se você não tem tempo para aprender HTML, você pode, em vez disso, utilizar as tags Open Graph do Facebook. Você pode usar esses rótulos para personalizar os nomes, descrições e fotos que aparecem em todos os principais sites de redes sociais.

As tags Open Graph são realmente para redes sociais

Open Graph foi projetado para exibir amostras de informações dentro da rede social. Ele organiza as informações de maneiras que vão além de apenas compartilhar uma página da web.

Recurso de imagem otimizada

Você pode usar as tags Open Graph para especificar qual imagem deve aparecer na sua prévia social. A opção padrão não precisa ser escolhida. As pessoas estão mais inclinadas a clicar em links para o seu post de blog ou website se eles tiverem uma boa aparência.

É sobre prévias sociais, não prévias de busca

Tanto a otimização para motores de busca (SEO) quanto o marketing de redes sociais são cruciais, mas têm requisitos distintos. Os componentes Open Graph resolveram um antigo problema de SEO: o fato de que as prévias de publicações em redes sociais tinham títulos e descrições pouco atraentes.

O título da página, as meta descriptions e as tags de título, descrição, URL e imagem do Open Graph devem ser únicos para que o conteúdo seja otimizado para motores de busca e redes sociais.

Você tem controle sobre seu material

Quer você publique seu material ou outra pessoa o faça, você tem controle total sobre como ele aparecerá nas redes sociais.

Mesmo que você personalize cada post em redes sociais, a maioria dos seus clientes ignorará a prévia. Visitantes que optarem por compartilhar seu material o farão com uma imagem, título e descrição bem escolhidos se suas tags Open Graph forem as melhores possíveis. Isso é muito importante porque você tem controle total sobre as informações que são divulgadas sobre o seu negócio.

Tipos de tags Open Graph

Tags Open Graph como og:title, og:image, og:type e og:url permitem que plataformas de redes sociais visualizem suas informações. Você deve usar essas tags críticas, mas também pode usar outras.

Uma captura de tela do Facebook contendo conexões para os componentes og:image, og:url, og:title e og:description.

og:site_name

A tag og:site_name deve conter o domínio onde seu conteúdo pode ser encontrado. Como resultado, ela substitui o nome da marca, que teria estado no meta title (e, portanto, seria proibido na tag og:title tag).

A tag og:site_name deve incluir o nome do seu site ou marca, enquanto a tag og:title deve conter o título do seu artigo.

Código og:site_name <meta property="og:site_name" content="Your Site Name" />

Use a mesma tag de nome do site em todo o seu website.

og:title

A tag og:title é sugerida para definir o título da página. É semelhante a como os meta titles são usados em SEO. Ao usar um meta title existente, certifique-se de manter o campo og:title livre de qualquer conteúdo específico da sua marca ou website.

Código og:title <meta property="og:title" content="Title" />

Esta tag deve aparecer em qualquer página do seu website que um usuário possa querer compartilhar no Facebook, Twitter/X ou outro site de rede social.

Mantenha o título entre 40 e 50 caracteres; caso contrário, ele será cortado.

Se você quer que mais pessoas visitem seu website, o título deve fazer mais do que simplesmente descrevê-lo.

Ao contrário dos meta titles de motores de busca, você não deve incluir o nome do seu domínio ou qualquer outra informação que possa ser usada para te identificar.

og:type

Use a tag og:type para especificar o tipo de material que está sendo enviado. Isso informa ao site de rede social sobre o tipo de conteúdo que você está compartilhando, como um post de blog, página da web, vídeo ou arquivo de áudio.

Código og:type <meta property="og:type" content="article" />

Use o tipo de objeto article para informações que requerem explicação, como posts de blog.

Adicione o tipo website às outras páginas do website.

Você deve usar o formato de arquivo correto se desejar transferir um arquivo que contenha texto e áudio ou vídeo. Esta página contém uma lista de todas as Categorias de Objeto.

og:locale

A tag og:locale fornece informações sobre o idioma em que o material que está sendo transferido foi escrito. Os usuários de sites de redes sociais devem estar cientes de que o conteúdo publicado em websites pode ser visto em vários idiomas.

Código og:locale <meta property="og:locale" content="en_GB" />

Como o Facebook assume que tudo o que não possui uma tag og:locale é escrito em inglês americano, se você gerencia um website nos Estados Unidos que é inteiramente composto por material em inglês, você pode ignorar esta tag (en_US).

Se o conteúdo que você está fornecendo for escrito em um idioma diferente do inglês americano, certifique-se de usar a tag OG correta.

og:url

Basta usar a tag og:url para especificar onde você deseja publicar o conteúdo.

Código og:url <meta property="og:url" content="https://www.yourdomain.com/title.html" />

Esta tag deve fornecer a URL canônica da página.

og:description

A declaração incluída em uma tag og:description precisa ser sucinta, descomplicada e o mais envolvente possível para encorajar os leitores a visitar um website.

Você pode reutilizar a informação, desde que seja relevante, devido ao fato de que esta tag é semelhante a uma utilizada pelos motores de busca.

Código og:description <meta property="og:description" content="Your description." />

Seria útil se você pudesse manter sua descrição entre 50 e 100 caracteres. As publicações do Facebook devem ter entre duas e quatro palavras no máximo; publicações com mais de quatro palavras têm maior probabilidade de serem excluídas.

Para obter o máximo de cliques e atenção para o material que você está fornecendo, a descrição que você oferece deve ser o mais detalhada e convincente possível.

og:image

Forneça a URL da imagem a ser usada no trecho social usando o elemento og:image. Use uma imagem que seja intrigante e diretamente relevante para o conteúdo do artigo para aumentar a probabilidade de as pessoas clicarem no seu website.

Este elemento OG funciona de forma semelhante à schema markup, que é utilizada pelos motores de busca para fornecer rich results.

Código og:image <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png" />

Se você quer que as páginas compartilháveis do seu website se classifiquem mais alto na otimização de motores de busca de imagens, use fotos inovadoras que correspondam à sua marca. Mesmo que uma página não seja frequentemente compartilhada, marcá-la com seu logotipo é uma boa ideia caso alguém a compartilhe no futuro.

Para evitar parecer pixelizada ou de baixa qualidade, sua arte original deve ter uma proporção de 1.91:1 e uma resolução de pelo menos 1200 por 630 pixels.

As tags og:image:width e og:image:height garantem que as imagens previamente compartilhadas apareçam corretamente. Instale o Yoast no seu site WordPress, se ainda não o fez, para que sejam adicionadas automaticamente. Se ainda não o fez, aqui está o código:

<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

Adicionar Open Graph ao WordPress

Adicionar tags OG ao WordPress é a maneira mais fácil, comum e simples de fazê-lo com o plugin Yoast SEO. Este plugin já deve estar instalado se o seu site estiver configurado para que os motores de busca possam localizá-lo facilmente.

Atualize a página ou artigo onde o Open Graph deve ser inserido usando a opção “social” do Yoast SEO.

Preencha os campos og:image, og:title e og:description no acordeão do Facebook.

O Yoast configurará sua tag og:url, Twitter/X Card e tamanhos de imagem para você. Se você não instruir o Yoast a usar uma imagem específica, ele utilizará a imagem principal do post.

Quando seu website é compartilhado, nenhuma imagem é exibida por padrão. Você pode alterar isso fornecendo uma captura de tela do site inteiro. Este erro ocorre quando uma URL de imagem não possui a tag og:image.

Na página de configurações principais do Yoast, você pode selecionar a og:image para todo o site.

Adicionar tags OG no seu blog WordPress é muito fácil. Você só precisa ir para:

Barra Lateral do WordPress : Yoast>Social>Facebook.

Ative o interruptor e salve a imagem existente. Acreditamos que você deve selecionar um logotipo. Você também pode fazer o mesmo para Twitter/X e Pinterest.

Adicionar Open Graph manualmente

Se você sabe como codificar e não está utilizando um dos sistemas anteriores, as tags OG são simples de instalar.

Você pode copiar e colar o conteúdo abaixo no seu website, mas por favor, modifique-o para atender às suas necessidades.

<meta property="og:site_name" content="INSERT SITE NAME" /> <meta property="og:title" content="INSERT TITLE" /> <meta property="og:description" content="INSERT DESCRIPTION" /> <meta property="og:url" content="INSERT URL" /> <meta property="og:type" content="INSERT TYPE" /> <meta property="og:image" content="INSERT IMAGE URL" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="INSERT IMAGE URL" />

Testando suas meta tags Open Graph

Vamos supor que você entendeu como incluir um Open Graph no seu website.

Se o seu website estiver devidamente classificado, ele deve aparecer excelente quando compartilhado nas redes sociais. Sempre teste seu trabalho antes de liberá-lo ao público.

Antes de compartilhar uma URL, verifique novamente se suas tags OG estão sendo puxadas e exibidas adequadamente.

Estas ferramentas podem ser úteis para testar suas tags OG:

• Pinterest Rich Pins Validator
• Twitter/X Card Validator
• Facebook Sharing Debugger
• LinkedIn Post Inspector

Basta inserir uma URL em qualquer um desses serviços para obter as meta tags originais. Ao compartilhá-lo, você terá uma ideia de como ele aparecerá para os outros.

Examine a imagem, o título e a descrição da prévia antes de prosseguir. Você pode receber alertas sobre tags que não precisa, as quais pode adicionar ou ignorar.

Se o teste da URL falhar, você deve tentar novamente com uma tag diferente. Verifique se cada ferramenta está operacional visitando sua URL. Você pode conversar sobre isso quando estiver pronto.

Veredito

É fundamental manter o controle sobre o que você compartilha nas redes sociais. O tráfego e as taxas de conversão aumentam quando itens ricos são exibidos no Open Graph. Comece com um único post de blog. Ao ver o resultado, será muito mais fácil aplicar as tags Open Graph nos seus próximos posts no futuro.

Perguntas frequentes