Découvrez la nouvelle API de métadonnées de Next.js 13 avec support SEO

Table of Contents

1. Introduction 🌟
2. Qu'est-ce que Next 13 ? 😮
3. L'évolution des fonctionnalités de Next 13 🔄
4. La suppression du fichier head.js 🗑️
5. Utilisation du fichier layout.js pour les métadonnées 📄
6. Les clés disponibles dans l'objet metadata 🔑
   • 6.1. La clé "title"
   • 6.2. Les modèles de titre
   • 6.3. La clé "description"
   • 6.4. La clé "keywords"
   • 6.5. La clé "open graph"
   • 6.6. La clé "robots"
   • 6.7. La clé "icons"
   • 6.8. La clé "theme color"
   • 6.9. La clé "Manifest"
   • 6.10. Les balises de méta Twitter
   • 6.11. La clé "app"
   • 6.12. La clé "viewport"
   • 6.13. Autres clés disponibles
7. Mise à jour vers Next 13.2 et ultérieurs ⬆️
8. FAQ ❓
9. Conclusion 🎉
10. Ressources ℹ️

Introduction 🌟

Dans cette vidéo, nous allons parler de la dernière version de Next, Next 13, et plus précisément des changements apportés aux métadonnées. Si vous avez récemment créé une application Next 13 et que vous avez remarqué l'absence du fichier head.js, ne vous inquiétez pas ! Dans la version 13.3, ce fichier a été supprimé et les métadonnées sont désormais stockées dans le fichier layout.js. Nous allons explorer ensemble cette nouvelle fonctionnalité et vous montrer comment l'utiliser pour personnaliser les métadonnées de votre site Next.

Qu'est-ce que Next 13 ? 😮

Avant de plonger dans les détails des métadonnées, il est important de comprendre ce qu'est Next 13. Next est un framework JavaScript populaire utilisé pour le développement d'applications web. La version 13 introduit de nouvelles fonctionnalités et améliorations, rendant le développement d'applications plus fluide et efficace.

L'évolution des fonctionnalités de Next 13 🔄

Dans les versions précédentes de Next, le fichier head.js était utilisé pour stocker les métadonnées de votre site, telles que le titre de la page et la description. Cependant, avec la sortie de Next 13.2, ce fichier a été déprécié et finalement supprimé dans les versions ultérieures. La raison derrière ce changement est d'améliorer la gestion des métadonnées et de rendre le code plus clair et structuré.

La suppression du fichier head.js 🗑️

Si vous utilisez une version de Next postérieure à 13.2, vous constaterez que le fichier head.js n'est plus présent dans le répertoire de votre application. Cela signifie que vous devez abandonner l'utilisation de ce fichier pour stocker vos métadonnées. Mais ne vous inquiétez pas, il existe une nouvelle méthode pour gérer vos métadonnées dans la version 13.2 et les versions ultérieures.

Utilisation du fichier layout.js pour les métadonnées 📄

Dans la version 13.2 et ultérieure de Next, les métadonnées sont stockées dans le fichier layout.js. En ouvrant ce fichier dans le répertoire de votre application, vous verrez une exportation nommée "const metadata". C'est ici que vous pouvez définir les métadonnées de votre site.

Les clés disponibles dans l'objet metadata 🔑

L'objet metadata contient plusieurs clés qui vous permettent de personnaliser les métadonnées de votre site. Voici quelques-unes des clés les plus importantes :

6.1 La clé "title"

La clé "title" contrôle le nom de votre site et l'onglet du navigateur. Par exemple, en définissant "My Next Site" comme valeur de la clé "title", le texte dans l'onglet du navigateur sera mis à jour en conséquence.

6.2 Les modèles de titre

Next vous permet également de définir des modèles de titre. Cela vous permet d'avoir un modèle de titre par défaut pour toutes les pages de votre site, et de le mettre à jour en fonction des besoins spécifiques de chaque page.

6.3 La clé "description"

La clé "description" vous permet de spécifier une description pour votre page. Cette description peut apparaître dans les résultats de recherche de Google ou dans d'autres contextes où la description de la page est nécessaire.

6.4 La clé "keywords"

La clé "keywords" vous permet de spécifier des mots clés qui aident les moteurs de recherche à comprendre le contenu de votre page. Ces mots clés peuvent être utiles pour améliorer le classement de votre site dans les résultats de recherche.

6.5 La clé "open graph"

La clé "open graph" permet à votre page web de devenir un objet riche dans un graphe social. Vous pouvez spécifier des informations telles que le titre, la description, l'URL et les images à afficher lorsque votre page est partagée sur les réseaux sociaux.

6.6 La clé "robots"

La clé "robots" vous permet de contrôler le comportement des robots sur votre page. Par exemple, vous pouvez utiliser la clé "Google bot" pour autoriser ou interdire l'indexation de votre site par Google.

6.7 La clé "icons"

La clé "icons" vous permet de spécifier les icônes associées à votre site, telles que les icônes favorites et les icônes Apple.

6.8 La clé "theme color"

La clé "theme color" vous permet de définir la couleur du thème pour une page spécifique. Cette couleur peut être utilisée par le navigateur ou d'autres applications pour personnaliser l'apparence de votre site.

6.9 La clé "Manifest"

Si vous utilisez des API d'extension Web, vous pouvez utiliser la clé "Manifest" pour spécifier les caractéristiques de votre extension.

6.10 Les balises de méta Twitter

Next prend également en charge les balises de méta spécifiques aux réseaux sociaux comme Twitter. Vous pouvez créer une clé "Twitter" et définir toutes les valeurs nécessaires, telles que le titre, la description, les images, etc.

6.11 La clé "app"

La clé "app" vous permet de spécifier le nom, l'ID et l'URL de votre application.

6.12 La clé "viewport"

Vous pouvez utiliser la clé "viewport" pour définir les propriétés de la fenêtre d'affichage de votre site.

6.13 Autres clés disponibles

Il existe de nombreuses autres clés disponibles dans l'objet metadata, vous permettant de personnaliser davantage les métadonnées de votre site. Vous pouvez consulter la documentation pour plus de détails.

Mise à jour vers Next 13.2 et ultérieurs ⬆️

Si vous utilisez une version antérieure à Next 13.2, il est recommandé de mettre à jour vers la dernière version pour bénéficier de toutes les fonctionnalités et améliorations, y compris la nouvelle méthode de gestion des métadonnées. Cependant, assurez-vous de supprimer tous les fichiers head.js de votre application, car ils ne sont plus pris en charge.

FAQ ❓

Q: Dois-je modifier manuellement mes métadonnées pour passer à Next 13.2 ? A: Oui, vous devrez transférer vos métadonnées du fichier head.js vers le fichier layout.js. Assurez-vous de suivre les instructions fournies dans la documentation de Next pour effectuer cette transition en douceur.

Q: Puis-je toujours utiliser des modèles de titre personnalisés pour mes pages ? A: Oui, Next vous permet de définir des modèles de titre personnalisés pour chaque page de votre site. Vous pouvez mettre à jour ces modèles directement dans le fichier layout.js ou les spécifier individuellement dans chaque page si vous préférez.

Q: Quelles sont les autres fonctionnalités disponibles dans Next 13.2 ? A: Next 13.2 introduit de nombreuses autres fonctionnalités et améliorations, telles que l'amélioration des performances, le support des dernières versions de JavaScript et bien plus encore. Nous vous invitons à consulter la documentation de Next pour obtenir la liste complète des nouveautés.

Conclusion 🎉

Dans cette vidéo, nous avons exploré les nouvelles fonctionnalités de Next 13, en mettant l'accent sur la gestion des métadonnées. Nous avons vu comment le fichier head.js a été supprimé et comment utiliser le fichier layout.js pour personnaliser les métadonnées de votre site. En suivant ces instructions, vous pourrez profiter pleinement des avantages de Next 13. N'oubliez pas de consulter la documentation officielle de Next pour plus d'informations et de conseils. À bientôt !

Ressources ℹ️

• Documentation officielle de Next : lien vers la documentation
• Tutoriel vidéo sur les métadonnées avec Next 13 : lien vers la vidéo