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

23. Licence

24. http://les-tilleuls.coop