web-dev-qa-db-fra.com

Comment spécifier l'image qui sera partagée sur les médias sociaux?

Je cherche un moyen de spécifier l'image sélectionnée et affichée en tant qu'aperçu lorsqu'un lien vers une page Web est partagé sur des comptes de réseaux sociaux tels que Facebook, Twitter, Google+, Reddit, etc.

Je comprends que Facebook possède la balise meta og: image, mais existe-t-il un attribut ou une classe qui peut être ajouté à une image en ligne?

Je vois souvent que la première image de la page est extraite et affichée sous forme de vignette lorsqu'elle est partagée.

1
brendo234

Je pense que vous avez répondu à votre question vous-même. Vous devez avoir balises Open Graph dans la section d’en-tête de votre page Web. Les méta-tags à ajouter sont les suivants.

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

Ainsi, les réseaux sociaux extrairont l’image spécifiée dans la balise og:image en tant qu’image d’article pour les messages sociaux. Si vous ne spécifiez aucune balise og:image, alors l'effet sera aléatoire et dépendra du réseau social. Certains réseaux récupèrent la première image du contenu, certains réseaux vous donnent la possibilité de choisir parmi toutes les images de cette page et certains réseaux ignorent tout simplement les images.

Si vous souhaitez spécifier une image distincte pour Twitter, Twitter prend également en charge cartes Twitter . Et vous pouvez les spécifier comme ça.

<meta name="Twitter:card" content="summary_large_image">
<meta name="Twitter:site" content="@nytimes">
<meta name="Twitter:creator" content="@SarahMaslinNir">
<meta name="Twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="Twitter:description" content="Tweet Description">
<meta name="Twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Mais je pense que ça devrait aller en ajoutant simplement balises méta Open Graph à votre page Web.

4
Nick