html5 et le seo : quelles opportunités ?
TRANSCRIPT
HTML5 et le référencement
COMMENT PEUT-IL BOOSTER VOTRE VISIBILITÉ ?
Eroan BoyerNantes, le 27/10/2012
www.eboyer.comtwitter.com/eroan
MES ACTIVITÉS
2 sites principaux
25 à 30 000 VU / jour
CMS maison
HTML5 depuis 2010
350 à 500 VU / jour
Magento
HTML5 depuis 2011
LE LANGAGE HTML5
Les tests complets :http://html5test.com/results/desktop.html
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
Attention : rétro-compatibilité avec html5shivhttps://code.google.com/p/html5shiv/
DE NOUVELLES FONCTIONNALITÉS
Pour aller plus loin :http://www.w3.org/html/logo/
8 classes pour mieux comprendre
SEO On-page :
• Syntaxe allégée• Balisage sémantique• Attributs de liens rel=• Rôles ARIA• Microdonnées
UN BALISAGE SIMPLIFIÉ
Nouvelle syntaxe allégée : les entêtes
HTML4 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Titre de ma page</title> <link rel="stylesheet" type="text/css" href="/style/css.css" /> <script type="text/javascript" src="/scripts/plugins.js"> </head><body></body></html>
HTML5 :
<!DOCTYPE html>
<html lang="fr"> <head> <meta charset="UTF-8">
<title>Titre de ma page</title> <link rel="stylesheet" href="/style/css.css" /> <script src="/scripts/plugins.js"> </head><body></body></html>
= gain de temps et de poids
UN LANGAGE MOINS RIGOUREUX
Des recommandations plus « libres »
HTML5 :
<a href="/actus/"> <h1>Les actualités</h1> <img src="/images/actus.png" alt="actualités" /> <p>Retrouvez les actualités du site en continu…</p></a>
Grande flexibilité, possibilités infinies
= Gare à la taille et au contenu des ancres, dilution des mots clés
HTML4 / XHTML :
<h1><a href="/actus/">Les actualités</a></h1> <img src="/images/actus.png" alt="actualités" /> <p><a href="/actus/">Retrouvez les actualités du site en continu…</a></p>
Contraintes techniques liées aux éléments de type blocs / en ligne
Cas pratique n°1 : les liens élargis
UN LANGAGE MOINS RIGOUREUX
Des recommandations plus « libres »
HTML5 :
<header><h1>Titre de mon site</h1></header><section><h1>Titre de ma page</h1></section><aside><h1>Sidebar</h1></aside>
Un <h1> par section, qui en définit le contenu
= grande prudence, manque de recul
HTML4 / XHTML :
<body><h1>Titre de ma page</h1><p>Ma prose</p><div><h2>Sidebar</h2></div></body>
On le sait : un seul <h1> par page…
Cas pratique n°2 : les titres multiples
UN LANGAGE MOINS RIGOUREUX
Des recommandations plus « libres »
HTML5 :
<html><body><p>Mon 1er paragraphe<p>Mon 2ème paragraphe
Interprétation intelligente du balisage mais avec des règles complexes
= gare à l’accès universel, respecter les conventions syntaxiques
HTML4 / XHTML :
<html><body><p>Mon 1er paragraphe</p><p>Mon 2ème paragraphe</p></body></html>
Structure figée basée sur la syntaxe XML
Cas pratique n°3 : les balises fermantes
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+
Pour aller plus loin :https://support.google.com/webmasters/bin/answer.py?hl=fr&answer=1408986
UNE STRUCTURE SIMPLIFIÉE
Nouvelle sémantique html : la segmentation du corps
Pour aller plus loin :http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="sidebar">
</div>
<div id="footer"></div>
<div id="block"></div>
HTML4 / XHTML :
<header></header>
<nav></nav>
<footer></footer>
<section></section>
<aside></aside>
<article></article>
HTML5 :
= plus compréhensible
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…)
<header role="banner"></header>
<nav role="navigation"><ul role="menubar"></ul></nav>
<footer></footer>
<section role="main"></section> <aside></aside>
<article></article>
HTML5 : HTML5 + rôles ARIA :
<header></header>
<nav></nav>
<footer></footer>
<section></section> <aside></aside>
<article></article>
<section id=search></section> <section role="search"></section>
<nav role="navigation"
></nav><nav></nav>
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
de 20 à 40% d’espace occupé en plus
Une meilleure attractivité visuelle
Jusqu’à 5 liens supplémentaires
Quels résultats concrets dans les SERP ?
= 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=1088472
= 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">[email protected]</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
éditer template/page/html/breadcrumbs.phtmlhttp://inchoo.net/ecommerce/magento/google-rich-snippets-in-magento/
extension « J4Schema »http://extensions.joomla.org/extensions/site-management/seo-a-metadata/meta-data/19961
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
Le vendre aux clients et l’intégrer dans le cahier des charges initial
Retour sur investissement quasi immédiat : visibilité + visites
Conseils
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.
Pour dénoncer vos « copains » :http://support.google.com/webmasters/bin/request.py?contact_type=rich_snippets_spam
suroptimisation = sanctions et pénalités
LA RECHERCHE A CHANGÉ
Recherche localisée
Recherche personnalisée
Recherche en temps réel
Un algorithme en perpétuelle évolution
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éeshttps://chrome.google.com/webstore/detail/microdatareveal/olapakiakkblfdaajcifgldandnikpdh
« HTML5 Outliner » : liste les niveaux des blocs et headershttps://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 webhttps://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
HTML5 :
<time datetime="2012-10-28">Demain, on change d’heure !</time>
Relation temporelle précise
HTML4 / XHTML :
<span>Demain, on change d’heure !</span>
Information rapidement obsolète