web-dev-qa-db-fra.com

Image de site Web par défaut pour le partage social

Est-il possible de définir une image par défaut qui apparaît lorsque je partage mon site Web sur Facebook? J'ai remarqué que Facebook récupère généralement la première image du site à utiliser comme vignette.

htmlfacebooksocial-media
43
paz

Vous devez définir la balise meta de l'image facebook:

<meta property="og:image" content="http://example.com/logo.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">

Pour plus d'informations, consultez la docs

64
Patsy Issa
<meta property="og:image" content="http://example.com/lamb-full.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">

La taille de l'image doit être au moins 200 pixels X 200 pixels

8
Raina Vinod

Les serveurs de Facebook vont "gratter" votre site Web à la recherche d'une image à utiliser lorsque les gens la partagent. Si vous voulez spécifier quelle image utiliser, mettez ceci dans le <head></head> section de votre site web:

  • <meta property="og:image" content="http://url-to-your-image.png">

Facebook peut avoir mis en cache une copie de l'image aléatoire précédente. Pour que Facebook récupère à nouveau:

6
full_prog_full

C'est ma solution, ça marche bien:

<head>
    <!--FACEBOOK-->
    <meta property="og:image" content="https://www.website.com/logo.jpg">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1024">
    <meta property="og:image:height" content="1024">
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.website.com/"/>
    <meta property="og:title" content="Website title" />
    <meta property="og:description" content="Website description." />
<head>

Vous pouvez faire un test avec site de débogage Facebook .

5
iLandes

Définir un og:image dans le <head> de votre document HTML comme ceci:

<meta property="og:image" content="http://example.com/ogp.jpg" />

Cela fait partie du protocole Open Graph, respecté au moins par les sites de médias sociaux suivants:

(... et probablement bien d'autres choses encore.)

En plus de définir la balise ci-dessus, vous pouvez également :

5
Mark Amery