crie trechos de redes sociais atraentes

Acompanhe as novidades e ultimas postagens.

Todo mundo quer criar conte√ļdos que se destaquem, estimulem a consci√™ncia de marca e sejam f√°ceis de compartilhar on-line.

As tags Open Graphs s√£o uma maneira de obter mais visualiza√ß√Ķes nas redes sociais. Elas determinam como seus links aparecem nas redes sociais.

Quando um usuário compartilhar um link do seu site, ele poderá ver as partes mais importantes da sua página na pré-visualização.

O que é Open Graph?

Em 2010, o Facebook introduziu as meta tags Open Graph para facilitar o compartilhamento de sites na plataforma. Desde então, o Twitter e o LinkedIn também as adotaram com o objetivo de melhorar a experiência dos usuários.

Quando voc√™ copia e cola uma URL no Facebook, geralmente aparecer√° uma pr√©-visualiza√ß√£o do link. Antes das meta tags Open Graph, as pessoas n√£o tinham controle sobre como seus links apareciam e, √†s vezes, o Facebook exibia o conte√ļdo errado.

As meta tags Open Graphs ajudam os usu√°rios a otimizar as pr√©-visualiza√ß√Ķes dos links nas redes sociais, para que os usu√°rios consigam ver as informa√ß√Ķes mais importantes.

Nas imagens a seguir, vemos um exemplo de meta tags incluídas no código de uma página. Quando alguém publica a URL desta página no Facebook, vemos uma visualização estilizada do link:

open graph no código fonte da página
como o open graph aparece no facebook

Por que as tags Open Graph s√£o importantes?

As redes sociais s√£o uma fonte constante de tr√°fego e convers√Ķes na internet. Com a combina√ß√£o certa entre estrat√©gia e design, voc√™ pode convencer os usu√°rios a clicar em seu site para saber mais sobre sua marca, fazer uma compra e muito mais.

As meta tags Open Graph melhoram as pr√©-visualiza√ß√Ķes da p√°gina de uma maneira que chama a aten√ß√£o do p√ļblico.

Veja a pré-visualização de uma página sem meta tags Open Graph no Facebook:

exemplo de publicação no facebook sem open graph

Agora veja a pré-visualização de uma página com o Open Graph. Em comparação, vemos que há uma imagem maior, um título em negrito e uma URL resumida.

exemplo com tags open graphs no facebook

Como usar o Open Graph

O Facebook lista 17 tags Open Graph em sua documentação oficial, mas apenas quatro são necessárias para o Facebook entender sua página. As tags devem ser colocadas entre as tags <head> no back-end da página.

As quatro tags necess√°rias s√£o:

  1. OG: title para o título do artigo

<meta property="og:title" content="Open Graph: Create Eye-Catching Social Media Snippets" />

  1. OG: type para indicar o tipo de objeto que você está carregando (artigo, vídeo, etc)

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

  2. OG: image para a URL da imagem principal 

<meta property="og:image" content="https://static.semrush.com/cdn-cgi/image/width=1010/blog/uploads/media/00/7c/007.png/>

  1. OG: URL para indicar a URL real para o qual o usu√°rio clicar√°

<meta property="og:url" content="https://semrush.com"/>

Você pode usar outras tags OG, como:

  • OG: audio (coloca um arquivo de √°udio no seu post);
  • OG: description (adiciona uma breve descri√ß√£o);
  • OG: determiner (indica a palavra que aparece antes do t√≠tulo do objeto em uma frase);
  • OG: site-name (lista o site de origem do objeto).

Outras formas de Open Graph

Twitter Cards

Os cards do Twitter funcionam de maneira semelhante ao Open Graph, pois você pode personalizar como seus links aparecem nos tweets. Quando você cola uma URL no Twitter, ele gera automaticamente um título e uma imagem principal:

twitter cards

Você pode usar tags Open Graph no Twitter; a plataforma apenas implementa seu próprio sistema de tags antes.
Os Twitter cards têm um requisito: as imagens devem ser dimensionadas em 1024 x 512 pixels. Você pode verificar a aparência do seu card com o Twitter Card validator.

Testando os resultados do Open Graph

√Č importante testar a implementa√ß√£o do Open Graph para garantir que ele funcione adequadamente na hora da postagem. Para isso, voc√™ tem algumas op√ß√Ķes:

Auditoria de site

A ferramenta Auditoria de site, da Semrush, inclui mais de 120 verifica√ß√Ķes de SEO t√©cnico e on-page para cada parte do seu site. Uma dessas verifica√ß√Ķes indica quantas das suas p√°ginas t√™m marca√ß√Ķes Open Graph.

Para usar a ferramenta:

1. Abra a Auditoria de site no painel do projeto. (Se você não tiver um projeto configurado, precisará criar um para usar a ferramenta).

ferramenta auditoria de site

2. Defina as configura√ß√Ķes da auditoria no painel da ferramenta. Voc√™ pode definir o escopo do rastreamento e incluir todas as p√°ginas n√£o permitidas. Selecione Iniciar Auditoria do site.

configura√ß√Ķes de auditoria do site

Quando a auditoria estiver concluída, use o relatório temático Marcação na aba Visão geral para ver todas as páginas com marcação Open Graph:

relatórios ferramenta auditoria de site
relatório de marcação na ferramenta auditoria de site

No exemplo acima, vemos que 100% das páginas possuem marcação, incluindo Open Graph. Se seus resultados forem semelhantes a este, você não precisa se preocupar. Caso contrário, é importante adicionar a marcação Open Graph às suas páginas mais importantes.

Depurador de Compartilhamento do Facebook

Como o Facebook usa o protocolo Open Graph para determinar o que exibir quando um link está disponível, eles oferecem uma ferramenta de depuração para testar o código Open Graph.

Para usar a ferramenta:

  1. Acesse a ferramenta Depurador de Compartilhamento.
  2. Digite a URL da página que você deseja que seja analisada.
  3. Selecione Depurar.
abrindo o depurador de compartilhamento do facebook

Se houver algum problema com seu link, a ferramenta mostrar√° uma mensagem de aviso:

depurador de compartilhamento do facebook

Outras maneiras de verificar dados estruturados

Conclus√£o

O Open Graph √© algo simples de adicionar √† sua p√°gina e que pode trazer resultados expressivos para suas campanhas de marketing. A apar√™ncia do seu conte√ļdo nas redes sociais pode atrair mais usu√°rios e, eventualmente, convert√™-los em vendas.

Se você nunca trabalhou com código Open Graph, há muitas ferramentas para testar se sua implementação funciona. Teste a Auditoria de site, da Semrush, para revisar seus dados estruturados.

Fonte

Compartilhar:

Deixe um coment√°rio

Categorias
Assinar por e-mail

Digite seu endere√ßo de e-mail para assinar e receber notifica√ß√Ķes de novas publica√ß√Ķes por e-mail.

Estatísticas do blog
  • 54.052 Views