Partager simplement un article sur les réseaux sociaux avec Open Graph

Boostez la visibilité de vos contenus sur les réseaux sociaux avec Open Graph.

12 nov 2024 · 3 min ·

Table des matières

Introduction
Le code
Résultat pour un article
Résultat pour une page
Conclusion
Les sources

Introduction

Le protocole Open Graph, développé par Facebook, est un ensemble de balises HTML qui permet aux créateurs de contenu de contrôler la manière dont leurs pages web apparaissent lorsqu’elles sont partagées sur les réseaux sociaux.

En intégrant ces balises, on peut personnaliser des éléments clés comme le titre, la description, et l’image d’aperçu pour attirer l’attention des utilisateurs et inciter à l’interaction.

Cette optimisation améliore non seulement la visibilité de votre contenu, mais renforce également l’uniformité de son apparence, quel que soit le réseau social sur lequel il est partagé.

Le code

<title>{{ title }}</title>
<meta name="description" content="{{ page.description | strip_html | xml_escape | strip | strip_newlines }}">
<link rel="canonical" href="{{ page.url | absolute_url }}">
{% if site.keywords -%}<meta name="keywords" content="{{ site.keywords }}">{%- endif %}
{%- if site.title -%}<meta property="og:site_name" content="{{ site.title }}">{% endif %}
<meta property="og:title" content="{{ page.title | strip_html | xml_escape | strip | strip_newlines }}">
<meta property="og:description" content="{{ page.description | strip_html | xml_escape | strip | strip_newlines }}">
<meta property="og:locale" content="fr_FR">
<meta property="og:url" content="{{ page.url | absolute_url }}">
{% if page.share-img != "" %}<meta property="og:image" content="{{ page.share-img | relative_url }}">{% endif %}

{%- if page.id %} {%  comment %} Un post {% endcomment %}
<meta property="og:type" content="article">
<meta property="og:article:published_time" content="{{ page.date | date_to_xmlschema }}">
<meta property="og:url" content="{{ page.url | absolute_url }}">
<meta property="og:article:section" content="{{ page.category }}">
{% for tag in page.tags -%}
<meta property="og:article:tag" content="{{ tag }}">
{% endfor %}
{%- else %} {%  comment %} Une page {% endcomment %}
<meta property="og:type" content="website">
{%- endif %}

Résultat pour un article

J’ai choisi ici d’extraire les balises de cet article.

<title>Partager simplement un article sur les réseaux sociaux avec Open Graph | elblur.fr</title>
<meta name="description" content="Découvrez comment les balises Open Graph optimisent la manière dont vos articles et pages web s&apos;affichent sur les réseaux sociaux. En utilisant ce protocole, vous contrôlez les titres, descriptions et images pour attirer l’attention des utilisateurs et favoriser l’engagement.">
<link rel="canonical" href="http://www.elblur.fr/webdev/partager-simplement-un-article-sur-les-reseaux-sociaux-avec-open-graph.html">
<meta property="og:site_name" content="elblur.fr">
<meta property="og:title" content="Partager simplement un article sur les réseaux sociaux avec Open Graph | elblur.fr">
<meta property="og:description" content="Découvrez comment les balises Open Graph optimisent la manière dont vos articles et pages web s&apos;affichent sur les réseaux sociaux. En utilisant ce protocole, vous contrôlez les titres, descriptions et images pour attirer l’attention des utilisateurs et favoriser l’engagement.">
<meta property="og:locale" content="fr_FR">
<meta property="og:url" content="http://www.elblur.fr/webdev/partager-simplement-un-article-sur-les-reseaux-sociaux-avec-open-graph.html">
<meta property="og:image" content="/assets/img/Tag-Webdev.webp"> 
<meta property="og:type" content="article">
<meta property="og:article:published_time" content="2024-11-12T00:00:00+01:00">
<meta property="og:article:section" content="Webdev">
<meta property="og:article:tag" content="Webdev">
<meta property="og:article:tag" content="Open Graph">
<meta property="og:article:tag" content="Réseaux sociaux">
<meta property="og:article:tag" content="Open Graph">
<meta property="og:article:tag" content="Jekyll">
<meta property="og:article:tag" content="Liquid">

Résultat pour une page

J’ai choisi ici d’extraire les balises de la page d’accueil.

<title>elblur.fr</title>
<meta name="description" content="1 à 10 pour 1 000 000 !">
<link rel="canonical" href="http://www.elblur.fr">
<meta property="og:site_name" content="elblur.fr">
<meta property="og:title" content="elblur.fr">
<meta property="og:description" content="1 à 10 pour 1 000 000 !">
<meta property="og:locale" content="fr_FR">
<meta property="og:url" content="http://www.elblur.fr">
<meta property="og:type" content="website">

Conclusion

En plus de ces balises Open Graph, j’ai développé pour chaque article non publié, ce code qui permet de construire le post à publier sur Mastodon :

Reprendre le titre
Reprendre le sous-titre
Reprendre un extrait de l’article (excerpt)
Lister les tags à la manière de mots-dièses
Construire l’URL attendue par Mastodon pour le partage d’un lien (url et text)

{% capture text_to_publish -%}
{{ page.title |  strip_newlines }}

{{ page.subtitle |  strip_newlines }}

{{ excerpt |  strip_newlines }}

{% if page.tags.size > 0 -%}
{%- for tag in page.tags %}#{{ tag }} {% endfor %}
{%- endif %}
{% endcapture -%}

<a class="button is-danger"
  href="https://mastodon.social/share?url={{ page.url | absolute_url | url_encode }}&text={{ text_to_publish | url_encode }}"
  title="Partager sur Mastodon">Poster l'article sur Mastodon pour activer la gestion des commentaires.</a>

Ce qui donne, pour cet article :

Le code HTML

<a class="button is-danger"
  href="https://mastodon.social/share?url=http%3A%2F%2Flocalhost%3A4000%2F%2Fwebdev%2Fpartager-simplement-un-article-sur-les-reseaux-sociaux-avec-open-graph.html&text=Partager+simplement+un+article+sur+les+r%C3%A9seaux+sociaux+avec+Open+Graph%0A%0ABoostez+la+visibilit%C3%A9+de+vos+contenus+sur+les+r%C3%A9seaux+sociaux+avec+Open+Graph.%0A%0A%0A%0A%23Webdev+%23Open+Graph+%23R%C3%A9seaux+sociaux+%23Open+Graph+%23Jekyll+%23Liquid+%0A"
  title="Partager sur Mastodon">Poster l'article sur Mastodon pour activer la gestion des commentaires.</a>

Le post Mastodon avant publication

Partager simplement un article sur les réseaux sociaux avec Open Graph

Boostez la visibilité de vos contenus sur les réseaux sociaux avec Open Graph.

#Webdev #Open_Graph #Réseaux sociaux #Open_Graph #Jekyll #Liquid

http://www.elblur.fr/webdev/partager-simplement-un-article-sur-les-reseaux-sociaux-avec-open-graph.html

Le post Mastodon après publication

Post Mastodon

Les sources

Partage et commentaires

Partager cet article sur : Mastodon X (Twitter) Facebook LinkedIn Reddit

Vous pouvez commenter cet article grâce à ce fil de discussion sur Mastodon (avec Mastodon ou un autre compte ActivityPub/Fediverse).