Webdesign Friday (#wdfr) - La communauté des webdesigners francophones

Les vendredis Webdesign !Chaque semaine, un nouvel article par un professionnel du Web.

Webdesign et Référencement Naturel : la beauté ne fait pas la visibilité

Webdesign et Référencement Naturel : la beauté ne fait pas la visibilité

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.

Aperçu Web Developper

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.

nofollow

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

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

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.

Rel author

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

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 page23 – 4 – 56102550derniè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

SERP pour visseuse électrique

SERP

SERP pour Zenith Nantes

SERP

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é ?

A propos de l'auteur : Daniel Roch

Consultant indépendant en référencement naturel et sur WordPress. J'accompagne les professionnels à tirer profit des possibilités de ce CMS dans leur utilisateur quotidienne et dans le développement de fonctionnalités avancées et originales. Dans le même temps, je réalise des audits et je conseille mes différents clients pour améliorer au maximum leur visibilité dans les moteurs de recherche et auprès de leurs prospects.

  • Julien

    “Pour le premier, tout le monde comprendra l’intérêt d’avoir un contenu qui corresponde aux besoins de l’internaute. Pour le second, c’est souvent plus complexe car il s’agit principalement d’une question de goûts.”

    J’ai ri très fort.

  • http://twitter.com/L_Demontiers Laurent DEMONTIERS

    Merci pour cet article didactique et synthétique. Par contre “le design est une question de goûts” m’a fait sursauter.

  • http://twitter.com/L_Demontiers Laurent DEMONTIERS

    ha grillé par Julien

  • http://twitter.com/STPo Christophe Andrieu

    Sortir dès le deuxième paragraphe que le design est “principalement une question de goûts” sur un blog de designers, faut quand même être suicidaire…

  • http://twitter.com/enguerranws Enguerran Weiss

    Idem que Julien et Laurent, sinon bon article dans l’ensemble. Pour le H1, si un moteur de recherche préfère du texte, rien n’empêche l’image : on place l’image en background du H1, le texte dans le H1 avec une indentation genre -9999 et on a l’image + le texte, le beurre et l’argent du beurre.

  • francischouquet

    Je suis d’accord avec toi que ce n’est pas forcément bienvenu. Mea Culpa.

  • http://twitter.com/rochdaniel Daniel Roch ► SeoMix

    J’aime prendre des risques et lancer des trolls dans mes articles ;)

  • http://twitter.com/pstge Postage

    [mode neuneu] Pourquoi le design n’est pas une question de goûts?

  • http://twitter.com/pstge Postage

    [mode neuneu] Pourquoi le design n’est pas une question de goûts?

  • Julien

    “J’aime prendre des risques et lancer des trolls dans mes articles ;)”

    Ou écrire n’importe quoi et faire passer ça pour un troll maîtrisé après coup. Sans rancune ;)

  • Julien

    Parce qu’il doit répondre à des objectifs de communication précis, justement pour intéresser le prospect/client.

  • http://twitter.com/rochdaniel Daniel Roch ► SeoMix

    Je pensais ce que je disais, et je savais aussi pertinemment ce que l’on pourrait en penser. En référencement naturel et dans le business, le webdesign ne sert à rien : des sites hideux et avec une intégration horrible génèrent des centaines de milliers de visites et d’euros de chiffre d’affaire. Le webdesign est alors un plus. Et ce qui peut plaire à l’un peut paraître “moche” pour l’autre. ;)

  • Julien
  • http://guirec.me Guirec

    Concernant la troisième erreur dans l’utilisation de la balise H1, je me permet d’inviter tout ceux intéressés par ce point à lire l’article de Raphaël Goetter sur le sujet : http://blog.goetter.fr/post/16632403397/le-mythe-de-lelement-h1-unique-en-html

  • http://www.nota-bene.org/ Stephane Deschamps

    “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 devez donc supprimer toutes les balises H1 en trop.”

    Ce matin j’ai du boulot, et je ne prendrai pas le temps de répondre mais là tu lèves un gros serpent de mer trollesque : mal intégré, haha. (je vois dans les commentaires que ce n’est pas le seul, et vraiment je n’ai pas le temps).

    Je te relance de deux google dances et j’annonce que les règles de Google sont plus ou moins sujettes à changer en permanence, et je fais un dix de der avec : la sémantique n’est pas gravée dans le marbre, et en premier chef surtout pas dans celui de google.

    Le jugement de valeur sur la mauvaise intégration, vraiment, non non non.

  • http://twitter.com/mandibul_fr Mandibul.fr

    Le design set avant tout une question d’ergonomie, de lisibilité, d’utilisabilité. Je vois peu le rapport entre le design d’un site et la mauvaise utilisation d’un h1 ou d’un attribut de lien. A part si le design implique le chargement de multiples images un peu lourdes qui plomberaient les perfs, les points cités dans cet article n’ont pas grand chose à voir avec un bon ou un mauvais design. Par contre un site clair, joli, facile d’utilisation et accessible donne immanquablement un goût de “revenez-y” et, si les contenus sont à la hauteur, incite le visiteur au partage… et en ce sens le design peut améliorer le référencement.

  • Julien

    “En référencement naturel et dans le business, le webdesign ne sert à rien.”

    J’ai re-ri. Très très fort.

  • http://www.nota-bene.org/ Stephane Deschamps

    Poum, deuxième risque de troll.

    http://www.arespritesaccessible.net/

    (j’arrête pour ce matin, promis.)

  • http://twitter.com/pstge Postage

    Merci. Je trouvais que ça manquait un peu d’argumentaire. Tout le monde n’est pas webdesigner certifié ISO.

  • http://www.web-actually.fr William

    Hum sauf que cette technique n’est pas accessible. Quid si l’image ne charge pas ?
    Une alternative renseignée sera “lu” par les robots, il la mangera comme du texte.

    De plus les images porteuses de contenu dans les feuilles de style “caymal” !

  • http://twitter.com/Twikito Matthieu Bué

    Je suis aussi d’accord avec toi, mais le problème est que celui qui peut réellement nous faire mal quand une intégration ne lui convient pas, c’est bien Google !

  • http://twitter.com/loriskumo Loris Grillet

    Déjà une référence cet article!
    Merci beaucoup!

  • http://twitter.com/Twikito Matthieu Bué

    Ce que tu dis implique que la personne aura trouvé le site, je me trompe ? (cf paragraphe 2)

  • http://twitter.com/rochdaniel Daniel Roch ► SeoMix

    Je relis l’article et les commentaires, et j’ai peur que l’on interprète mal mes dires.

    Ce que je veux dire, c’est qu’une charte graphique est une question de goût. Si l’on prend pour exemple nos clients, certains vont adorer ce que l’on fait tandis que les autres vont vouloir des dizaines de modifications. C’est donc forcément une question de goût sur l’aspect visuel, par sur l’intégration ni l’ergonomie du webdesign, qui eux peuvent être jugé de manière qualitative.

    Mais on s’écarte du sujet. Je ne juge pas le webdesign comme étant une question de goût au sens général : je le disais du point de vue client ou visiteur lambda. Là où par contre on peut taper du point, c’est que l’intégration d’un webdesign est souvent mal optimisé pour le référencement, et c’est justement le sujet de cet article.

    Pour exemple, un simple coup d’œil à la page actuel et son code source me fait venir en tête une petite dizaine d’optimisations à mettre en place, sans pour autant changer l’aspect graphique du site WDFriday ;)

  • fvsch

    Une introduction plutôt sympathique.

    Sur la forme, quand on a quelques notions de HTML il y a de quoi baliser avec tous ces «la balise machin» utilisés pour désigner des choses qui ne sont pas des balises HTML. Florilège: «la balise H1» (H1 est un élément, mais la confusion élément/balise mettons que ça passe encore), «la balise meta title» (TITLE est un élément, ce n’est pas l’élément META, l’expression «meta title» elle-même est une bêtise), «la balise alt» (alt est un attribut), «la balise nofollow» (“nofollow” est une valeur d’attribut).

    C’est sans doute un réflexe de vieux con, mais ça m’a toujours choqué cette complaisance avec les concepts dans le milieu du référencement. Je sais bien que c’est une discipline empirique, mais l’empirisme n’exclut pas la rigueur.

    Sur le fond:
    - «la balise H1 doit toujours être unique pour en optimiser l’utilité»: on attends toujours les preuves (même empiriques ;)).
    - Sur le nofollow: «Le problème, c’est que Google a changé la façon de redistribuer la popularité d’une page». Ah? Le texte de cette partie n’est pas clair et laisse entendre que si on a un lien en nofollow, la popularité de la page n’est plus redistribuée pour aucun des liens de la page (même ceux en dofollow). Je n’y crois pas des masses et je suppose qu’il doit s’agir d’une erreur de lecture de ma part ou d’une maladresse dans l’écriture. Le lien donné comme source concerne uniquement la META robots, pas l’utilisation de l’attribut rel avec la valeur “nofollow”.
    - Liens dupliqués: on commence par dire que Google va exploiter uniquement la première occurrence d’un lien vers une URL donnée, et ignorer les autres. Partant, pourquoi diable imaginer des solutions plus ou moins difficiles à implémenter, et potentiellement nuisibles (notamment les faux liens en JS, potentiellement inaccessible), si justement Google s’en fiche? Autant garder de vrais liens (en sachant qu’ils ne nuiront pas), en réduire le nombre et s’assurer que la première instance a un anchor text pertinent.

  • http://twitter.com/rochdaniel Daniel Roch ► SeoMix

    Tout à fait d’accord. Cette méthode permet de contourner proprement le problème (à condition de ne pas utiliser cet manière de faire sur un trop grand nombre d’éléments de la page).

  • Julien

    “Ce que je veux dire, c’est qu’une charte graphique est une question de goût”

    NON.

  • http://twitter.com/rochdaniel Daniel Roch ► SeoMix

    J’avais déjà lu son article, et je suis d’accord avec ce qu’il dit.

    Mais d’après plusieurs tests de référencement, une seule balise H1 est meilleure pour le référencement naturel, tout en étant parfaitement correcte du point de vue sémantique.

  • http://www.web-actually.fr William

    Je pense que ça va au delà de la balise H1. C’est surtout la structure du document qui est à soigner. Le plugin HeadingMaps pour Firefox vus aidera en ce sens

  • http://twitter.com/STPo Christophe Andrieu

    Oui, mais non, c’est pas du tout une affaire de goûts et de couleurs, quand les clients font des retours subjectifs (“j’aime / j’aime pas”, “ma femme aime le rose”) on les mets à la poubelle immédiatement.
    La direction artistique comme le web design doivent servir le propos, pas flatter les lubies du commanditaires.

  • fvsch

    Ce n’est une question de gout que si on ne maitrise pas les enjeux de la communication visuelle, et que les seuls outils dont on dispose pour juger de la pertinence d’une communication visuelle sont «j’aime/j’aime pas».

    Bien sûr que les clients vont juger avec leur gouts («j’aime/j’aime pas», «mon mari préfère le vert», etc.), parce que justement ils ne maitrisent pas les enjeux de leur communication visuelle… sinon ils ne feraient pas appel à des professionnels qui, eux, au moins en théorie, les maitrisent.

  • http://twitter.com/rochdaniel Daniel Roch ► SeoMix

    Il est vrai que Google change beaucoup la donne dans son algorithme. Mais au niveau de la compréhension des pages et de la structure de celles-ci, peu de changements sont mis en place en ce moment. Google est plutôt en train de taper du point sur la table contre le contenu dupliqué, les contenus à faible valeur ajoutée ou encore les fermes de liens.

    Donc en référencement, on juge systématiquement l’intégration comme étant mauvaise ou bonne, dans le sens où elle va faciliter la compréhension, l’indexation et la mise en avant des contenus d’un site pour les moteurs de recherche (et donc pour de nouveaux visiteurs).

  • http://www.web-actually.fr William

    Et puis l’air de rien, tous nos efforts d’intégration ne serviront à rien si le contenu n’est pas pertinent. A mon sens cela constitue une grosse partie du référencement : Le contenu est roi !

    PS : je suis déçu, il manque le Troll sur le Flash :D

  • AudrasJb

    Salut,

    Ouf, je ne suis pas le seul à m’être agacé du manque de rigueur de l’article…
    Surtout venant d’un article qui se veut pédagogique, c’est à mon avis très important d’appeler les choses par leur nom. Les confusions élément / balise / attribut / etc. sont fréquentes sur les forums fréquentés par des personnes qui sont en phase (d’auto) apprentissage, mais c’est vraiment dommage de les retrouver sur ce genre d’article. Et ça participe à la confusion générale…

    Pour la balise contenant une image, je rajouterais que le passage par un background CSS et un text-indent négatif sur le texte est une mauvaise pratique : les images porteuses de contenu doivent être balisés avec IMG avec un texte alternatif ad hoc, qu’il s’agisse de titre ou pas.

  • http://twitter.com/rochdaniel Daniel Roch ► SeoMix

    Pour le liens dupliqués, je suis d’accord, même s’il peut être pertinent d’avoir deux liens vers une même page, les deux avec une ancre différente : et dans ce cas, les méthodes proposées dans cet article sont un plus en SEO.

    Pour la balise H1, il suffit de consulter les tests SEO sur le sujet :
    - http://www.seounique.com/blog/multiple-h1-tags-triggers-google-penalty/
    - http://referencement.abondance.com/2010/10/referencement-5-criteres-in-page-une.html
    - http://forum.webrankinfo.com/balise-doit-elle-etre-unique-t133463.html
    - http://www.flexewebs.com/semantix/semantic-uses-of-h1-h2-h6-html-tags/

    Pour le nofollow, il est vrai que j’aurais pu être explicite. Pour résumer : un lien nofollow présent dans une page va bloquer la transmission d’une partie de la popularité de cette même page aux autres liens. Et si on indique un lien en nofollow, on indique que l’on “décrédibilise” ce lien par rapport aux autres, ce qui pose tout simplement la question de le garder.

  • noclat

    Excellent article, exactement ce qu’il me fallait car je suis en train de m’embrouiller sur un intégration avec les niveaux de titre. Clair et complet. Merci beaucoup !

  • Nicolas

    Bonjour,

    D’où proviennent les sources qui te permette de dire qu’il est nécessaire de se limiter à un seul h1 par page (ce qui va totalement à l’encontre du système de structure d’HTML5). Car dans cet article de 2010 (http://www.nicemedia.fr/blog/articles-referencement/6-conseils-seo-de-matt-cutts-expliques-en-francais) Matt Cutts précise bien qu’il n’est pas nécéssaire de ce limiter à seulement un h1 et que tant que ça a du sens c’est ok.

    Tu dis aussi “que dans la mesure du possible” la balise h1 dans être du texte. Je serai aussi curieux de connaître tes sources sur ce point, google donne beaucoup d’importance à l’attribut alt (ex: google image) et une image dans un h1 avec un attribut alt correctement mentionner a, je pense, le même poids qu’un un texte quelconque.

    De plus avec ce genre de principe on revient sur des choses chelou du genre text-indent: -9999px. Si une image nécessite un texte de substitution alors clairement elle devra se trouver dans l’HTML (vu que porteuse de sens) et mentionné par un attribut alt pertinent. Bref, article à prendre avec des pincettes.

  • fvsch

    Pour le H1, seul le premier lien est un résultat de test SEO. Le reste c’est des opinions non sourcées. Et donc si je m’arrête sur le test présenté dans le premier lien, la première chose que je constate c’est qu’il n’y a pas de protocole de test, il n’y a pas de test témoin, bref pas d’approche scientifique.

    Le constat qui est fait est intéressant, mais la conclusion est un peu rapide, notamment si on considère les autres facteurs possibles qui auraient pu entrainer une pénalité automatique:
    - Texte masqué.
    - Possibilité de keyword stuffing.
    - Autres paramètres sur la page ou en externe.

    Le suspect le plus clair étant le texte masqué (mais je ne m’avancerai pas à dire qu’il est pénalisé automatiquement). Donc il faudrait au moins deux tests séparés: un sur les H1 multiples, un sur le texte masqué.

    Pour avoir un début de preuve empirique, il faudrait:
    - Des dizaines de constats documentés, à l’image de cet article, mais avec moins de paramètres mélangés.
    - Et au moins quelques tests réalisés avec des pages de test spécifiques conçues pour isoler les paramètres du problème.
    Là ça commencerait à être solide. Hélas, je vois très rarement ce niveau de preuve sur des questions de SEO.

  • http://twitter.com/rochdaniel Daniel Roch ► SeoMix

    Mes sources sont les différents tests réalisés par des référenceurs anglais et français, qui prouvent qu’à chaque fois une balise H1 seule l’emporte sur de multiples balises H1 (car on focalise le contenu sur une expression), et qu’une balise H1 texte se positionne également mieux qu’une balise H1 image.

    Après, si un site a plusieurs H1 avec chacun une image, cela ne l’empêchera pas de se référencer. C’est juste qu’il aurait pu faire mieux.

    Et pour l’HTMl5, je suis parfaitement d’accord, mais pour le moment Google ne donne aucune préférence à ce langage contre l’HTML 4.

  • http://twitter.com/_Florian_R Florian

    >Mes sources sont les différents tests réalisés par des référenceurs anglais et français

    Cool. Maintenant on veux les liens.

  • Pingback: SEO | Pearltrees

  • http://twitter.com/Skoua Arthur

    Disons que l’ergonomie est plus important que le design, c’est plus vrai que “le webdesign ne sert à rien”.
    J’en prends pour exemples Facebook et Google qui ont un design très sobre voir inexistant mais une ergonomie très bien pensée (du moins ça continue chez Google).

    Et pour souligner ce que tu dis, on peut en effet parler de leboncoin.fr qui est super moche mais marche très bien.

    Concernant la balise h1 et les autres polémiques, personnellement j’ai arrêté de réfléchir à ce genre de détails quand j’intègre un site. Chaque “spécialiste SEO” a son avis sur le sujet, c’est-à-dire que personne ne sait ce qu’il en est.

    Autant faire un site propre, avec du contenu intéressant et pas dupliqué, bien présenté au niveau de la sémantique et faire son marketing correctement.
    Se pignoler à se demander si on devrait mettre un ou plusieurs h1 ne sert pas à grand-chose selon moi.

  • francischouquet

    Entièrement d’accord avec ça et je dois avouer que c’est une bataille de tous les jours en ce qui me concerne.

  • Sylvain

    A propos de ce si précieux H1 lié à une image/logo, le gourou a déjà parlé en 2009 : http://www.youtube.com/watch?v=fBLvn_WkDJ4&lr=1.

    AMHA, “alt” reste un attribut relativement BIEN interprété par Googlebot et même si cela ne suffit peut-être pas pour garantir une optimisation maximale, ça reste essentiel !

    Alors au final on pourrait se demander si c’est vraiment nécessaire de modifier ce H1 par un paramétrage côté CSS ? Dans l’absolu, le “alt” d’une image ne correspond-il pas au H1 d’une page HTML ? :p

  • http://www.nota-bene.org/ Stephane Deschamps

    “Reste calme, Joe.”
    “Joe, reste calme.”
    “Quand est-ce qu’on mange ?”

  • http://twitter.com/geoffrey_crofte Geoffrey Crofte

    Merci pour cette contribution Daniel :)

    Entre les gens qui râlent mais qui n’expliquent pas pourquoi (comme d’hab), ceux qui râlent et essayent d’apporter un complément à l’article (merci), et ceux qui lisent sans commenter, j’interviens avec une quelques questions :

    - J’ai en tête qu’une page, dans l’idéal, ne devrait pas faire de lien vers elle-même. Est-ce vrai ?
    Dans ton exemple de pagination, on est sur la page 4, le lien “4″ n’est pas désactivé, c’est pour cela que je pose la question.

    - Quand tu dis qu’une balise meta description est obligatoire, c’est au nom du référencement n’est-ce pas ? Google ne l’indexe pas sinon ? Le terme obligatoire me semble mal choisi, mais je chipote peut-être. (je crois que les sites de Google n’utilisent pas de meta description)

    Bon, j’ai une vague idée des réponses possibles, mais tu as certainement des réponses précises à apporter :)
    Merci et bonne continuation.

  • http://twitter.com/enguerranws Enguerran Weiss

    C’est sûr, ce n’est pas une technique accessible, et encore moins une bonne pratique. Seulement, on parle de référencement naturel ici, et il me semble que le h1 avec du texte a plus de poids que le h1 avec une image qui contient du texte alternatif.

  • http://twitter.com/enguerranws Enguerran Weiss

    Je pense qu’on s’y perd un peu dans ces commentaires avec des affirmations de ce genre, qui relève soit d’un manque d’expérience, soit d’un manque de lecture en théorie de la com (sans vouloir être méchant hein, ce n’est surement pas le cas ;) ).

    Il y a des objectifs en terme d’image de marque, de communication, de marketing (quelqu’un a déjà dit tout ça non ?), d’ergonomie et pour chapeauter le tout, d’expérience utilisateur. A partir de ce moment-là, il n’y a plus de question de goût. D’ailleurs, quand tous ces objectifs sont remplis, il y a rarement de retours.

    “des sites hideux et avec une intégration horrible génèrent des centaines de milliers de visites et d’euros de chiffre d’affaire” > quel est le rapport ? un site qui vend du low-cost, de la promo, aura besoin d’un design et d’une image cheap pour répondre à ses objectifs. Je connais des sites qui ne pourraient pas tenir leur chiffre d’affaire sans leur design, que peut-on en déduire ?

  • http://twitter.com/Twikito Matthieu Bué

    Concernant la pagination, tu as entièrement raison, c’est un oubli de ma part ! C’est corrigé.

    Concernant la méta description, elle est nécessaire pour pouvoir maîtriser le contenu de la snippet dans la SERP de Google, autrement il ira lui-même chercher un bout de contenu qu’il jugera pertinent. Cette méta ne servant pas au positionnement de la page dans les SERP, elle a uniquement un objectif de décrire au mieux et dans le sens voulu la page pour l’internaute.
    Tu comprendras donc qu’elle n’est pas obligatoire, mais fortement recommandée ! :)

  • http://www.nota-bene.org/ Stephane Deschamps

    Mais non mais justement : tout le travail d’ingénierie d’un site web est une transaction entre les différentes spécialités qui composent l’équipe, et prôner une technique en total désaccord avec les pratiques est contre-productif à long terme.

    Sans vouloir trouver une voie moyenne entre ton domaine, le référencement naturel, et les autres, c’est peine perdue de mettre en place ces méthodes : tu notes toi-même que c’est nocif, mais en gros ce n’est pas grave.

    Franchement, ça ne redore pas le blason de ton domaine.

  • CQFD

    Tu sais, ça ne sers a rien de se moquer si tu n’as que “rire” dans ton vocabulaire, et un trou noir absolu dans ton argumentaire. Tu me fais penser a ces gens qui disent “OSEF”, mais n’ont rien de constructif ou pertinent a dire. Daniel a raison : J’ai déjà vu des sites terriblement moche faire le succès et la fortune d’un web développer. Toi, tu as sans doute raison, parce que toi seul sais si tu as ri ou pas. Mais tu as tort de rire, parce que si Daniel est dans l’erreur, il ne s’en sortira jamais si tu ne lui explique pas. Tu as tort de commenter, parce que franchement, moi, nouveau visiteur sur ce site, j’en ai royalement rien a faire que tu vienne rire sur une phrase : je ne comprendrai pas cette blague si tu ne me l’explique pas.
    Tout ce que tu fais, c’est te pavaner devant tout le monde, ronfler bruyamment. Tu rigole tout seul, royalement ridicule.

  • Pingback: Tips & tricks | Pearltrees

  • http://www.caramail.tv/ Caramail

    Excellent article qui reprend toutes les bonnes pratiques ! J’ai pu découvrir pour l’occasion comment faire apparaître des évènements grâce à certaines balises

  • Pingback: En référencement, on ne dit pas...

  • Arthur Cassarin-Grand

    Bonjour, tu recommandes dans ton article 60 caractères maximum pour ton élément title. Est-ce par expérience que tu en as déduis cela, pourrais-tu justifier ton choix ? Partout j’ai vu recommandé tantôt 70 caractères, tantôt 63 caractères, ce qui semble être dans la majorité des cas le nombre de caractères affichés dans les SERP.

    J’ai d’ailleurs trouvé un article intéressant sur les éléments title (test à l’appui) par SEOMoz.

    http://www.seomoz.org/blog/title-tags-is-70-characters-the-best-practice-whiteboard-friday

  • BretagneMarine

    bien vu la balise canonical! Maintenant que Google fait la fine bouche question contenu, c´est toujour strès pratique pour éviter le DC, surtout quand on se casse le crâne à avoir du contenu correct! (merci IP)

  • http://www.clippingpathservice.com/ Clipping Path service

    its a naturally great article…….and nice webdesign……….

  • Pingback: H1 et Référencement naturel

Live Tweet

Dans le Blog

Newsletter

Vous souhaitez être tenu au courant des dernières nouvelles concernant le WDfriday, événements, conférences, barcamps, etc… ?

N'hésitez pas à vous inscrire à notre newsletter !