Quali sono i social meta tags essenziali?

mario

I social media tags sono metadati essenziali in ogni parte dei contenuti che pubblichiamo nel Web.
Ci permettono innanzitutto di ottimizzare lo sharing attraverso Twitter, Facebook, Google+ e Pinterest definendo nello specifico come i titoli, le immagini e le descrizioni vengono visualizzate nel social stream.

Inoltre sono importanti anche le implicazioni lato SEO. Sappiamo per esperienza che i giusti dati studiati nei minimi dettagli, incluse immagini ottimizzate, aumentano le probabilità che i contenuti siano condivisi e che portino quindi enormi vantaggi nell’incremento di link e mentions.

Consideriamo le differenti strutture supportate dalle maggiori piattaforme social:

  • Twitter Cards: Immagini, Gallerie, App, Audio, Prodotti e Video
  • Pinterest Rich Pins: Prodotti, Ricette, Films, e Articoli
  • Google+: Articoli, Blog, Libri, Eventi, Organizzazioni, Persone etc.
  • Facebook: Articoli, Immagini, Audio, Video etc..

COME UTILIZZARE QUESTI TEMPLATE
Semplicemente copia e incolla il template into il tuo text editor preferito. Assicurati soltanto di sostituire le scritte in arancione e verde con i dati relativi al tuo sito web.

Andiamo ad analizzare 3 tipologie di template:

  • Minimal
  • Standard
  • Completo

MINIMAL TEMPLATE

La versione più piccola e basilare, contiene il minimo indispensabile per ottimizzare la condivisione sulle piattaforme social.

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<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="Description Here" />

STANDARD TEMPLATE

La versione standard rappresenta un template più robusto con una implementazione di tutti i social tags necessari per lo sharing sulle varie principali piattaforme. In aggiunta rispetto al template minimal qui troviamo la Summary card e la thumbnail di Twitter, Facebook page insights.

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Summary card images must be at least 120x120px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<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="Description Here" /> 
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="fb:admins" content="Facebook numeric ID" />

COMPLETE TEMPLATE

Questa versione è la più completa. In aggiunta alle precedenti troviamo: Google Authorship and Publisher markup, shema.org markup, Open Graph espansi.

<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.html">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<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="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<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="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />

TOOLS PER TESTARE E CONVALIDA

  • 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/

Condividi con i tuoi amici:
Google+Share on LinkedInTweet about this on Twittershare on TumblrShare on FacebookPin on Pinterest

Questo post ha 1 voto/i.

Vota

Commenta questo post

La tua mail non verrà resa pubblica. I campi obbligatori sono segnalati *