Les titres de page, les balises méta et les méta descriptions sont importants pour le référencement. Ce sont les premières choses qu'un utilisateur voit sur le SERPS et déterminent s'il clique sur votre site Web. Il est donc important d'optimiser les titres, les balises méta et la description de votre site Web.
Dans Next.js, vous les ajoutez via le composant head personnalisé. Vous pouvez soit les ajouter sur toutes les pages de l'application, soit les personnaliser pour chaque page.
Ajout d'une balise d'en-tête globale à toutes les pages Next.js
Next.js fournit _app.js pour initialiser les pages. Vous pouvez l'utiliser pour créer des balises méta partagées sur toutes les pages.
importer '../styles/globals.css'
importer Diriger depuis 'suivant/tête'fonctionMonApp({ Composant, pageProps }) {
retour <>
<Diriger>
<méta nom="auteur" contenu="Jean Doe"/>
</Head>
<Composant {...pageProps} />
</>
}
exporterdéfaut MonApp
Si vous souhaitez qu'une page ait un titre et une description personnalisés, ajoutez-y le composant head et Next.js l'utilisera à la place de celui par défaut dans le composant App.
Ajouter des balises Meta et une description à une page Next.js spécifique
Les balises méta statiques et les descriptions conviennent aux pages dont le contenu reste le même, par exemple une page d'accueil.
Ouvrez le fichier /pages/index.js et modifiez la balise head avec le titre et la description appropriés.
importer Diriger depuis "suivant/tête" ;constante Accueil= () => {
retour (
<>
<Diriger>
<titre>Blog</title>
<méta nom="fenêtre" contenu="échelle-initiale=1.0, largeur=largeur de l'appareil" />
<méta nom='description' contenu='Articles de programmation'/>
</Head>
<principal>
<h1>Bienvenue sur mon blog!</h1>
</main>
</>
);
};
exporterdéfaut Maison;
Vous accédez au composant Head en l'important depuis next/head. Cela fonctionne en ajoutant des éléments à la balise head de une page HTML. Selon l'endroit où vous placez ce composant, les balises META et la description seront disponibles dans l'ensemble de l'application ou sur des pages individuelles.
L'ajout du titre, de la largeur de la fenêtre d'affichage et de la description dans le fichier _app.js garantit que toutes les pages ont les mêmes métadonnées.
Cette page a un contenu statique, mais parfois, vous souhaiterez peut-être créer des pages qui consomment du contenu dynamique.
Ajout de méta-titres dynamiques et de descriptions à une page Next.js
Selon le cas d'utilisation, vous pouvez utiliser getStaticProps(), getStaticPaths() ou getServerSideProps() pour récupérer des données dans Next.js. Ces données déterminent le contenu de la page. Utilisez-le pour créer les métadonnées de la page.
Par exemple, la création des métadonnées pour l'application Next.js qui rend les articles de blog serait fastidieuse.
La méthode recommandée est de créer une page dynamique qui reçoit un identifiant que vous pouvez utiliser pour récupérer le contenu du blog. Vous pouvez ensuite utiliser ce contenu dans le composant head.
importer { getAllPosts, getSinglePost } depuis "../../utils/mdx" ;
importer Diriger depuis "suivant/tête" ;constante Message = ({ titre, description, contenu }) => {
retour (
<>
<Diriger>
<titre>{titre}</title>
<méta nom="description" contenu={description} />
</Head>
<principal>{/* Contenu de la page */}</main>
</>
);
};exporterconstante getStaticProps = asynchrone ({ paramètres }) => {
// obtenir un seul message
constante poste = attendre getSinglePost (params.id, "messages");retour {
accessoires: { ...poster },
};
};exporterconstante getStaticPaths = asynchrone () => {
// Récupérer tous les articles
chemins const = getAllPosts("des postes").map(({ identifiant }) => ({ params: { id } }) );retour {
chemins,
se retirer: FAUX,
};
};
exporterdéfaut Poste;
La fonction getStaticProps transmet les données de publication au composant Post en tant qu'accessoires. Le composant Post déstructure le titre, la description et le contenu des accessoires. Le composant principal utilise ensuite le titre et la description dans les balises META.
Next.js est un framework optimisé
Vous venez d'apprendre à utiliser le composant head pour ajouter des méta-titres et des descriptions à un projet Next.js. Utilisez ces connaissances pour créer des en-têtes optimisés pour le référencement, grimper dans les SERP et attirer plus de visiteurs sur votre site.
Outre le composant principal, Next.js fournit d'autres composants tels que Link et Image. Ces composants sont optimisés dès le départ, ce qui facilite la création de sites Web rapides et optimisés pour le référencement.