SEO avec le routeur app de NextJS : Metadata, Robots, Sitemap…

L'amélioration du référencement était l'une des principales promesses de Next JS. Celles-ci ont été réitérées avec la version 13 et le routeur app.

Parmi ces améliorations on compte une plus grande rapidité et une réduction du javascript grâce aux composants serveur React. Mais certaines fonctionnalités du routeur app visent à répondre directement aux besoins en matière de référencement.

Plongeons donc dans l'aventure et explorons-les :

premièrement, comment générer des Metadata
deuxièmement, comment créer le contenu des Robots et du Sitemap
troisièmement, comment créer des données structurées

Entrons dans le vif du sujet !

Metadata

NextJS génère des metadata via des fonctions additionnelles dans le fichier page.tsx. La fonction generateMetadata a la même signature d'appel que la fonction composant. Cependant, au lieu de retourner du JSX, la fonction retourne un objet avec des paires clé-valeur. Et ces paires définissent les metadata à injecter dans l'en-tête du document.

Ici, par exemple, nous avons le titre et la description :


import { Metadata } from 'next' ;

/*....*/

export async function generateMetadata( {params : {lang}} : PageProps ):Promise<Metadata> {

  return {
    title : 'Page d'accueil de Kodaps',
    description : "Apprenez tout sur le génie logiciel
  } ;

}

Robots et cartes de site

Définir le fichier Robots.txt avec NextJS

Les contenus Robots et SiteMap sont générés un peu comme une page. Pour le contenu Robots (qui indique aux robots des moteurs de recherche où se pencher), vous créez un fichier robots.ts à la racine de votre dossier app. Ce fichier exporte une fonction par défaut. La fonction renvoie un objet qui définit le contenu du fichier robots :

 
import { MetadataRoute } from 'next' ;

export default function robots() : MetadataRoute.Robots {
  return {
    rules : {
      userAgent : '*',
      allow : '/',
      disallow : '/private/',
    },
    sitemap : 'https://kodaps.dev/sitemap.xml',
  } ;
}

Le fichier robots suivant est ainsi généré :

User-Agent : *
Allow : /
Disallow : /private/
Sitemap : https://kodaps.dev/sitemap.xml

Créer des sitemaps dynamiques avec NextJS

Le fichier sitemap.ts suit un principe similaire en renvoyant des données qui définissent le contenu du sitemap. Permettez-moi de vous guider à travers mon code :

Tout d'abord, j'importe le type de metadata route, appelé MetadataRoute, de next :

import { MetadataRoute } from 'next' ;

Ensuite, je définis une fonction exportée par défaut, qui renvoie une promise de données Sitemap :


export default async function sitemap() : Promise<MetadataRoute.Sitemap> {
}

Dans cette fonction, je définis une constante appelée urlList. Cette constante est un tableau de chaînes de caractères. J'initialise ce tableau avec des chemins connus.

const urlList:string[] = ['/en', '/fr'] ;

Ensuite, je récupère tous les contenus dynamiques, j'obtiens les URLs correspondantes, et je les ajoute à la liste d'urls :


const _posts = await findAllPosts('blogpost') ;
for(const post of _posts) {
    urlList.push(getPermalink(post.slug, 'post', post.lang)) ;
}

Enfin, j'utilise la fonction de tableau map pour transformer ma liste de chaînes en une liste d'objets. Ces objets ont chacun des membres url et lastModified. C'est cette liste d'objets que la fonction retourne.

export default async function sitemap() : Promise<MetadataRoute.Sitemap> {

	/* créer la liste d'URL dans une const appelée urlList */
	
	//Formater la liste 
  	return urlList.map((url) => ({
    	url : BASE_URL + url,
    	lastModified : new Date(),
  	})) ;
}

Tout ceci me permet d'avoir un plan du site mis à jour dynamiquement.

Données structurées

Une autre partie importante du référencement consiste à présenter les données dans un format que les moteurs peuvent facilement assimiler. La façon idéale de le faire est via des "données structurées", un format standardisé qui indique aux bots des moteurs de recherche exactement ce que la page contient.

Les moteurs de recherche peuvent ainsi mieux comprendre et indexer votre contenu. Mais cela peut aussi améliorer l'affichage de votre page dans les résultats de recherche. Cela améliore le taux de clics et la visibilité globale du site web.

Comment ajouter des données structurées à votre site web ?

Prenons l'exemple d'un schéma BlogPost.

Utilisation de Schema-DTS

La partie amusante de l'utilisation des données structurées est que les types sont complexes. Heureusement, une bibliothèque appelée schema-dts couvre exactement ce cas d'utilisation. Cela signifie que nous pouvons utiliser les types TypeScript fournis pour nous aider à nous assurer que nous fournissons des données avec la bonne "forme".

Dans notre cas, importons BlogPostinget WithContextde cette bibliothèque

import { BlogPosting, WithContext } from 'schema-dts' ;

Maintenant, générons un objet. Je passe les données de contenu, qui suivent le type Post que j'ai défini pour mes données. Et j'utilise ces données pour générer un objet qui suit le schéma WithContext<BlogPosting> :



export const generateContentStructuredData = (post:Post ) => {

  const schema : WithContext<BlogPosting> = {
    '@context' : 'https://schema.org',
    '@type' : 'BlogPosting',
    headline : post.title,
    description : post.description,
    author : [{
        '@type' : 'Person',
        name : post.author || "David Hockley",
      },],
    image : post.image,
    datePublished : post.date.toISOString(),
  } ;

  return schema ;
}

J'ai un composant <StructredData> qui prend l'objet de données structurées et le rend sous la forme d'un script "LD+JSON", qui est le format préféré par Google.


const StructuredData:React.FC<DataProps> = ({ data }) => {
  return (
      <script
        key="structured-data"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html : JSON.stringify(data) }}
      />
  ) ;
}

Ensuite, dans la page, j'ajoute simplement le composant :

<StructuredData data={generateBlogPostStructuredData(post)} />

Sur mon site web, j'ai utilisé le schéma pour diverses autres choses, par exemple pour fournir des FAQ. Vous trouverez de nombreux autres types de données sur le site Schema.org.

Abonnez-vous à notre newsletter

Abonnez-vous pour mieux comprendre le développement logiciel. Recevez les dernière nouvelles, vidéos et conseils.