Prendi il controllo dei tuoi snippet sociali

I segnali sociali stanno diventando sempre più importanti nel mondo del SEO. Le condivisioni di Facebook, i Tweet e Google + 1 hanno raggiunto un volume tale da poter essere una grande misura della qualità dei contenuti. Questo è il motivo per cui i motori di ricerca hanno iniziato a considerare questi segnali quando classificano le pagine web.

I segnali sociali non sono ancora così importanti come altri fattori di ranking come il profilo link e il contenuto di un sito, ma saranno indubbiamente un fattore di ranking essenziale in futuro.

Al fine di massimizzare la visibilità dei nostri contenuti, dobbiamo controllare come appare come un frammento di codice sociale. Un buon frammento di social ha il potenziale per attirare molti visitatori extra sui nostri siti web. Vediamo come possiamo creare uno di questi.


Frammenti sociali?

Un frammento di social è a anteprima di una pagina che viene utilizzato quando condividi quella pagina sui social media. Invece di un semplice collegamento, gli utenti ottengono ulteriori informazioni sul contenuto dietro il collegamento.

Ad esempio, se vogliamo condividere l'articolo sulla paginazione da Webdesigntuts + su Facebook, vediamo il seguente frammento sociale:

Uno snippet social su Google+ avrà lo stesso aspetto:

Quindi, invece di un collegamento di base, gli utenti vedono molte più informazioni sulla pagina. Possiamo vedere un'immagine di anteprima, il titolo e anche una breve descrizione. Questo rende più facile per noi decidere se il link vale la pena fare clic.

Questi frammenti sociali sono generato automaticamente. La persona che condivide la pagina web non ha alcun controllo sull'immagine, il titolo e la descrizione che viene utilizzata. Questi possono essere modificati solo dal webmaster stesso (impareremo come farlo più avanti nell'articolo).


Perché i social snippet sono importanti

Il frammento sociale di una pagina è qualcosa che molti webmaster dimenticano, potenzialmente causa di problemi di visualizzazione sui social media. Se il markup del frammento sociale non è presente, uno snippet sociale verrà spesso visualizzato in modo errato.

L'obiettivo dei frammenti sociali è quello di persuadere le persone a fare clic su di essi. Più persone cliccano su di esso, più visitatori ottiene la pagina sottostante. Ecco perché dovresti trattarli come pubblicità gratuita. Una pubblicità equivalente dovrebbe avere una fotografia accattivante, un titolo valido per il clic e una descrizione interessante. Uno snippet sociale dovrebbe avere gli stessi elementi.

Se uno di questi elementi non funziona correttamente, ad esempio viene mostrata la miniatura sbagliata, può in definitiva costare a visitatori e clienti.

Questo è un esempio di una pagina che non ha implementato snippet di social. Ho condiviso una pagina di "De Bakboetiek", un negozio specializzato in attrezzatura da forno. Hanno anche un negozio online dove vendono prodotti come questo stampo per torta, ma come puoi vedere, questo frammento di social non è particolarmente utile ...

Invece di mostrare una miniatura dello stampo per torta e una breve descrizione, possiamo vedere solo il logo e il titolo sbagliato. Non c'è nemmeno una descrizione! In che modo questo snippet sociale dovrebbe portare i visitatori da Facebook al loro sito web?


Il protocollo Open Graph

I frammenti sociali si basano sul protocollo Open Graph. È usato per trasformare una pagina web in un oggetto ricco nel grafico sociale. Grazie a questo, i social media come Facebook, Google+ e Twitter possono identificare elementi importanti di una pagina.

Il protocollo OG si basa su RDFa (ricorda RDFa dal nostro articolo sui dati strutturati?). Possiamo implementarlo utilizzando ulteriori tag nel di una pagina.

Maggiori informazioni su Open Graph Protocol possono essere trovate su ogp.me.


Creare uno snippet sociale

Ora è il momento di prendere il controllo del nostro frammento sociale. Ci sono diversi elementi che possono essere ottimizzati: la miniatura, il titolo, la descrizione, l'URL e il tipo di contenuto.

Nota: il seguente markup è utilizzato da Facebook e Google+. Twitter utilizza diversi meta tag, di cui parleremo in seguito.

Thumbnail

Questo è forse l'elemento più importante di uno snippet sociale. È la parte che la maggior parte degli utenti vedrà per prima, quindi assicurati di usare un'immagine chiara per questo.

Suggerisco di utilizzare un'immagine quadrata di almeno 200 x 200 pixel. Se l'immagine è troppo piccola, potrebbe non essere visualizzata o un'altra immagine della pagina potrebbe essere utilizzata (in alcuni casi l'immagine di un annuncio ...).

Possiamo specificare la posizione della miniatura con questo markup:

Titolo

Questo è il titolo del tuo frammento sociale. È il secondo elemento più importante, accanto alla miniatura. Il tuo titolo dovrebbe convincere l'utente a cliccarci sopra. Funziona anche come un testo di ancoraggio per il collegamento alla pagina.

Il codice per il titolo è simile a questo:

Descrizione

Scrivi un breve riassunto della pagina che può essere utilizzata come descrizione. Uso spesso il mio testo di meta-descrizione per un frammento sociale, ma puoi scegliere quello che ti piace. Assicurati solo che solletica la curiosità del lettore e faccia clic sul link.

Tipo di contenuto

Se si desidera specificare il contenuto della pagina, è possibile utilizzare il og: Tipo etichetta. Se questo tag viene omesso, la pagina verrà classificata come "sito Web". Altri tipi di contenuti che possono essere utilizzati sono musica, video, articolo, libro e profilo. Maggiori informazioni possono essere trovate sulla pagina degli oggetti incorporati su Facebook.

URL

Questo è l'URL a cui verrà inviato l'utente quando fa clic sul titolo. Aggiungi l'URL canonico a questo tag:

Se lo desidera traccia il traffico proveniente dai social media, puoi aggiungere parametri di monitoraggio che consentono di visualizzare le informazioni in Google Analytics. Utilizza Google URL Builder per questo.

Devi solo aggiungere tre parametri: Source, Medium e Campaign.

  • Fonte: facebook
  • Medio: sociale
  • Campagna: un nome / id univoco

L'URL finale sarà simile a questo: http://www.website.com/article-title?utm_source=facebook&utm_medium=social&utm_campaign=article-name


Carte Twitter

Twitter utilizza un markup diverso per creare Twitter Cards. Le schede Twitter ti consentono di allegare contenuti multimediali ai tweet che rimandano ai tuoi contenuti.

È possibile utilizzare tre tipi di supporto:

  • sommario: simile a uno snippet sociale su Facebook e Google+
  • foto: una carta fotografica
  • giocatore: una carta del lettore multimediale

Discutiamo ogni scheda Twitter individualmente:

Sommario

La scheda di riepilogo è una scheda Twitter simile ai frammenti di social che vediamo su Facebook e Google+. Può essere utilizzato per vari tipi di contenuto (post di blog, articoli, prodotti ...). Una scheda riassuntiva può avere questo aspetto:

     

Prima di tutto abbiamo bisogno di identificare il tipo di scheda Twitter tramite il Twitter: Scheda tag (in questo caso un riassunto). L'URL dovrebbe essere l'URL canonico della pagina. Il Twitter: titolo il tag non deve contenere più di 70 caratteri. La descrizione d'altra parte è limitata a 200 caratteri. L'immagine viene utilizzata come miniatura e dovrebbe essere quadrata. Le immagini più piccole di 60 x 60 px non verranno visualizzate. Finalmente, il Creatore il tag può essere usato per dare credito all'autore.

Foto

Ci sono diversi elementi di una Photo Card che vengono utilizzati anche nella scheda di riepilogo. La principale differenza tra i due è lo stile del tweet. La scheda fotografica mette l'immagine davanti e al centro nel tweet.

Twitter usa il Twitter: Immagine URL per la foto. Se questa immagine è inferiore a 280 x 150 px, non verrà visualizzata. È possibile specificare una larghezza e un'altezza dell'immagine per aiutare Twitter a preservare le proporzioni dell'immagine durante il ridimensionamento.

Una carta fotografica potrebbe apparire come questa:

      

Il Twitter: Scheda e Twitter: Immagine i tag sono obbligatori, tutto il resto è facoltativo.

Giocatore

La scheda giocatore è utilizzata per audio e video. Il file multimediale è incorporato nel tweet tramite un iframe. Lo svantaggio di una carta giocatore è questo deve essere approvato da Twitter!

Se si desidera utilizzare una scheda giocatore per l'approvazione, aggiungere il seguente codice alla pagina:

       

Il Twitter: Scheda il tag è usato per identificare la Player Card. URL, titolo, immagine e descrizione sono simili alle altre carte giocatore. Il Twitter: il giocatore il tag contiene un collegamento HTTPS al player iframe. Puoi specificare la larghezza e l'altezza dell'iframe tramite Twitter: giocatore: larghezza e Twitter: giocatore: altezza tag.

Un paio di altri requisiti per le carte giocatore:

  • Utilizza un URL HTTPS (il video deve essere pubblicato anche tramite HTTPS)
  • I comandi di arresto o pausa sono obbligatori
  • Non è consentita la riproduzione automatica
  • Il contenuto non deve richiedere l'accesso

Twitter Cards e Open Graph

Twitter cerca prima Twitter: Scheda i tag sul tuo sito web, ma se non ne trova uno ricade nel markup Open Graph. Ciò significa che non è necessario creare tag duplicati. Puoi semplicemente integrare i tuoi tag Open Graph esistenti con i tag delle schede di Twitter.

Twitter vede i seguenti tag come simili (markup di twitter a sinistra, OG a destra)

  • twitter: ul = og: url
  • twitter: description = og: description
  • twitter: title = og: title
  • twitter: image = og: image
  • twitter: image: width = og: image: width
  • twitter: image: height = og.image.height

Conclusione

I motori di ricerca stanno spendendo sempre più tempo sui segnali sociali perché sono un ottimo indicatore per i contenuti di qualità. Per migliorare la possibilità che qualcuno faccia clic su uno snippet sociale, dobbiamo assumere il controllo del suo contenuto. Possiamo farlo tramite il protocollo Open Graph per Facebook e Google+. Per Twitter abbiamo bisogno di integrare questi tag Open Graph con il codice specifico di Twitter.


Risorse utili

Per aiutarti nell'implementazione dei frammenti sociali, ho raccolto diversi strumenti che potrebbero essere utili:

  • Google+ Snippet Creator: utilizza questo strumento per generare un codice HTML per uno snippet sociale. Basta incollare il codice nella sezione principale della pagina e il gioco è fatto.
  • Facebook Debugger: controlla le informazioni del grafico aperto che sono state raschiate dalla tua pagina.
  • Rich Snippet Testing Tool: può essere usato per controllare le informazioni del tuo frammento sociale.