tags sociais

tags sociais

Quem é da velha guarda, lembra como eram importantes as Meta Tags para os mecanismos de busca antigamente. Antes que alguns “webmasters” começassem a encher suas tags Description de palavras-chave que não apareciam no site e os mecanismos de busca simplesmente pararem de olhar para estes valores. Bons tempos.

Mas fora do mundo do SEO e sua luta incessante pelas primeiras posições no Google, o último site de busca que ainda traz tráfego relevante, ainda existe espaço para as Meta Tags. Com a chegada das redes sociais, se tornou novamente importante definir, em uma linguagem compreensível de forma automática, quem é o autor, o sumário, o link e a imagem relacionados a uma determinada página.

As Meta Tags podem fazer a diferença, por exemplo, entre sua postagem no Twitter aparecer assim:

Conheça as Meta Tags Sociais do Twitter, Facebook, Google + e Outras

Conheça as Meta Tags Sociais do Twitter, Facebook, Google + e Outras

Ou assim: tags sociais

Conheça as Meta Tags Sociais do Twitter, Facebook, Google + e Outras

Conheça as Meta Tags Sociais do Twitter, Facebook, Google + e Outras

Qual das duas você acha que tem mais chances de ser clicada pelo usuário?

Esse resultado é possível, graças ao uso diligente das Meta Tags, de uma forma que o Twitter compreenda:

Conheça as Meta Tags Sociais do Twitter, Facebook, Google + e Outras

Conheça as Meta Tags Sociais do Twitter, Facebook, Google + e Outras

tags sociais. Saber exatamente que Meta Tags sociais devem ser incluídas pode ser complicado. Se você utiliza o plugin para WordPress Yoast’s SEO, então boa parte do trabalho já foi simplificado. Porém, como já vimos por aqui, não é uma boa ideia ficar dependente demais do uso de um plugin. E talvez seu site nem mesmo use WordPress, afinal. Para estes casos, temos que considera cuidadosamente as diferentes estruturas suportadas pelas principais plataformas sociais:

Para minimizar o problema, Cyrus Shepard, do Moz.Com, sugere quatro modelos diferentes de Meta Tags sociais, que você pode utilizar, customizar para seu uso e compartilhar com seus associados. Traduzo as instruções e os comentários nos modelos a seguir.

Perceba que nestes modelos as Meta Tags TITLE e DESCRIPTION são mencionadas, embora seu uso transcenda as redes sociais e você já está calejado de saber que elas são fundamentais para SEO, mesmo nos dias de hoje. Como algumas redes sociais também as interpretam, seu uso é duplamente recomendado.

1) Modelo Mínimo

Este modelo simplificado contém o mínimo necessário para oferecer metadados otimizados para Twitter, Facebook, Google+ e Pinterest.

Substitua o texto em negrito, pelos dados reais da sua página:

<!– Coloque este código antes da tag <head> da sua página –>
<title>Título da página. Máximo de 60-70 caracteres</title>
<meta name=”description” content=”Descrição da página. No máximo 155 caracteres.” /><!– para o Twitter Card–>
<meta name=”twitter:card” value=”summary”><!– para o sistema Open Graph–>
<meta property=”og:title” content=”Título da página” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”http://www.example.com/” />
<meta property=”og:image” content=”http://example.com/image.jpg” />
<meta property=”og:description” content=”Descrição da Página” />

2) Modelo Padrão

Este modelo traz uma implementação um pouco mais robusta das Meta Tags sociais e foi projetado para funcionar em todas as redes. Além das funcionalidades presentes no modelo mínimo acima, o modelo padrão também suporta:

  • Todo o Twitter Summary Card
  • Thumbnail de imagem para Twitter
  • Facebook Page Insights

Substitua o texto em negrito, pelos dados reais da sua página:

<!– Coloque este código antes da tag <head> da sua página –>
<title>Título da página. Máximo de 60-70 caracteres</title>
<meta name=”description” content=”Descrição da página. No máximo 155 caracteres.” /><!– para o Twitter Card–>
<meta name=”twitter:card” value=”summary”>
<meta name=”twitter:site” content=”Conta do Twitter do site (incluindo arroba)“>
<meta name=”twitter:title” content=”Título da página“>
<meta name=”twitter:description” content=”Descrição da página. No máximo 200 caracteres“>
<meta name=”twitter:creator” content=”Conta do Twitter do autor do texto (incluindo arroba)“>
<– imagens para o Twitter Summary Card precisam ter pelo menos 200×200 px –>
<meta name=”twitter:image” content=”http://www.example.com/image.jpg“><!– para o sistema Open Graph–>
<meta property=”og:title” content=”Título da página” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”http://www.example.com/” />
<meta property=”og:image” content=”http://example.com/image.jpg” />
<meta property=”og:description” content=”Descrição da Página” />
<meta property=”og:site_name” content=”Nome do site” />
<meta property=”fb:admins” content=”Facebook numeric ID” />

3) Modelo Completo

Este é o modelo para quem obter o máximo de impacto no uso das Meta Tags sociais, ainda que se arriscando a perder um pouco em performance… Além de todos os dados presentes no modelo padrão acima, o modelo completo ainda traz suporte para:

  • Google Authorship e Publisher Markup. Embora estes dados não alterem a aparência do seu conteúdo no Google+, eles podem adicionar links para suas páginas no Google+ nos resultados da busca.
  • Marcação de artigo para o Schema.org
  • Twitter Summary Card com imagem larga.
  • Dados expandidos de artigo para o Open Graph

Substitua o texto em negrito, pelos dados reais da sua página:

<!– Altere sua tag HTML para incluir os atributos “itemscope” e “itemtype” conforme a linha abaixo. –>
<html itemscope itemtype=”http://schema.org/Article”><!– Coloque este código antes da tag <head> da sua página –>
<title>Título da página. Máximo de 60-70 caracteres</title>
<meta name=”description” content=”Descrição da página. No máximo 155 caracteres.” /><!– Código para Google Authorship e Publisher–>
<link rel=”author” href=”https://plus.google.com/(Google+_Profile)/posts/>
<link rel=”publisher” href=”https://plus.google.com/(Google+_Page_Profile)“/><!– Código do Schema.org também para o Google+ –>
<meta itemprop=”name” content=”Título ou nome“>
<meta itemprop=”description” content=”Descrição da página“>
<meta itemprop=”image” content=”http://www.example.com/image.jpg“><!– para o Twitter Card–>
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:site” content=”Conta do Twitter do site (incluindo arroba)“>
<meta name=”twitter:title” content=”Título da página“>
<meta name=”twitter:description” content=”Descrição da página. No máximo 200 caracteres“>
<meta name=”twitter:creator” content=”Conta do Twitter do autor do texto (incluindo arroba)“>
<– imagens largas para o Twitter Summary Card precisam ter pelo menos 280x150px –>
<meta name=”twitter:image” content=”http://www.example.com/image.jpg“>

<!– para o sistema Open Graph–>
<meta property=”og:title” content=”Título da página” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”http://www.example.com/” />
<meta property=”og:image” content=”http://example.com/image.jpg” />
<meta property=”og:description” content=”Descrição da Página” />
<meta property=”og:site_name” content=”Nome do site” />
<meta property=”article:published_time” content=”2013-09-17T05:59:00+01:00” />
<meta property=”article:modified_time” content=”2013-09-16T19:08:47+01:00” />
<meta property=”article:section” content=”Seção do artigo” />
<meta property=”article:tag” content=”Tags do artigo” />
<meta property=”fb:admins” content=”Facebook numeric ID” />

4) Modelo Para Produtos

No e-commerce, marcação de produtos está crescendo vertiginosamente e, se você ainda não está usando na sua loja virtual, deveria começar agora. Na prática, é extremamente fácil de implementar, alterando apenas alguns detalhes no código em relação aos modelos anteriores:

  • Alteração na tag <html> para sinalizar o uso de dados do sistema schema.org para produtos.
  • Um Card específico de produto para o Twitter. Você pode especificar campos novos (data1, data2) e atribuir etiquetas para eles (label1,label2).
  • Os dados do Open Graph incluem preço e moeda usada.

Substitua o texto em negrito, pelos dados reais da sua página:

<!– Altere sua tag HTML para incluir os atributos “itemscope” e “itemtype” conforme a linha abaixo. –>
<html itemscope itemtype=”http://schema.org/Product”><!– Coloque este código antes da tag <head> da sua página –>
<title>Título da página. Máximo de 60-70 caracteres</title>
<meta name=”description” content=”Descrição da página. No máximo 155 caracteres.” /><!– Código do Schema.org também para o Google+ –>
<meta itemprop=”name” content=”Título ou nome“>
<meta itemprop=”description” content=”Descrição do produto“>
<meta itemprop=”image” content=”http://www.example.com/image.jpg“><!– para o Twitter Card–>
<meta name=”twitter:card” content=”product”>
<meta name=”twitter:site” content=”Conta do Twitter do site (incluindo arroba)“>
<meta name=”twitter:title” content=”Título da página“>
<meta name=”twitter:description” content=”Descrição do produto. No máximo 200 caracteres“>
<meta name=”twitter:creator” content=”Conta do Twitter do autor do texto (incluindo arroba)“>
<– imagens para o Twitter Product Card precisam ter pelo menos 200x200px–>
<meta name=”twitter:image” content=”http://www.example.com/image.jpg“>
<meta name=”twitter:data1″ content=”R$29,90“>
<meta name=”twitter:label1″ content=”Preço“>
<meta name=”twitter:data2″ content=”Branca“>
<meta name=”twitter:label2″ content=”Cor“><!– para o sistema Open Graph–>
<meta property=”og:title” content=”Título da página” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”http://www.example.com/” />
<meta property=”og:image” content=”http://example.com/image.jpg” />
<meta property=”og:description” content=”Descrição do produto” />
<meta property=”og:site_name” content=”Nome do site” />
<meta property=”og:price:amount” content=”29,90” />
<meta property=”og:price:currency” content=”R$” />

Ferramentas de Validação

A. Twitter Validation Tool

https://dev.twitter.com/docs/cards/validation/validator
Antes que seus cards apareçam no Twitter, você precisa ter o seu domínio aprovado. Felizmente, é um processo rápido e fácil. Uma vez que você implemente as Meta Tags, entre com o endereço da sua página na ferramenta de validação acima. Após conferir seu código, aperte o botão “Submit for Approval”.

B. Facebook Debugger

https://developers.facebook.com/tools/debug
Você não precisa de autorização prévia para seus metadados apareçam no Facebook, mas a ferramenta de validação que eles disponibilizam irá oferecer uma análise sobre suas Meta Tags, incluindo aquelas específicas para Twitter.

C. Google Structured Data Testing Tool

http://www.google.com/webmasters/tools/richsnippets
Esta ferramenta é ideal para verificar se a marcação de autoria está funcionando para suas páginas e ter uma prévia de como esta informação poderá aparecer nos resultados de busca. Mas você também pode utilizá-la para verificar como o Google está extraindo dados de suas outras Meta Tags em cada página.

D. Pinterest Rich Pins Validator

http://developers.pinterest.com/rich_pins/validator/
Da mesma forma que o Twitter, o Pinterest exige um processo de aprovação para habilitar a funcionalidade Rich Pin. Você pode usar a ferramenta acima para testar a sintaxe de seus metadados e solicitar aprovação ao mesmo tempo.