Qu'est-ce qu'Open Graph et comment puis-je l'utiliser pour mon site Web?

La création de contenu et la maintenance d'un site Web peuvent prendre beaucoup de temps. Comment pouvons-nous nous assurer que notre contenu se démarque lors du partage sur les flux sociaux sur Internet?

  • Qu'est-ce que Open Graph?
  • Pourquoi en ai-je besoin?
  • Que se passe-t-il si je ne l'ai pas?
  • Commencer par les bases du graphique ouvert
  • Type de graphique ouvert du site Web
  • Quelques autres balises graphiques ouvertes qui méritent d'être ajoutées
  • Twitter et autres réseaux de médias sociaux utilisant un graphique ouvert
  • Images dans un graphique ouvert
  • Tester vos balises graphiques ouvertes
  • Puis-je avoir un exemple?

Qu'est-ce que Open Graph?

Open Graph est un protocole Internet qui a été créé à l'origine par Facebook pour standardiser l'utilisation de métadonnées dans une page Web pour représenter le contenu d'une page.

À l'intérieur, vous pouvez fournir des détails aussi simples que le titre d'une page ou aussi spécifiques que la durée d'une vidéo. Ces pièces s'assemblent toutes pour former une représentation de chaque page individuelle d'Internet.

Pourquoi en ai-je besoin?

Le contenu sur Internet est généralement créé avec au moins un objectif en tête: le partager avec d'autres. Cela n'a pas nécessairement d'importance si vous ne faites que l'envoyer à un ami, mais si vous souhaitez le partager ou souhaitez qu'il soit partagé sur un réseau social ou une application utilisant des aperçus riches, vous voudrez que cet aperçu soit aussi efficace. que possible.

Comment devenir un développeur Web Full Stack en 2020 #javascript #fullstack //t.co/A1TsFaDguD

- Colby Fayock (@colbyfayock) 10 mars 2020

Cela encouragera les gens à consulter votre contenu et inévitablement à cliquer sur votre contenu.

Que se passe-t-il si je ne l'ai pas?

La plupart des réseaux sociaux essaieront par défaut de faire de leur mieux pour créer un aperçu de votre contenu. Le plus souvent, cela ne va pas si bien.

Prenez par exemple mon site Web colbyfayock.com.

Il saisit correctement le titre de ma page et la description, mais ce n'est pas le tweet le plus attrayant d'un flux.

Comparez cela à l'aperçu d'un seul article et nous voyons une histoire différente.

Alors, que se passe-t-il si vous n'avez pas de balises graphiques ouvertes? Rien de mal ne se produira, mais vous ne profiterez pas de certaines des fonctionnalités qui aident à faire ressortir votre contenu à côté des tonnes d'autres contenus publiés sur Internet.

Commencer par les bases du graphique ouvert

Les quatre balises graphique ouvert de base qui sont nécessaires pour chaque page sont og:title, og:type, og:imageet og:url. Ces balises doivent être uniques pour chaque page que vous diffusez, ce qui signifie que les balises de votre page d'accueil doivent toutes être différentes de la page de l'article de votre blog.

Bien que cela devrait être assez simple, voici une description de la signification de chacune des balises:

  • og:title: Le titre de votre page. C'est généralement la même chose que la balise de votre page Web, sauf si vous souhaitez la présenter différemment.
  • og:type: Le «type» de site Web dont vous disposez. J'expliquerai plus en détail dans la section suivante, bien qu'un «type» générique soit «site Web».
  • og:image: Il doit s'agir d'un lien vers une image que vous souhaitez représenter votre contenu. Il doit s'agir d'une image haute résolution que les réseaux sociaux utiliseront dans leurs flux.
  • og:url: Cela doit être l'URL de la page actuelle.

Lorsque vous placez une balise sur votre site Web, vous devez la placer avec toutes les autres métadonnées. La balise utilisée sera une balise et devrait ressembler à ce modèle:

Donc, si je devais créer un ensemble de quatre balises graphiques ouvertes de base pour mon site Web, colbyfayock.com, cela pourrait ressembler à:

Type de graphique ouvert du site Web

Le protocole Open Graph a quelques variantes du «type» de site Web qu'il prend en charge. Cela inclut des types tels que site Web, article ou vidéo.

Lors de la configuration de vos balises graphiques ouvertes, vous voudrez avoir une idée du type qui aura le plus de sens pour votre site Web. Si votre page se concentre sur une seule vidéo, il est probablement judicieux d'utiliser le type «vidéo». S'il s'agit d'un site Web général sans vertical, vous voudrez probablement simplement utiliser le type «site Web».

Semblable aux autres, c'est unique pour chaque page. Donc, si votre page d'accueil est "site Web", vous pouvez toujours avoir une autre page de type "vidéo".

Donc, si je devais créer un type de graphique ouvert pour mon site Web, cela pourrait ressembler à ce qui suit sur ma page d'accueil:

Lorsque vous accédez à un article de blog, cela ressemblerait à ceci:

Vous pouvez trouver les types de sites Web Open Graph les plus courants sur la page Web Open Graph: //ogp.me/#types

Quelques autres balises graphiques ouvertes qui méritent d'être ajoutées

Bien que vous soyez généralement d'accord avec les bases, voici quelques autres qui mériteraient d'être ajoutées:

  • og:description: Une description de votre page. De même og:title, cela peut être identique à la balise de votre site Web , à moins que vous ne souhaitiez le présenter différemment.
  • og:locale: Si vous souhaitez localiser vos balises, il serait probablement judicieux d'inclure des paramètres régionaux. Le format est language_TERRITORYcelui par défaut en_US.
  • og:site_name: Le nom du site Web global sur lequel se trouve votre contenu. Si vous êtes sur une page d'article de blog, vous pouvez titleutiliser le titre de cet article de blog, où site_nameserait le nom de votre blog.
  • og:video: Vous avez une vidéo qui prend en charge votre contenu? Voici une chance de l'inclure. Ajoutez un lien vers votre vidéo à l'aide de cette balise.

Ces balises seront ajoutées dans le même modèle qu'auparavant:

Twitter et autres réseaux de médias sociaux utilisant un graphique ouvert

La plupart des réseaux sociaux adhèrent aux principes de base des standards de graphes ouverts, mais certains d'entre eux incluent également leur propre extension pour aider à personnaliser l'apparence et la convivialité de leur écosystème.

Twitter, par exemple, vous permet de spécifier twitter:cardquel est le type de «carte» que vous pouvez utiliser lorsqu'ils affichent votre site Web. Pour le moment, leurs types de cartes incluent:

  • sommaire
  • summary_large_image
  • app
  • joueur

Cela vous aidera à choisir comment vos liens sont utilisés dans leur flux. Si vous choisissez summary_large_imagepar exemple, Twitter affichera vos liens avec de grandes images haute résolution tant que vous les fournissez dans la og:imagebalise.

Voici quelques références rapides à la documentation sur l'utilisation des balises graphiques ouvertes avec certains sites de médias sociaux:

  • Twitter: //developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
  • Facebook: //developers.facebook.com/docs/sharing/webmasters/
  • Pinterest: //developers.pinterest.com/docs/rich-pins/overview/?
  • LinkedIn: //www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en

Images dans un graphique ouvert

Bien que l'ajout de votre image og:imagedevrait souvent suffire, il peut parfois être difficile de faire apparaître correctement votre image. Si vous semblez rencontrer des problèmes, la norme Open Graph inclut quelques balises d'image telles que og:image:urlvs og:image:secure_urlainsi que les og:image:widthet og:image:height.

Essayez de vous assurer que vous suivez toutes les notes et exemples de la documentation du graphique ouvert. De plus, certains réseaux sociaux ont des exigences d'image. Twitter par exemple nécessite un rapport de 2: 1 avec une taille minimale de 300x157 et une taille maximale de 4096x4096 qui est inférieure à 5 Mo et au format JPG, PNG, WEBP ou GIF.

Si vous êtes bloqué, testez vos balises à l'aide des outils du réseau social pour voir si vous pouvez trouver le problème.

Tester vos balises graphiques ouvertes

Heureusement, nos réseaux sociaux préférés fournissent également des outils pour nous aider à déboguer nos balises. Une fois que vous vous êtes assuré que vos balises apparaissent réellement dans le code source de votre site Web, vous pourrez prévisualiser l'apparence de votre site Web dans le flux.

  • Twitter: //cards-dev.twitter.com/validator
  • Facebook: //developers.facebook.com/tools/debug/
  • Pinterest: //developers.pinterest.com/tools/url-debugger/

Creuser davantage dans les balises graphiques ouvertes

Bien que la plupart de ceux-ci doivent couvrir un site Web de base, il existe quelques balises supplémentaires qui pourraient vous aider, vous et votre entreprise, à être détecté sur les réseaux sociaux.

Si vous souhaitez plonger davantage, la documentation fait un excellent travail en fournissant une liste de toutes les balises disponibles que vous pouvez utiliser.

//ogp.me/

Puis-je avoir un exemple?

Si vous cherchez simplement un exemple pour commencer, voici ce que vous devriez faire lors de la configuration de vos balises pour un article de blog:

Vous recherchez d'autres moyens d'optimiser et d'analyser votre contenu?

  • Comment ajouter une image de réseau social à votre référentiel de projet Github
  • Comment comprendre Google Analytics et le trafic vers votre site Web
  • Comment configurer et suivre les performances de la chaîne YouTube avec Google Analytics

Suivez-moi pour plus de Javascript, UX et d'autres choses intéressantes!

  • ? Suis moi sur Twitter
  • ? ️ Abonnez-vous à mon Youtube
  • ✉️ Inscrivez-vous à ma newsletter