Meta tags for Social Networks

Asked

Viewed 1,818 times

17

We know that it is necessary to implement specific meta tags in <head> of our websites to optimize content sharing on social networks such as Twitter, Google+, Pinterest and Facebook.

For this it is necessary to define how the attributes - title, description, images and others will be presented on social networks, making use of the same.

But what are the meta tags needed to be implemented for these social networks mentioned above?

For example, for Facebook, we use og:meta tags as in the example below, but what about the others?

<meta property="og:title" content="Titulo">
<meta property="og:description" content="Descrição aqui">
html facebook twitter google-plus meta-tags

1 answer

26


Knowing exactly what social media meta tags to include can be confusing, even for experienced webmasters.
There is a variety of structures to consider, supported by most social platforms:

inserir a descrição da imagem aqui

  • Twitter Cards: Summaries, Images, Galleries, Apps, Video, Audio, and Products
  • Pinterest Rich Pins: Products, Recipes, Movies, and Articles
  • Google+: Articles, Blog, Book, Event, Local Business, Organization, Weight, Product, and Reviews/Ratings
  • Facebook: Articles, Photos, Audio, Video, and more

To help facilitate this, we will create here a variety of exemplary models that adapt to various needs.

How to use these templates

To use these templates, simply copy and paste one of the templates into the <head> from your website using your preferred text editor of your choice. Be sure to replace any text within the tag <title> and attributes content=" " with your own data, and customize, delete or add all tags you find necessary.

Homage: Do not remove or replace attributes content="article" and content="product" as these are used to inform the social platform if this content is a artigo or a produto

The first three models are optimized for typical use of markup text and data "article (artigo)", ideal for Blogs publications and written content. The final template contains Markup for product pages.

Minimalist model

This simplified version runs light and fast. It contains minimal data for optimized sharing through Twitter, Facebook, Google+ and Pinterest.

The tags <title> and descrições meta are included, although technically they are not social media meta tags. This is because they can also be used by Google+ and other social media platforms, and it is a good practice to include them on every page you publish.

<!-- 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" />

Standard Model

The standard model represents a more robust implementation of meta tags sociais and is supposed to work on all platforms. Apart from all the features of the minimalist model above, the standard model includes the following:

  • The basic Twitter card - Twitter Summary card
  • Thumbnail image on Twitter
  • Page on Facebook Insights

<!-- 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." />

The Complete Model

This is the monster! In addition to containing all the data contained in the standard model, the complete model contains:

  • Google Authorship and Publisher Markup. However, this data does not change the appearance of your content on Google+, but could potentially add links to your Google+ pages in search results.
  • Markup (markup) Schema.org for articles
  • Twitter Summary Card with large image
  • Expand Open Graph data to articles

<!-- 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." />

For Google Authorship implementation, visit the page: The Usual Searchspects, in section - Authorship Markup, to implement it at your preference

And finally, the Product Model

<!-- 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" />

Tools for testing and approval

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/

More information on this topic at: Tags Every Webpage Should Have

  • 3

    Very cool to share this Chun +1

  • Chun, should I use these tags only on the index pages or all of the ones that are open (no authentication)? For example, a manual page, or Faq, is also worth creating the full template?

  • 1

    Yes @gustavox , if you want these pages to be shared properly you have to include the code on these pages too so that the data/information can be extracted by social networks correctly (do not forget to change the data of meta-tags depending on each page).

  • 1

    Very good, congratulations. + 1

  • 1

    Congratulations, very helpful.

Browser other questions tagged html facebook twitter google-plus meta-tags

You are not signed in. Login or sign up in order to post.