Saber exatamente quais as meta tags das redes sociais a ser incluídas pode ser confuso, até mesmo para webmasters experientes. Existe uma variedade de estruturas a considerar, suportadas pela maioria das plataformas sociais: ![inserir a descrição da imagem aqui][1] - [**Twitter Cards**][2]: Sumários, Imagens, Galerias, Apps, Video, Audio, e Produtos - [**Pinterest Rich Pins**][3]: Produtos, Receitas, Filmes, e Artigos - [**Google+**][4]: Artigos, Blog, Livro, Evento, Negócio Local, Organização, Pesoa, Produto, e Revisões/Avaliações - [**Facebook**][5]: Artigos, Fotos, Audio, Video, e mais Para ajudar a facilitar isto, vamos criar aqui uma variedade de modelos exemplares que se adaptam para diversas necessidades. <h2>Como usar estes modelos</h2> Para usar estes modelos, basta copiar e colar um dos modelos para o `<head>` do seu website usando o seu editor de texto preferido à sua escolha. Certifique-se de substituir qualquer texto dentro da tag `<title>` e dos atributos `content=" "` com os seus próprios dados, e personalizar, eliminar ou adicionar todas as tags que você achar necessário. > **Atênção**: Não remova ou substitua os atributos `content="article"` e `content="product"` pois estes são usados para informar à > plataforma social se este conteúdo é um `artigo` ou um `produto` Os três primeiros modelos são otimizados para o típico uso do texto de marcação e de dados `"article (artigo)"`, ideal para publicações de Blogs e conteúdo escrito. O modelo final contém markup para páginas de produtos. <h2>Modelo minimalista</h2> Esta versão simplificada corre de forma leve e rápida. Ela contém o mínimo de dados para compartilhamento otimizado através do Twitter, Facebook, Google+ e Pinterest. As tags `<title>` e `descrições meta` estão incluídas, embora tecnicamente elas não sejam meta tags de redes sociais. Isto é porque elas também podem ser utilizadas pelo Google+ e outras plataformas de redes sociais, e é uma boa prática incluí-las em todas as páginas que você publicar. <!-- begin snippet: js hide: true --> <!-- language: lang-html --> <!-- Coloque estes dados entre as tags <head> do seu site --> <title>Título da página. O comprimento máximo é de 60-70 caracteres</title> <meta name="description" content="Descrição da página. Não pode conter mais do que 155 caracteres." /> <!-- Twitter Card data --> <meta name="twitter:card" value="Sumário"> <!-- Open Graph data --> <meta property="og:title" content="Titulo aqui" /> <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 aqui" /> <!-- end snippet --> <h2>Modelo Padrão</h2> O modelo padrão representa uma implementação mais robusta das `meta tags sociais` e é suposto funcionar em todas as plataformas. Para além de todas as características do modelo minimalista acima, o modelo padrão inclui o seguinte: - O cartão básico do Twitter - Twitter Summary card - Imagem de miniatura no Twitter - Página no Facebook Insights <!-- begin snippet: js hide: true --> <!-- language: lang-html --> <!-- Coloque estes dados entre as tags <head> do seu site --> <title>Título da página. O comprimento máximo é de 60-70 caracteres</title> <meta name="description" content="Descrição da página. Não pode conter mais do que 155 caracteres." /> <!-- Twitter Card data --> <meta name="twitter:card" content="Sumário"> <meta name="twitter:site" content="@nome_do_publicador"> <meta name="twitter:title" content="Título da página"> <meta name="twitter:description" content="Descrição da página, menos do que 200 caracteres."> <meta name="twitter:creator" content="@nome_do_autor"> <!-- Imagem Twitter Summary Card, tem que ter pelo menos 120x120px --> <meta name="twitter:image" content="http://www.example.com/image.jpg"> <!-- Open Graph data --> <meta property="og:title" content="Titulo aqui" /> <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 aqui" /> <meta property="og:site_name" content="Nome do site, ex: Stackoverflow" /> <meta property="fb:admins" content="ID numérico de cada usuário Facebook, separado por virgulas." /> <!-- end snippet --> <h2>O Modelo Completo</h2> Este é o monstro! Para além de conter todos os dados contidos no modelo padrão, o modelo completo contém: - **Google Authorship** e **Publisher Markup**. No entanto estes dados não mudam a aparência do seu conteúdo no Google+, mas poderá potencialmente adicionar links para as suas páginas do Google+ em resultados de pesquisa. - Markup (marcação) Schema.org para artigos - Twitter Summary Card com imagem grande - Expandir dados Open Graph para artigos <!-- begin snippet: js hide: true --> <!-- language: lang-html --> <!-- Atualize a sua tag <html> para incluir os atributos itemscope e itemtype. --> <html itemscope itemtype="http://schema.org/Article"> <!-- Coloque estes dados entre as tags <head> do seu site --> <title>Título da página. O comprimento máximo é de 60-70 caracteres</title> <meta name="description" content="Descrição da página. Não pode conter mais do que 155 caracteres" /> <!-- Schema.org markup para Google+ --> <meta itemprop="name" content="O Nome ou Título aqui"> <meta itemprop="description" content="Isto é a descrição da página"> <meta itemprop="image" content="http://www.example.com/image.jpg"> <!-- Twitter Card data --> <meta name="twitter:card" content="sumário_image_grande"> <meta name="twitter:site" content="@nome_do_publicador"> <meta name="twitter:title" content="Título da página"> <meta name="twitter:description" content="Descrição da página, menos do que 200 caracteres."> <meta name="twitter:creator" content="@nome_do_autor"> <!-- Twitter Summary Card com imagem larga, tem que ter pelo menos 280x150px --> <meta name="twitter:image:src" content="http://www.example.com/image.html"> <!-- Open Graph data --> <meta property="og:title" content="Titulo aqui" /> <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 aqui" /> <meta property="og:site_name" content="Nome do site, ex: Stackoverflow" /> <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="Secção do Artigo" /> <meta property="article:tag" content="Tag do Artigo" /> <meta property="fb:admins" content="ID numérico de cada usuário Facebook, separado por virgulas." /> <!-- end snippet --> Para implementação do Google Authorship, visite a página: [**The Usual Searchspects**][6], na secção - **Authorship Markup**, para implementa-lo à sua preferência <h2>E por fim, o Modelo Produto</h2> <!-- begin snippet: js hide: true --> <!-- language: lang-html --> <!-- Atualize a sua tag <html> para incluir os atributos itemscope e itemtype. --> <html itemscope itemtype="http://schema.org/Product"> <!-- Coloque estes dados entre as tags <head> do seu site --> <title>Título da página. O comprimento máximo é de 60-70 caracteres</title> <meta name="description" content="Descrição da página. Não pode conter mais do que 155 caracteres" /> <!-- Schema.org markup para Google+ --> <meta itemprop="name" content="O Nome ou Título aqui"> <meta itemprop="description" content="Isto é a descrição da página"> <meta itemprop="image" content="http://www.example.com/image.jpg"> <!-- Twitter Card data --> <meta name="twitter:card" content="product"> <meta name="twitter:site" content="@nome_do_publicador"> <meta name="twitter:title" content="Título da página"> <meta name="twitter:description" content="Descrição da página, menos do que 200 caracteres."> <meta name="twitter:creator" content="@nome_do_autor"> <meta name="twitter:image" content="http://www.example.com/image.html"> <meta name="twitter:data1" content="$3"> <meta name="twitter:label1" content="Preço"> <meta name="twitter:data2" content="Preto"> <meta name="twitter:label2" content="Cor"> <!-- Open Graph data --> <meta property="og:title" content="Titulo aqui" /> <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 aqui" /> <meta property="og:site_name" content="Nome do site, ex: Stackoverflow" /> <meta property="og:price:amount" content="15.00" /> <meta property="og:price:currency" content="USD" /> <!-- end snippet --> ---------- <h2>Ferramentas para testes e aprovação</h2> > Twitter Validation Tool > **https://dev.twitter.com/docs/cards/validation/validator** > > Facebook Debugger > **https://developers.facebook.com/tools/debug** > > Google Structured Data Testing Tool > **http://www.google.com/webmasters/tools/richsnippets** > > Pinterest Rich Pins Validator > **http://developers.pinterest.com/rich_pins/validator/** <sub>Mais informações sobre este tópico em: [Tags Every Webpage Should Have][7]</sub> [1]: https://i.sstatic.net/Gf36f.jpg [2]: https://dev.twitter.com/cards/overview [3]: https://developers.pinterest.com/rich_pins_overview/ [4]: https://developers.google.com/+/web/snippet/ [5]: https://developers.facebook.com/docs/sharing/opengraph [6]: http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013 [7]: http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013