Découvrez le nouveau système de métadonnées de Next.js 13.2 avec support SEO
Table des matières
- Introduction
- Explication du nouveau système de métadonnées
- Utilisation du fichier de mise en page pour les métadonnées
- Les clés principales des métadonnées
- 4.1 Titre
- 4.2 Modèles de titre
- 4.3 Description
- 4.4 Mots-clés
- 4.5 Graphique ouvert
- 4.6 Robots
- 4.7 Icônes
- 4.8 Couleur du thème
- 4.9 Extension Web
- 4.10 Médias sociaux
- Exemples d'utilisation des métadonnées
- Changer de balise
<head> à const metadata
- Éviter les erreurs lors de la mise à niveau vers 13.2
- Avantages et inconvénients du nouveau système de métadonnées
- Conclusion
- Ressources supplémentaires
👉 Explication du nouveau système de métadonnées
Le système de métadonnées a été mis à jour dans la version 13.2 de Next. Avant cette mise à jour, les métadonnées étaient stockées dans un fichier spécial appelé "head.js". Cependant, dans la version 13.3, le fichier "head.js" a été supprimé et n'est plus pris en charge. Au lieu de cela, les métadonnées sont maintenant gérées dans le fichier de mise en page lui-même.
Le fichier de mise en page contient désormais une exportation de la constante "metadata" qui stocke toutes les métadonnées pour la page respective. Ce nouveau système offre plus de flexibilité et de contrôle sur les métadonnées de votre site.
Les clés principales des métadonnées
4.1 Titre
La clé "titre" est utilisée pour contrôler le nom de votre site et l'onglet dans le navigateur. Vous pouvez définir un titre personnalisé pour chaque page en utilisant cette clé dans le fichier de mise en page.
4.2 Modèles de titre
Les modèles de titre vous permettent de définir un titre par défaut pour toutes les pages de votre application, puis de le mettre à jour individuellement pour chaque page si nécessaire. Cela peut être utile si vous ne souhaitez pas créer un nouveau fichier de mise en page pour chaque page et que vous voulez simplement mettre à jour une partie du titre.
4.3 Description
La clé "description" est utilisée pour spécifier la description de la page. Celle-ci peut être affichée dans les résultats de recherche de Google et sur la page elle-même. Si aucune description n'est spécifiée pour une page, la description de la mise en page utilisée sera affichée à la place.
4.4 Mots-clés
Les mots-clés sont utilisés pour aider les moteurs de recherche à comprendre le contenu de votre page. Vous pouvez spécifier des mots-clés pertinents à l'aide de la clé "mots-clés". Cela peut contribuer à améliorer le classement de votre page dans les résultats de recherche.
4.5 Graphique ouvert
La clé "graphique ouvert" permet à toute page Web de devenir un objet enrichi dans un graphique social. Vous pouvez spécifier des éléments tels que le titre, la description, l'URL et les images pour les médias sociaux.
4.6 Robots
La clé "robots" vous permet de contrôler le comportement des robots sur votre page. Par exemple, vous pouvez indiquer à Googlebot d'indexer votre site en utilisant la clé "Googlebot" avec la valeur "index" définie sur "true".
4.7 Icônes
Vous pouvez spécifier les icônes du site, telles que les favicon et les icônes Apple, en utilisant la clé "icônes". Vous pouvez trouver des exemples de configurations d'icônes dans la documentation.
4.8 Couleur du thème
Si vous souhaitez définir une couleur de thème spécifique pour une page particulière, vous pouvez utiliser la clé "couleur du thème". Cela peut être utile pour personnaliser l'apparence de votre application.
4.9 Extension Web
Si vous utilisez des API d'extension Web, vous pouvez les configurer en utilisant la clé "Manifeste". Le fichier "manifest.json" est requis pour toutes les extensions utilisant les API d'extension Web.
4.10 Médias sociaux
Il existe également des balises méta spécifiques aux médias sociaux telles que Twitter. Vous pouvez créer une clé "Twitter" et définir les valeurs pour le titre, la description, l'ID du site et diverses autres propriétés spécifiques à Twitter.
Exemples d'utilisation des métadonnées
Pour mieux comprendre comment utiliser les métadonnées dans Next 13.2 et versions ultérieures, voici quelques exemples :
-
Exemple de mise à jour du titre de votre site :
export const metadata = {
title: 'Mon site Next',
// ...
};
-
Exemple de mise à jour du titre et de la description d'une page spécifique :
export const metadata = {
title: 'À propos de la page',
description: 'Une brève description de la page',
// ...
};
-
Exemple d'utilisation de mots-clés :
export const metadata = {
keywords: ['Next JS', 'JavaScript', 'métadonnées'],
// ...
};
N'hésitez pas à consulter la documentation pour plus d'exemples et d'informations sur toutes les clés disponibles dans les métadonnées.
Changer de balise <head> à const metadata
Il est important de noter que le balisage de <head> ne fonctionne plus à partir de Next 13.2 et versions ultérieures. Par conséquent, il est recommandé d'utiliser le nouveau système de métadonnées en remplaçant les balises <head> par l'exportation de la constante "metadata" dans vos fichiers de mise en page.
Assurez-vous de faire cette transition pour éviter toute erreur potentielle lors de la mise à niveau vers 13.2 ou version ultérieure. Si vous avez encore des balises <head> dans votre répertoire d'application lors de la mise à niveau, cela pourrait entraîner des problèmes de compatibilité.
Avantages et inconvénients du nouveau système de métadonnées
Comme avec tout changement de système, il y a des avantages et des inconvénients à prendre en compte. Voici quelques points clés à considérer :
Avantages :
- Plus de flexibilité et de contrôle sur les métadonnées de votre site
- Possibilité de définir des métadonnées spécifiques pour chaque page
- Simplification de la gestion des métadonnées en les regroupant dans le fichier de mise en page
- Meilleure optimisation pour les moteurs de recherche grâce à des mots-clés et des descriptions personnalisés
Inconvénients :
- Nécessite une transition et une mise à jour du code existant
- Les anciens fichiers "head.js" ne sont plus pris en charge
- Possibilité de briser le site si la mise à jour n'est pas effectuée correctement
Cependant, malgré quelques inconvénients potentiels, le nouveau système de métadonnées offre de nombreux avantages et améliorations par rapport à l'ancien système.
Conclusion
Dans cet article, nous avons exploré le nouveau système de métadonnées dans Next 13.2 et versions ultérieures. Nous avons appris comment utiliser le fichier de mise en page pour stocker les métadonnées, ainsi que les différentes clés disponibles et leur utilisation.
La transition vers ce nouveau système est nécessaire pour garantir une compatibilité optimale avec les futures versions de Next. Assurez-vous de prendre le temps de mettre à jour votre code existant et de profiter des avantages offerts par ce système amélioré de métadonnées.
🔗 Ressources supplémentaires :
FAQ :
Q: Est-ce que la balise <head> fonctionne toujours dans Next 13.2 ?
R: Non, à partir de Next 13.2, la balise <head> est obsolète et ne fonctionne plus. Vous devez utiliser le nouveau système de métadonnées avec const metadata dans vos fichiers de mise en page.
Q: Dois-je mettre à jour tous mes fichiers de mise en page pour utiliser les métadonnées ?
R: Oui, vous devez mettre à jour tous vos fichiers de mise en page pour utiliser les métadonnées. Assurez-vous de remplacer les balises <head> par l'exportation de la constante "metadata".
Q: Puis-je spécifier des descriptions et des mots-clés personnalisés pour chaque page ?
R: Oui, vous pouvez spécifier des descriptions et des mots-clés personnalisés pour chaque page en utilisant les clés appropriées dans la constante "metadata" de chaque fichier de mise en page.
Q: Quels avantages offre le nouveau système de métadonnées ?
R: Le nouveau système de métadonnées offre plus de flexibilité et de contrôle sur les métadonnées de votre site. Vous pouvez définir des métadonnées spécifiques pour chaque page, simplifier la gestion des métadonnées et améliorer l'optimisation pour les moteurs de recherche.
Q: Que se passe-t-il si je ne mets pas à jour mon code lors de la mise à niveau vers 13.2 ?
R: Si vous ne mettez pas à jour votre code et que vous avez encore des balises <head> dans votre répertoire d'application, cela pourrait entraîner des problèmes de compatibilité. Il est important de faire la transition vers le nouveau système de métadonnées pour éviter ces problèmes potentiels.
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
