Un bon référencement avec Vuepress 2

Lorsqu’il s’agit d’écrire des articles, j’ai longtemps cherché une méthode simple et de facile à maintenir.

J’ai essayé WordPress. Mais on finit toujours par payer soit un plugin, soit un expert pour atteindre près de 100 sur les scores Lighthouse, dans toutes les catégories.

Aujourd’hui, je vais partager l’expérience acquise en utilisant Vuepress pour construire un blog performant et offrant naturellement un bon référencement.

Contexte

Qu’est-ce que Vuepress ?

Vuepress est le moteur SSG (Générateur de Site Statique, ou Static Site Generator en anglais) basé sur Vue et Vite (pour la version 2).

Il évolue grâce à Mr Hope et meteorlxy principalement (site web : https://v2.vuepress.vuejs.org/) et je l’ai utilisé pour plusieurs projets simples :

Mes blogs utilisaient Vuepress, mais je suis passé à Hugo pour des raisons de performance l’été 2023.

Pourquoi ? Quand on atteint un certain nombre de pages et d’articles, Vuepress, basé sur Node, montre ses limites (plus d’informations à ce sujet dans cette discussion).

Que permet Vuepress ?

Il prend simplement des fichiers de contenu rédigés en Markdown et les analyse pour générer des fichiers HTML à l’aide d’un thème JavaScript. Dans le cas de Vuepress, il s’agit sur Vue 3.

Vuepress s’étend par le biais d’extensions ou de thèmes plus ou moins riches en options. Par exemple, le thème de Mr Hope ajoute des extensions de syntaxe Markdown vraiment sympas qui enrichissent votre Markdown et in fine, le HTML généré.

N’hésitez pas à visiter cette page pour plus de détails.

Comment utiliser frontmatter pour un bon référencement naturel

Maintenant, je vais partager un cas d’utilisation avec le thème de Mr Hope. Il est possible que d’autres thèmes supportent ou non cette fonctionnalité.

Un bon référencement commence par une bonne balise title (jusqu’à 60 caractères) et une méta description (jusqu’à 150-160 caractères).

A propos des limites ci-dessus

Ces limites ne sont pas des règles qui s’appliquent à tous les titres ou à toutes les descriptions.

J’aime beaucoup cet article qui prend en compte la taille en pixels des titres lorsqu’il est affiché à l’écran.

Vous pouvez déclarer le titre et la description en utilisant le frontmatter suivant :

1
2
3
4


---
title: "Comment exécuter une API REST NodeJS sur Cloudways ?"
description: "Je suis en train de développer une API de recherche personnalisée à partir de sites web statiques VuePress et j'ai besoin de l'héberger. Comme j'ai un VPS Cloudways, voyons comment faire fonctionner l'API REST."
---

Ensuite, vous avez le lien canonique :

1
2
3
4
5
6
7
8


head:
  - [
      link,
      {
        rel: canonical,
        href: https://iamjeremie.me/2023/07/how-to-run-a-nodejs-rest-api-on-cloudways,
      },
    ]

Ensuite, les métas OpenGraph :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


head:
  - [
      meta,
      { "og:type": article },
      meta,
      { "og:title": "Mon expérience avec le kit Bafang VAE 250 W" },
      meta,
      {
        "og:description": "Je roule en VAE depuis plus de 5 ans, d'abord sur un Scott CX Comp 2011, puis sur un Raleigh Brazil. Je vais vous dire pourquoi, comment et ce que j'en pense.",
      },
      meta,
      {
        "og:image": /images/2023-07-25-le-raleigh-brazil-300-ex-en-mode-vae.jpg,
      },
    ]

Ou encore les balises méta de Twitter, alias X :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


head:
  - [
      meta,
      { "og:type": article },
      meta,
      { "twitter:title": "Mon expérience avec le kit Bafang VAE 250 W" },
      meta,
      {
        "twitter:description": "Je roule en VAE depuis plus de 5 ans, d'abord sur un Scott CX Comp 2011, puis sur un Raleigh Brazil. Je vais vous dire pourquoi, comment et ce que j'en pense.",
      },
      meta,
      {
        "twitter:image": /images/2023-07-25-le-raleigh-brazil-300-ex-en-mode-vae.jpg,
      },
      meta,
      { "twitter:card": "summary_large_image" },
    ]

Avec les balises méta og:* et twitter:*, vous obtenez des aperçus riches sur toutes les plateformes quand vous partagez l’article. J’ai testé sur LinkedIn, X, Substack et Facebook.

Limites

C’est assez verbeux d’écrire un frontmatter qui génère les balises méta appropriées dans l’HTML. De plus, vous répétez certaines valeurs pour différentes balises méta, par exemple description vs og:description vs twitter:description.

J’ai donc créé un snippet pour remplir le frontmatter plus rapidement. Voici l’exemple de og:* :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


{
  "FM Template for OpenGraph meta": {
    "scope": "yaml",
    "prefix": "set og:metas",
    "body": [
      "meta,",
      "{ \"og:type\": article },",
      "meta,",
      "{ \"og:title\": \"\" },",
      "meta,",
      "{",
      "  \"og:description\": \"\",",
      "},",
      "meta,",
      "{",
      "  \"og:image\": /images/.jpg,",
      "},"
    ],
    "description": "Set prev and next articles"
  }
}

Vous pouvez l’utiliser directement dans votre frontmatter pour ajouter les métatags à votre convenance.

Vous pouvez aussi ajouter au snippet le lien canonical, recommandé sur toutes les pages et les métatags twitter et utilise des variables pour écrire une fois le titre ou la description.

Conclusion

Voilà, c’est fait. Pas de plugin fantaisiste ni d’installation complexe.

Vous pouvez utiliser Vuepress et le thème de Mr Hope et construire aujourd’hui votre blog avec un bon référencement prêt à l’emploi !

J’ai construit un kit de démarrage ici pour les anglophones et là pour les francophones.

À vous de jouer !

Crédit : Photo de Pixabay