Guide SEO : 7 Clés Indispensables pour les Devs

À moins de développer une plateforme de type intranet/extranet, il est essentiel pour un site ou une app web d’être référencée. Bien que le SEO puisse être travaillé à de nombreux niveaux (rédaction web, code, maillage de liens…), en tant que développeur, vous avez un rôle clé à jouer dans l’optimisation d’un site pour les moteurs de recherche. Voici 7 clés indispensables pour vous aider à coder en pensant SEO.

1. Optimiser les performances

La vitesse de chargement d’un site est un facteur de classement primordial pour les moteurs de recherche tels que Google.

Une page qui se charge lentement peut non seulement :

Décourager les visiteurs (mauvaise UX)
Mais aussi affecter le SEO de votre site

Voici quelques pistes clés pour optimiser les performances d’une page web.

Minifier le code

La minification du code HTML, CSS et JavaScript consiste à réduire la taille des fichiers en supprimant les espaces inutiles, les commentaires, les lignes vides ou encore renommer certains éléments (variables…).

Des bundlers modernes tels que Webpack, Vite, Rollup ou encore Parcel sont de parfaits candidats pour cela.

Compresser les images

Utiliser des formats modernes comme WebP ou Avif et des outils de compression tels que Tinify ou ILoveImg pour réduire la taille des images sans perdre en qualité sont des critères essentiels. Aussi assurez-vous que les formats sont adaptés au type d’image. Par exemple :

.jpg pour des photographies ou images complexes
.svg pour les graphiques vectoriels simples
.png pour des graphiques ou pour gérer la transparence
Etc.

Mise en cache & CDN

La mise en cache consiste à stocker temporairement des données fréquemment demandées pour accélérer leur accès ultérieur.

Configurez le cache côté serveur pour stocker des versions statiques de vos pages et réduire le temps de chargement pour les visiteurs.

Cette mise en cache peut être gérée :

Directement au niveau de votre serveur web (Apache, Nginx, etc.)
Via des solutions de cache spécialisées et éprouvées telles que Redis, Varnish et Memecached
Par l’intermédiaire d’hébergeurs web, tels que Hostinger, qui proposent des fonctionnalités pour faciliter la gestion du cache côté serveur

Utiliser un CDN (Content Delivery Network) s’avère également très utile pour répartir les ressources de votre site sur plusieurs serveurs géographiquement dispersés.

Cela a pour effet de réduire la latence (le chemin réel parcouru du client vers le serveur) et ainsi améliorer les temps de réponse.

2. Balisage sémantique

Les moteurs de recherche analysent la structure de vos pages pour comprendre le contenu. Utiliser des balises HTML sémantiques aide à clarifier cette structure.

De nombreuses balises et attributs sont voués à cela.

Balises title et meta description

Les balises title et meta description jouent un rôle essentiel dans le balisage sémantique.

<head>
	<title>Titre SEO</title>
	<meta name="description" content="Description SEO...">
</head>

Balise title : elle définit le titre de la page qui apparaît dans l’onglet du navigateur et dans les résultats des moteurs de recherche. Elle doit être concise, descriptive, et inclure des mots-clés pertinents pour améliorer le référencement.
Balise meta description : elle fournit quant à elle un résumé du contenu de la page. Une description bien rédigée augmente la compréhension de la page par les robots d’indexation et peut augmenter le taux de clics (CTR) dans les résultats de recherche. Il est donc important de la rendre attractive et pertinente pour inciter les utilisateurs à visiter votre site.

En combinant ces balises de manière stratégique, vous facilitez la compréhension de votre contenu par les moteurs de recherche et améliorez la visibilité de votre site dans les SERP (Search Engine Results Pages).

Balises de titres

Les balises de titre permettent de hiérarchiser le contenu.

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

Il est recommandé de n’utiliser qu’une seule balise <h1> par page, suivie de <h2> pour les sous-titres, et ainsi de suite, jusqu’à <h6>.

Conteneurs sémantiques

Les conteneurs sémantiques sont redoutables pour structurer une page web.

Au nombre de 7, les balises sémantiques <header>, <footer>, <main>, <article>, <section>, <aside> et <nav> permettent aux moteurs de recherche de mieux comprendre le contenu de chaque zone de l’interface.

<header>
	<nav>
		<a href="#">Lien 1</a>
		<a href="#">Lien 2</a>
		<a href="#">Lien 3</a>
	</nav>
</header>
<main>
	<section id="hero">...</section>
	<section id="about">...</section>
	<section id="products">
		<article>...</article>
		<article>...</article>
		<article>...</article>
	</section>
</main>
<aside>SIDEBAR</aside>
<footer>FOOTER</footer>

Attribut `<alt>`

Chaque balise <img> doit avoir un attribut alt descriptif. Cette description textuelle remplit 3 rôles :

SEO : elle aide les robots d’indexation à comprendre ce que représente l’image
Accessibilité : elle peut être lue par des lecteurs vocaux pour décrire l’image aux utilisateurs malvoyants
UX : elle affiche un texte alternatif en cas de non chargement de l’image

<img src="https://exemple.com/dog.jpg" alt="Un labrador qui mange ses croquettes"/>

3. Optimiser les URLs

Avant d’analyser le contenu d’une page web à des fins d’indexation, les robots des moteurs de recherche doivent d’abord découvrir ces pages. Et pour cela, il faut connaître leur adresse : c’est l’URL qui joue ce rôle.

Etant le premier élément analysé, l’URL possède une importance cruciale en termes de SEO puisqu’elle livre des informations importantes sur la nature d’une page web, avant même l’analyse de son contenu.

Afin de faciliter la compréhension de votre page web par les robots, les URLs de vos pages doivent être claires et concises. Voici quelques bonnes pratiques :

Utilisez des mots-clés : Intégrez des mots-clés pertinents dans vos URLs pour donner des indications aux moteurs de recherche sur le contenu de la page.
Évitez les paramètres superflus : Les URLs avec trop de paramètres peuvent être difficiles à lire pour les moteurs de recherche. Préférez des URLs courtes.
Séparez les mots avec des tirets : Utilisez la kebab-case (avec des tirets -) pour séparer les mots dans les URLs.

Et comme un bon exemple vaut mieux que 1000 mots, je vous laisse le soin de trouver quelle URL est la plus explicite :

https://exemple.com/category-3/27837652
https://exemple.com/jardinage/quand-planter-tomates

Une évidence, qui prouve bien l’importance de l’optimisation d’URL. ✨

Vous remarquerez d’ailleurs que cette bonne pratique est bien entendu appliquée à cette page dont l’URL est https://LaConsoleTileVue.dev/blog/guide-seo-cles-indispensables-devs. ☝️

4. Site responsive

Avec une majorité d’utilisateurs accédant au web via des appareils mobiles, les moteurs de recherche favorisent les sites responsives.

Pour assurer une bonne expérience mobile, les développeurs doivent utiliser des media queries pour adapter le design de leur site à différentes tailles d’écran et s’assurer que le site s’affiche correctement sur une variété de formats (smartphones, tablettes, desktop, etc.).

5. Maillage

Les liens, ces fameuses balises <a href="...">, jouent un rôle bien spécifique pour le SEO d’un site web : on parle de maillage.

Maillage interne

Le maillage interne consiste à créer des liens entre les pages d’un site web.

Cela aide non seulement les utilisateurs à naviguer plus facilement, mais aussi les moteurs de recherche à explorer et indexer le site de manière plus efficace. Un bon maillage interne renforce la structure d’un site, transmet de l’autorité entre les pages, et peut améliorer le classement de pages importantes.

Maillage externe (netlinking)

Le maillage externe, ou « netlinking », vise à obtenir des liens entrants provenant d’autres sites web.

Ces liens, appelés « backlinks » renforcent la crédibilité du site aux yeux des moteurs de recherche et améliorent son positionnement dans les résultats de recherche. Une stratégie de netlinking efficace repose sur l’acquisition de liens de qualité depuis des sites pertinents et fiables.

6. Exploration par les robots

Plan du site (`📄 sitemap.xml`)

Le sitemap, ou « plan du site » en français, est un fichier essentiel pour le référencement car il guide les moteurs de recherche dans l’exploration d’un site web.

Il répertorie toutes les pages importantes et informe les robots des moteurs de recherche sur la structure du site, y compris les nouvelles pages ou les pages mises à jour.

Soumettre un sitemap XML permet de faciliter l’indexation rapide et efficace des pages, améliorant ainsi la visibilité du site dans les résultats de recherche. C’est un outil particulièrement utile pour les sites volumineux ou complexes, où certaines pages pourraient autrement être manquées par les robots.

Voici un exemple de sitemap XML simple pour un site web :

  sitemap.xml 
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

  <url>
    <loc>https://exemple.com/</loc>
    <lastmod>2024-08-20</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>

  <url>
    <loc>https://exemple.com/about</loc>
    <lastmod>2024-08-18</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>

  <url>
    <loc>https://exemple.com/contact</loc>
    <lastmod>2024-08-15</lastmod>
    <changefreq>yearly</changefreq>
    <priority>0.5</priority>
  </url>

</urlset>

<urlset> : Ensemble des pages à indexer
<loc> : URL de la page à indexer
<lastmod> : Dernière date de modification de la page (format YYYY-mm-dd)
<changefreq> : Fréquence à laquelle le contenu de la page est susceptible de changer (daily, monthly, yearly, etc.)
<priority> : Importance relative de la page par rapport aux autres (valeur de 0.0 à 1.0)

Données structurées (schema.org)

Les données structurées permettent aux moteurs de recherche de comprendre plus précisément le contenu d’une page web et d’améliorer son affichage dans les résultats de recherche (rich snippets, cartes d’informations, etc.).

Pour écrire des données structurées de qualité, il est recommandé :

D’utiliser les schémas appropriés : intégrez les balises de schéma correspondantes au type de contenu (article, recette, produit, événement, etc.).
De valider les données : Utilisez un outil de validation du balisage Schema (voir l’outil de test des résultats enrichis de Google) pour vérifier que vos balises sont correctement implémentées.

Leur implémentation se fait au sein d’un fichier nommé 📄 schema.org. En voici un exemple pour un article de blog :

  schema.org 
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Titre de l'article",
  "author": {
    "@type": "Person",
    "name": "Nom de l'auteur"
  },
  "datePublished": "2024-08-20",
  "description": "Courte description de l'article",
  "image": "https://www.exemple.com/image.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "Nom de l'organisation",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.exemple.com/logo.jpg"
    }
  }
}

@context : Spécifie le contexte, ici schema.org
@type : Type de contenu
headline : Titre de l’article
author : Informations sur l’auteur
datePublished : Date de publication de l’article
description : Brève description de l’article
image : URL de l’image associée à l’article
publisher : Informations sur l’éditeur

Des données structurées bien conçues vont avoir pour effet d’améliorer le CTR, car les rich snippets attirent plus l’attention dans les résultats de recherche, ce qui peut augmenter le taux de clics (CTR) vers votre site.

7. Rédaction

Il peut arriver qu’un développeur soit également en charge de la création de contenus d’un site internet (site personnel, profil « couteau-suisse » dans une petite structure, etc.).

Dans ce cas, il est important de ne pas négliger l’impact de la rédaction pour le SEO.

La rédaction est un élément clé de toute stratégie SEO réussie. Pour optimiser votre contenu et attirer un maximum de visiteurs qualifiés, il est essentiel de trouver le juste équilibre entre trois facteurs : la quantité, la qualité et la régularité.

Quantité

Publier beaucoup de contenu sur un site contribue à indexer un maximum de pages et ainsi améliorer sa visibilité dans les moteurs de recherche.

Une quantité de pages importante montre aux moteurs de recherche qu’un site est riche de contenus. Cependant, la quantité ne doit pas se faire au détriment de la qualité.

Qualité

Le contenu doit être pertinent, bien rédigé, et apporter une réelle valeur ajoutée aux lecteurs.

Un contenu de haute qualité doit être optimisé pour les mots-clés pertinents et structuré de manière claire, avec des titres, sous-titres et paragraphes bien définis.

Outre le fait que les moteurs de recherche y soient sensibles, un contenu de qualité est plus engageant, susceptible d’être partagé et susceptible d’obtenir des backlinks naturels.

Régularité

Maintenir une régularité dans la publication de contenu signale aux moteurs de recherche que le site est constamment mis à jour.

Les blogs sont un allié de taille permettant d’accroître continuellement le nombre de pages référencées pour un site web. Une fréquence de publication élevée montre aux moteurs de recherche qu’un site est actif et pertinent.

Outre les gains en termes de SEO, la publication régulière de contenu fidélise une audience.

Le SEO n’est pas seulement l’affaire des spécialistes en marketing digital. En tant que développeur, vous avez une influence directe sur de nombreux aspects techniques qui impactent le référencement naturel. En suivant ces 7 clés, vous pouvez aider à améliorer la visibilité et la performance SEO de votre site, tout en offrant une meilleure expérience utilisateur.

Gardez à l’esprit que le SEO est un travail continu. Les moteurs de recherche évoluent, tout comme les pratiques SEO. Restez informé des dernières tendances pour assurer que votre site reste bien classé dans les résultats de recherche.

Newsletter

1. Optimiser les performances

Minifier le code

Compresser les images

Mise en cache & CDN

2. Balisage sémantique

Balises title et meta description

Balises de titres

Conteneurs sémantiques

Attribut <alt>

3. Optimiser les URLs

4. Site responsive

5. Maillage

Maillage interne

Maillage externe (netlinking)

6. Exploration par les robots

Plan du site (📄 sitemap.xml)

Données structurées (schema.org)

7. Rédaction

Quantité

Qualité

Régularité

Lire aussi

Attribut `<alt>`

Plan du site (`📄 sitemap.xml`)