Le guide complet des balises meta de Next.js 15 — De og:image à hreflang

> Résumé essentiel >

> - Next.js 15 peut gérer de manière déclarative les balises meta statiques et dynamiques via l'API Metadata basée sur l'App Router.

> - La fonction generateMetadata() permet la génération automatique d'og:image, de titre et de description dynamiques par page. > - Twitter Card, hreflang, URL canonique et données structurées (JSON-LD) peuvent tous être contrôlés depuis un seul fichier. > - Des balises meta mal configurées conduisent directement à des erreurs d'aperçu social et à des chutes de classement dans les recherches, vérifiez donc toujours avec le Vérificateur de balises meta avant le déploiement.

---

Réponse rapide : Vous pouvez gérer efficacement les balises meta avec l'API Metadata dans Next.js 15.

Qu'est-ce que l'API Metadata de Next.js 15 ?

L'App Router introduit dans Next.js 13 fournit une API Metadata qui remplace l'ancienne approche du composant . Dans Next.js 15, cette API est devenue encore plus aboutie, vous permettant de contrôler les balises meta de deux manières depuis les fichiers layout.tsx et page.tsx : en exportant un objet metadata ou en utilisant la fonction generateMetadata().

Metadata statiques

La forme la plus simple consiste à exporter directement un objet metadata.

```tsx // app/page.tsx import type { Metadata } from 'next'

export const metadata: Metadata = { title: 'Guide des balises meta Next.js 15', description: 'Tout sur les balises meta Next.js, d’og:image à hreflang', } ```

Cette approche convient aux pages statiques dont le contenu est finalisé au moment du build — par exemple, une page d'accueil de blog ou une page « à propos » dont le contenu ne change pas fréquemment.

Metadata dynamiques : generateMetadata()

Pour les pages dont le contenu varie selon les paramètres d'URL — comme les articles de blog ou les pages détaillées de produit — utilisez la fonction generateMetadata().

```tsx // app/blog/[slug]/page.tsx import type { Metadata, ResolvingMetadata } from 'next'

type Props = { params: { slug: string } }

export async function generateMetadata( { params }: Props, parent: ResolvingMetadata ): Promise { const post = await fetchPost(params.slug)

return { title: post.title, description: post.excerpt, openGraph: { title: post.title, description: post.excerpt, images: [{ url: post.ogImage, width: 1200, height: 630 }], }, } ```

Comme generateMetadata() s'exécute côté serveur, elle peut effectuer des requêtes en base de données et des appels d'API externes. Elle renvoie une valeur de type Metadata, et Next.js l'injecte automatiquement dans la balise .

---

Comment configurer correctement og:image ?

Les images Open Graph sont les images d'aperçu qui apparaissent lorsqu'un lien est partagé sur des plateformes sociales comme KakaoTalk, Slack et Twitter. Mal configurées, des images vides ou des mises en page cassées seront affichées, ce qui réduit considérablement les taux de clic.

Configuration de base d'og:image

``tsx export const metadata: Metadata = { openGraph: { title: 'Titre de la page', description: 'Description de la page', url: 'https://example.com/blog/my-post', siteName: 'Nom du site', images: [ { url: 'https://example.com/og/my-post.png', width: 1200, height: 630, alt: 'Image représentative de l’article', }, ], locale: 'fr_FR', type: 'article', }, } ``

Génération dynamique d'og:image dans Next.js — ImageResponse

Next.js 15 prend en charge le rendu dynamique d'images OG côté serveur via ImageResponse de next/og. Vous pouvez contrôler entièrement le design dans le code sans aucune édition d'image séparée.

```tsx // app/og/route.tsx import { ImageResponse } from 'next/og'

export const runtime = 'edge'

export async function GET(request: Request) { const { searchParams } = new URL(request.url) const title = searchParams.get('title') ?? 'Titre par défaut'

return new ImageResponse( (

), { width: 1200, height: 630 } ) } ```

Vous pouvez ensuite référencer ce point d'accès dans generateMetadata().

``tsx images: [{ url: https://example.com/og?title=${encodeURIComponent(post.title)} }] ``

Configuration de la Twitter Card

Twitter (désormais X) utilise sa propre spécification de balises meta, mais l'API Metadata de Next.js consolide cela sous la clé twitter.

``tsx export const metadata: Metadata = { twitter: { card: 'summary_large_image', title: 'Titre de la page', description: 'Description de la page', creator: '@handle', images: ['https://example.com/og/my-post.png'], }, } ``

La valeur de card peut être summary, summary_large_image, app ou player. Pour les articles de blog, summary_large_image est le choix le plus approprié.

---

Comment finaliser le SEO multilingue avec hreflang

Les balises hreflang signalent aux moteurs de recherche à quelle langue et à quelle région chaque version d'un même contenu est destinée. Si vous exploitez à la fois des versions coréenne et anglaise d'un site, cela doit être configuré. Sans cela, Google peut traiter les pages spécifiques à une langue comme du contenu en double et pénaliser leur visibilité dans les recherches.

Configuration de hreflang avec alternates

``tsx export const metadata: Metadata = { alternates: { canonical: 'https://example.com/ko/blog/my-post', languages: { 'ko-KR': 'https://example.com/ko/blog/my-post', 'en-US': 'https://example.com/en/blog/my-post', 'ja-JP': 'https://example.com/ja/blog/my-post', }, } ``

Sur la base de cette configuration, Next.js génère automatiquement les balises suivantes.

``html ``

Pourquoi la configuration de l'URL canonique est importante

Une balise URL canonique indique aux moteurs de recherche « cette URL est l'originale » lorsque du contenu identique ou similaire existe à plusieurs URL. Lorsque des URL en double surviennent à cause de la pagination, des paramètres UTM, des différences www vs sans-www, et autres cas similaires, omettre une balise canonique provoque le partage des signaux de classement entre les URL.

``tsx alternates: { canonical: 'https://example.com/blog/my-post', } ``

Utilisez des chemins absolus et maintenez la cohérence HTTPS et www (avec ou sans www) sur l'ensemble du site.

---

Obtenir des résultats enrichis avec les données structurées (JSON-LD)

Les données structurées activent les résultats enrichis dans la recherche, affichant des informations supplémentaires telles que les évaluations étoiles, les auteurs et les dates de publication. Dans Next.js, l'approche recommandée consiste à insérer directement une balise `