Plans de site XML
Les plans de site sont le moyen le plus simple de communiquer avec Google. Ils indiquent les URL qui appartiennent à votre site et quand elles sont mises à jour, afin que Google puisse facilement détecter les nouveaux contenus et explorer votre site plus efficacement.
Bien que les plans de site XML soient les plus connus et utilisés, ils peuvent également être créés via RSS ou Atom, ou même via des fichiers Texte si vous préférez une solution maximale en simplicité.
Un plan de site est un fichier où vous fournissez des informations sur les pages, vidéos et autres fichiers de votre site, ainsi que les relations entre eux. Les moteurs de recherche comme Google lisent ce fichier pour explorer votre site de manière plus intelligente.
Selon Google :
Vous pourriez avoir besoin d'un plan de site si :
- Votre site est très volumineux. Par conséquent, il est plus probable que les robots d'indexation de Google puissent négliger l'exploration de certaines de vos pages nouvelles ou récemment mises à jour.
- Votre site possède une grande archive de pages de contenu isolées ou mal liées entre elles. Si les pages de votre site ne se référencent pas naturellement, vous pouvez les lister dans un plan de site pour vous assurer que Google ne néglige pas certaines de vos pages.
- Votre site est nouveau et possède peu de liens externes pointant vers lui. Googlebot et autres robots d'indexation naviguent sur le web en suivant les liens d'une page à l'autre. Par conséquent, Google pourrait ne pas découvrir vos pages si aucun autre site ne pointe vers elles.
- Votre site contient beaucoup de médias riches (vidéos, images) ou apparaît dans Google News. Si fourni, Google peut prendre en compte des informations supplémentaires provenant des plans de site pour la recherche, le cas échéant.
Bien que les plans de site ne soient pas obligatoires pour une bonne performance dans les moteurs de recherche, ils peuvent faciliter l'exploration et l'indexation par les robots, et ainsi votre contenu sera récupéré plus rapidement et classé en conséquence.
Il est fortement recommandé d'utiliser des plans de site et de les rendre dynamiques à mesure que de nouveaux contenus sont ajoutés sur votre site. Les plans de site statiques sont également valides, mais ils pourraient être moins utiles pour Google car ils ne servent pas à une découverte constante.
Comment ajouter des plans de site à un projet Next.js
Il existe deux options :
Manuelle : Si vous avez un site relativement simple et statique, vous pouvez créer manuellement un fichier sitemap.xml dans le répertoire public de votre projet :
<!-- public/sitemap.xml -->
<xml version="1.0" encoding="UTF-8">
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/foo</loc>
<lastmod>2021-06-01</lastmod>
</url>
</urlset>
</xml>Dynamique : Si votre site est dynamique, vous pouvez utiliser getServerSideProps pour générer un plan de site XML à la demande.
Nous pouvons créer une nouvelle page dans le répertoire des pages, par exemple pages/sitemap.xml.js. L'objectif de cette page sera d'interroger notre API pour obtenir des données qui nous permettront de connaître les URL de nos pages dynamiques. Nous écrirons ensuite un fichier XML comme réponse pour /sitemap.xml.
Voici un exemple que vous pouvez essayer :
//pages/sitemap.xml.js
const EXTERNAL_DATA_URL = 'https://jsonplaceholder.typicode.com/posts';
function generateSiteMap(posts) {
return `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<!--Nous définissons manuellement les deux URL que nous connaissons déjà-->
<url>
<loc>https://jsonplaceholder.typicode.com</loc>
</url>
<url>
<loc>https://jsonplaceholder.typicode.com/guide</loc>
</url>
${posts
.map(({ id }) => {
return `
<url>
<loc>${`${EXTERNAL_DATA_URL}/${id}`}</loc>
</url>
`;
})
.join('')}
</urlset>
`;
}
function SiteMap() {
// getServerSideProps fera le gros du travail
}
export async function getServerSideProps({ res }) {
// Nous faisons un appel API pour récupérer les URL de notre site
const request = await fetch(EXTERNAL_DATA_URL);
const posts = await request.json();
// Nous générons le plan de site XML avec les données des posts
const sitemap = generateSiteMap(posts);
res.setHeader('Content-Type', 'text/xml');
// nous envoyons le XML au navigateur
res.write(sitemap);
res.end();
return {
props: {},
};
}
export default SiteMap;