Données structurées et favicons

Trois parties de meta relèvent moins des mots que des machines : le JSON-LD qui décrit la page aux moteurs de recherche, les icônes qui la représentent dans un navigateur, et les indications qui accélèrent son chargement.

structuredData

Émis sous forme d'un bloc <script type="application/ld+json">. Il accepte du JSON-LD Schema.org brut, tel quel :

meta:
  structuredData:
    '@context': https://schema.org
    '@type': Article
    headline: '$record.title'
    author: { '@type': Person, name: '$record.author' }
    image: '$record.cover'
    datePublished: '$record.published_at'

Schéma d'article synthétisé

Un répertoire de contenu peut plutôt générer le JSON-LD de chaque article depuis son frontmatter — c'est ainsi que procède cette documentation. Fournissez la forme objet et le synthétiseur prend le relais :

Propriété	Description
enabled	Doit valoir exactement true. Toute autre valeur laisse la synthèse désactivée.
type	TechArticle (défaut) ou Article.
breadcrumbs	Émettre un BreadcrumbList à côté de l'article. true par défaut.
organization	Nom de l'organisation, émis comme publisher de l'article.

meta:
  structuredData:
    enabled: true
    type: TechArticle
    breadcrumbs: true
    organization: Sovrium

Titre, description et date de publication proviennent du frontmatter de chaque fichier : une seule déclaration couvre donc tous les articles du répertoire.

favicons

Les favicons acceptent deux formes. La forme objet est la plus concise :

Propriété	Description
icon	Chemin de l'icône par défaut.
appleTouchIcon	Icône d'écran d'accueil iOS.
sizes	Icônes par taille, chacune { size, href }.

meta:
  favicons:
    icon: ./favicon.svg
    appleTouchIcon: ./apple-touch-icon.png
    sizes:
      - { size: '32x32', href: ./favicon-32.png }
      - { size: '16x16', href: ./favicon-16.png }

La forme tableau donne une entrée par balise de lien, et c'est la seule façon de déclarer une icône de masque pour les onglets épinglés de Safari :

Propriété	Description
rel	Obligatoire. icon, apple-touch-icon, manifest ou mask-icon.
href	Obligatoire. Chemin, qui doit commencer par ./.
type	Type MIME.
sizes	Taille au format LxH.
color	Couleur de teinte, utilisée par mask-icon.

meta:
  favicons:
    - { rel: icon, href: ./favicon.svg, type: image/svg+xml }
    - { rel: mask-icon, href: ./mask.svg, color: '#6366f1' }

Pour une icône unique et rien d'autre, le meta.favicon au singulier prend un simple chemin.

Indications de performance

preload

Les ressources critiques à récupérer tôt, sous forme de tableau.

Propriété	Description
href	Obligatoire. URL de la ressource.
as	Obligatoire. style, script, font, image, video, audio, document ou fetch.
type	Type MIME.
crossorigin	true, anonymous ou use-credentials.
media	Requête média restreignant l'application du préchargement.

Précharger une police est le cas le plus rentable : cela retire du chemin critique un aller-retour qui, sinon, ne démarrerait qu'après l'analyse de la feuille de style.

dnsPrefetch

Un simple tableau d'origines à résoudre à l'avance — sans encapsulation objet :

meta:
  preload:
    - { href: /fonts/inter.woff2, as: font, type: font/woff2, crossorigin: anonymous }
  dnsPrefetch:
    - 'https://cdn.example.com'

customElements

Tout ce dont l'en-tête a besoin par ailleurs, sous forme de tableau de balises.

Propriété	Description
type	Obligatoire. meta, link, script, style ou base.
attrs	Attributs sous forme de table clé-valeur.
content	Contenu textuel, pour script et style.

meta:
  customElements:
    - { type: meta, attrs: { name: theme-color, content: '#0f172a' } }

Pages connexes

• SEO et métadonnées — titre, description, Open Graph, cartes Twitter.
• Collections et markdown — les répertoires de contenu concernés par la synthèse.
• Scripts — charger du JavaScript, par opposition à le suggérer.
• Écoconception — l'argument d'empreinte pour moins de requêtes, plus tôt.