Workshop HTML5 : référencement grâce à la sémantique

1,204 views
1,159 views

Published on

Diaporama diffusé lors du workshop du 31/01/2013 sur le référencement naturel grâce à la sémantique du HTML5 organisé par La Coopérative des Tilleuls animé par Kévin Dunglas.

Au programme :

Introduction au référencement
Présentation des balises sémantiques de HTML5
Comprendre l’algorithme de « outline » HTML5 pour mettre en valeur l’information pertinente
Mettre en avant ses pages dans les moteurs de recherche avec les microdata, Schema.org et les extraits enrichis
Allez plus loin, jouer avec Javascript pour référencer des SPA (Single Page Application)
Ce workshop, gratuit sur réservation, est une introduction au lancement de notre pôle formation dont vous découvrirez très prochainement le site et toutes les formations professionnelles proposées.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,204
On SlideShare
0
From Embeds
0
Number of Embeds
136
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Workshop HTML5 : référencement grâce à la sémantique

  1. 1. Workshop HTML5Référencement naturel grâceà la sémantique Par Kévin Dunglas (@dunglas) La Coopérative des Tilleuls
  2. 2. La Coopérative des Tilleuls● Réalisation dapplications web● Développement de jeux vidéos● Organisme de formation professionnelle
  3. 3. ● Une Société...● COopérative et Participative (Scop)● autogérée et démocratique● de lÉconomie Sociale et Solidaire (ESS)● pour le partage de connaissances : logiciel libre, ateliers, formations pro à tarifs sociaux● engagée dans la lutte contre lexclusion et les discriminations
  4. 4. Précédemment aux Tilleuls● Workshop #1 : initiation à HTML● Workshop #2 : initiation à CSS● Workshop #3 : intégrer une page complète Diaporamas et codes sources dexemple : les-tilleuls.coop/category/workshops
  5. 5. Le référencementEn anglais Search Engine Optimization (SEO) : Stratégie marketing visant à augmenter le trafic dun site internet en améliorant sa visibilité dans les moteurs de recherche et les annuaires.
  6. 6. Le référencement : unvaste domaine● Inscription aux annuaires et moteurs de recherche● Obtention de liens depuis des sites populaires● Adaptation du contenu rédactionnel● Optimisation technique● Recours aux annonces payantesAujourdhui, nous traiterons de loptimisationtechnique.
  7. 7. Le web sémantique« Un web de données qui peuvent être traitéesdirectement et indirectement par des machinespour aider leurs utilisateurs à créer denouvelles connaissances. » Tim Berners-Lee, inventeur du World Wide Web
  8. 8. Web sémantique etmoteurs de rechercheLes technologies du web sémantique facilitentlextraction et la contextualisation des donnéescontenues dans les sites internet.Elles facilitent lindexation aux moteurs derecherche et leur permettent daugmenter lapertinence de leurs résultats.Les sites utilisant ces technologies sont favorisés.
  9. 9. HTML ? Cest quoi ?● Hypertext Markup Language● Le langage de description des pages web● Définit la structure sémantique des documents : liens entre les documents, titres, articles, paragraphes, listes, images, tableaux...● Format ouvert, nomalisé par le W3C
  10. 10. HTML5● Nouvelle version en cours de standardisation● Supporté par tous les navigateurs modernes et les moteurs de recherche● Nombreuses nouvelles fonctionnalitésAujourdhui :● Les nouvelles balises sémantiques● Les Microdata
  11. 11. Prestashop : le cas décoleOptimisation de la boutique en lignePrestashop grâce à HTML5.Une contribution au logiciel sponsorisée par lesTilleuls.● code source : dunglas.fr/2013/01/un-theme- prestashop● démo : prestashop-html5.dunglas.fr
  12. 12. Exemples dutilisations desbalises sémantiques● header : en-tête de page ou darticle● footer : pied de page ou darticle● article : élément indépendant, article de blog, widget, commentaire● nav : menu de navigation● aside : barre latérale, informations relatives● section : sous-partie● hgroup : marquer un titre et un sous-titreLe bon réflexe : RTFM
  13. 13. Plan du document HTML5(outline algorithm)HTML 4 : les 6 niveaux de titres (h1 à h6) seréfèrent au document dans sa globalité.HTML 5 : apparition de balises structurantes.Les niveaux de titres ne portent plus quau seinde leur section courante.Démonstration avec HTML5 outliner.
  14. 14. Les extraits enrichisEn anglais Rich Snippets.Générés grâce à lextraction demicrodonnées.
  15. 15. Les microdonnées(microdata)● Permettent lextraction automatisée dinformations contenues dans les pages● Nouvelle fonctionnalité sémantique HTML5● Sinspirent des microformats et RDFaExemples :● Nom dun produit● Prix● Marque● Avis utilisateurs
  16. 16. Exemple <div itemscope itemtype="http://schema.org/LocalBusiness"> <h1><span itemprop="name">Beachwalk Beachwear & Giftware</span></h1> <span itemprop="description"> A superb collection of fine gifts and clothing to accent your stay in Mexico Beach.</span> <div itemprop="address" itemscope itemtype="http://schema. org/PostalAddress"> <span itemprop="streetAddress">3102 Highway 98</span> <span itemprop="addressLocality">Mexico Beach</span>, <span itemprop="addressRegion">FL</span> </div> Phone: <span itemprop="telephone">850-648-4200</span> </div>Source: Schema.org
  17. 17. Les attributs● itemscope : un item (groupes de clefs et de valeurs)● itemtype : type de donnée dun item● itemprop : identifie la clefLa valeur est le contenu de la balise marquéeavec itemprop.Ce nest quun aperçu.
  18. 18. Les vocabulaires Schema.org● Initiative commune à Google, Bing et Yahoo!.● Les extraits enrichis utilisent ces vocabulaires.Propose des schémas pour un grand nombrede types de données :● évènements● lieux● personnes
  19. 19. Référencement duneSingle Page Application● Une SPA, cest quoi ?● Proposer une version sans Javascript (mode dégradé)● Sur cette version, les recommandations SEO classiques sappliquent● Faire correspondre les URL affichées avec les URL indexables grâce à history API (HTML5)Les outils : Symfony avec Backbone.js
  20. 20. Pour aller plus loin● SEO begginers guide (SEOmoz)● SEO Starter Guide (Google)● Documentation sur les extraits enrichis (Google)● Outil de test pour les données structurées (Google)● Wiki Semantic Web● Schema.org● HTML5 Doctor
  21. 21. Licence
  22. 22. http://les-tilleuls.coop

×