Les deux choses sur lesquelles un internaute va s’arrêter sur votre site sont, d’une part, le contenu de la page et d’autre part, le design.

Dans les deux cas de figure, cela suppose que le visiteur soit parvenu sur le site en question. Pour cela, l’un des meilleurs leviers de trafic est le référencement naturel. Le hic, c’est que la plupart des designers, graphistes et intégrateurs n’ont aucune notion de référencement, et vont ainsi freiner la visibilité d’un site sans le savoir.

Dans ce guide, nous allons donc passer en revue certains des éléments constitutifs d’un site Internet et la manière dont ils doivent être mis en place par l’intégrateur. Certes, sa mission première est de finaliser l’aspect graphique demandé par son client, mais la notion de référencement ne devrait jamais être oubliée lors de ce processus, même si ce n’est pas une tâche qui lui a été expressément demandée.

A la base, je pensais axer cet article sur le webdesign et le référencement sur WordPress, qui est un CMS avec lequel je travaille beaucoup, mais puisque la plupart des conseils donnés ici s’appliquent autant à l’intégration sous WordPress qu’avec un autre CMS ou une solution maison, j’ai dirigé cette publication sur le référencement et le webdesign en général.

1. Hiérarchisation de l’information

La balise H1

La balise H1 est un élément relativement basique sur un site Internet. Elle indique aux moteur de recherche le titre de la page actuelle, ce qui se traduit souvent par l’utilisation de cette balise pour le nom du site et/ou son logo.

<h1>Titre de la page</h1>

Et c’est souvent la première erreur que l’on rencontre : une balise H1 correspond au titre de la page actuelle, pas forcément au titre du site ! Sémantiquement parlant, elle doit permettre à un robot d’indexation (comme Googlebot) de comprendre le contenu en lui donnant un titre explicite, comme le fait la balise title. Elle est donc forcément différente sur chacune des pages. Par exemple :

• la balise H1 de la page d’accueil est le nom du site
• la balise H1 de la page contact pourrait être “Contacter la société X”
• la balise H1 d’un article sera le titre de l’article
• …

Deuxième erreur moins grave mais relativement fréquente en webdesign, l’utilisation d’une image pour la balise H1. Dans la mesure du possible, la balise H1 doit être du texte. Si vous n’avez pas le choix, comme c’est parfois le cas sur une page d’accueil (et le logo), veillez alors à bien renseigner la propriété alt de l’image qui va expliquer au moteur de recherche le contenu de celle-ci :

<h1><img src="adresse de l'image" alt="description de l'image" width="" height="" /></h1>

Troisième erreur : la balise H1 doit toujours être unique pour en optimiser l’utilité (même si les règles du W3C indiquent que l’on peut en avoir plusieurs). Si vous en avez plus d’une dans votre page, c’est que vous avez mal intégré votre maquette graphique pour le SEO. Vous devriez donc supprimer toutes les balises H1 en trop.

D’ailleurs, pour vérifier que vous avez correctement placé cette balise, il vous suffit d’utiliser l’extension Web Developer de Firefox, et de cliquer sur “Information” puis “Plan du document”.

Les balises H2 à H6

Dans la lignée de la balise H1, les balises H2 à H6 ont également de l’importance (même si l’impact est plus faible). Tout comme la balise H1, les autres balises de titres vont segmenter une page en contenus homogènes. Cela aide le visiteur à séparer et rendre plus lisible des sous-parties d’un même contenu, tout en aidant les moteurs de recherche à faire de même.

Elles ne sont pas obligatoires, mais elles doivent cependant être bien implantées. Chaque niveau de titre doit en effet avoir systématiquement un niveau supérieur dont il dépend. Par exemple, on ne peut avoir de balise H3 si la page ne contient pas de balise H2 qui la précède, et ainsi de suite.

Là aussi, l’extension Web Developer va vous permettre de détecter très vite ce genre de problèmes.

Exemple de page bien conçue

2. Les liens

La propriété nofollow

Par défaut, de nombreux CMS (ou autres solutions) incluent la propriété rel="nofollow" sur certains liens. Pour ceux qui n’en sont pas familiers, elle indique aux différents moteurs de recherche de ne pas suivre le lien et de ne pas le prendre en compte lors de la répartition de la page.

<a href="mon lien" title="titre de mon lien" rel="nofollow">ancre de mon lien</a>

Le problème, c’est que Google a changé la façon de redistribuer la popularité d’une page : quand il rencontrait un lien avec l’attribut nofollow, il l’ignorait totalement et redistribuait la popularité qui lui était dû aux autres liens. Désormais, un lien nofollow bloque la transmission de pagerank, ce qui nuit à l’ensemble des pages de votre site (plus d’infos…).

Si par exemple vous avez 5 liens et un en nofollow, vous bloquez l’envoi de popularité, ce qui est encore plus problématique s’il s’agit d’un lien interne.

Popularité et nofollow

Il est donc préférable d’éradiquer cette propriété lorsque vous intégrez un design : elle ne sert à rien sinon à nuire à la visibilité du site que vous créez.

Les liens dupliqués

Quand Google rencontre deux liens identiques dans une même page, il ne prendra en compte que le premier (comme l’ont démontré plusieurs tests récents).

Hors certains clients désirent ajouter plusieurs fois dans la même page un lien vers un autre contenu. On peut ainsi se retrouver dans le cas de figure où ce client aura demandé l’ajout d’un lien vers la page contact dans l’en-tête, mais aussi le menu, la sidebar, le footer, en bas de chaque article, etc.

Liens dupliqués

Non seulement cela ne sert à rien pour l’ergonomie, car il vaut mieux un lien bien placé et visible que des dizaines de liens n’importe où, mais cela ne servira à rien non plus en référencement. Il faut donc lui expliquer l’intérêt de réduire le nombre de liens identiques en les rendant plus visibles.

Si vous n’avez pas le choix pour certains liens dupliqués, que votre client souhaite conserver, sachez qu’il existe plusieurs méthodes pour contourner ce problème :

• Faire un lien vers une autre page, qui fait une redirection 301 vers la page ciblée (mais cela augmente légèrement le temps de chargement).
• Faire un lien avec une ancre # pour le second lien. Par exemple :

  <a href="youpi.com/#monancre">
  

  Libre à vous d’ailleurs de faire pointer cette ancre vers une partie bien définie de votre contenu.

• Faire un lien en javascript, à l’aide par exemple d’un <button> ou d’un <input>.

Voici une image que j’avais réalisée sur le sujet, et qui résume les possibilités laissées en webdesign pour obtenir plusieurs liens vers la même page. En bleu, les méthodes qui permettent de dupliquer un lien sans nuire au référencement, et en rouge celles qu’il ne faut pas utiliser.

Architecture de liens

rel="author"

Pas encore implanté sur Google.fr mais déjà présent sur Google.com, il est possible d’indiquer l’auteur d’un contenu. Le but est d’afficher dans les résultats sa photo, son nom et son prénom, le tout pour augmenter le nombre de clics et de visiteurs.

Affichage de l'auteur dans les "rich snippets"

C’est assez simple à mettre en place, surtout que la plupart des CMS possèdent déjà des pages auteurs, et affichent par défaut un bloc sur l’auteur du contenu en bas de chaque article.

Pour fonctionner, la page de publication de votre site doit faire un lien avec la propriété rel="author" vers la page auteur du site (qui regroupe les informations sur celui-ci)

<!-- dans l'article -->
<a href="" rel="author">Nom de l'auteur</a>
<!-- vers la page de l'auteur -->

Cette page auteur doit faire un lien rel="author" vers le profil Google+ de cette personne.

<!-- dans la page de l'auteur -->
<a href="" rel="author">Google+</a>
<!-- vers le profil Google+ -->

Et enfin, le profil Google+ doit incorporer un lien vers la page auteur du site.

Profil Google+ de Joost de Valk

3. Le header de la page

Title et description

Les balises title et méta description sont obligatoires et doivent être systématiquement présentes sur chaque page du site. Voici comment elles doivent être implantées :

• La balise title
  • Taille : Elle fait 60 caractères maximum.
  • Contenu : Elle décrit le contenu de la page, comme le fait la balise H1. En général, on conseille de mettre les mots clés les plus importants au début.
  • Intérêt de cette balise : elle sert fortement à positionner une page. Il faut donc qu’elle soit la plus explicite possible pour le visiteur et le moteur de recherche.
  • Exemple :

    <title>Titre de ma page</title>
    

• La méta description
  • Taille : Elle fait 160 caractères maximum.
  • Contenu : Elle doit décrire la page de manière plus exhaustive.
  • Intérêt de cette balise : elle ne sert pas à positionner un contenu dans un moteur de recherche, mais c’est cependant ce texte qui va apparaître dans la page de résultats. Plus elle sera “accrocheuse”, plus elle augmentera le nombre de visiteurs.
  • Exemple :

    <meta name="description" content="Voici une superbe description de mon superbe contenu que vous n'hésitez pas à relire sans cesse" />
    

Les balises métas inutiles

De manière générale, la plupart des autres balises métas ont peu d’intérêt.

Concernant la méta keywords, elle ne sert plus à rien. Si votre client vous demande de l’ajouter, faites-lui comprendre qu’elle n’a plus aucun intérêt, qu’elle augmente légèrement et inutilement le temps de chargement, et que par contre ses concurrents peuvent s’en servir pour analyser et voler ses contenus.

Vous pouvez également bannir toutes les balises métas DC.author, DC.description,… Elles ne servent à rien non plus.

Les balises Facebook

A l’inverse, d’autres balises métas parfois oubliées peuvent vous servir.

Pour Facebook, vous avez par exemple les métas Og. Certes, elles ne servent pas directement au référencement naturel mais plutôt au partage de contenus sur ce réseau social. Plus vous facilitez ces échanges, plus vous aurez de chances d’avoir des liens spontanés vers votre contenu (et donc vous augmenterez le trafic et la visibilité). Ces balises se présentent ainsi :

Méta og:locale

Elle indique la langue du site.

<meta property="og:locale" content="fr_FR" />

Méta og:site_name

Elle indique le nom du site.

<meta property="og:site_name" content="Nom du site" />

Méta og:type

Elle indique le type de contenu.

<meta property="og:type" content="article" />

Cette méta peut d’ailleurs prendre de très nombreuses valeurs :

• Activities : activity, sport
• Businesses : bar, company, cafe, hotel, restaurant
• Groups : cause, sports_league, sports_team
• Organizations : band, government, non_profit, school, university
• People : actor, athlete, author, director, musician, politician, profile, public_figure
• Places : city, country, landmark, state_province
• Products and Entertainment : album, book, drink, food, game, movie, product, song, tv_show
• Websites : article, blog, website

Méta og:title

Elle indique le titre du contenu.

<meta property="og:title" content="Titre du contenu" />

Méta og:url

Elle indique l’URL du contenu.

<meta property="og:url" content="URL du contenu" />

Méta og:image

Elle indique le visuel à associer avec la page.

<meta property="og:image" content="URL de l'image" />

Méta og:description

Elle décrit plus longuement le contenu.

<meta property="og:description" content="Description plus longue du contenu." />

D’autres balises pertinentes

Il existe aussi d’autres balises prises en compte par Google.

L’URL canonique

Il peut arriver que plusieurs URLs aient un contenu identique. C’est très mauvais pour le référencement et le chef de projet web devra essayer à tout prix de ne pas commettre cette erreur.

Cependant, c’est parfois obligatoire dans certains cas de figure, comme par exemple un site ecommerce où un produit peut être affiché dans plusieurs catégories différentes (et dont la structure d’URL affiche la catégorie en cours).

Si les URLs sont différentes mais que les contenus sont identiques, il faut alors utiliser une “rustine” pour indiquer à Google que l’on connaît le problème, et pour lui indiquer la page à mettre en avant. Son utilisation est très simple :

<link rel="canonical" href="URL principale du contenu" />

Avec cette balise renseignée dans chaque page au contenu dupliqué avec une URL canonique identique, c’est cette URL que Google retiendra (veillez donc à ce qu’elle existe).

Les balises link Prev et link Next

Dans le cadre de contenus qui se suivent, et où une vraie chronologie peut-être mise en place, voici deux balises intéressantes à mettre en place pour faciliter l’indexation des contenus par Google. C’est notamment le cas des pages d’archives (archives par catégorie, par auteur, par date, …), de galeries, ou pour des guides scindés en plusieurs articles.

En utilisant cette balise, l’intégrateur s’assure que Google renvoie le visiteur vers le début de la chronologie quand cela est pertinent, et que le moteur de recherche comprenne que ces contenus sont liés les uns aux autres.

Par exemple, sur la deuxième page d’un guide, voici ces balises telles qu’il faudrait les utiliser :

<link rel="prev" href="URL de la 1ère page" />
<link rel="next" href="URL de la page suivante" />

4. Ergonomie

Les images

Mieux comprendre une image

À l’inverse des internautes, un moteur de recherche ne peut pas comprendre les images. Pour corriger cela, chaque image d’un site doit avoir une propriété alt renseignée pour la décrire.

<img src="URL de l'image" alt="DESCRIPTION" width="" height="" />

Si ce n’est pas correctement mis en place, on peut se retrouver sur des sites très réussis graphiquement, avec des photos et des visuels à couper le souffle, mais que Google ne comprends pas et ne peut mettre en avant.

Il ne faut jamais oublier que le contexte des images va avoir un impact important. Si votre image est une photographie d’oiseau (avec une propriété alt correctement renseignée), celle-ci aura plus de poids pour Google si le contenu autour de celle-ci parle également d’oiseaux.

La taille d’image

N’oubliez pas non plus d’afficher vos images en taille réelle. Ne les réduisez JAMAIS via CSS : préférez systématiquement la création et la gestion de miniatures, car cela va permettre la réduction du temps de chargement pour le visiteur et pour le moteur de recherche.

L’idéal, c’est donc d’afficher une miniature qui fera un lien vers une image de grande taille. Pour mieux comprendre, voici comment intégrer proprement une image de grande taille dans un contenu texte :

<a href="Lien vers l'image en taille réelle (1000/800 par exemple)" title="Description de l'image">
<img src="Image en miniature" alt="Description de l'image" width="200px" height="200px" />
</a>

La pagination

La pagination des contenus est trop souvent oubliée. La raison est que, dans certains cas, elle n’est pas présente sur la maquette graphique, ce qui pousse parfois l’intégrateur à ne pas ajouter cet élément dans l’ergonomie du site. Et pourtant, la pagination est cruciale pour le référencement naturel, tout comme pour le visiteur.

En webdesign, pensez toujours à l’inclure ! Pour le visiteur, elle lui permet de naviguer plus facilement vers des contenus anciens, et pour le moteur de recherche elle permet de faciliter l’indexation de tous les contenus d’un site.

Attention cependant à suivre quelques règles de base pour qu’elle soit efficace.
Elle doit :

• afficher le nombre de pages total
• avoir des boutons “première page” et “dernière page”
• avoir des boutons “page suivante” et “page précédente”
• si le nombre de pages est trop important, elle doit faire des bonds dans la pagination, et ne surtout pas afficher chaque numéro de page.

Par exemple, dans le cas d’une catégorie avec 52 pages, et si le visiteur se trouve en 4ème page, voici ce que le site pourrait afficher :

Page 4 sur 52 : 1ère page – 2 – 3 – 4 – 5 – 6 – 10 – 25 – 50 – dernière page

Le Fil d’Ariane

Le chemin de navigation (aussi appelé Fil d’Ariane ou BreadCrumb) est lui aussi régulièrement oublié en webdesign. Et c’est presque “normal” car cet élément d’ergonomie s’intègre rarement convenablement dans une charte graphique.

Là aussi, c’est une erreur. Le fil d’Ariane a plusieurs rôles :

• Pour le visiteur, il permet de comprendre exactement où il est
• Pour le moteur de recherche, il lui permet de comprendre où se situe le contenu dans l’arborescence du site, tout en le liant de manière forte à sa ou ses catégories parentes.

Si vous en avez déjà un, c’est un plus pour votre site. Mais vous avez alors peut-être commis une autre erreur lors de l’intégration du chemin de navigation : le dernier élément de celui-ci ne doit jamais être un lien. Si c’est le cas, cela veut dire que la page fait un lien vers elle-même, ce qui n’a aucun sens pour le visiteur et le moteur de recherche. En le supprimant, vous évitez d’induire en erreur le visiteur avec un clic inutile, et vous permettez de transmettre une popularité plus importante aux autres liens de la page.

Si par exemple je suis dans l’article “chocolat fondant”, la dernière partie de ce chemin de navigation ne doit pas avoir de lien :

Vous êtes ici : Accueil » Recette de cuisine » Recette au chocolat » Chocolat fondant

5. Schema.org

Depuis quelques mois déjà, Google, Yahoo et Bing se sont mis d’accord sur un format de micro-données à utiliser pour afficher des résultats plus pertinents. On peut ainsi voir apparaître des vidéos directement dans les pages Google, des avis produits ou encore des horaires d’ouverture. Voici quelques exemples :

SERP pour visseuse électrique

SERP pour Zenith Nantes

SERP pour Structure Site Internet

Pour chaque type de contenu, le format change. Par exemple, voici le code pour ajouter un avis sur une page de contenu :

<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Nom du test</span> par <span itemprop="author">Auteur</span>, le <meta itemprop="datePublished" content="2012-03-20">20 Avril 2012.
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span> étoiles
</div>
<span itemprop="description">Avis détaillé et textuel.</span>
</div>

Voici quelques liens pour une documentation complète sur les plus importants micro-formats :

• Pour toutes les pages : WebPage (notamment pour les chemins de navigation)
• Pour les évènements : Event
• Pour une personne : Person
• Pour un lieu : Place
• Pour un produit : Product
• Pour un avis ou un test : Review

Notez que l’emploi de ces micro-formats vous permettra de définir des entités nommées, et c’est ce qui servira à Google lorsqu’il deviendra un moteur de recherche sémantique dans un futur proche (Plus d’infos…).

6. La vitesse

Pour terminer, n’oubliez jamais le temps de chargement quand vous pensez au design de vos pages. Il a un impact (faible) sur le référencement et un impact (énorme) sur vos visiteurs.

Pour ce point, je ne vais pas réinventer la poudre. Il existe de nombreux tutoriels et solutions différentes sur le sujet. Sachez que vous pouvez réduire le temps de chargement avec différentes actions :

• Regrouper vos fichiers CSS et javascripts
• Les minifier (pour réduire leurs poids)
• Compresser vos images
• Optimiser le fichier .htaccess
• Réduire le temps de calcul php de vos fonctions
• Mettre en cache vos pages
• Fusionner vos images dans un Sprite
• Utiliser un serveur plus robuste et puissant (Nginx par exemple)
• Utiliser un CDN pour héberger les ressources statiques
• …

D’ailleurs pour tester vos pages, pensez à employer ces deux outils très utiles :

• Web Page Test : un excellent outil pour analyser le chargement pas à pas de son site, avec des préconisations complètes à la clé
• GTmetrix : il allie les données de Yslow et de Google Page Speed au même endroit, tout en permettant de mettre en place un suivi journalier et gratuit du temps de chargement de son site.

7. HTML5

La nouvelle version d’HTML permet d’inclure un balisage sémantique lorsque l’on intègre une page. On peut ainsi facilement différencier le contenu réel des parties communes d’un site, comme l’en-tête, le pied de page, le menu ou encore une éventuelle sidebar.

On pourrait donc supposer qu’HTML5 permettrait aux différents moteurs de recherche de mieux comprendre une page, de mieux mettre en avant le contenu réel et de pouvoir ainsi mieux classer les résultats, en favorisant ces contenus par rapports à d’autres similaires codés en HTML 4.

Malheureusement, il n’en est rien. Actuellement, rien ne prouve qu’une page codée en HTML5 sera mieux positionnée qu’une autre en HTML 4. Et il y a une bonne raison à cela : d’une part la nomenclature de cette nouvelle version n’est pas finalisée, ce qui doit pousser les moteurs de recherche à être prudents sur le sujet, et d’autre part car le HTML5 est présent sur un nombre de sites trop peu important pour leur donner du poids (enfin pour le moment).

Attention cependant, les moteurs de recherche évoluent vite. Il est donc probable qu’à terme, une page en HTML5 soit mieux comprise et donc mieux positionnée. Mais ce ne sera le cas que d’ici quelques années.

En conclusion

Quand on travaille sur l’aspect d’un site Internet, il ne faut jamais oublier le référencement naturel, autrement il ne sera jamais trouvé, et ne servira donc à rien.

Chacun des conseils donnés ici est d’ailleurs logique en soi. Un site bien réalisé doit en effet suivre quelques règles de base :

• être compréhensible
• être bien structuré
• être rapide à charger
• être ergonomique

Et votre site, est-il optimisé ?