# 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 :

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

:::callout
**`structuredData` est transmis sans validation.** Contrairement au reste de `meta`, son contenu n'est pas vérifié par le schéma — un `@type` malformé ou une propriété mal orthographiée est expédié silencieusement. Validez le bloc émis avec le test des résultats enrichis de Google plutôt que de compter sur `sovrium validate`.
:::

### Schéma d'article synthétisé

Un [répertoire de contenu](/fr/docs/pages-collections#contentdir) 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.                      |

```yaml
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 }`. |

```yaml
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`.                            |

```yaml
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 :

```yaml
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`.                    |

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

## Pages connexes

- [SEO et métadonnées](/fr/docs/seo-meta) — titre, description, Open Graph, cartes Twitter.
- [Collections et markdown](/fr/docs/pages-collections) — les répertoires de contenu concernés par la synthèse.
- [Scripts](/fr/docs/interactivity-scripts) — charger du JavaScript, par opposition à le suggérer.
- [Écoconception](/fr/docs/ecoconception) — l'argument d'empreinte pour moins de requêtes, plus tôt.