6
Module 6
Métadonnées et SEO
Notion de Search Engine Optimisation (SEO)
Si vous souhaité que votre site internet puisse avoir une bonne visibilité chez les moteurs de recherche, la solution serait de bien pratiquer le SEO. Encore appelé optimisation pour moteur de recherche, pratiquer du SEO consiste à définir des stratégies et des techniques conçues pour augmenter le trafic organique, c'est-à-dire les visiteurs qui trouvent votre site à travers des recherches non payantes.
La mise sur pied des stratégies d'optimisation pour les moteurs de recherche possède de nombreux avantages parmi lesquels on peut citer :
Une visibilité accrue : Le SEO vous permettra de rendre votre site web plus visible dans les résultats des recherches. En effet, plus votre site se trouve au sommet des resultats de recherche, plus ce dernier a de chances d'être visité.
Génération du trafic organique : Le trafic organique représente les utilisateurs qui trouveront votre site web à travers des recherches naturelles, sans passer par une publicité.
Crédibilité et confiance renforcées : Les sites qui appraraissent au sommet des recherches sont généralement perçus par les utilisateurs, comme étant les sites les plus crédibles.
L'expérience utilisateur améliorée : La pratique du SEO permet de d'améliorer des aspects comme le temps de chargement des pages, la lisibilité, les contenus de qualité. Tous ces aspects lorsqu'ils sont optimisés, augmenterons à coup la satisfaction des visiteurs de votre site web.
Importance du fichier 'robots.txt'
Le fichier 'robots.txt' indiquera aux robots d'indexation, les parties du site web qu'ils peuvent explorer et indexer. De ce fait, des ressources pourront être économisées, car les robots ne vont pas explorer des sections non-pertinentes. Il est aussi possible de définir des règles spécifiques pour différents robots comme Googlebot (de Google), Bingbot (de Bing), ou d'autres robots d'indexation.
Exemple
Ci-dessous un exmple de règles pour le fichier robots.txt
/public/robots.txt
User-agent: *
Disallow: /admin/
Disallow: /private/
User-agent: Googlebot
Allow: /public/
Disallow: /private/Voici une explication des directives dans cet exemple :
User-agent: * : Cette directive indique que les règles qui suivent s'appliquent à tous les robots d'indexation.
Disallow: /admin/ : Cette directive indique que l'accès à la section /admin/ du site est interdit à tous les robots.
Disallow: /private/ : Cette directive empêche tous les robots d'indexation d'accéder à la section /private/.
User-agent: Googlebot : Cette ligne indique que les directives qui suivent s'appliquent spécifiquement à Googlebot, le robot d'indexation de Google.
Allow: /public/ : Cette directive indique que Googlebot peut accéder à la section /public/.
Disallow: /private/ : Cette ligne réaffirme que Googlebot ne peut pas accéder à la section /private/.
Illustration
Nous allons créer le fichier 'robots.txt' de notre application 'bibio-app'. Il est important de garder à l'esprit que le fichier 'robots.txt' doit être créé dans le dossier 'public' de votre application. Dans notre 'robots.txt', l'accès à la racine de notre application sera donné à tous les robots d'indexation. Le code est le suivant :
/public/robots.txt
# Autoriser tous les robots
User-agent: *
Allow: /Le fichier 'sitemap.xml'
Définition et rôle
Un sitemap est un fichier dans lequel l'on doit fournir des informations sur les pages, les vidéos et d'autres fichiers du site web. Ce fichier est utilisé par les moteurs de recherche pour explorer efficacement les sites web. En effet, un sitemap indique aux moteurs de recherche, les fichiers jugés importants et d'autres informations utiles telles que la fréquence de modification, la date de dernière modification.
Quand doit-on créer un sitemap ?
Selon l'entreprise Google, voici quelques conditions à vérifier avant de créer un sitemap :
Le site doit être volumineux.
Le site contient une grande quantité de pages isolées ou non liées correctement.
Le site est récent et peu de liens externes permettent d'y accéder.
Le site contient beaucoup de contenu media (vidéo, images) ou s'affiche dans Google Actualités.
Comment créer un sitemap ?
Il existe trois options pour créer un sitemap :
Illustration
Nous allons créer un sitemap au format xml pour notre application 'biblio-app'. Pour cela, il suffit de créer un fichier nommé 'sitemap.xml' dans le dossier 'public' de notre application, ensuite y ajouter le code suivant :
/public/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://locallhost:3000/</loc>
<lastmod>2024-05-08</lastmod>
<changefreq>never</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://locallhost:3000/connexion</loc>
<lastmod>2024-05-08</lastmod>
<changefreq>never</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://locallhost:3000/contact</loc>
<lastmod>2024-05-08</lastmod>
<changefreq>never</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://locallhost:3000/documents</loc>
<lastmod>2024-05-08</lastmod>
<changefreq>never</changefreq>
<priority>0.7</priority>
</url>
</urlset>Envoie du sitemap à Google
Pour envoyer notre sitemap créé précédemment à Google, il suffit d'insérer la ligne suivante n'importe où dans notre fichier 'robots.txt'. Cette ligne indique le chemin d'accès à notre sitemap.
chemin de 'sitemap.xml'
Sitemap: https://localhost:3000/sitemap.xmlLes métadonnées
Les métadonnées (ou métadonnées) dans le contexte du web désignent des données qui décrivent d'autres données, fournissant des informations supplémentaires sur une ressource ou un contenu en ligne. Elles aident à interpréter ou à donner un contexte à ces ressources, ce qui peut être utile pour les moteurs de recherche, les navigateurs, les utilisateurs et d'autres systèmes. Les métadonnées doivent être ajoutées à toutes les pages de votre site.
title
La donnée 'title' est très importante, car elle indique à l'utilisateur, le titre de la page sur laquelle elle se trouve. De plus, c'est le principal élément utilisé par les moteurs de recherche pour comprendre ce que fait la page.
description
Cette donnée est aussi importante, car elle apporte des informations en complément de celles données par le titre.
Open Graph et Twitter Card
Ces métadonnées sont utilisées par les plateformes de médias sociaux comme Facebook et Twitter pour afficher des aperçus lorsque le contenu est partagé
Illustration
Pour l'illustration, nous allons ajouter des métadonnées à chaque page de notre application 'biblio-app'. Ces métadonnées seront insérées en début de chaque page, juste après les « importations ».
/app/layout.jsx
export const metadata = {
title: 'biblio-app | Accueil',
description: 'Site web présentant les fonctionnalités de React et Next.js.',
openGraph: {
title: 'biblio-app | Accueil',
description: 'Site web présentant les fonctionnalités de React et Next.js.',
images: ['./react.webp']
}
}
/app/connexion/page.jsx
export const metadata = {
title: 'Connexion | biblio-app',
description: 'Page de Connexion',
openGraph: {
title: 'Connexion | biblio-app',
description: 'Page de Connexion',
images: ['./react.webp']
}
}
/app/contact/page.jsx
export const metadata = {
title: 'Contact | biblio-app',
description: 'Page de Contact',
openGraph: {
title: 'Contact | biblio-app',
description: 'Page de Contact',
images: ['./react.webp']
}
}
/app/documents/page.jsx
export const metadata = {
title: 'Documents | biblio-app',
description: 'Page de Documents',
openGraph: {
title: 'Documents | biblio-app',
description: 'Page de Documents',
images: ['./react.webp']
}
}
Core Vitals et performance
Les Core Web Vitals (ou simplement 'Core Vitals') sont un ensemble de métriques définies par Google pour évaluer les performances des sites web en ce qui concerne la vitesse de chargement, l'interactivité et la stabilité visuelle.
Voici les trois principales métriques des Core Web Vitals :
Largest Contentful Paint (LCP):
Mesure le temps nécessaire pour charger le plus grand élément visible du contenu de la page. Cela peut être une image, un bloc de texte, ou un autre élément de contenu volumineux. LCP vise à indiquer la vitesse à laquelle un utilisateur peut voir le contenu principal de la page.
Un bon LCP est généralement inférieur ou égal à 2,5 secondes.
First Input Delay (FID):
Mesure le délai entre le moment où un utilisateur interagit pour la première fois avec la page (par exemple, en cliquant sur un bouton ou un lien) et le moment où le navigateur répond à cette interaction. FID évalue donc l'interactivité de la page.
Un bon FID est généralement inférieur ou égal à 100 millisecondes.
Cumulative Layout Shift (CLS):
Mesure la stabilité visuelle d'une page pendant son chargement. Si des éléments de la page changent de position de manière inattendue (comme des publicités qui se chargent tardivement), cela peut créer une mauvaise expérience utilisateur. CLS mesure le degré de ces décalages visuels.
Un bon CLS est généralement inférieur ou égal à 0,1.
Bon à savoir
Plus vos pages ont de bons résultats pour ces trois métriques, plus elles ont de chance d'être indexées par les robots des moteurs de recherche. En effet, ces métriques sont utilisées comme facteur de classement pour le référencement (SEO).
Évaluer et améliorer un site web
L'évaluation et l'amélioration d'un site web passe par l'évaluation et l'amélioration des Core Web Vitals. Pour y parvenir, on peut utiliser divers outils tels que Google Lighthouse, Google PageSpeed Insights, ou Google Search Console. Ces outils fournissent des rapports détaillés sur les performances des pages, mettant en lumière des zones d'amélioration pour optimiser l'expérience utilisateur. On pourra donc utiliser ces informations pour identifier et résoudre les problèmes qui affectent les Core Web Vitals de nos pages.
Dans le cadre de ce cours, nous utiliserons Google Lighthouse. Pour acceder à Lighthous, il suffit de faire un clic droit sur le navigateur, ensuite cliauer sur 'inspecter' et enfin dur 'Lighthouse'. Vous pouvez donc lancer une analyse de la page courante.
Code source
Important
Avant d'executer la commande 'npm run dev', bien vouloir exécuter la commande 'npm i'.
Travail à faire