Come posso impostare un'immagine di un sito Web che verrà visualizzata come anteprima su Facebook?

156

Quando condividi un link su Facebook, troverà automaticamente le immagini sul sito Web e ne sceglierà una a caso come anteprima. Come puoi influenzare l'immagine di anteprima? Quando una persona condivide il collegamento al sito Web sul suo Facebook?

image facebook preview

— marchio
fonte

234

1. Includi l'estensione dello spazio dei nomi XML Open Graph nella tua dichiarazione HTML

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. All'interno del tuo <head></head>uso il seguente meta tag per definire l'immagine che desideri utilizzare

<meta property="og:image" content="fully_qualified_image_url_here" />

Maggiori informazioni sul protocollo open graph qui.

Dopo aver eseguito quanto sopra, utilizzare "Debugger oggetti" di Facebook se l'immagine non viene visualizzata correttamente. Nota anche che la prima volta che viene condiviso non verrà ancora visualizzato a meno che non siano specificate anche altezza e larghezza, vedi Condividi su Facebook - Miniatura non visualizzata per la prima volta

— Shef
fonte

@Martin Non ne sono consapevole. Forse lo fanno, ma non lo vedo menzionato nei documenti di Open Graph Protocol . Prova il debugger per vedere se i valori memorizzati nella cache sono visualizzati per il tuo sito. Sembra che ci sia un'altra domanda su SO intitolata Facebook Open Graph che non cancella la cache relativa a questo problema.

— Shef,

Commento di @KDog: problemi? Controlla i tuoi codici nello strumento di debug di Facebook. Immagine cache di Facebook, titolo e testo del corpo. Ho cambiato il titolo durante l'aggiunta di XML al mio sito Web e poiché ho accidentalmente creato pochi errori di convalida, nulla è stato cambiato nell'anteprima della condivisione di Facebook. Facebook ha utilizzato una cache valida invece di mostrare i nuovi dati invalidi. Sono stato in grado di risolvere questi errori utilizzando developers.facebook.com/tools/debug . Dopo averlo fatto, il mio nuovo titolo e le immagini vengono mostrati immediatamente.

— Jeremy Thompson,

@ScotterMonkey: Sì, questo è il comportamento previsto. Sei in grado di dire a FB quale contenuto usare. A proposito, puoi aggiungere multipli <meta property="og:image" content="your_image_here" />tra l' headelemento in modo da poter scegliere quando pubblichi su FB.

— Shef,

Ho perso quella cosa con fb nella dichiarazione html. Mi hai salvato la giornata! (anche se questo è un post di tre anni). Molte grazie!

— bestprogrammerintheworld,

link di contenuto è un vero e proprio URL - non un link relativo che ho scoperto. cioè http://mywebsite.com.au/Images/prettypic.png, no/Images/prettypic.png

— JumpingJezza

Si noti inoltre che se si dispone di wordpress basta scorrere verso il basso fino alla fine della pagina Web in modalità di modifica e selezionare "immagine in primo piano" (lato inferiore destro dello schermo).

— davea0511
fonte

Se stai usando Weebly , inizia visualizzando il sito pubblicato e facendo clic con il pulsante destro del mouse sull'immagine per copiare l'indirizzo dell'immagine. Quindi in Weebly, vai su Modifica sito, Pagine, fai clic sulla pagina che desideri utilizzare, Impostazioni SEO, sotto Codice testata inserisci il codice dalla risposta di Shef:

<meta property="og:image" content="/uploads/..." />

sostituendo / uploads / ... con l'indirizzo dell'immagine copiata. Fai clic su Pubblica per applicare la modifica.

Puoi saltare la parte della risposta di Shef sullo spazio dei nomi, perché è già impostata di default in Weebly.

— krubo
fonte