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 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érencementEn 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.

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.

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

Web sémantique et moteurs de rechercheLes 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.

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

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

Prestashop : le cas d'écoleOptimisation 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

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

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.

Les extraits enrichisEn anglais Rich Snippets.

Générés grâce à l'extraction de microdonnées.

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

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

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.

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● produits et offres...

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

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

Licence

http://les-tilleuls.coop