HTML5 et le SEO : quelles opportunités ?

HTML5 et le référencement

Eroan Boyer
Nantes, le 27/10/2012

www.eboyer.com
twitter.com/eroan

COMMENT PEUT-IL BOOSTER VOTRE VISIBILITÉ ?

MES ACTIVITÉS
2 sites principaux

25 à 30 000 VU / jour 350 à 500 VU / jour

CMS maison Magento

HTML5 depuis 2010 HTML5 depuis 2011

LE LANGAGE HTML5
Généralités
• Successeur de HTML4, officialisé en 2009
• Développé par le WhatWG, puis par le W3C
• Supporté par tous les navigateurs récents

434 389 378 372 138

Les tests complets :
http://html5test.com/results/desktop.html

Attention : rétro-compatibilité avec html5shiv
https://code.google.com/p/html5shiv/

DE NOUVELLES FONCTIONNALITÉS
8 classes pour mieux comprendre

SEO On-page :

• Syntaxe allégée
• Balisage sémantique
• Attributs de liens rel=
• Rôles ARIA
• Microdonnées

Pour aller plus loin :
http://www.w3.org/html/logo/

UN BALISAGE SIMPLIFIÉ
Nouvelle syntaxe allégée : les entêtes

HTML4 : HTML5 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 <!DOCTYPE html>
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr"> <html lang="fr">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; <meta charset="UTF-8">
charset=UTF-8" />
<title>Titre de ma page</title> <title>Titre de ma page</title>
<link rel="stylesheet" type="text/css" href="/style/css.css" /> <link rel="stylesheet" href="/style/css.css" />
<script type="text/javascript" src="/scripts/plugins.js"> <script src="/scripts/plugins.js">
</head> </head>
<body> <body>
</body> </body>
</html> </html>

= gain de temps et de poids

UN LANGAGE MOINS RIGOUREUX
Des recommandations plus « libres »

Cas pratique n°1 : les liens élargis

HTML4 / XHTML : HTML5 :

<h1><a href="/actus/">Les actualités</a></h1> <a href="/actus/">
<img src="/images/actus.png" alt="actualités" /> <h1>Les actualités</h1>
<p><a href="/actus/">Retrouvez les actualités du site <img src="/images/actus.png" alt="actualités" />
en continu…</a></p> <p>Retrouvez les actualités du site en continu…</p>
</a>

 Contraintes techniques liées aux  Grande flexibilité, possibilités infinies
éléments de type blocs / en ligne

= Gare à la taille et au contenu des ancres, dilution des mots clés


Cas pratique n°2 : les titres multiples


<body> <header>
<h1>Titre de ma page</h1> <h1>Titre de mon site</h1>
<p>Ma prose</p> </header>
<div> <section>
<h2>Sidebar</h2> <h1>Titre de ma page</h1>
</div> </section>
</body> <aside>
<h1>Sidebar</h1>
</aside>

 On le sait : un seul <h1> par page…  Un <h1> par section, qui en définit le
contenu

= grande prudence, manque de recul


Cas pratique n°3 : les balises fermantes


<html> <html>
<body> <body>
<p>Mon 1er paragraphe</p> <p>Mon 1er paragraphe
<p>Mon 2ème paragraphe</p> <p>Mon 2ème paragraphe
</body>
</html>

 Structure figée basée sur la syntaxe XML  Interprétation intelligente du balisage
mais avec des règles complexes

= gare à l’accès universel, respecter les conventions syntaxiques

LES ATTRIBUTS « RELATIONNELS »
Donner du sens aux liens

attribut fonctions
rel="nofollow" Ne pas tenir compte du lien. Pagerank sculpting, qualité
rel="search" Lien vers le moteur de recherche interne
rel="alternate" Version alternative : flux RSS, pdf, version traduite…
rel="prev" / "next" Pagination numérique ou sommaire
rel="publisher" Associer une page Google+ au site
rel="author" Associer un profil Google+ à un article. AuthorShip, AuthorRank

Association :
1) Lien <a href="https://plus.google.com/[id]?rel=author">Auteur</a>
2) Ajout dans la section « Également auteur de » sur le profil Google+

https://support.google.com/webmasters/bin/answer.py?hl=fr&answer=1408986

UNE STRUCTURE SIMPLIFIÉE
Nouvelle sémantique html : la segmentation du corps


<div id="header"></div> <header></header>

<div id="menu"></div> <nav></nav>
<div id="content"></div> <section></section>
<div id="block"></div> <div <article></article>
<aside>
id="sidebar">
</aside>
</div>

<div id="footer"></div> <footer></footer>

= plus compréhensible
http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html

LES RÔLES WAI-ARIA
ARIA = Accessible Rich Internet Applications ;

Créé par le W3C et la WAI pour l’accessibilité : assistance pour
malvoyants ou non-voyants (JAWS, NVDA, VoiceOver…)

HTML5 : HTML5 + rôles ARIA :
<header> <header role="banner">
<section id=search></section> <section role="search"></section>
</header> </header>
<nav></nav> <nav role="navigation"><ul role="menubar"></ul></nav>
<section></section> <aside> <section role="main"></section> <aside>
</aside> </aside>
<article></article> <article></article>
<nav
role="navigation"
<nav></nav> ></nav>

<footer></footer> <footer></footer>

LES MICRODONNÉES STRUCTURÉES
Objectif : améliorer la compréhension

3 formats : microdonnées, microformats et RDFa.

Recommandation : microdonnées avec vocabulaire de schema.org, validé par
Google, Microsoft, Yahoo! et Yandex.

Exemples de schémas :

schema fonctions
breadcrumb Déterminer les éléments de l’arborescence (fil d’ariane)
product Associer marque, prix, stock, délai de livraison à un produit
book, movie Détailles les caractéristiques d’une oeuvre
person Carte de visite virtuelle d’un individu
organization Informations sur une société
review, reviewRating Reprendre les commentaires et notes des visiteurs

LES RICH SNIPPETS (DONNÉES ENRICHIES)
En pratique dans les SERP :

E-commerce
• Lien vers une catégorie
• Affichage des commentaires
• Visibilité prix et disponibilité

Blog ou portail
• Liens supplémentaires (3 ici)
• Affichage des commentaires
• Affichage de l’auteur

Thématique spécifique
• Événements
• Recettes de cuisine
• Musique…

LES RICH SNIPPETS EN ACTION
Quels résultats concrets dans les SERP ?

 de 20 à 40% d’espace occupé en plus
 Une meilleure attractivité visuelle
 Jusqu’à 5 liens supplémentaires

= un taux de clic en hausse de 10 à 30%

DES OUTILS PUISSANTS
Mise en place du balisage : Google est votre ami

Recommandations de Google :
http://support.google.com/webmasters/bin/topic.py?hl=fr&topic=108847
2

= aide dans les choix techniques

Test en temps réel avec rendu :
http://www.google.com/webmasters/tools/richsnippets

= facilite la mise en place

Outil de suivi (Optimisation > Données structurées) :
https://www.google.com/webmasters/tools/home?hl=fr

= confirme la prise en charge

UN EXEMPLE AVEC SCHEMA.ORG
Exemple de mise en œuvre : fiche société

<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Elec'store</span>

Coordonnées :
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
Adresse postale :
<span itemprop="streetAddress">3 rue François Evellin</span>
<span itemprop="postalCode">F-44000</span>
<span itemprop="addressLocality">Nantes, France</span>
</div>

Téléphone : <span itemprop="telephone">(33) 6 50 64 89 57</span>,
E-mail : <span itemprop="email">contact@elecstore.fr</span>,
Site web : <span itemprop="url">www.elecstore.fr</span>
</div>

LES MICRODONNÉES ET LES CMS
Intégration d’un breadcrumb : gagner du temps

plug-in « Breadcrumb NavXT »
http://wordpress.org/extend/plugins/breadcrumb-navxt/

module « schema.org »
http://drupal.org/project/schemaorg

extension « J4Schema »
http://extensions.joomla.org/extensions/site-management/seo-a-metadata/meta-
data/19961

éditer template/page/html/breadcrumbs.phtml
http://inchoo.net/ecommerce/magento/google-rich-snippets-in-magento/

QUEL COÛT DE MISE EN ŒUVRE ?
Pour une agence web ou un freelance

• Breadcrumb : 1 heure
• Fiche produit : 3 heures
• Article de blog : 3 heures
• Commentaires et avis : 4 heures

= négligeable

Conseils

 Le vendre aux clients et l’intégrer dans le cahier des charges initial
 Retour sur investissement quasi immédiat : visibilité + visites

GARE À LA SUROPTIMISATION

« Un Rich Snippet peut être considéré comme du spam s’il nuit
à l'expérience de l'utilisateur en mettant en évidence des
informations falsifiées ou trompeuses. »

Spam dans les Rich Snippets :
• N’encapsuler que des données présentes dans le contenu.
• Gare à l’utilisation des balises <meta>, invisibles.

suroptimisation = sanctions et pénalités

Pour dénoncer vos « copains » :
http://support.google.com/webmasters/bin/request.py?contact_type=rich_snippets_spam

LA RECHERCHE A CHANGÉ
Un algorithme en perpétuelle évolution

Recherche localisée

Recherche personnalisée

Recherche en temps réel

Recherche sémantique

EN RÉSUMÉ
Utiliser HTML5 en production dès aujourd’hui, c’est :

 Alléger le code source = réduire le temps de chargement ;
 Avoir une structure plus claire = être mieux compris des moteurs ;
 Jouer la carte de l’accessibilité = élargir son audience ;
 Donner du sens à son linking interne et externe grâce aux attributs rel ;
 Se mettre en avant sur le réseau social Google+ ;
 Gagner en visibilité dans les SERP (espace + liens) ;
 Être mis en avant à travers de nouvelles fonctionnalités et outils…

= prémâcher le travail pour Google

= anticiper les évolutions futures du SEO

LES OUTILS DE DÉVELOPPEMENT
Plugins pour Google Chrome

« Microdata.reveal » : affiche les microdonnées détectées
https://chrome.google.com/webstore/detail/microdatareveal/olapakiakkblfdaajcifgldandnikpdh

« HTML5 Outliner » : liste les niveaux des blocs et headers
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo/

« HTML Validator » : affiche les erreurs de code (validateur W3C)
https://chrome.google.com/webstore/detail/html-validator/cgndfbhngibokieehnjhbjkkhbfmhojo

« Firebug Lite » : le couteau-suisse du développeur web
https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench

DES QUESTIONS ?

Merci à tous pour votre attention !

BONUS : UNE NOUVELLE BALISE TIME
Ou l’art de temporiser vos contenus


<span>Demain, on change d’heure !</span> <time datetime="2012-10-28">Demain, on change
d’heure !</time>

 Information rapidement obsolète  Relation temporelle précise

HTML5 et le SEO : quelles opportunités ?

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML5 et le SEO : quelles opportunités ?

Similar to HTML5 et le SEO : quelles opportunités ? (20)

HTML5 et le SEO : quelles opportunités ?