web-dev-qa-db-fra.com

Comment afficher une vignette d'aperçu sur Facebook d'un site Web sans image?

J'ai récemment conçu un site Web sans balises img, avec un seul gros CSS Sprite avec tout ce qu'il contient. Toutefois, lorsque j'essaie de publier ce site Web sur Facebook, il ne montre aucune vignette d'aperçu, probablement parce qu'il ne trouve aucune image dans le balisage. Aucune suggestion? J'aimerais quand même garder un site Web ultra rapide sans img, néanmoins.

cssfacebookimagesdetectionthumbnail
2
João

Je suggérerais cette lecture

Comment obtenir la vignette d'aperçu de votre site Web pour qu'elle apparaisse sur Facebook Partager

Google est votre ami :)

Tout reprend pour ajouter une méta-information à votre code en tant que:

<link rel="image_src" href="http://site.com/website-thumb.jpg" />

et essayez de ne pas donner à cette image plus de 250 pixels de large.

2
balexandre

Facebook utilise un type de lien propriétaire appelé image_src:

<link rel="image_src" href="location/of/image" />

Insérez simplement cela dans votre <head> et Facebook devrait pouvoir saisir l’image.

Si vous êtes également intéressé, Facebook reconnaît également deux autres valeurs rel: audio_src et video_src. Voir ici pour plus .

3
Lèse majesté

Remplacez votre balise <html> par <html prefix="og: http://ogp.me/ns#">

Ajoutez la balise méta donnée dans votre balise head.

 <head>
    <meta property="og:title" content="TITLE TO BE DISPLAYED"/>
    <meta property="og:image" content="IMAGE URL"/>
    <meta property="og:description" content="DESCRIPTION"/>  
    </head>

Titre et description sont facultatifs dans votre cas. Cela fonctionnera pour les sites utilisant le protocole de graphe ouvert.

1
Shan Eapen Koshy