Skip to main content
View as Markdown

SEO et métadonnées

La propriété meta au niveau de la page contrôle tout ce qui est rendu dans le <head> du document : le titre et la description, les cartes de partage social, les données structurées, les favicons et les indices de performance. Les métadonnées prennent en charge la substitution $record.* et $frontmatter.*, de sorte que les pages de collection et markdown produisent automatiquement un SEO par enregistrement.

pages:
  - name: Blog Post
    path: /blog/:slug
    collection: { table: posts, slugField: slug }
    meta:
      title: '$record.title'
      description: '$record.excerpt'
      openGraph: { type: article, image: '$record.cover' }
      twitter: { card: summary_large_image }

Métadonnées principales

Propriété Description
title Titre de la page pour l'onglet du navigateur et le SEO (max ~60 caractères pour un affichage optimal).
description Description de la page pour le SEO et le partage social (max ~160 caractères).
keywords Mots-clés SEO séparés par des virgules.
author Nom de l'auteur de la page ou de l'organisation.
canonical URL canonique pour prévenir les problèmes de contenu dupliqué.
robots Directives pour les robots (p. ex. noindex, nofollow).
noindex Raccourci pour robots: noindex — empêche l'indexation par les moteurs de recherche.
lang Code de langue de la page (ISO 639-1 avec pays optionnel ; détecté automatiquement si omis).
image Image de partage social par défaut (raccourci alimentant aussi Open Graph/Twitter).
siteName Nom du site (raccourci pour openGraph.siteName).
stylesheet Chemin vers la feuille de style principale.
googleFonts URL Google Fonts.
translations Métadonnées localisées (title/description traduits) par langue.

openGraph

Métadonnées du protocole Open Graph pour un partage enrichi sur les réseaux sociaux.

Propriété Description
type Type d'objet Open Graph (p. ex. website, article).
title Titre OG (peut différer du titre de la page).
description Description OG.
url URL canonique pour cette page.
image URL de l'image pour le partage social (recommandé 1200×630px).
imageAlt Texte alternatif pour l'image OG.
siteName Nom du site web global.
locale Locale au format language_TERRITORY.
video URL vidéo lors du partage de contenu vidéo.
audio URL audio lors du partage de contenu audio.

twitter

Métadonnées de carte Twitter/X.

Propriété Description
card Type de carte (summary, summary_large_image, app, player).
title Titre de la carte Twitter.
description Description de la carte Twitter.
image URL de l'image (min 144×144 pour summary, 300×157 pour large).
imageAlt Texte alternatif pour l'image.
site @username Twitter du site web.
creator @username Twitter du créateur de contenu.
player URL HTTPS vers un lecteur vidéo plus width/height (cartes player).
app Nom de l'application, identifiants de magasin et URL de lien profond pour les cartes app.

structuredData

Données structurées JSON-LD Schema.org émises comme un bloc <script type="application/ld+json">. Les assistants pris en charge incluent Article, Organization et PostalAddress.

Propriété Description
@context Contexte Schema.org (https://schema.org).
@type Type Schema.org (p. ex. Article, Organization, Product).
... Champs spécifiques au type — p. ex. pour Article : headline, author ({ name, url }), publisher ({ name, logo }), image, dates. 
meta:
  structuredData:
    '@context': https://schema.org
    '@type': Article
    headline: '$record.title'
    author: { name: '$record.author', url: '$record.author_url' }
    image: '$record.cover'

favicons

Configuration des favicons pour les navigateurs et les appareils.

Propriété Description
default Chemin de l'icône par défaut (SVG ou ICO).
apple Icône d'écran d'accueil iOS.
sizes Favicons spécifiques à une taille ({ src, sizes, type }, p. ex. 32×32, 16×16).
maskIcon Chemin et couleur de l'icône de masque d'onglet épinglé Safari.

Indices de performance

Indices de ressources injectés dans l'en-tête pour accélérer le chargement.

Propriété Description
preload Ressources critiques à précharger — chacune { href, as, type?, media?, crossorigin? }.
dnsPrefetch Domaines à préextraire via DNS (tableau de domaines).
customHead Éléments <head> personnalisés supplémentaires ({ tag, attributes, content }). 
meta:
  preload:
    - { href: /fonts/inter.woff2, as: font, type: font/woff2, crossorigin: anonymous }
  dnsPrefetch: ['https://cdn.example.com']
  favicons:
    default: /favicon.svg
    apple: /apple-touch-icon.png

Pages connexes