Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
HTML5 et le référencement




                               Eroan Boyer
                               Nantes, le 27/10/2...
MES ACTIVITÉS
2 sites principaux




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

                CMS ...
LE LANGAGE HTML5
Généralités
• Successeur de HTML4, officialisé en 2009
• Développé par le WhatWG, puis par le W3C
• Suppo...
DE NOUVELLES FONCTIONNALITÉS
8 classes pour mieux comprendre




                                        SEO On-page :

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


HTML4 :                                                    ...
UN LANGAGE MOINS RIGOUREUX
Des recommandations plus « libres »

Cas pratique n°1 : les liens élargis


HTML4 / XHTML :    ...
UN LANGAGE MOINS RIGOUREUX
Des recommandations plus « libres »

Cas pratique n°2 : les titres multiples

HTML4 / XHTML :  ...
UN LANGAGE MOINS RIGOUREUX
Des recommandations plus « libres »

Cas pratique n°3 : les balises fermantes


HTML4 / XHTML :...
LES ATTRIBUTS « RELATIONNELS »
Donner du sens aux liens

 attribut                   fonctions
 rel="nofollow"            ...
UNE STRUCTURE SIMPLIFIÉE
Nouvelle sémantique html : la segmentation du corps


HTML4 / XHTML :                            ...
LES RÔLES WAI-ARIA
ARIA = Accessible Rich Internet Applications ;

Créé par le W3C et la WAI pour l’accessibilité : assist...
LES MICRODONNÉES STRUCTURÉES
Objectif : améliorer la compréhension

3 formats : microdonnées, microformats et RDFa.

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

                 E-commerce
          ...
LES RICH SNIPPETS EN ACTION
Quels résultats concrets dans les SERP ?

 de 20 à 40% d’espace occupé en plus
 Une meilleur...
DES OUTILS PUISSANTS
Mise en place du balisage : Google est votre ami

Recommandations de Google :
http://support.google.c...
UN EXEMPLE AVEC SCHEMA.ORG
Exemple de mise en œuvre : fiche société

<div itemscope itemtype="http://schema.org/Organizati...
LES MICRODONNÉES ET LES CMS
Inté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
• ...
GARE À LA SUROPTIMISATION

   « Un Rich Snippet peut être considéré comme du spam s’il nuit
   à l'expérience de l'utilisa...
LA RECHERCHE A CHANGÉ
Un algorithme en perpétuelle évolution

Recherche localisée




Recherche personnalisée




Recherch...
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ÉVELOPPEMENT
Plugins pour Google Chrome

   « Microdata.reveal » : affiche les microdonnées détectées
   ht...
DES QUESTIONS ?




Merci à tous pour votre attention !
BONUS : UNE NOUVELLE BALISE TIME
Ou l’art de temporiser vos contenus

HTML4 / XHTML :                            HTML5 :

...
Prochain SlideShare
Chargement dans…5
×

sur

HTML5 et le SEO : quelles opportunités ? Slide 1 HTML5 et le SEO : quelles opportunités ? Slide 2 HTML5 et le SEO : quelles opportunités ? Slide 3 HTML5 et le SEO : quelles opportunités ? Slide 4 HTML5 et le SEO : quelles opportunités ? Slide 5 HTML5 et le SEO : quelles opportunités ? Slide 6 HTML5 et le SEO : quelles opportunités ? Slide 7 HTML5 et le SEO : quelles opportunités ? Slide 8 HTML5 et le SEO : quelles opportunités ? Slide 9 HTML5 et le SEO : quelles opportunités ? Slide 10 HTML5 et le SEO : quelles opportunités ? Slide 11 HTML5 et le SEO : quelles opportunités ? Slide 12 HTML5 et le SEO : quelles opportunités ? Slide 13 HTML5 et le SEO : quelles opportunités ? Slide 14 HTML5 et le SEO : quelles opportunités ? Slide 15 HTML5 et le SEO : quelles opportunités ? Slide 16 HTML5 et le SEO : quelles opportunités ? Slide 17 HTML5 et le SEO : quelles opportunités ? Slide 18 HTML5 et le SEO : quelles opportunités ? Slide 19 HTML5 et le SEO : quelles opportunités ? Slide 20 HTML5 et le SEO : quelles opportunités ? Slide 21 HTML5 et le SEO : quelles opportunités ? Slide 22 HTML5 et le SEO : quelles opportunités ? Slide 23 HTML5 et le SEO : quelles opportunités ? Slide 24
Prochain SlideShare
Lancer son site e-commerce
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

3 j’aime

Partager

Télécharger pour lire hors ligne

HTML5 et le SEO : quelles opportunités ?

Télécharger pour lire hors ligne

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

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/eroan COMMENT PEUT-IL BOOSTER VOTRE VISIBILITÉ ?
  2. 2. MES ACTIVITÉS 2 sites principaux 25 à 30 000 VU / jour 350 à 500 VU / jour CMS maison Magento HTML5 depuis 2010 HTML5 depuis 2011
  3. 3. 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/
  4. 4. 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/
  5. 5. 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
  6. 6. 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
  7. 7. UN LANGAGE MOINS RIGOUREUX Des recommandations plus « libres » Cas pratique n°2 : les titres multiples HTML4 / 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 RIGOUREUX Des recommandations plus « libres » Cas pratique n°3 : les balises fermantes HTML4 / 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ÉE Nouvelle sémantique html : la segmentation du corps HTML4 / 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éhensible Pour aller plus loin : http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
  11. 11. 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>
  12. 12. 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
  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 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%
  15. 15. 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
  16. 16. 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>
  17. 17. 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/
  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égligeable Conseils  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 à 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
  20. 20. LA RECHERCHE A CHANGÉ Un algorithme en perpétuelle évolution Recherche localisée Recherche personnalisée Recherche en temps réel Recherche 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É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
  23. 23. DES QUESTIONS ? Merci à tous pour votre attention !
  24. 24. BONUS : UNE NOUVELLE BALISE TIME Ou l’art de temporiser vos contenus HTML4 / 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
  • benoitmaurissen

    Mar. 11, 2013
  • maxailloud

    Nov. 2, 2012
  • NakatomiBE

    Oct. 29, 2012

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

Vues

Nombre de vues

20 582

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

14 203

Actions

Téléchargements

66

Partages

0

Commentaires

0

Mentions J'aime

3

×