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 SEO : quelles opportunités ?

20 490 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
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • merci pour ce diapo. plusieurs slide appellent à la prudence par manque de recul. Cette conférence a eu lieu il y a un an: quels sont les retours?
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×