Rapport:  Cartes sociales

Nous vérifions si le site web a des cartes sociales (Open Graph et Twitter Cards) et si elles sont valides

Les cartes sociales sont un moyen d'afficher le site Web dans les médias sociaux. Elles sont une exigence pour tout site Web sur le Web moderne et doivent refléter l'identité de la marque. Elles sont également utilisées par les moteurs de recherche pour afficher le site Web dans les résultats de recherche, généralement avec une grande image.

Recommandations

  • Créez une image de carte sociale de haute qualité avec des dimensions de 1200x630px pour une affichage optimal sur toutes les plateformes
  • Incluez le logo de votre marque et une image visuelle attrayante qui représente votre contenu
  • Utilisez un texte clair et lisible avec un bon contraste par rapport à l'arrière-plan
  • Testez vos cartes sociales à l'aide du débogueur de partage de Facebook et du validateur de carte de Twitter
  • Assurez-vous que vos cartes sociales sont cohérentes avec l'identité de votre marque et la conception de votre site web

Erreurs connues

  • Le site web a des cartes sociales non valides (voir les détails)
  • Le site web n'a pas de cartes sociales

Carte sociale minimale

Ceci est un exemple de carte sociale minimale requise pour être correctement affichée dans la plupart des médias sociaux. C'est un bon début, mais ce n'est pas la meilleure façon d'afficher le site Web dans tous les médias sociaux qui peuvent également nécessiter d'autres champs.

<meta name="twitter:card" content="summary" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:url" content="https://your-website.com/your-page" />
<meta property="og:description" content="A brief description of your page." />
<meta property="og:image" content="https://your-website.com/image.jpg" /><!-- optional -->

Cartes Twitter

Ceci est un exemple complet d'implémentation de carte Twitter qui montre tous les champs disponibles et leur utilisation correcte. Bien que tous les champs ne soient pas requis, leur implémentation offre la meilleure visualisation possible sur Twitter et d'autres plates-formes qui prennent en charge les cartes Twitter.

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description of your page." />
<meta name="twitter:image" content="https://your-website.com/image.jpg" /><!-- optional -->
<meta name="twitter:url" content="https://your-website.com/your-page" /><!-- optional -->
<meta name="twitter:site" content="@your-twitter-handle" /><!-- optional -->
<meta name="twitter:creator" content="@your-twitter-handle" /><!-- optional -->

Cartes Open Graph

Ceci est un exemple complet d'implémentation de carte Open Graph qui montre tous les champs disponibles et leur utilisation correcte. Bien que tous les champs ne soient pas requis, leur implémentation offre la meilleure visualisation possible sur Facebook, LinkedIn et d'autres plates-formes qui prennent en charge le protocole Open Graph.

<meta property="og:title" content="Your Page Title" />
<meta property="og:url" content="https://your-website.com/your-page" />
<meta property="og:description" content="A brief description of your page." />
<meta property="og:image" content="https://your-website.com/image.jpg" /><!-- optional -->
<meta property="og:type" content="website" /><!-- optional -->
<meta property="og:site_name" content="Your Website Name" /><!-- optional -->
<meta property="og:locale" content="en_US" /><!-- optional -->
<meta property="og:locale:alternate" content="en_GB" /><!-- optional -->
<meta property="og:locale:alternate" content="en_AU" /><!-- optional -->
<meta property="og:locale:alternate" content="en_CA" /><!-- optional -->
<meta property="og:locale:alternate" content="en_NZ" /><!-- optional -->
<meta property="og:locale:alternate" content="en_ZA" /><!-- optional -->

Autres éléments de rapport