Welcome to Idea R | Branding - Web Agency - Digital Strategies
Switch to the mobile layout

      Idea R - Do your competitors are always ahead? - Raise your voice with web marketing!

Blog

Take a software geek from the 80s, add a new generation graphic designer and dilute with a longtime marketing strategist. Shake vigorously and you'll get the Idea R's blog.

Change language... italiano

Come far apparire al meglio il tuo sito web sui social media

Published on 10/5/2014
Categories: Social Media
Come far apparire al meglio il tuo sito web sui social media

This article is available in English too.

E' ormai pratica quotidiana postare sui social media (Facebook, Twitter, ecc.) collegamenti al nostro sito, tipicamente articoli del blog, prodotti del catalogo o una descrizione dei nostri servizi professionali.
Il problema è che spesso questi collegamenti hanno un aspetto graficamente deludente, sicché ottengono ben pochi visitatori.

Ti farò vedere in questo articolo come rendere al meglio i tuoi link sui social media.
L'argomento è sicuramente tecnico, ma niente di impossibile. In ogni caso, se non sarai tu direttamente ad apportare i consigli che ti darò, rivolgiti alla tua web agency di fiducia. Al peggio almeno prenderai coscienza del problema.

Facebook

Hai appena pubblicato un link su Facebook e ha il seguente misero aspetto? 

Facebook pessimo risultatoOra ti spiegherò come fare in modo che invece appaia così.

Facebook ottimo risultato

Le differenze sono evidenti:

  • C'è una bella foto.
  • Sotto alla foto c'è il titolo della pagina.
  • Sotto al titolo c'è una breve e accattivante descrizione.
  • Sotto alla descrizione c'è anche l'indirizzo Internet del tuo sito (ANDATARITORNO.COM).

Dove sta la magia?
Bisogna riuscire a "far capire" la tua pagina a Facebook, in modo che sia in grado di scegliere la foto rappresentativa, capire qual è il titolo e trovare una breve descrizione (che possibilmente non venga troncata). Per prima cosa cambia il markup 

<html>

con

Questa cosa serve a informare Facebook che parleremo una lingua che lui è in grado di comprendere. Stiamo parlando dell'utilizzatissimo protocollo Open Graph

Ora proseguiremo aggiungendo le informazioni all'interno della sezione <head> della pagina.

<meta property="og:type" content="article" />
<meta property="og:title" content="Bangkok, venghino signori, venghino!" />
<meta property="og:url" content="https://www.andataritorno.com/viaggi/28/bangkok" />
<meta property="og:description" content="Iniziamo il viaggio in Thailandia partendo dalla sregolata capitale. Riusciremo a resistere a tutte le tentazioni? A tutte sicuramente no..." />
<meta property="og:site_name" content="Andata/Ritorno" />

Il primo tag informa Facebook di quale sia l'immagine rappresentativa. Fai attenzione che il lato corto dell'immagine deve essere almeno 300 pixel (abbondare è meglio).
Il secondo tag informa Facebook sulla tipologia della pagina, nel nostro caso l'articolo di un blog.
Il terzo tag specifica il titolo.
Siccome spesso ad una pagina si può arrivare seguendo differenti collegamenti, specifichiamo qual è quello che preferiamo nel quarto tag.
Nel quinto tag diamo una breve descrizione. Per evitare che venga troncata rimani sotto i 150 caratteri.
Infine informiamo Facebook sul nome del nostro sito con l'ultimo tag.

Ti è piaciuto fino a qua l'articolo?

Prima di continuare nella lettura, seguici sulla nostra pagina LinkedIn cliccando il pulsante qui sotto!
In tal modo rimarrai aggiornato sulle strategie digitali non solo con i nostri articoli, ma anche con le migliori pubblicazioni che raccogliamo in giro per la rete.

Twitter

E' una recente novità di Twitter, dunque forse non la conosci, ma il classico tweet

Twitter pessimo risultato

oggi può invece avere il seguente aspetto:

Twitter ottimo risultatoQuella che stai vedendo qui sopra è la nuovissima Twitter Card.
La buona notizia è che se hai già implementato i consigli per Facebook (Open Graph), ti manca pochissimo per avere anche le Twitter Card. Devi solamente aggiungere i seguenti 3 tag:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@IdeaRDigital" />
<meta name="twitter:creator" content="@IdeaRDigital" />

Il primo informa Twitter del tipo di card che vogliamo utilizzare, nel nostro caso quella con l'immagine grande.
Gli altri 2 tag specificano l'account Twitter del proprietario del sito e quello dell'autore (nel nostro caso coincidono).

Google+

Google Plus è il social network di Google, sta sviluppando una crescete popolarità soprattutto poiché è integrato con il motore di ricerca e fornisce ad esso recensioni e coordinate geografiche delle aziende.

Anche qui se ti limiti a pubblicare un collegamento, questo potrebbe avere il seguente aspetto:

Google+ brutto risultato

Mentre magari ti piacerebbe fosse così:

Google+ ottimo risultato

Cosa devi fare?
Anche qui se hai già implementato le istruzioni Open Graph, allora non devi fare altro.
Ti consiglio comunque di aggiungere la descrizione della pagina anche nel "classico" tag descrizione, che a Google piace tanto, soprattutto quando si tratta di indicizzare la tua pagina nel motore di ricerca.

<meta name="description" content="Minimal graphics and optical illusions for the green Coca Cola campaign" />

LinkedIn 

Prova a indovinare... anche con LinkedIn, se hai già implementato correttamente l'Open Graph, sei a cavallo.

Pinterest

Concludiamo con Pinterest, il più famoso social network per la condivisione delle immagini.
Qui c'è molto poco da fare, il lavoro lo fanno i visitatori del vostro sito che decidono di condividere le tue immagini.
Quello che dobbiamo fare noi è rendergli la vita facile descrivendo bene le nostre immagini.
Dobbiamo evitare che quando premeranno il tasto PIN gli venga fuori questo

Pinterest brutto risultato

invece di questo

Pinterest ottimo risultatoPinterest prende la descrizione della foto dall'attributo alt dell'immagine, dunque un altro motivo si aggiunge, ai già molti esistenti, per non dimenticarsi mai di specificare l'attributo alt (testo alternativo). Ricordiamone alcuni:

  • Quando il browser non riesce a caricare l'immagine, visualizza in alternativa il testo dell'attributo alt.
  • I non vedenti sono in grado di comprendere meglio la pagina.
  • Google indicizza molto meglio le immagini che hanno un testo alternativo.
  • E ora abbiamo anche Pinterest.

Bene, ora conosci il "trucco", da oggi l'aspetto dei tuoi post sui social network non sarà più lasciato al caso.
A proposito, se usi il nostro Infrared CMS, questo articolo ti sarà servito solo per cultura personale, perché tutte le suddette ottimizzazioni vengono già fatte automaticamente senza che tu debba preoccupartene.

Google Reviews

Ti piace questo blog?

Per noi la tua opinione conta, perciò ci farebbe molto piacere se potessi scrivere una recensione su di noi o sul nostro blog.

You are the reader number 13,619.

Comments

Previous article

Previous article

Why doesn't Facebook show your new great post to your page fans?

Next article

How to fix your ASP.NET site to be responsive on Windows Phone

Next article

Scroll to top