Condividere link sito con anteprima: nome sito, titolo, descrizione e immagine (Whatsapp / Facebook)

Ci è capitato molto spesso di condividere, ad esempio tramite whatsapp, come anche facebook, il link di un sito web e vedere che dopo la digitazione dell'indirizzo appare un'anteprima del sito con una immagine, un titolo e una descrizione.

Se, ad esempio, tramite whatsapp proviamo a condividere facebook o youtube ci apparirà una anteprima del sito.

Condividere link con anteprima

Oggi vediamo, come fare in modo, che la condivisione del nostro sito abbia questa funzionalità.

Tutto ciò che ci servirà è l'inserimento di specifici meta tag HTML all’interno della della pagina web interessata.
Per far si che questi meta tag svolgano il proprio lavoro dovranno essere inseriti all'interno della

<head>

</head>


I tags interessati sono:

  • og:site_name - per il nome del sito;
  • og:title - per quanto riguarda il titolo;
  • og:description - per la descrizione;
  • og:image - che ci permetterà di avere un'anteprima dell'immagine o del nostro logo.

Quindi se quando andiamo a condividere la home del nostro sito, che sia tramite whatsapp, facebook o altri social, i tag dovranno essere inseriti nel codice html della index sia essa .html o .php
Scarica il file index tramite il pannello di controllo che ti ha fornito la società del tuo hosting o tramite applicazioni apposite come ad esempio Filezilla.
Dopo aver scaricato la index devi modificare il suo contenuto.
Se utilizzi il sistema operativo Windows puoi usare il programma "notepad++" (oppure il classico blocco note), se invece usi il sistema operativo MacOS puoi usare il programma BBEdit.

linkDownload Notepad++
linkDownload BBEdit

Apri il file index e trova il tag <head>.
Dopo questo inserisci i meta tag interessati.

Come detto precedentemente il tag og:site_name servirà per il nome del sito.
Il meta da inserire per il titolo è il seguente:

<meta property="og:site_name" content="nomesito" />

dove in "content=" va inserito il nome del tuo sito.

Il tag per il titolo è og:titleIl meta da inserire è:

<meta property="og:title" content="Il mio blog" />

Nel campo "content=" non usare troppi caratteri anche perchè se condividi tramite whastapp il massimo è di 35 caratteri.

Per la descrizione il tag è og:description. Il meta da inserire è:

<meta property="og:description" content="Tutorial , video tutorial e news" />

Anche qui, in "content=" cerca di non superare i 65 caratteri perchè è il massimo accettato da whatsapp.

Il tag per l'immagine è og:image che ha la funzione di visualizzare l'anteprima di una immagine o logo.
La dimensioni dell'immagine o logo, se condiviamo su facebook, può essere di 600×315 pixel.
Se invece condividiamo tramite whatsapp la dimensione non dovrà essere superiore a 300x200 pixel. Ti consiglio 256x256 pixel e il peso non deve essere superiore a 300 KB.
Se superi questi valori l'immagine non apparirà.
Dopo aver creato le due immagini con le dimensioni specifiche caricale in una cartella del tuo sito.

Aggiornamento del 04/03/2021

Per la corretta visualizzazione dell'immagine per Facebook, WhatsApp, Twitter, Linkedin ... utilizza una immagine 1200x1200 Pixel.

Il meta da inserire per l'anteprima dell'immagine è il seguente:

<meta property="og:image" content="http://nomesito.it/images/logo.png" />

dove in "content=" devi inserire il percorso dell'immagine.
Se invece utilizzi un protocollo http-secure cioè https si deve inserire secure_url nel codice.
Il meta finale per il protocollo https è il seguente:

<meta property="og:image:secure_url" content="https://nomesito.it/images/logo.png" />

Salva il file index, che dovrà avere l'estensione originale coiè o index.php o index.html, e ricaricalo sul tuo sito sostituendolo a quello esistente.

Cosa molto importante, quando condividi il tuo sito devi scrivere l'indirizzo completo ad esempio http://nomesito.it o https//nomesito.it

Il risultato finale sarà:

<meta property="og:site_name" content="qui scrivi il nome del sito">
<meta property="og:title" content="qui inserisci il titolo">
<meta property="og:description" content="qui inserisci una descrizione">
<meta property="og:image" content="qui inserisci il percorso dell'immagine o logo http://nomesito.it/images/logo.png">

Oltre a questi tag puoi aggiungere anche:

<meta property="og:locale" content="it_IT">
<meta property="og:type" content="website">
<meta property="og:url" content="qui inserisci la URL del tuo sito http://nomesito.it/">


Per Twitter i meta tag da inserire sono:

<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="qui scrivi il nome del dominio nomesito.it">
<meta property="twitter:url" content="qui inserisci l'indirizzo del tuo sito http://nomesito.it/">
<meta name="twitter:title" content="qui inserisci il titolo">
<meta name="twitter:description" content="qui inserisci una descrizione">
<meta name="twitter:image" content="qui inserisci il percorso dell'immagine o logo http://nomesito.it/images/logo.png">


Video Tutorial

 


Copyright ©
Il testo e le immagini di questo sito sono di totale proprietà dell'autore.
Non ne è consentita la riproduzione, anche parziale, se non espressamente autorizzata.



Sostienimi con una donazione!

La tua “donazione” (qualsiasi importo) verrà usata per mantenimento, sviluppo, nuovi servizi e miglioramento di questo sito.