Référencement naturel on-page Créez un site Internet sur des bases solides

Publié le

En référencement naturel ou SEO (Search Engine Optimization), il est des règles qui font partie des bases de la création de sites Web et sont accessibles à tous. Elles s'intègrent à chaque page Web et se travaillent dès la conception avec un code propre et léger. Chaque page suit ces mêmes critères SEO pour se positionner sur leurs expressions-clés dans les résultats des moteurs de recherche. Trop souvent négligés, ces principes sont pourtant fondamentaux pour renforcer votre visibilité sur le Web.


Les bonnes bases du référencement naturel ou seo

L'optimisation d'une page Web participe à sa compréhension, sa rapidité, son efficacité.

Ne foncez pas tête baissée sur le référencement publicitaire (liens payants) avant même d'appliquer, sur toutes les pages de votre site Internet, les règles de référencement SEO qui suivent.

Avez-vous défini vos mots-clés ?

Ceci est le préambule de toute optimisation de page Web. Sur quels mots-clés (ou expressions-clés) je veux que cette page apparaissent sur les moteurs de recherche ? Quels sont les recherches similaires des utilisateurs ?

Mettez-vous à la place d'un utilisateur en quête de vos services/produits et prenez le temps de définir un champ lexical pour améliorer la pertinence de votre page aux yeux des robots. Mais gardez en tête une chose essentielle :

Écrivez pour les humains, optimisez pour les robots

Si vous rédigez vos textes avant tout pour notre ami Google, il pourrait vous en faire payer le prix ! L'expérience utilisateur est la priorité de Google, faites-en sorte que ce soit aussi la vôtre !

Quelques outils pratiques ? site 1.fr ou l'Outil de planification de mots-clés de Google

Commençons par 3 critères essentielles : la balise Title (titre de la page), la meta Description et l'URL (adresse de la page).
Où les voit-on ? Dans les résultats des moteurs de recherche. Comme ceci :

title, url et meta description dans un résultat de recherche

1. Un titre à vos pages avec la balise TITLE

Indispensable pour les Utilisateurs et les Robots

Prenez soin de cette balise ! C'est sans nul doute la plus importante de l'optimisation interne. Elle influence le positionnement d'une page dans les résultats de recherche. De plus, c'est le premier élément que verra l'utilisateur de votre site Internet lors de sa requête sur les moteurs de recherche.

La balise TITLE a une importance capitale pour chaque page de votre site. Ne la négligez pas !

La balise title en HTML

<title>Ici, le titre de la page, cohérent et soigné</title>

La balise TITLE se situe entre les balises <head>...</head> au début de votre page.

Pour un titre de page efficace

  • Environ 55 caractères ou 512px de large, espace compris
  • Ce titre doit être unique pour chaque page de votre site Web
  • L'expression-clé la plus importante au début
  • Décrire brièvement le contenu de la page
  • Votre titre doit être juste, cohérent et accrocheur.
  • Inclure la localisation dans le cas d'un commerce de proximité
  • Identité de la société/marque à la fin, sauf pour la page d'accueil
  • Une liste de mots-clés séparés par une virgule
  • Écrire uniquement le nom de l'entreprise
  • Le même titre sur plusieurs pages
  • Un titre trop long ou trop court
  • ou pas de titre du tout !
  • Tromper le visiteur sous prétexte d'apparaître sur les moteurs de recherche
  • Inclure des mots-clés sans rapport avec le contenu de la page
  • Utiliser les mots "accueil", "bienvenue"... pour votre première page.

2. Une DESCRIPTION engageante

Importante pour l'utilisateur

La meta description est ce petit texte qui apparaît le plus souvent sous le titre (balise TITLE) de la page dans les résultats de recherche.

Elle n'a pas d'impact en terme de positionnement mais a toute son importance aux yeux de l'utilisateur. Soyez engageant ! Cette description doit encourager l'internaute à cliquer sur votre résultat.

Son code HTML ?

<meta name="description" content="ici, une description utile, précise, qui donne envie de cliquer">

Tout comme la balise TITLE, la meta description se situe entre les balises <head>...</head> au début de votre page web.

Une meta DESCRIPTION attractive

  • Entre 140 et 160 caractères, espace compris
  • Faites une ou plusieurs phrases en "bon français"
  • Écrivez une description explicite et unique pour chaque page
  • Utilisez les mots-clés les plus importants
  • Décrivez ce que le visiteur va vraiment trouver sur la page
  • Concentrez-vous sur l'objectif de la page. Soyez intéressant et incitatif !
  • Laisser cette meta description vide
  • Une liste de mots-clés sans réelle phrase
  • Une description sans rapport avec le contenu de la page
  • La même description sur toutes les pages
  • Une description trop courte ou beaucoup trop longue
  • Une description incompréhensible ou fade

Attention : il n'est pas du tout garanti que les moteurs de recherche utilisent cette meta description lors d'un résultat de recherche.

Un outil pratique pour travailler le TITLE et la meta DESCRIPTION ? SEO mofo

3. Des URLs descriptives

L'URL est l'adresse de la page. Des urls claires et "propres" facilitent :

  • Pour les utilisateurs : la lecture, la mémorisation, le partage de la page
  • Pour les robots des moteurs de recherche : l'identification de la pertinence de la page lors d'une recherche pour un mot clé particulier et donc l'indexation

Comment écrire ses URLs ?

  • Choisissez des URLs plutôt courtes et descriptives (3 à 5 mots)
  • Utilisez le tiret (-) pour séparer vos mots (contrairement au nom de domaine qu'il est recommandé d'écrire attaché. Ex: peggyjego.com). L'underscore (_) n'est pas traité par les robots comme un séparateur de mots.
  • Faites des URLs "propres" sans caractères spéciaux en procédant à des redirections.

Abstenez-vous d'utiliser exactement les mêmes mots dans votre balise title, l'URL et le titre de premier niveau H1. La sur-optimisation n'a rien de bon.

URL canonique contre le contenu dupliqué

Si plusieurs URLs permettent d'accéder au même contenu, indiquez, dans le <head>, votre url favorite avec l'élément link rel="canonical" :

<link rel="canonical" href="http://peggyjego.com/blog/seo-bases-optimisation-page-web.php" />

Cela évitera aux moteurs de recherche de penser que vous avez du contenu dupliqué.

Ça se passe dans la tête mais aussi dans le corps

Les éléments suivants se situent dans le <body> de votre page. Ils participent grandement au référencement naturel. Plus tôt on s'en préoccupe, mieux c'est !

4. Une structure sémantique avec les balises H1, H2, H3...

Les balises de titre HTML (h1 à h6 selon la longueur de texte) structurent le texte et en améliore la lisibilité ainsi que le référencement naturel. Ni trop long, ni trop court, leur but est d'introduire et décrire le texte qui suit. Elles ne sont pas seulement utilisées pour le style (taille, couleur...), elles ont un vrai rôle et doivent donc être appropriées. Cependant, il n'est pas souhaitable de multiplier les sous-titres si cela n'apporte rien à la lecture des utilisateurs.

Les balises titre en HTML

<h1> le titre de niveau 1 </h1>
...
<h2> un sous-titre de niveau 2 </h2>
...
<h3> un sous-titre de niveau 3 </h3>

Organisez vos titres

  • Respectez la hiérarchie h1->h2->h3...
  • h1 : un seul et unique par page
  • h2 à h6 : en limiter le nombre suivant leur importance
  • Ces balises doivent contenir des mots-clés importants pour la page, sans exagération
  • Oublier le titre de premier niveau h1
  • Utiliser des balises titre sans celles de niveau supérieur
  • Écrire un texte trop long

5. Un contenu rédactionnel efficace

Ayez du texte sur vos pages : Suffisamment pour informer correctement les utilisateurs qui arrivent sur votre site et assez pour les robots des moteurs de recherche en comprennent le contenu. La subtilité est d'être clair et concis pour les premiers et d'une densité correcte, en intégrant vos expressions-clés, pour les seconds.

Ne faites pas de copier-coller de texte

Avoir un texte original est essentiel pour être visible dans les résultats. Les moteurs de recherche sanctionnent le contenu dupliqué. Alors prenez votre stylo ou votre clavier et RÉDIGEZ !

  • Structurez votre contenu
  • Employez les caractères gras, italique et autres styles pour mettre l'accent sur des passages clés (dans le code html ou le CSS)
  • Intégrez-y des liens internes et externes à votre site...
  • Illustrez-le avec des images optimisées

Vous ne trouvez plus vos mots ? dictionnaire des synonymes Crisco

Les liens internes

<a href="liendelapage" title="description si utile">

Ils participent au maillage de votre propre site. L'ancre (mot/texte qui compose le lien) doit être explicite (Évitez les "cliquez ici" !). vous pouvez utiliser l'attribut title lorsque qu'il vient compléter l'ancre, par exemple dans un menu de navigation. Il ne doit en aucun cas répéter l'ancre.

Veillez à ce qu'il n'y ait pas de liens brisés/morts, c'est-à-dire des liens qui générent des erreurs.
Identifier les liens morts : BrokenLinkCheck

Optimisez vos images/photos

<img src="chemin/nom de l'image" alt="texte alternatif" width="largeur" height="hauteur"/>

Que ce soit des images ou photos, de fond ou d'illustration, elles doivent être optimisées pour améliorer leur référencement et la rapidité d'un site. De plus en plus de recherches se font à partir des images qui génèrent donc du trafic !

Des noms de fichier cohérents et utiles

Choisissez bien les noms pour vos images. Utilisez les minuscules et bannissez les caractères spéciaux, accentués ou les espaces. Utilisez les mots-clés de l'image en restant compréhensible et distinct.

Les attributs alt, width et height de vos images

  • Indiquez systématiquement l'attribut alt="". Ce texte alternatif, malheureusement trop souvent oublié, est accessible pour les non-voyants, nécessaire pour être mieux référencer par les robots en quête d'images, ou si l'image ne se charge pas. Il informe sur le contenu de l'image. Ce court texte doit être explicite, utiliser les mots-clés, sans être long (moins de 16 mots), ni trop court.
  • Il est recommandé d'indiquer aux navigateurs les largeur et hauteur d'origine de vos images avec les attributs width="largeurenpixel" et height="largeurenpixel". N'utilisez pas ces attributs pour réduire votre image (réduisez-les à l'enregistrement ou utilisez le css pour cela).

Des images allégées

Utilisez le formats .jpg pour les photos, .png pour les autres images et réduisez le "poids" de vos images. Plus vite votre site s'affichera surs les écrans et mieux ce sera !

Un outil pratique pour optimiser vos images ? Tiny PNG
Un autre outil pratique pour compresser, convertir, redimenssionner vos images : iLoveIMG

image originale avant optimisation
image originale
taille du fichier 39,4 Ko
image optimisée avec tiny png
image optimisée
taille du fichier 11,8 Ko

Avec l'arrivée des différents supports connectés, il conviendra de choisir la façon de traiter les images (fonctionnalités css, css sprites, polices d'icônes, élément picture...) pour améliorer les performances de vos pages. Ce sera le sujet d'un autre article.

Balise <figure> et <figcaption>

Vous pouvez améliorer la sémantique de votre page en ajoutant une légende à vos images grâce à <figure> et <figcaption>. Contrairement au texte alternatif d'une image, la légende est visible de l'utilisateur. (cf. l'exemple du crabe ci-dessus).

<figure>
<img src="le-joli-nom-de-votre-photo.jpg" alt="brève description de votre photo" width="largeur" height="hauteur"/>
<figcaption>Légende associée à votre photo</figcaption>
</figure>

Attention : L'utilisation de ces balises doit se faire dans le but d'améliorer la compréhension d'une page. Elles ont un rôle au même titre qu'un schéma du coeur le serait pour illustrer son fonctionnement. À bannir pour des pubs, par exemple.

6. Des pages au chargement rapide

Au-delà du contenu, l'efficacité d'une page passe aussi par sa rapidité d'affichage. La vitesse de chargement d'un site a un impact sur le référencement et l'expérience utilisateur. Il est plutôt logique qu'un site rapide affiche un taux de conversion plus élevé qu'un site lent !

Tout comme vos images, il est important de réduire la taille de vos fichiers (html, css, javascript):

  • Allégez votre code HTML
  • Intégrez des ressources externes compressées
  • N'accumulez pas inutilement les scripts sur vos pages.

À propos de ces derniers, évitez de les placer en début de page. Placez-les, suivant leur action, le plus bas possible dans le code HTML. La priorité doit rester au chargement du contenu.

Compresser les fichiers CSS et JS : CSS compressor et JavaScript Compressor

PARTAGER CET ARTICLE

CONCLUSION

Vous l'aurez certainement compris, le référencement naturel doit se réfléchir et s'insérer en amont de votre projet Web. Avec ses premières cartes en main, vous pouvez concevoir vos pages sur de bonnes bases. Il conviendra de ne pas en rester là et pousser un peu plus loin votre optimisation en intégrant d'autres principes essentielles qui s'appliquent à un site Internet dans sa globalité : principes d'ergonomie, robots.txt, sitemap, développement responsive et optimisation mobile, accessibilité ...


Des questions ? un projet en tête ? contactez-moi !