HTML5 et le référencement                               Eroan Boyer                               Nantes, le 27/10/2012   ...
MES ACTIVITÉS2 sites principaux            25 à 30 000 VU / jour           350 à 500 VU / jour                CMS maison  ...
LE LANGAGE HTML5Généralités• Successeur de HTML4, officialisé en 2009• Développé par le WhatWG, puis par le W3C• Supporté ...
DE NOUVELLES FONCTIONNALITÉS8 classes pour mieux comprendre                                        SEO On-page :          ...
UN BALISAGE SIMPLIFIÉNouvelle syntaxe allégée : les entêtesHTML4 :                                                        ...
UN LANGAGE MOINS RIGOUREUXDes recommandations plus « libres »Cas pratique n°1 : les liens élargisHTML4 / XHTML :          ...
UN LANGAGE MOINS RIGOUREUXDes recommandations plus « libres »Cas pratique n°2 : les titres multiplesHTML4 / XHTML :       ...
UN LANGAGE MOINS RIGOUREUXDes recommandations plus « libres »Cas pratique n°3 : les balises fermantesHTML4 / XHTML :      ...
LES ATTRIBUTS « RELATIONNELS »Donner du sens aux liens attribut                   fonctions rel="nofollow"             Ne ...
UNE STRUCTURE SIMPLIFIÉENouvelle sémantique html : la segmentation du corpsHTML4 / XHTML :                                ...
LES RÔLES WAI-ARIAARIA = Accessible Rich Internet Applications ;Créé par le W3C et la WAI pour l’accessibilité : assistanc...
LES MICRODONNÉES STRUCTURÉESObjectif : améliorer la compréhension3 formats : microdonnées, microformats et RDFa.Recommanda...
LES RICH SNIPPETS (DONNÉES ENRICHIES)                 En pratique dans les SERP :                 E-commerce              ...
LES RICH SNIPPETS EN ACTIONQuels résultats concrets dans les SERP ? de 20 à 40% d’espace occupé en plus Une meilleure at...
DES OUTILS PUISSANTSMise en place du balisage : Google est votre amiRecommandations de Google :http://support.google.com/w...
UN EXEMPLE AVEC SCHEMA.ORGExemple de mise en œuvre : fiche société<div itemscope itemtype="http://schema.org/Organization"...
LES MICRODONNÉES ET LES CMSIntégration d’un breadcrumb : gagner du temps               plug-in « Breadcrumb NavXT »       ...
QUEL COÛT DE MISE EN ŒUVRE ?Pour une agence web ou un freelance•   Breadcrumb : 1 heure•   Fiche produit : 3 heures•   Art...
GARE À LA SUROPTIMISATION   « Un Rich Snippet peut être considéré comme du spam s’il nuit   à lexpérience de lutilisateur ...
LA RECHERCHE A CHANGÉUn algorithme en perpétuelle évolutionRecherche localiséeRecherche personnaliséeRecherche en temps ré...
EN RÉSUMÉUtiliser HTML5 en production dès aujourd’hui, c’est : Alléger le code source = réduire le temps de chargement ;...
LES OUTILS DE DÉVELOPPEMENTPlugins pour Google Chrome   « Microdata.reveal » : affiche les microdonnées détectées   https:...
DES QUESTIONS ?Merci à tous pour votre attention !
BONUS : UNE NOUVELLE BALISE TIMEOu l’art de temporiser vos contenusHTML4 / XHTML :                            HTML5 :<span...
Prochain SlideShare
Chargement dans…5
×

HTML5 et le SEO : quelles opportunités ?

19 816 vues

Publié le

Le diaporama projeté par Eroan Boyer pour la conférence "html5 et le SEO" le samedi 27 octobre 2012 au SEOCamp de Nantes.

Plus d'infos : http://www.eboyer.com/referencement/1072-html5-seo/
Mon twitter : http://twitter.com/eroan

Publié dans : Technologie
1 commentaire
3 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
19 816
Sur SlideShare
0
Issues des intégrations
0
Intégrations
14 174
Actions
Partages
0
Téléchargements
66
Commentaires
1
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

HTML5 et le SEO : quelles opportunités ?

  1. 1. HTML5 et le référencement Eroan Boyer Nantes, le 27/10/2012 www.eboyer.com twitter.com/eroanCOMMENT PEUT-IL BOOSTER VOTRE VISIBILITÉ ?
  2. 2. MES ACTIVITÉS2 sites principaux 25 à 30 000 VU / jour 350 à 500 VU / jour CMS maison Magento HTML5 depuis 2010 HTML5 depuis 2011
  3. 3. LE LANGAGE HTML5Gé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 138Les tests complets :http://html5test.com/results/desktop.htmlAttention : rétro-compatibilité avec html5shivhttps://code.google.com/p/html5shiv/
  4. 4. DE NOUVELLES FONCTIONNALITÉS8 classes pour mieux comprendre SEO On-page : • Syntaxe allégée • Balisage sémantique • Attributs de liens rel= • Rôles ARIA • MicrodonnéesPour aller plus loin :http://www.w3.org/html/logo/
  5. 5. UN BALISAGE SIMPLIFIÉNouvelle syntaxe allégée : les entêtesHTML4 : 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
  6. 6. UN LANGAGE MOINS RIGOUREUXDes recommandations plus « libres »Cas pratique n°1 : les liens élargisHTML4 / 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
  7. 7. UN LANGAGE MOINS RIGOUREUXDes recommandations plus « libres »Cas pratique n°2 : les titres multiplesHTML4 / XHTML : HTML5 :<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
  8. 8. UN LANGAGE MOINS RIGOUREUXDes recommandations plus « libres »Cas pratique n°3 : les balises fermantesHTML4 / XHTML : HTML5 :<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
  9. 9. 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
  10. 10. UNE STRUCTURE SIMPLIFIÉENouvelle sémantique html : la segmentation du corpsHTML4 / XHTML : HTML5 :<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éhensiblePour aller plus loin :http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
  11. 11. LES RÔLES WAI-ARIAARIA = Accessible Rich Internet Applications ;Créé par le W3C et la WAI pour l’accessibilité : assistance pourmalvoyants 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>
  12. 12. LES MICRODONNÉES STRUCTURÉESObjectif : améliorer la compréhension3 formats : microdonnées, microformats et RDFa.Recommandation : microdonnées avec vocabulaire de schema.org, validé parGoogle, Microsoft, Yahoo! et Yandex.Exemples de schémas :schema fonctionsbreadcrumb Déterminer les éléments de l’arborescence (fil d’ariane)product Associer marque, prix, stock, délai de livraison à un produitbook, movie Détailles les caractéristiques d’une oeuvreperson Carte de visite virtuelle d’un individuorganization Informations sur une sociétéreview, reviewRating Reprendre les commentaires et notes des visiteurs
  13. 13. 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…
  14. 14. LES RICH SNIPPETS EN ACTIONQuels 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%
  15. 15. DES OUTILS PUISSANTSMise en place du balisage : Google est votre amiRecommandations de Google :http://support.google.com/webmasters/bin/topic.py?hl=fr&topic=1088472 = aide dans les choix techniquesTest en temps réel avec rendu :http://www.google.com/webmasters/tools/richsnippets = facilite la mise en placeOutil de suivi (Optimisation > Données structurées) :https://www.google.com/webmasters/tools/home?hl=fr = confirme la prise en charge
  16. 16. UN EXEMPLE AVEC SCHEMA.ORGExemple de mise en œuvre : fiche société<div itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">Elecstore</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>
  17. 17. LES MICRODONNÉES ET LES CMSInté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/
  18. 18. 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égligeableConseils Le vendre aux clients et l’intégrer dans le cahier des charges initial Retour sur investissement quasi immédiat : visibilité + visites
  19. 19. GARE À LA SUROPTIMISATION « Un Rich Snippet peut être considéré comme du spam s’il nuit à lexpérience de lutilisateur 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ésPour dénoncer vos « copains » :http://support.google.com/webmasters/bin/request.py?contact_type=rich_snippets_spam
  20. 20. LA RECHERCHE A CHANGÉUn algorithme en perpétuelle évolutionRecherche localiséeRecherche personnaliséeRecherche en temps réelRecherche sémantique
  21. 21. 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
  22. 22. LES OUTILS DE DÉVELOPPEMENTPlugins 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
  23. 23. DES QUESTIONS ?Merci à tous pour votre attention !
  24. 24. BONUS : UNE NOUVELLE BALISE TIMEOu l’art de temporiser vos contenusHTML4 / XHTML : HTML5 :<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

×