Optimiser son référencement avec le partage de ses pages sur les réseaux sociaux

Emmanuel Gautier / November 02, 2013

3 min read

Les réseaux sociaux constituent une grande source de diffusion pour tout site web et entreprise. Cependant, cette source a ses règles et ses méthodes qui sont bonnes à connaître pour pouvoir exploiter au mieux le partage. Nous allons donc voir comment optimiser nos pages web pour permettre un bon partage sur les réseaux sociaux. En effet, certaines solutions à mettre en place sont données par ceux-ci pour faciliter le partage et optimiser l'accessibilité de leur partage au sein même des flux vues par les utilisateurs finaux.

Pour montrer la différence de visibilité et d'attractivité d'un partage avec ou sans ces optimisations, je vous invite à regarder les captures d'écran d'un même partage sur Facebook. Le premier est un partage sans les optimisations, le second avec optimisations.

La différence est notable, le premier possède une image prise au hasard sur la page, la description est heureusement trouvée dans la balise meta description et aucune autre information n'est fournie. La deuxième possède une image de présentation fixe, une description renseigné ainsi que d'autre informations qui ne figures pas visuellement.

Open Graph

Open Graph fait partie de ces outils qui vous permette d'optimiser le partage de vos contenus sur les réseaux sociaux. Cette outil est un protocole créé par Facebook pour faciliter la communication entre son réseau social et les contenus pouvant être présent sur le réseau. Comme vu plus haut, facebook met en place de la même manière des outils pour analyser le contenus des pages web dans le cas où le site ne mettrait pas en place les stratégies d'Open Graph. Seulement ces outils, aussi puissant qu'ils sont, ne peuvent pas être aussi précis que ce que la personne ayant publié le contenu peut souhaité. C'est pour cette raison que nous allons voir comment indiquer à Facebook ce qu'il veut savoir.

Pour ce faire, une documentation existe sur le site officiel d'Open Graph. Vous pouvez de même tester vos pages à ce lien sur le site de Facebook.

Voici un exemple d'utilisation d'Open Graph :

<html
  lang="fr"
  prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#"
>
  <head>
    <meta charset="utf-8" />
    <meta
      property="og:title"
      content="Connaître le nombre de partage de ses pages en JavaScript"
    />
    <meta property="og:site_name" content="Emmanuel Gautier" />
    <meta
      property="og:url"
      content="https://www.emmanuelgautier.fr/blog/connaitre-le-nombre-de-partage-de-ses-pages-en-javascript"
    />
    <meta property="og:type" content="article" />
    <meta
      property="og:description"
      content="Si vous avez déjà essayé de récupérer le nombre de partages de vos pages via uniquement JavaScript, vous avez sûrement dû vous rendre compte que l'affaire n'était aisée. "
    />
    <meta
      property="og:image"
      content="https://www.emmanuelgautier.fr/images/share-count-javascript.jpg"
    />
    <meta property="article:published_time" content="2013-09-30" />
    <meta property="article:tag" content="javascript" />
    <meta
      property="article:publisher"
      content="https://www.facebook.com/emmanuel.gautier.777"
    />
  </head>
</html>

Twitter Card

Twitter, tout comme Facebook a mis en place des balises meta à renseigner pour optimiser le partage sur sa plateforme. La documentation de ces balises se trouve sur la page des développeurs d'API Twitter.

Voici un exemple d'utilisation :

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@gautier_manu" />
<meta
  name="twitter:title"
  content="Connaître le nombre de partage de ses pages en JavaScript"
/>
<meta
  name="twitter:description"
  content="Si vous avez déjà essayé de récupérer le nombre de partages de vos pages via uniquement JavaScript, vous avez sûrement dû vous rendre compte que l'affaire n'était aisée."
/>
<meta
  name="twitter:image"
  content="https://www.emmanuelgautier.fr/images/share-count-javascript.jpg"
/>

Données Structurées

Google Plus, à l'exception de ses homologues, ne met pas en place de balises spéciales pour son réseau. En fait, il utilise des balises déjà utilisées pour les recherches de google que sont les données structurées. Pour plus d'informations je vous renvoie à la documentation de Google.

Consulting

Si vous recherchez des solutions à un problème ou avez besoin de conseils, je suis là pour vous aider ! N'hésitez pas à réserver un call avec moi pour une session de consulting personnalisée. Discutons de votre situation et trouvons ensemble la meilleure solution à implémenter.

Partager cet article

Suivre le flux RSS

Inscrivez-vous à la Newsletter

Rejoignez nous en vous abonnant à ma newsletter !

Articles sur le même sujet

Retirer une page supprimée de Google

Google ne voit pas d’un très bon œil les erreurs HTTP 404. Seulement, lorsque vous supprimez une page, un article, une image, … , Google ne voit plus ce qui a été supprimé et c’est l’erreur ! Pour éviter de tomber dans ce piège, il vous faut supprimer le lien dans l’index du moteur de recherche.

Retirer une page supprimée de Google

Chrome version 35 : nouvelles APIs et intégration du chromecast

La version 35 du célèbre navigateur de Google vient d'être passée sur la chaîne stable. Au programme de cette mise à jour, de nouveaux outils pour les développeurs, des correctifs de sécurité, et une meilleur intégration de Chromecast.

Articles mis en avant

MySQL Docker Image pour les Mac ARM M1

Le problème avec les Apple M1 et les Apple M2 est que de nombreux logiciels ne sont encore pas compatible avec la microarchitecture ARMv8 comme les images officielles Docker pour MySQL par exemple.

Comment activer la vérification de typage pour Python dans VSCode

Python supporte désormais le [type hints](https://docs.python.org/3/library/typing.html). Dans cet article, nous allons voir comment avoir de l'IntelliSense pour le typage ainsi qu'avoir les erreurs de typage sur Visual Studio Code.

Comment gérer l'internationalisation avec NextJS SSG

Générer statiquement un site avec le framework NextJS pour différentes langues n'est pas si simple.