I Meta Tag essenziali per i social media

In questi giorni, quasi ogni sito web incoraggia i visitatori a condividere le sue pagine sui social media. Abbiamo tutti visto le onnipresenti icone di Facebook e Twitter, tra gli altri, che implorano di essere cliccate. Questo non sorprende, perché la condivisione sui social media, l’incarnazione su internet del passaparola, è uno dei modi più efficaci per le aziende e gli individui per ottenere visibilità.

Quando gli utenti scelgono di condividere questi link, è compito dello sviluppatore web assicurarsi che le pagine web associate siano adeguatamente preparate, che è quello che vedremo ora. Facebook e Twitter sono, di gran lunga, le piattaforme di social media più popolari, quindi concentriamoci su queste due.

Condivisione su Facebook e Twitter

Facebook offre agli sviluppatori varie opzioni su come una pagina web condivisa appare nella sua timeline a seconda del contenuto del sito. A meno che non sia specificato diversamente, ogni sito web ha come default il tipo chiamato, opportunamente, “sito web”, che è l’esempio che useremo.

Diciamo che qualcuno ha condiviso la home page di una società di viaggi fittizia – Facebook la visualizza così:

Anche Twitter ha diversi modi per formattare le pagine web condivise che appaiono nel suo feed, ma daremo un’occhiata a quello che è molto simile all’esempio precedente di Facebook, che Twitter chiama “Scheda riassuntiva con immagine grande”:

Come possiamo vedere, ognuno di essi presenta più attributi della pagina web condivisa:

un’immagine e un titolo di primo piano
una descrizione
il nome del dominio

Proprietario <meta> Tag

Come specifichiamo questi attributi? Con i tag <meta>. Quando un link viene condiviso, sia Facebook che Twitter raschiano la pagina web associata e leggono i suoi tag <meta> per visualizzare le informazioni appropriate.

Facebook utilizza i tag <meta> sfruttando il protocollo Open Graph, un sistema di classificazione per le pagine web che si estende oltre i tag <meta> già definiti in HTML5. Un elenco completo dei tag <meta> disponibili può essere trovato sul sito web di Open Graph. Ce ne sono così tanti tra cui scegliere che può essere un po’ intimidatorio, ma solo quattro sono effettivamente richiesti:

<meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm">

Twitter ha i propri tag <meta> che sono simili al protocollo Open Graph, ma usa il prefisso “twitter” invece di “og”. Come per Facebook, solo alcuni sono necessari. Il tipo di formato di visualizzazione che stiamo richiedendo a Twitter è anche specificato:

<meta name="twitter:title" content="European Travel Destinations "><meta name="twitter:description" content=" Offering tour packages for individuals or groups."><meta name="twitter:image" content=" http://euro-travel-example.com/thumbnail.jpg"><meta name="twitter:card" content="summary_large_image">

Sia Facebook che Twitter offrono linee guida su come utilizzare i suddetti tag <meta>. Sono abbastanza simili tra loro, anche se possono essere un po’ soggettivi nell’interpretazione. Notate che, per i nostri scopi, Facebook si riferisce alla pagina web condivisa quando usa il termine “oggetto”:

	Facebook	Twitter
Titolo	Il titolo, titolo o nome dell’oggetto.	Un titolo conciso per il contenuto correlato.
Descrizione	Una breve descrizione o riassunto dell’oggetto.	Una descrizione che riassume concisamente il contenuto come appropriato per la presentazione all’interno di un Tweet. Non si dovrebbe riutilizzare il titolo come descrizione o utilizzare questo campo per descrivere i servizi generali forniti dal sito web.
Immagine	L’URL dell’immagine del vostro oggetto. Dovrebbe essere almeno 600×315 pixel, ma 1200×630 o più grande è preferibile (fino a 5MB). Resta vicino ad un rapporto di aspetto 1.91:1 per evitare il ritaglio.	Un URL ad un’immagine unica che rappresenta il contenuto della pagina. Non dovresti usare un’immagine generica come il logo del tuo sito web, la foto dell’autore o altre immagini che si estendono su più pagine. Le immagini per questa scheda dovrebbero essere almeno 280px in larghezza e almeno 150px in altezza. L’immagine deve avere una dimensione inferiore a 1MB.
	URL	L’URL canonico per la tua pagina. Questo dovrebbe essere l’URL non decorato, senza variabili di sessione, parametri di identificazione dell’utente o contatori.

Siccome questi tag proprietari <meta> si riferiscono, alla fine, agli stessi elementi, sarebbe ideale se ci fosse un modo per conciliare i due. Fortunatamente, c’è.

Riconciliare <meta> Tag

Non c’è niente di male ad avere più tag <meta> che sembrano ridondanti. Troppe informazioni non hanno mai fatto male a nessuno se non aggiungendo qualche byte in più al file HTML.

Ma per i nostri scopi, e per amore della brevità, possiamo sfruttare il fatto che Twitter ci permette di sostituire i tag Open Graph <meta> con i propri. Alla fine, a parte la necessità di specificare un formato di visualizzazione, nessuno dei tag <meta> personalizzati di Twitter è necessario. Questo ci dà il seguente, che potrebbe essere considerato il minimo indispensabile di tag <meta> necessari per rendere una pagina web adatta alla condivisione sui social media:

<meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm"><meta name="twitter:card" content="summary_large_image">

Riconciliare le linee guida per l’immagine è semplice: seguire la raccomandazione di Facebook di una dimensione minima di 1200×630 pixel e un rapporto di aspetto di 1.91:1, ma aderire al requisito di dimensione del file di Twitter di meno di 1MB.

Convalidare <meta> Tags

Se ci sono dubbi sulla legittimità della riduzione a questi cinque tag, possiamo usare gli utili Facebook Sharing Debugger e Twitter Card Validator. Entrambi questi strumenti raschieranno qualsiasi pagina web ospitata su un server pubblico per i tag <meta> rilevanti e mostreranno come apparirebbe quando condivisa. Elencherà anche eventuali errori e fornirà suggerimenti. Quindi come abbiamo fatto con il nostro particolare esempio? Twitter sembra a posto con le cose, ma Facebook, d’altra parte, elenca un elemento come un avvertimento:

Questo fornisce un perfetto per parlare di…

Social Media Analytics

Quello che Facebook sta indicando è che se avete intenzione di utilizzare il loro strumento di analisi, che chiamano Domain Insights, devi fornire il numero ID unico associato al tuo account. Il tag <meta> sarebbe quindi qualcosa di simile a questo:

<meta property="fb:app_id" content="your_app_id" />

Twitter ha qualcosa di simile che chiama Twitter Card Analytics. Per ottenere il massimo da questo strumento, Twitter consiglia di utilizzare il seguente tag <meta> che contiene il nome utente di Twitter che si desidera associato alla pagina web condivisa:

<meta name="twitter:site" content="@website-username">

Tenete a mente, però, che se non avete alcun interesse particolare nell’utilizzo di questi strumenti analitici, allora omettere i due tag <meta> di cui sopra non ha alcun effetto su come una pagina web condivisa appare sulla timeline di Facebook o sul feed di Twitter.

Altro?

La documentazione di Facebook raccomanda un ulteriore tag <meta>, anche se non è obbligatorio. Un tag <meta> che denota il nome del sito web in cui risiede la pagina condivisa:

<meta property="og:site_name" content="European Travel, Inc.">

Twitter suggerisce un altro tag <meta> che è raccomandato, ma non richiesto:

<meta name="twitter:image:alt" content="Alt text for image">

Questo fornisce una descrizione alternativa dell’immagine per coloro che sono ipovedenti.

Markup finale

Questo dovrebbe bastare. Per ribadire, quando si guarda la documentazione di Facebook e Twitter per la condivisione di pagine web, ci sono molti altri tag <meta> disponibili che possono essere utilizzati per specificare diversi tipi di contenuto. Ma, in generale, il seguente sarà sufficiente:

<!-- Essential META Tags --><meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm"><meta name="twitter:card" content="summary_large_image"><!-- Non-Essential, But Recommended --><meta property="og:site_name" content="European Travel, Inc."><meta name="twitter:image:alt" content="Alt text for image"><!-- Non-Essential, But Required for Analytics --><meta property="fb:app_id" content="your_app_id" /><meta name="twitter:site" content="@website-username">