SÓ HOJE 10% DE DESCONTO

USE O CUPOM: SEXTA.FULL

00
Horas
00
Minutos
00
Segundos

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Como configurar Open Graph e Twitter Cards para WordPress

Você está em:

Como configurar Open Graph e Twitter Cards para WordPress
Como configurar Open Graph e Twitter Cards para WordPress

Um bom conteúdo atrairá um público relevante para o seu site e há uma boa chance de que algumas dessas pessoas queiram compartilhar seu conteúdo nas mídias sociais. Mas às vezes ocorrem problemas quando o conteúdo compartilhado não aparece corretamente em um fluxo social, que é onde o uso de tags Open Graph pode ajudar.

Com o Open Graph, você pode controlar a aparência do título, imagem, descrição e muito mais do seu conteúdo quando compartilhado por meio de canais sociais. Talvez você já esteja familiarizado com metatags comuns, como a tag de título e as tags de descrição. Mas muitos blogueiros não sabem que existem outras metatags específicas para sites de redes sociais como Google+, Facebook, Twitter e Pinterest. A razão pela qual esses sites de redes sociais começaram a usar metadados é exibir conteúdo adequadamente junto com imagens, descrições e links relacionados. Ao definir essas metatags, você pode garantir que seu conteúdo seja mais fácil de compartilhar e entender rapidamente nas mídias sociais.

Cada site de rede social tem preferências diferentes. O Pinterest e o Google+ dão preferência às tags Schema, mas também suportam as tags Open Graph Protocol , que são preferidas pelo Facebook, Google+ e Pinterest.

As tags Open Graph ficam entre a seção <head></head> da página da web. As tags mais usadas são:

  • og:título
  • og:descrição
  • og:url
  • og:site_name
  • og:imagem
  • og:tipo

Isso provavelmente não faz muito sentido, então aqui estão alguns diagramas de redes sociais compartilhados com as tags Open Graph claramente rotuladas.

Exemplo de pin avançado do Pinterest

Exemplo de pin avançado do Pinterest

Exemplo de compartilhamento do Google+1

Exemplo de compartilhamento do Google+1

Exemplo de gráfico aberto do Facebook

Exemplo de gráfico aberto do Facebook

Exemplo de cartão do Twitter

Exemplo de cartão do Twitter

Além disso, o Twitter definiu suas próprias tags personalizadas conhecidas como Twitter Cards. Essas tags permitem que seus links apresentem mais informações sempre que forem twittados. Semelhante às tags Open Graph, as tags de cartão do Twitter também ficam entre a seção <head></head> de uma página da web. As tags do Twitter mais usadas são:

  • twitter: cartão
  • twitter:site
  • twitter:criador

Embora você possa adicionar tags Open Graph e Twitter Card manualmente, existem muitos plugins disponíveis no WordPress.org que tornam muito fácil para usuários iniciantes adicionar tags em postagens e páginas do WordPress. Alguns dos nossos favoritos incluem:

  1. SEO por Yoast
  2. Open Graph para tags de cartão do Facebook, Google+ e Twitter
  3. A estrutura de SEO
  4. JM Twitter Cards (somente para Twitter Cards)
  5. Open Graph Protocol Framework (somente para tags Open Graph e recomendado para desenvolvedores)

Para este tutorial, usaremos as opções integradas do plug-in Yoast SEO para definir metatags especiais para tornar nossas postagens amigáveis para rich media.

Nota: Você deve usar apenas um plugin que tenha funcionalidade semelhante. Se você já tiver o WordPress SEO by Yoast instalado, é melhor configurar esse plug-in do que instalar também o plug-in Open Graph for Facebook, Google+ e Twitter Card Tags.

Etapa 1: instale a versão mais recente do Yoast SEO

Recomendamos que você instale a versão mais recente do Yoast SEO. A maneira mais fácil de fazer isso é através do painel de administração do WordPress em Plugins> Adicionar novo e procure por “Yoast SEO”.

Instale o plugin gratuito Yoast SEO

Em seguida, instale e ative o plugin (basta clicar nesse botão).

Uma vez ativado, você deverá ver uma nova guia “SEO” no painel de administração do WordPress. Existem muitos recursos excelentes no Yoast SEO (para breadcrumbs, redirecionamentos, etc), mas o que nos interessa hoje é a guia Social .

Etapa 2: definir suas configurações sociais

Configurações sociais do Yoast SEO

Para configurar os cartões Open Graph e Twitter, navegue até SEO > Social no painel de administração do WordPress. Primeiro adicione os links do seu perfil social aqui para ajudar os mecanismos de pesquisa a validar se eles realmente estão conectados ao seu site. Em seguida, vá para as várias guias sociais.

o Facebook

Yoast SEO: Dados de gráfico aberto do Facebook

Seu primeiro passo é habilitar os metadados do Open Graph para postagens do Facebook – basta clicar na opção Habilitado . Supondo que você já tenha adicionado a página do Facebook relacionada ao seu site na guia Contas , você está pronto para ir. Você pode adicionar uma imagem padrão se desejar para qualquer página que não tenha mídia em destaque, mas isso é com você.

Twitter

Yoast SEO: dados de gráfico aberto do cartão do Twitter

Com o Facebook pronto, é hora de atacar o Twitter. Apenas certifique-se de que os metadados do cartão do Twitter estejam Ativados e selecione um layout de cartão padrão (resumo ou resumo com imagem grande). Novamente, isso será associado ao identificador do Twitter que você adicionou na página Contas .

Pinterest

Yoast SEO: dados de gráfico aberto do Pinterest

O Pinterest é um pouco diferente, pois esta plataforma usa uma verificação de metatag. Vá para sua conta do Pinterest, passe o mouse sobre o ícone do usuário e clique na guia Configurações . Clique na opção Reivindicar site e selecione a opção Adicionar tag HTML .

Copie a meta tag gerada e cole-a no painel Yoast SEO. Salve suas alterações e volte ao Pinterest para enviar. Isso diz ao Pinterest para verificar a tag e verificar seu site. É isso para o Pinterest!

Google+

Yoast SEO: Dados de gráfico aberto do Google+

A última conta social que você precisará definir é o Google+, que é apenas um link para a página do Google+ de sua empresa. Cole-o e está tudo pronto.

Definir padrões

Yoast SEO: padrões de tipos de conteúdo

O último passo é criar seu padrão. O Yoast usa meta boxes em seu conteúdo para definir os dados do Open Graph – portanto, certifique-se de editar seus padrões em SEO > Search Appearance > Content Types . Use as variáveis de snippet embutidas do Yoast SEO para criar seus próprios padrões dinâmicos para o título do seu post (que é usado para og:title) e meta descrição (usado para og:description).

Imagem, título e descrição personalizados

Yoast SEO: conteúdo personalizado

Yoast SEO também inclui uma opção em posts individuais para personalizar a imagem, título e descrição usados para Facebook e Twitter. Ao editar uma postagem, basta rolar para baixo até a seção Yoast SEO e clicar no ícone de compartilhamento (parece menos que o símbolo <). Em seguida, carregue uma imagem personalizada ou edite o título e a descrição conforme necessário.

Depuração e validação

Cada grande site de rede social tem seu próprio validador ou depurador para testar e visualizar como seus links aparecerão quando compartilhados nas mídias sociais.

Teste de dados estruturados do Google

Ferramenta de teste de dados estruturados do Google : essa ferramenta não mostra a visualização da postagem compartilhada no Google+, mas mostra quais metadados estão presentes e podem ser lidos pelo Google. Suas propriedades aparecerão nas propriedades do nó RDFA.

Facebook Debug : Depois de implementar as tags Open Graph, basta colar a URL do seu site que contém as tags. Ele mostrará as propriedades do objeto.

Ferramenta de validação do Twitter : você pode usar este link para visualizar o cartão do Twitter para sua postagem antes de compartilhá-la nas mídias sociais.

Validador de Rich Pins do Pinterest : Semelhante aos dois últimos validadores, basta inserir a URL que contém as tags Open Graph para visualizar e garantir que seu conteúdo esteja sendo exibido como deveria. Se você seguiu todo o tutorial, não terá nenhum problema.

Nota Final

Ao usar essas metatags do Open Graph, você pode otimizar a maneira como títulos, imagens, descrições e outros detalhes do seu conteúdo aparecem nas mídias sociais. Isso pode ajudar a aumentar o tráfego de sites sociais, pois links com informações claras tendem a obter mais compartilhamentos e links naturais. Além disso, as pessoas tendem a confiar nos links que contêm mais informações em vez de clicar em URLs nus ou curtos (também pode ajudar se você estiver usando técnicas para automatizar o compartilhamento social  também).

Esperamos que nosso guia tenha ajudado você a configurar as metatags do Open Graph e os cartões do Twitter do seu site, mas se você tiver alguma dúvida, sinta-se à vontade para perguntar. Estamos felizes em ajudar se pudermos!

Quais plugins do WordPress você usa para implementar essas metatags? Você tem alguma outra dica ou truque para adicionar? Sinta-se livre para mencionar seus pensamentos nos comentários abaixo.

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.