Tudo o que você precisa saber

Screenshot 2019 12 17 at 23.31.50 1
cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br


Você está se perguntando como tornar seu conteúdo mais clicável, compartilhável e perceptível nas mídias sociais?

As meta tags Open Graph são a solução.

Veja como uma de nossas postagens aparece quando compartilhada no Facebook com Meta tags Open Graph:

Captura de tela 2020 01 06 em 20.55.25 1

E aqui está como fica sem:

mágica fb mesclada 1

Neste guia, você aprenderá:

O que são as metatags Open Graph?

As metatags Open Graph são trechos de código que controlam como os URLs são exibidos quando compartilhados nas mídias sociais.

Eles fazem parte do protocolo Open Graph do Facebook e também são usados ​​por outros sites de mídia social, incluindo LinkedIn e Twitter (se os Cartões do Twitter estiverem ausentes).

Você pode encontrá-los no seção de uma página da web. Quaisquer tags com og: antes de um nome de propriedade serem marcas Open Graph.

Aqui estão alguns exemplos do nosso guia para se tornar um SEO especialista:




É assim que essas tags ficam no Facebook:

tags og 1

Por que as tags Open Graph são importantes?

É provável que as pessoas vejam e cliquem em conteúdo compartilhado com otimização OG tags, o que significa mais tráfego de mídia social no seu site.

Existem três razões para isso:

  1. Eles tornam o conteúdo mais atraente nos feeds das mídias sociais.
  2. Eles dizem às pessoas sobre o que é o conteúdo rapidamente.
  3. Eles ajudam o Facebook a entender do que se trata o conteúdo, o que pode ajudar a aumentar a visibilidade da sua marca através da pesquisa.

Vamos falar mais sobre esse último ponto, pois ele tende a ser esquecido.

Aqui estão os resultados de uma pesquisa no Facebook por “mecanismos de pesquisa alternativos”:

IMG 0522 1

Ele traz artigos populares que as pessoas já compartilharam no Facebook. Cada título e imagem vem de tags Open Graph.

Mesmo que não haja artigos retornados para a pesquisa, o Facebook ainda mostra o conteúdo correspondente compartilhado em grupos ou páginas que você segue ou por amigos.

Nota.

As tags Open Graph também ajudam a criar um snippet quando alguém envia um link por meio de mensagens diretas usando aplicativos compatíveis com o protocolo Open Graph – naturalmente o Messenger e o WhatsApp do Facebook, mas também o iMessage e Slack.

Quais tags Open Graph você deve usar?

Listas do Facebook 17 OG tags em sua documentação oficial, além de dezenas de tipos de objetos. Não vamos discutir tudo isso. Apenas quatro são necessários para que o Facebook entenda o básico da sua página, e há outras que às vezes ajudam.

Vamos passar por isso.

og: title

O título da sua página.

Sintaxe

Melhores Práticas

  • Adicione-o a todas as páginas “compartilháveis”.
  • Concentre-se na precisão, valor e clicabilidade.
  • Mantenha-o curto para evitar transbordamentos. Não há orientação oficial sobre isso, mas 40 caracteres para celular e 60 para computador são aproximadamente o ponto ideal.
  • Use o título bruto. Não inclua marca (por exemplo, o nome do site).

og: url

o URL do conteúdo.

Sintaxe

Melhores Práticas

  • Use o canônico URL. Ajuda a consolidar todos os dados conectados, como curtidas, em todos os URLs duplicados postados.

og: imagem

o URL de uma imagem para o snippet social.

Note que isso é talvez a tag Open Graph mais essencial porque ocupa o setor de alimentação social mais social.

Sintaxe

Melhores Práticas

  • Use imagens personalizadas para páginas “compartilháveis” (por exemplo, página inicial, artigos etc.)
  • Use seu logotipo ou qualquer outra imagem de marca para o restante de suas páginas.
  • Use imagens com uma proporção de 1,91: 1 e dimensões mínimas recomendadas de 1200×630 para obter uma nitidez ideal em todos os dispositivos.

og: type

O tipo de objeto que você está compartilhando. (por exemplo, artigo, website etc.)

Sintaxe

Melhores Práticas

  • Use artigo para artigos e site para o restante de suas páginas.
  • Descreva mais os tipos de objetos, quando apropriado (opcional).

og: descrição

Uma breve descrição do conteúdo.

Sintaxe

Melhores Práticas

  • Complemente o título para tornar o snippet o mais atraente e digno de cliques possível.
  • Copie sua meta descrição aqui, se isso fizer sentido.
  • Mantê-lo curto e doce. O Facebook recomenda de 2 a 4 frases, mas isso geralmente trunca.

og: locale

Define o idioma do conteúdo.

Sintaxe

Melhores Práticas

  • Use apenas para conteúdo não escrito em inglês americano (en_US). O Facebook assume que o conteúdo sem essa tag esteja escrito neste idioma.

Como configurar tags Open Graph

Escolha a plataforma do seu site na lista abaixo ou siga estas instruções manuais.

Definindo tags Open Graph no WordPress

Instale o Yoast SEO plugar. Vá para o editor de uma postagem ou página e role para baixo. Você deve ver um Yoast SEO caixa. Clique na guia “Social” e depois em “Facebook”.

Preencha isso para definir o og:title, og:descriptione og:image Tag.

Captura de tela 2019 12 17 em 22.46.26 1

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br

Não há necessidade de definir og:url manualmente. Yoast faz isso por você. Também adiciona outros recursos úteis OG tags como dimensões da imagem.

Nota.

Se você não configurar um OG imagem e a postagem tem uma imagem em destaque, o Yoast a usará por padrão. Ele também adicionará outras tags Open Graph e Cartão do Twitter que seriam apenas uma perda de tempo configuradas manualmente – nome do site, dimensões da imagem etc.

Também é uma prática recomendada definir um site inteiro og:image tag. Isso é mostrado quando nenhuma tag personalizada é definida para um compartilhamento URL.

Você encontrará a opção de fazer isso nas configurações do Yoast.

Yoast> Social> Facebook

Verifique se a alternância está definida como “Ativado” e faça o upload de uma imagem apropriada. As imagens da marca funcionam melhor aqui.

Captura de tela 2019 12 17 em 22 37 47 1

Definindo tags Open Graph no Shopify

A maioria dos temas do Shopify são atraídos OG tags de variáveis ​​como sua tag de título para og:title e imagem em destaque para og:image.

A única tag que você pode personalizar através do Shopify UI é um site inteiro og:image.

Vamos para Loja on-line> Temas> Personalizar> Configurações de tema> Personalizar> Mídias sociais> selecione uma imagem apropriada.

Se você quiser ver como está configurado, acesse Loja Online> Temas> Ações> Editar código> Snippets> social-meta-tags.liquid na barra de rolagem. Você pode editar o código se precisar.

Configurando tags Open Graph no Wix

Wix puxa comum OG tags de outras variáveis, como o meta título e a descrição da página.

Você pode personalizar o OG título, descrição e imagem de cada página nas configurações de “compartilhamento social”.

Você também pode definir um site personalizado em todo o site OG imagem. Vamos para Configurações> Compartilhamento Social no menu principal.

No geral, o Wix faz adicionando OG tags fáceis, pois não é necessário codificar nada.

Definindo marcas Open Graph no Squarespace

O Squarespace usa o título da página e a meta descrição para og:title e og:description.

Você pode definir um costume og:image página por página.

Basta ir para Configurações da página> Imagem social> Upload.

Se você precisar adicionar outro OG tags e personalizar as configurações padrão, vá para Configurações da página> Avançado> Injeção de código de cabeçalho da página. Leia a seção a seguir sobre como adicionar as tags manualmente e copie e cole o código lá.

Configurando tags Open Graph manualmente

Se você estiver confortável em digitar o código do site, adicione OG tags é tão simples quanto colá-las no seção da sua página da web.

Considere usar uma ferramenta geradora de marcação como Mega Tags ou Web Code Tools para ajudar a reduzir erros de sintaxe.

Como testar e depurar tags Open Graph

Agora que você implantou todas as tags, verifique se elas estão funcionando conforme o esperado e estão prontas para serem compartilhadas.

Para isso, use estas ferramentas:

Todos eles funcionam da mesma maneira. Eles puxam as tags da página e mostram como ficam quando compartilhadas.

O teste também ajuda a evitar problemas em que OG as tags não são exibidas ou extraídas corretamente.

DICA

Usar og:image:width e og:image:height para garantir um snippet perfeito na primeira vez que alguém o compartilha. No WordPress, o Yoast os adiciona automaticamente. Esta é a sintaxe deles:



Aqui está o que FB Compartilhar o Depurador parece em ação:

Captura de tela 2019 12 17 em 23.31.50 1

O mais importante é a aparência do snippet. Se você errar ou configurar incorretamente tags menos importantes, não é grande coisa. Você pode ignorar avisos sobre tags sem importância, como fb:app_id

Se algo parecer errado e você atualizar as tags, use o botão “Raspar novamente” para obter novos dados. Se você não vir a alteração após o rastreamento, use o Invalidador de lote para limpar o cache e repetir.

Repita esse processo com o Validador de cartão do Twitter e o Inspetor de postagem do LinkedIn para garantir que seu conteúdo tenha a aparência desejada em todas as redes.

Nota.

Descobri que apenas o Twitterbot segue as diretrizes do robots.txt. Os rastreadores do Facebook e do LinkedIn podem raspar e mostrar o conteúdo, mesmo que você não permita o rastreamento. Isso foi surpreendente, mas mesmo para o Twitter, verifique se todos os URLs que você compartilha podem ser rastreados.

Se você já possui um site com centenas de páginas e não tem certeza de quais já possuem tags Open Graph, pode usar uma ferramenta como a auditoria de sites da Ahrefs para verificar suas páginas em massa.

Basta executar um rastreamento e acessar o relatório de tags sociais para ver todos os problemas relacionados às tags Open Graph e Twitter Card.

Captura de tela 2020 01 12 em 23.16.01 1

Clique em um aviso sinalizado para ver as explicações e conselhos sobre como corrigi-lo.

Captura de tela 2019 12 18 em 00.39.44 1

Clique em “Visualizar URLs afetados” e você verá os problemas que afetam cada URL juntamente com métricas relevantes. Uma dessas métricas é o tráfego orgânico, que você pode usar para classificar a tabela e priorizar URLs a serem corrigidos.

Captura de tela 2020 01 12 em 23 19 24 1

Lembre-se de que as páginas com muito tráfego têm mais probabilidade de serem compartilhadas.

Pensamentos finais

OG as tags são importantes para sua presença nas mídias sociais, mas não é necessário gastar muito tempo com elas.

Concentre-se em entender o básico. Adicione tags, verifique visualizações de mídias sociais e depure.

Perdemos alguma coisa? Deixe um comentário ou faça ping comigo Twitter.



cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br
Leia Também  Como identificar e enfrentar os quatro maiores desafios de crescimento digital Search Engine Watch

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *