Workshop HTML5Référencement naturel grâceà la sémantique Par Kévin Dunglas (@dunglas) La Coopérative des Tilleuls
La Coopérative des Tilleuls● Réalisation dapplications web● Développement de jeux vidéos● Organisme de formation professio...
●   Une Société...● COopérative et Participative (Scop)● autogérée et démocratique● de lÉconomie Sociale et Solidaire (ESS...
Précédemment aux Tilleuls● Workshop #1 : initiation à HTML● Workshop #2 : initiation à CSS● Workshop #3 : intégrer une pag...
Le référencementEn anglais Search Engine Optimization (SEO) :  Stratégie marketing visant à augmenter le  trafic dun site ...
Le référencement : unvaste domaine● Inscription aux annuaires et moteurs de  recherche● Obtention de liens depuis des site...
Le web sémantique« Un web de données qui peuvent être traitéesdirectement et indirectement par des machinespour aider leur...
Web sémantique etmoteurs de rechercheLes technologies du web sémantique facilitentlextraction et la contextualisation des ...
HTML ? Cest quoi ?● Hypertext Markup Language● Le langage de description des pages web● Définit la structure sémantique de...
HTML5● Nouvelle version en cours de  standardisation● Supporté par tous les navigateurs modernes  et les moteurs de recher...
Prestashop : le cas décoleOptimisation de la boutique en lignePrestashop grâce à HTML5.Une contribution au logiciel sponso...
Exemples dutilisations desbalises sémantiques● header : en-tête de page ou darticle● footer : pied de page ou darticle● ar...
Plan du document HTML5(outline algorithm)HTML 4 : les 6 niveaux de titres (h1 à h6) seréfèrent au document dans sa globali...
Les extraits enrichisEn anglais Rich Snippets.Générés grâce à lextraction demicrodonnées.
Les microdonnées(microdata)● Permettent lextraction automatisée  dinformations contenues dans les pages● Nouvelle fonction...
Exemple  <div itemscope itemtype="http://schema.org/LocalBusiness">    <h1><span itemprop="name">Beachwalk Beachwear &  Gi...
Les attributs● itemscope : un item (groupes de clefs et de  valeurs)● itemtype : type de donnée dun item● itemprop : ident...
Les vocabulaires Schema.org● Initiative commune à Google, Bing et  Yahoo!.● Les extraits enrichis utilisent ces  vocabulai...
Référencement duneSingle Page Application● Une SPA, cest quoi ?● Proposer une version sans Javascript (mode  dégradé)● Sur...
Pour aller plus loin● SEO begginers guide (SEOmoz)● SEO Starter Guide (Google)● Documentation sur les extraits enrichis  (...
Licence
http://les-tilleuls.coop
Workshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantique
Prochain SlideShare
Chargement dans…5
×

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

1 478 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 478
Sur SlideShare
0
Issues des intégrations
0
Intégrations
200
Actions
Partages
0
Téléchargements
17
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×