SlideShare une entreprise Scribd logo

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

Les-Tilleuls.coop
Les-Tilleuls.coop
Les-Tilleuls.coopCEO at Les-Tilleuls.coop, freelance software architect à Les-Tilleuls.coop

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.

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

1  sur  24
Télécharger pour lire hors ligne
Workshop HTML5
Référencement naturel grâce
à la sémantique
 Par Kévin Dunglas (@dunglas)
 La Coopérative des Tilleuls
Workshop HTML5 : référencement grâce à la sémantique
La Coopérative des Tilleuls
● Réalisation d'applications web
● Développement de jeux vidéos
● Organisme de formation professionnelle
●   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 l'exclusion et
  les discriminations
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 d'exemple :
     les-tilleuls.coop/category/workshops
Le référencement
En anglais Search Engine Optimization (SEO) :

  Stratégie marketing visant à augmenter le
  trafic d'un site internet en améliorant sa
  visibilité dans les moteurs de recherche et
  les annuaires.

Recommandé

Creating hypermedia APIs in a few minutes using the API Platform framework
Creating hypermedia APIs in a few minutes using the API Platform frameworkCreating hypermedia APIs in a few minutes using the API Platform framework
Creating hypermedia APIs in a few minutes using the API Platform frameworkLes-Tilleuls.coop
 
Diaporama du sfPot Lillois du 20 mars 2014
Diaporama du sfPot Lillois du 20 mars 2014Diaporama du sfPot Lillois du 20 mars 2014
Diaporama du sfPot Lillois du 20 mars 2014Les-Tilleuls.coop
 
Jak děláme REST API na Symfony v Lavito.cz
Jak děláme REST API na Symfony v Lavito.czJak děláme REST API na Symfony v Lavito.cz
Jak děláme REST API na Symfony v Lavito.czMartin Hujer
 
The symfony platform: Create your very own framework (PHP Quebec 2008)
The symfony platform: Create your very own framework (PHP Quebec 2008)The symfony platform: Create your very own framework (PHP Quebec 2008)
The symfony platform: Create your very own framework (PHP Quebec 2008)Fabien Potencier
 
A high profile project with Symfony and API Platform: beIN SPORTS
A high profile project with Symfony and API Platform: beIN SPORTSA high profile project with Symfony and API Platform: beIN SPORTS
A high profile project with Symfony and API Platform: beIN SPORTSSmile I.T is open
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesOxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceLudovic Piot
 
Seo 10 clés pour plaire à Google
Seo   10 clés pour plaire à GoogleSeo   10 clés pour plaire à Google
Seo 10 clés pour plaire à GoogleKeyweo
 

Contenu connexe

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

Atelier de sensibilisation au SEO
Atelier de sensibilisation au SEOAtelier de sensibilisation au SEO
Atelier de sensibilisation au SEOKseo Conseil
 
Cours SEO débutant Polycom Lausanne
Cours SEO débutant Polycom LausanneCours SEO débutant Polycom Lausanne
Cours SEO débutant Polycom LausannePierre Ammeloot
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1Horacio Gonzalez
 
Réussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPressRéussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPressJulien Dereumaux
 
Referencement semantique-smx-paris-2013 Par David Degrelle
Referencement semantique-smx-paris-2013 Par David Degrelle Referencement semantique-smx-paris-2013 Par David Degrelle
Referencement semantique-smx-paris-2013 Par David Degrelle Guillaume Eouzan
 
Webinar - Construire le cahier des charges de son site web.pdf
Webinar - Construire le cahier des charges de son site web.pdfWebinar - Construire le cahier des charges de son site web.pdf
Webinar - Construire le cahier des charges de son site web.pdfJulien Dereumaux
 
Comment accroître les performances SEO d’un contenu qui stagne dans la SERP ?
Comment accroître les performances SEO d’un contenu qui stagne dans la SERP ?Comment accroître les performances SEO d’un contenu qui stagne dans la SERP ?
Comment accroître les performances SEO d’un contenu qui stagne dans la SERP ?Nicolas Mercatili
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...Horacio Gonzalez
 
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...Peak Ace
 
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Peak Ace
 
Communiqué de Presse Data2Content
Communiqué de Presse Data2ContentCommuniqué de Presse Data2Content
Communiqué de Presse Data2ContentChristophe Tricot
 
Gestion_d_un_projet_Web_e_commerce_Piece (1).pdf
Gestion_d_un_projet_Web_e_commerce_Piece (1).pdfGestion_d_un_projet_Web_e_commerce_Piece (1).pdf
Gestion_d_un_projet_Web_e_commerce_Piece (1).pdfSofianeHassine2
 
Gestion_d_un_projet_Web_e_commerce_Piece.pdf
Gestion_d_un_projet_Web_e_commerce_Piece.pdfGestion_d_un_projet_Web_e_commerce_Piece.pdf
Gestion_d_un_projet_Web_e_commerce_Piece.pdfSofianeHassine2
 
Web et communication
Web et communicationWeb et communication
Web et communicationlaureno
 
Comment tirer parti des avantages des microdonnées schema.org en 2017 ? Petit...
Comment tirer parti des avantages des microdonnées schema.org en 2017 ? Petit...Comment tirer parti des avantages des microdonnées schema.org en 2017 ? Petit...
Comment tirer parti des avantages des microdonnées schema.org en 2017 ? Petit...Peak Ace
 
Comment optimiser son blog ? par Quentin Clarenne de PlanetHoster
Comment optimiser son blog ? par Quentin Clarenne de PlanetHosterComment optimiser son blog ? par Quentin Clarenne de PlanetHoster
Comment optimiser son blog ? par Quentin Clarenne de PlanetHosterPlanetHoster Inc
 
Wbm11 formation-webmaster-expert-responsive-web-design-rwd-microdata-schema-o...
Wbm11 formation-webmaster-expert-responsive-web-design-rwd-microdata-schema-o...Wbm11 formation-webmaster-expert-responsive-web-design-rwd-microdata-schema-o...
Wbm11 formation-webmaster-expert-responsive-web-design-rwd-microdata-schema-o...CERTyou Formation
 
Présentation Ecreall - Mickaël Launay
Présentation Ecreall - Mickaël LaunayPrésentation Ecreall - Mickaël Launay
Présentation Ecreall - Mickaël LaunayTechnocite
 

Similaire à Workshop HTML5 : référencement grâce à la sémantique (20)

Atelier de sensibilisation au SEO
Atelier de sensibilisation au SEOAtelier de sensibilisation au SEO
Atelier de sensibilisation au SEO
 
Cours SEO débutant Polycom Lausanne
Cours SEO débutant Polycom LausanneCours SEO débutant Polycom Lausanne
Cours SEO débutant Polycom Lausanne
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
 
Réussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPressRéussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPress
 
Référencement et Web Sémantique SMX Paris 2013
Référencement et Web Sémantique SMX Paris 2013Référencement et Web Sémantique SMX Paris 2013
Référencement et Web Sémantique SMX Paris 2013
 
Referencement semantique-smx-paris-2013 Par David Degrelle
Referencement semantique-smx-paris-2013 Par David Degrelle Referencement semantique-smx-paris-2013 Par David Degrelle
Referencement semantique-smx-paris-2013 Par David Degrelle
 
Webinar - Construire le cahier des charges de son site web.pdf
Webinar - Construire le cahier des charges de son site web.pdfWebinar - Construire le cahier des charges de son site web.pdf
Webinar - Construire le cahier des charges de son site web.pdf
 
Comment accroître les performances SEO d’un contenu qui stagne dans la SERP ?
Comment accroître les performances SEO d’un contenu qui stagne dans la SERP ?Comment accroître les performances SEO d’un contenu qui stagne dans la SERP ?
Comment accroître les performances SEO d’un contenu qui stagne dans la SERP ?
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
 
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
 
Communiqué de Presse Data2Content
Communiqué de Presse Data2ContentCommuniqué de Presse Data2Content
Communiqué de Presse Data2Content
 
Atelier initiation au html5
Atelier initiation au html5Atelier initiation au html5
Atelier initiation au html5
 
Gestion_d_un_projet_Web_e_commerce_Piece (1).pdf
Gestion_d_un_projet_Web_e_commerce_Piece (1).pdfGestion_d_un_projet_Web_e_commerce_Piece (1).pdf
Gestion_d_un_projet_Web_e_commerce_Piece (1).pdf
 
Gestion_d_un_projet_Web_e_commerce_Piece.pdf
Gestion_d_un_projet_Web_e_commerce_Piece.pdfGestion_d_un_projet_Web_e_commerce_Piece.pdf
Gestion_d_un_projet_Web_e_commerce_Piece.pdf
 
Web et communication
Web et communicationWeb et communication
Web et communication
 
Comment tirer parti des avantages des microdonnées schema.org en 2017 ? Petit...
Comment tirer parti des avantages des microdonnées schema.org en 2017 ? Petit...Comment tirer parti des avantages des microdonnées schema.org en 2017 ? Petit...
Comment tirer parti des avantages des microdonnées schema.org en 2017 ? Petit...
 
Comment optimiser son blog ? par Quentin Clarenne de PlanetHoster
Comment optimiser son blog ? par Quentin Clarenne de PlanetHosterComment optimiser son blog ? par Quentin Clarenne de PlanetHoster
Comment optimiser son blog ? par Quentin Clarenne de PlanetHoster
 
Wbm11 formation-webmaster-expert-responsive-web-design-rwd-microdata-schema-o...
Wbm11 formation-webmaster-expert-responsive-web-design-rwd-microdata-schema-o...Wbm11 formation-webmaster-expert-responsive-web-design-rwd-microdata-schema-o...
Wbm11 formation-webmaster-expert-responsive-web-design-rwd-microdata-schema-o...
 
Présentation Ecreall - Mickaël Launay
Présentation Ecreall - Mickaël LaunayPrésentation Ecreall - Mickaël Launay
Présentation Ecreall - Mickaël Launay
 

Plus de Les-Tilleuls.coop

Symfony on steroids
: Vue.js, Mercure, Panther
Symfony on steroids
: Vue.js, Mercure, PantherSymfony on steroids
: Vue.js, Mercure, Panther
Symfony on steroids
: Vue.js, Mercure, PantherLes-Tilleuls.coop
 
Official "push" and real-time capabilities for Symfony and API Platform (Merc...
Official "push" and real-time capabilities for Symfony and API Platform (Merc...Official "push" and real-time capabilities for Symfony and API Platform (Merc...
Official "push" and real-time capabilities for Symfony and API Platform (Merc...Les-Tilleuls.coop
 
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...Les-Tilleuls.coop
 
HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...
HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...
HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...Les-Tilleuls.coop
 
Panther: test your Symfony apps with real web browsers
Panther: test your Symfony apps with real web browsersPanther: test your Symfony apps with real web browsers
Panther: test your Symfony apps with real web browsersLes-Tilleuls.coop
 
API Platform: A Framework for API-driven Projects
API Platform: A Framework for API-driven ProjectsAPI Platform: A Framework for API-driven Projects
API Platform: A Framework for API-driven ProjectsLes-Tilleuls.coop
 
API Platform and Symfony: a Framework for API-driven Projects
API Platform and Symfony: a Framework for API-driven ProjectsAPI Platform and Symfony: a Framework for API-driven Projects
API Platform and Symfony: a Framework for API-driven ProjectsLes-Tilleuls.coop
 
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework ResurrectionAPI Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework ResurrectionLes-Tilleuls.coop
 
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)Les-Tilleuls.coop
 
Symfony 2 : Performances et Optimisations
Symfony 2 : Performances et OptimisationsSymfony 2 : Performances et Optimisations
Symfony 2 : Performances et OptimisationsLes-Tilleuls.coop
 
Atelier #3 intégration html
Atelier #3 intégration htmlAtelier #3 intégration html
Atelier #3 intégration htmlLes-Tilleuls.coop
 
Atelier #2 initiation à css
Atelier #2 initiation à cssAtelier #2 initiation à css
Atelier #2 initiation à cssLes-Tilleuls.coop
 

Plus de Les-Tilleuls.coop (12)

Symfony on steroids
: Vue.js, Mercure, Panther
Symfony on steroids
: Vue.js, Mercure, PantherSymfony on steroids
: Vue.js, Mercure, Panther
Symfony on steroids
: Vue.js, Mercure, Panther
 
Official "push" and real-time capabilities for Symfony and API Platform (Merc...
Official "push" and real-time capabilities for Symfony and API Platform (Merc...Official "push" and real-time capabilities for Symfony and API Platform (Merc...
Official "push" and real-time capabilities for Symfony and API Platform (Merc...
 
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...
 
HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...
HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...
HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...
 
Panther: test your Symfony apps with real web browsers
Panther: test your Symfony apps with real web browsersPanther: test your Symfony apps with real web browsers
Panther: test your Symfony apps with real web browsers
 
API Platform: A Framework for API-driven Projects
API Platform: A Framework for API-driven ProjectsAPI Platform: A Framework for API-driven Projects
API Platform: A Framework for API-driven Projects
 
API Platform and Symfony: a Framework for API-driven Projects
API Platform and Symfony: a Framework for API-driven ProjectsAPI Platform and Symfony: a Framework for API-driven Projects
API Platform and Symfony: a Framework for API-driven Projects
 
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework ResurrectionAPI Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
 
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
 
Symfony 2 : Performances et Optimisations
Symfony 2 : Performances et OptimisationsSymfony 2 : Performances et Optimisations
Symfony 2 : Performances et Optimisations
 
Atelier #3 intégration html
Atelier #3 intégration htmlAtelier #3 intégration html
Atelier #3 intégration html
 
Atelier #2 initiation à css
Atelier #2 initiation à cssAtelier #2 initiation à css
Atelier #2 initiation à css
 

Dernier

Conteneuriser une application .NET 8 en utilisant Docker et Azure.pdf
Conteneuriser une application .NET 8 en utilisant Docker et Azure.pdfConteneuriser une application .NET 8 en utilisant Docker et Azure.pdf
Conteneuriser une application .NET 8 en utilisant Docker et Azure.pdfHamida Rebai Trabelsi
 
Shelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave ManualShelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave ManualDomotica daVinci
 
Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)benj_2
 
Débrief CES 2024 by Niji
Débrief CES 2024 by NijiDébrief CES 2024 by Niji
Débrief CES 2024 by NijiNiji
 
JDN 2023 les applications de l'impression 3D.pdf
JDN 2023 les applications de l'impression 3D.pdfJDN 2023 les applications de l'impression 3D.pdf
JDN 2023 les applications de l'impression 3D.pdfAlexandre Contat
 
Wave_Shutter_user_guide_multilang_print_V3.pdf
Wave_Shutter_user_guide_multilang_print_V3.pdfWave_Shutter_user_guide_multilang_print_V3.pdf
Wave_Shutter_user_guide_multilang_print_V3.pdfDomotica daVinci
 

Dernier (6)

Conteneuriser une application .NET 8 en utilisant Docker et Azure.pdf
Conteneuriser une application .NET 8 en utilisant Docker et Azure.pdfConteneuriser une application .NET 8 en utilisant Docker et Azure.pdf
Conteneuriser une application .NET 8 en utilisant Docker et Azure.pdf
 
Shelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave ManualShelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave Manual
 
Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)
 
Débrief CES 2024 by Niji
Débrief CES 2024 by NijiDébrief CES 2024 by Niji
Débrief CES 2024 by Niji
 
JDN 2023 les applications de l'impression 3D.pdf
JDN 2023 les applications de l'impression 3D.pdfJDN 2023 les applications de l'impression 3D.pdf
JDN 2023 les applications de l'impression 3D.pdf
 
Wave_Shutter_user_guide_multilang_print_V3.pdf
Wave_Shutter_user_guide_multilang_print_V3.pdfWave_Shutter_user_guide_multilang_print_V3.pdf
Wave_Shutter_user_guide_multilang_print_V3.pdf
 

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

  • 1. Workshop HTML5 Référencement naturel grâce à la sémantique Par Kévin Dunglas (@dunglas) La Coopérative des Tilleuls
  • 3. La Coopérative des Tilleuls ● Réalisation d'applications web ● Développement de jeux vidéos ● Organisme de formation professionnelle
  • 4. 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 l'exclusion et les discriminations
  • 5. 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 d'exemple : les-tilleuls.coop/category/workshops
  • 6. Le référencement En anglais Search Engine Optimization (SEO) : Stratégie marketing visant à augmenter le trafic d'un site internet en améliorant sa visibilité dans les moteurs de recherche et les annuaires.
  • 7. Le référencement : un vaste 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 payantes Aujourd'hui, nous traiterons de l'optimisation technique.
  • 8. Le web sémantique « Un web de données qui peuvent être traitées directement et indirectement par des machines pour aider leurs utilisateurs à créer de nouvelles connaissances. » Tim Berners-Lee, inventeur du World Wide Web
  • 9. Web sémantique et moteurs de recherche Les technologies du web sémantique facilitent l'extraction et la contextualisation des données contenues dans les sites internet. Elles facilitent l'indexation aux moteurs de recherche et leur permettent d'augmenter la pertinence de leurs résultats. Les sites utilisant ces technologies sont favorisés.
  • 10. HTML ? C'est 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
  • 12. HTML5 ● Nouvelle version en cours de standardisation ● Supporté par tous les navigateurs modernes et les moteurs de recherche ● Nombreuses nouvelles fonctionnalités Aujourd'hui : ● Les nouvelles balises sémantiques ● Les Microdata
  • 13. Prestashop : le cas d'école Optimisation de la boutique en ligne Prestashop grâce à HTML5. Une contribution au logiciel sponsorisée par les Tilleuls. ● code source : dunglas.fr/2013/01/un-theme- prestashop ● démo : prestashop-html5.dunglas.fr
  • 14. Exemples d'utilisations des balises sémantiques ● header : en-tête de page ou d'article ● footer : pied de page ou d'article ● 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-titre Le bon réflexe : RTFM
  • 15. Plan du document HTML5 (outline algorithm) HTML 4 : les 6 niveaux de titres (h1 à h6) se réfèrent au document dans sa globalité. HTML 5 : apparition de balises structurantes. Les niveaux de titres ne portent plus qu'au sein de leur section courante. Démonstration avec HTML5 outliner.
  • 16. Les extraits enrichis En anglais Rich Snippets. Générés grâce à l'extraction de microdonnées.
  • 17. Les microdonnées (microdata) ● Permettent l'extraction automatisée d'informations contenues dans les pages ● Nouvelle fonctionnalité sémantique HTML5 ● S'inspirent des microformats et RDFa Exemples : ● Nom d'un produit ● Prix ● Marque ● Avis utilisateurs
  • 18. 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
  • 19. Les attributs ● itemscope : un item (groupes de clefs et de valeurs) ● itemtype : type de donnée d'un item ● itemprop : identifie la clef La valeur est le contenu de la balise marquée avec itemprop. Ce n'est qu'un aperçu.
  • 20. Les vocabulaires Schema. org ● Initiative commune à Google, Bing et Yahoo!. ● Les extraits enrichis utilisent ces vocabulaires. Propose des schémas pour un grand nombre de types de données : ● évènements ● lieux ● personnes
  • 21. Référencement d'une Single Page Application ● Une SPA, c'est quoi ? ● Proposer une version sans Javascript (mode dégradé) ● Sur cette version, les recommandations SEO classiques s'appliquent ● Faire correspondre les URL affichées avec les URL indexables grâce à history API (HTML5) Les outils : Symfony avec Backbone.js
  • 22. Pour aller plus loin ● SEO begginer's 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