Como usar as etiquetas de gráfico aberto

Como usar as etiquetas de gráfico aberto

Utiliza etiquetas de título e etiquetas de meta descrição? Claro que sim, porque já sabe que as meta tags podem ajudar a aumentar a sua classificação nos motores de busca.

Mas sabia que as meta tags afectam realmente o seu tráfego nas redes sociais? Claro, existem as tags de autoria do Google, mas e o Facebook e o Twitter? Na verdade, ambos têm suas próprias meta tags de mídia social que podem ajudá-lo a aumentar a quantidade de tráfego social que você está recebendo.

Veja aqueles posts nas mídias sociais que têm imagens e vídeos de aparência legal? Você pode não saber que você não precisa de nenhum software ou contas premium para fazer a mesma coisa para seus posts sociais.

São chamados de Facebook Open Graph e Twitter Cards. Aqui está como você pode aproveitar ambos:

Facebook Open Graph

Quando você compartilha uma imagem no Facebook, como ela se parece?

Bem, nem sempre é assim. O Facebook tenta ler o código na sua página, mas nem sempre é capaz de puxar as suas imagens. Se você não usa as tags Open Graph quando compartilha uma URL do seu site no Facebook, isto é o que pode parecer:

É o que costumava parecer com o Quick Sprout antes de eu implementar as tags Open Graph no meu site. Depois de implementar as tags Open Graph, eu consegui aumentar meu tráfego no Facebook em 174%, simplesmente porque agora havia uma imagem ao lado das minhas atualizações de status do Quick Sprout.

Agora você está convencido de que deve usar o Open Graph, aqui está como você o configura no seu site.

og:title

Aqui é onde você coloca o título do seu conteúdo. Pense nisto como sendo semelhante à sua tag de título html normal que um motor de busca usaria. Ao criar seu og:title, mantenha a contagem de caracteres para menos de 95 caracteres.

Exemplo: <meta property=”og:title” content=”11 Creative Ways to Build Links”/>

og:type

É aqui que você descreve que tipo de conteúdo você está compartilhando. É um vídeo, foto, post de blog, etc.? Aqui está a lista completa que você pode escolher ao definir o seu tipo de conteúdo:

Atividades

• atividade
• esporte

Businesses

• bar
• empresa
• cafe
• hotel
• restaurante

Grupos

• causa
• liga_desportiva
• equipa_desportiva

Organizações

• banda
• governo
• sem fins lucrativos
• escola
• universidade

Pessoas

• actor
• atleta
• autor
• director
• musician
• politician
• public_figure

Places

• cidade
• país
• marco
• estado_província

Produtos e Entretenimento

• album
• livro
• bebida
• album
• jogo
• produto
• canção
• filme
• tv_show

Websites

• blog
• website
• article

Exemplo: <meta property=”og:type” content=”article”/>

og:description

Esta também é semelhante à sua tag html meta description porque é usada para descrever o seu conteúdo. Você não deve se importar se ela é rica em palavras-chave, mas ao invés disso, você deve inventar uma descrição convincente que resultará em mais cliques. Você tem até 297 caracteres para esta tag.

Exemplo: <meta property=”og:description” content=”Are you tired of building links the old school way? Você sabe, os métodos que exigem que você envie e-mails para milhares de webmasters implorando por links. “/>

og:image

Lembras-te que eu mencionei que consegui aumentar o meu tráfego no Facebook em 174%? Foi porque eu usei o Open Graph para garantir que o Facebook mostrasse uma imagem toda vez que alguém compartilhasse uma URL do Quick Sprout.

Usando uma tag og:image, você vai garantir que uma imagem estará ao lado do conteúdo que você está compartilhando. Dessa forma, ela se destaca contra todas as outras atualizações de status baseadas em texto que as pessoas vêem em suas linhas de tempo.

Antes de eu entrar na forma como você pode usar essa tag, eu vou te guiar através dos requisitos do Facebook. Uma imagem tem de ser pelo menos 50px por 50px, mas de preferência maior do que 200px por 200px. Além disso, a imagem não pode ter mais de 5 MB de tamanho.

Exemplo: <meta property=”og:image” content=”https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”/>

og:url

Nesta tag, você deve colocar a URL da página que você está compartilhando. Esta tag pode parecer irrelevante, mas é importante porque às vezes você terá mais de uma URL para o mesmo conteúdo. Ao usar essa tag, você garantirá que todos os compartilhamentos vão para uma URL versus múltiplas URLs, o que deve ajudar o seu Edgerank do Facebook.

Exemplo: <meta property=”og:url” content=”https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/”/>

og:site_name

Esta tag diz ao Facebook o nome do seu site. Você realmente não precisa desta tag, mas não há mal nenhum em incluí-la.

Exemplo: <meta property=”og:site_name” content=”Quick Sprout”/>

fb:admins

Se você tem uma página de fãs no Facebook e quer obter mais dados no Facebook Insights, então você tem que usar essa tag. Ela diz ao Facebook que você é o proprietário do site e conecta a sua página de fãs no Facebook ao seu site.

Exemplo: <meta property=”fb:admins” content=”500013011″/>

Agora que você tenha as suas meta tags do Facebook Open Graph, vamos passar para o Twitter Cards.

Cartões do Twitter

Deixe que você já viu um tweet como este?

Bem, estes tweets detalhados só aparecem quando você utiliza os Cartões do Twitter. Você não gostaria de ter isso para o seu site? Ele vai ajudá-lo a destacar-se da multidão.

Aí está como você alavanca os Cartões do Twitter:

Se você usa o plugin SEO para WordPress da Yoast, basta seguir estes passos. Para todos os outros, siga os passos abaixo.

twitter:card

Esta meta tag descreve o tipo de conteúdo que você está compartilhando. Você tem três opções no Twitter: foto (para imagens), player (para vídeos), e resumo (para tudo mais). Se você não definir o seu cartão, o Twitter irá, por padrão, para summary.

Example: <meta name=”twitter:card” content=”summary”>

twitter:url

Esta é a página que você está compartilhando no Twitter. Assim como o Facebook pede uma URL, o Twitter também faz isso porque você pode ter o mesmo conteúdo no seu site várias vezes. Isso vai garantir que um URL receba todos os tweets. Caso contrário, seus tweets serão divididos em múltiplos urls.

Exemplo: <meta name=”twitter:url” content=”https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/”>

twitter:title

Simplesmente ao seu título do Open Graph do Facebook, isto não deve ser recheado com palavras-chave. Torne-o convincente para que as pessoas vão querer clicar nele. Novamente, como no Facebook, você vai querer limitar a contagem de caracteres para 70.

Exemplo: <meta name=”twitter:title” content=”11 Creative Ways to Build Links”>

twitter:description

Esta é semelhante a uma meta descrição tag que você usaria para o Google. Mas não a encha com palavras-chave. O seu objectivo deve ser criar uma frase convincente que leve as pessoas a clicarem no seu site. Sua descrição é limitada a 200 caracteres.

Exemplo: <meta name=”twitter:description” content=” Você está cansado de construir links do jeito antigo? Você sabe, os métodos que exigem que você envie e-mails para milhares de webmasters implorando por links. “>

twitter:image

Para fazer sobressair o seu tweet, você precisa de uma imagem. As suas imagens têm de ter menos de 1 MB de tamanho de ficheiro, e não podem ser menores do que 60px por 60px. As imagens maiores que 120px por 120px serão redimensionadas.

Exemplo: <meta name=”twitter:image” content=” https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”>

Após aplicar as meta tags do Twitter Card no seu site, você precisa aplicar no programa de cartões do Twitter. Assim que você for aceito, as URLs do seu site serão mostradas no formato de cartão.

Conclusão

As meta tags do Twitter não são apenas para motores de busca. Os sites de redes sociais também estão a aproveitá-las. Tal como optimizaria as suas meta tags para os rankings e taxas de cliques do Google, precisa de fazer o mesmo para o Facebook e Twitter.