Come ottenere la miniatura dell'anteprima del tuo sito web da mostrare su Facebook Share

Quando qualcuno condivide un collegamento a una delle pagine del tuo sito Web sulla sua Timeline, Facebook recupera automaticamente un'immagine dalla pagina collegata e la visualizza accanto al nome e all'URL della pagina. Sfortunatamente, l'immagine recuperata a volte può non essere correlata al contenuto della pagina o potrebbe anche mancare del tutto dal link condiviso. Per garantire che Facebook mostri la migliore immagine possibile quando qualcuno condivide la tua pagina, e quindi aumentarla percentuale di clic del collegamento: aggiungi alcune righe di codice al codice HTML della pagina per costringere Facebook a recuperare uno specifico Immagine.

Aggiungi markup grafico aperto

Apri grafico è un protocollo sviluppato da Facebook che, tra le altre funzionalità, consente agli sviluppatori Web di aggiungere tag di markup alle proprie pagine per personalizzare il modo in cui Facebook visualizza i collegamenti ai propri siti Web.

Video del giorno

Aggiungi i tag Open Graph a una pagina modificando il codice sorgente HTML:

Passo 1

Apri il file HTML in un editor di testo come Blocco note o in un editor HTML dedicato. Posiziona il cursore prima del tag di chiusura vicino alla parte superiore del file e premi accedere per creare una nuova linea.

File HTML nel Blocco note, con una riga vuota nella sezione Head indicata.

Credito immagine: Immagine per gentile concessione di Microsoft

Passo 2

Inserisci il seguente metatag:

Sostituire http://www.example.com/thumb.jpg con il link effettivo per l'immagine che vuoi che Facebook mostri quando un utente condivide un link al tuo sito.

Consiglio

  • Mentre Facebook accetta immagini in miniatura di dimensioni fino a 200 x 200 pixel, il taglia consigliata è largo 1200 pixel e alto 630 pixel.
  • Per aumentare la percentuale di utenti che fanno clic sul collegamento, cosa nota come percentuale di clic -- considera l'aggiunta di a chiamare all'azione all'immagine, come Clicca qui o Scopri di più.
File HTML con il tag immagine della meta proprietà Open Graph cerchiato.

Credito immagine: Immagine per gentile concessione di Microsoft

Passaggio 3

Salva il tuo file e caricalo sul tuo host web.

Oltre all'immagine in miniatura, prendi in considerazione l'utilizzo di tag di markup Open Graph per, ad esempio, personalizzare il titolo o la descrizione di un collegamento condiviso.

File HTML con titolo Open Graph e tag di descrizione indicati.

Credito immagine: Immagine per gentile concessione di Microsoft