"Migliora la visibilità del tuo sito con anteprima su WhatsApp, Twitter e Facebook"
In questo articolo, ti spiegherò come condividere i link del tuo sito su WhatsApp, Twitter e Facebook in modo che vengano visualizzati con anteprima. Guida passo-passo con tutte le informazioni necessarie per ottenere una presentazione accattivante del tuo sito quando lo condividi con gli amici e i follower.
Video Tutorial
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.
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.
Download Notepad++
Download
Download BBEdit
Download
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:title. Il meta da inserire è:
<meta property="og:title" content="titolo del tuo sito" />
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="scrivi qui la descrizione" />
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 condividiamo 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. Esempio: 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. Esempio: http://nomesito.it/images/logo.png">
