HTML 5 Speaker Idol31 Mai 2012 par Lydie Padilla                                1
MICRODATA ET SÉMANTIQUEà l’heure du HTML5                          22
AGENDAMicrodata et sémantique à l’heure du HTML5 :   •    Schema.org   •    Qui aime le gâteau au chocolat ?   •    Les mi...
Schema.org  4200, boul. Saint-Laurent, Suite 701  Montréal QC H2W 2R2                                         4
Qui aime le gâteau au chocolat ?                                   55
La spécification HTML5 concernant lesmicrodonnées permet dassocier deslibellés à des contenus afin de décrireun type dinfo...
Les microdata à la loupe<div itemscope itemtype="http://data-vocabulary.org/Person"> My name is <span itemprop="name">Lydi...
Attributs• Les microdata utilisent 3 attributs en particulier :    <div itemscope>                                        ...
Types de microdataSimple                                    Aggrégés• Oeuvres Créatives                       •   Produits...
PropriétésEn utilisant les microdonnées, vous pourrez mettre en valeur:•   Un blog et ses articles•   Les fiches traitant ...
auteurproduit          musique                         11                          11
Bonnes pratiques•   Tester l’affichage des résultats enrichis    http://www.google.com/webmasters/tools/richsnippets•   Sp...
4 raisons d’utiliser les microdata                                                   - Flexibité des                      ...
14
Merci!Contactez- moi :    Facebook.com/lydiepadilla    Twitter.com/idylles•   Linkedin.com/in/lydiepadilla    Slideshare.n...
Upcoming SlideShare
Loading in …5
×

Microdata et sémantique à l'heure du HTML5

2,338 views

Published on

7 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total views
2,338
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
7
Likes
5
Embeds 0
No embeds

No notes for slide
  • Le 2 juin 2011Schema.org est une collaboration entre Google, Microsoft et Yahoo! visant à améliorer le Web grâce à la création d&apos;un schéma de balisage des données structurées, accepté par les principaux moteurs de recherche. Le balisage dans la page permet aux moteurs de recherche d&apos;interpréter les informations contenues dans les pages Web et d&apos;afficher des résultats de recherche plus fournis. Grâce à ce vocabulaire de balisage commun, les webmasters choisissent plus facilement un schéma de balisage et rentabilisent pleinement leurs efforts.À l&apos;origine, trois formats de balisage des données structurées sont compatibles : les microdonnées, les microformats et RDFa. Pour schema.org, nous avons décidé de nous concentrer sur un seul format, afin d&apos;éviter que les webmasters ne soient obligés de faire un choix difficile. De plus, un format unique permet d&apos;améliorer la cohérence entre les moteurs de recherche qui se basent sur ces données. Chacun des formats présente des avantages particuliers, mais nous avons trouvé que les microdonnées offraient un juste équilibre entre la capacité d&apos;extension de RDFa et la simplicité des microformats. C&apos;est pour cette raison que nous avons choisi ce format.
  • http://searchengineland.com/google-takes-first-big-bite-into-rich-snippet-search-with-recipes-65928&quot;Hey search engine, this information describes this specific movie, or place, or person, or video&quot;“Hey Google, I know I have twenty images on my page, but this image, that one is my bio picture.” Or perhaps, “Hi Bing, I know there are tons of links on my page but this link is the link relevant to my event.With Microdata, we can mark-up our existing HTML with a few new attributes in order to label and categorize our content in ways search engines can both understand and make use of in their rich snippets.
  • The Microdata markup adds a couple attributes you may not have seen before, itemscope, itemtype and itemprop. The first is essentially just a top level marker, it tells the search engine spider that you’re about to define something in the following nested tags. The itemtype attribute tells the spider what you’re defining — in this case, an organization.
  • Itemscope sets the scope of what we are describing with microdata. You can think of it as defining a parent element, inside which will contain other elements with information we are trying to supply to search engines. All elements nested an element with the itemscope will adhere to the vocabulary you specify in #2, the itemtype. The most basic vocabulary on schema.org is for, well, a Thing. The Thing vocabulary includes four properties we can set: a description, an image, a name and a url. All other things (Books, Restaurants, Places) descend from the Thing vocabular
  • http://www.pullseo.com/les-microdonnees-disponibles-sur-schema-org/Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeriesEmbedded non-text objects: AudioObject, ImageObject, VideoObjectEventOrganizationPersonPlace, LocalBusiness, RestaurantProduct, Offer, AggregateOfferReview, AggregateRating
  • Enjeux de rankingOne view is that by adding semantic markup via microformats/microdata that you’ll get more clicks in Google and that this creates the potential (if your site doesn’t otherwise suck) to send positive user behavior signals to Google (which is a ranking factor).The counter-argument is that Google, in trying to provide the user with the an immediate answer to their query by cutting through your site using rich snippets, thus eliminates clicks you would have otherwise received.Googlevoudraitilrepondre a des questions et ne plus présenter de site danssesrésultas ?
  • Microdata et sémantique à l'heure du HTML5

    1. 1. HTML 5 Speaker Idol31 Mai 2012 par Lydie Padilla 1
    2. 2. MICRODATA ET SÉMANTIQUEà l’heure du HTML5 22
    3. 3. AGENDAMicrodata et sémantique à l’heure du HTML5 : • Schema.org • Qui aime le gâteau au chocolat ? • Les microdata à la loupe • Attributs • Bonnes pratiques • Types de microdata • Propriétés • 4 raisons d’utiliser les microdata 4200, boul. Saint-Laurent, Suite 701 Montréal QC H2W 2R2 3
    4. 4. Schema.org 4200, boul. Saint-Laurent, Suite 701 Montréal QC H2W 2R2 4
    5. 5. Qui aime le gâteau au chocolat ? 55
    6. 6. La spécification HTML5 concernant lesmicrodonnées permet dassocier deslibellés à des contenus afin de décrireun type dinformation spécifique viades propriétés communément établies. 6
    7. 7. Les microdata à la loupe<div itemscope itemtype="http://data-vocabulary.org/Person"> My name is <span itemprop="name">Lydie Padilla</span>, but people call me <span itemprop="nickname”>Lydinette</span>. Here is my homepage: <a href="http://www.example.com" itemprop="url">www.unefillecommeca.com</a>. I live in <span itemprop=”rue St Denis" itemscope itemtype="http://data-vocabulary.org/Address"> <span itemprop="locality">Montréal</span>, <span itemprop="region">Québec</span> </span> and work as an <span itemprop="title">Chef d’équipe SEO et Médias Sociaux</span> at <span itemprop="affiliation">NVI</span>. My friends: <a href="http://www.alexbonan.me/" rel="friend">Alexandra</a>,</div> 4200, boul. Saint-Laurent, Suite 701 Montréal QC H2W 2R2 7
    8. 8. Attributs• Les microdata utilisent 3 attributs en particulier : <div itemscope> Ouverture <section itemscope itemtype=”http://schema.org/xxx”> URL source décrivant ce don’t il s’agit <span itemprop=”…”> Ce dont il s’agit, un même item peut avoir plusieurs propriétés 4200, boul. Saint-Laurent, Suite 701 Montréal QC H2W 2R2 8
    9. 9. Types de microdataSimple Aggrégés• Oeuvres Créatives • Produits + Avis• Objets non textuels • Avis + Classement embedded • Personne + Adresse• Évènement • Organisation + Adresse• Organisation• Personne• Entreprise locale, restaurant• Produit, offre• Avis• Auteur 4200, boul. Saint-Laurent, Suite 701 Montréal QC H2W 2R2 9
    10. 10. PropriétésEn utilisant les microdonnées, vous pourrez mettre en valeur:• Un blog et ses articles• Les fiches traitant de films ou séries• Les pages présentant des peintures, sculptures, de la musique• L’organisateur d’un événement• Des dates• Des participants (exemple : intervenant, chanteur…)• Des offres d’emploi (avec le poste, la rémunération, les pré-requis…)• Des coordonnées géographiques• Des données nutritionnelles (calories, ingrédients…)• Des offres (quantité, disponibilité…) 4200, boul. Saint-Laurent, Suite 701 Montréal QC H2W 2R2 10
    11. 11. auteurproduit musique 11 11
    12. 12. Bonnes pratiques• Tester l’affichage des résultats enrichis http://www.google.com/webmasters/tools/richsnippets• Spécifier la durée dun événement au format de durée ISO permet de sassurer quelle apparaîtra correctement dans les résultats de recherche• Travailler en collaboration avec l’équipe marketing pour déterminer les opportunités d’un site en termes de microdata 1. Se poser la pertinence d’utiliser les microdata aujourd’hui en raison du décalage des navigateurs 2. Planifier les microdata avec les prochaines refontes 4200, boul. Saint-Laurent, Suite 701 Montréal QC H2W 2R2 12
    13. 13. 4 raisons d’utiliser les microdata - Flexibité des Augmenter RDFa son trafic et ses - Simplicité conversions des microformats Mettre à jour Se distinguer ses produits / de la infos concurrence facilement 4200, boul. Saint-Laurent, Suite 701 Montréal QC H2W 2R2
    14. 14. 14
    15. 15. Merci!Contactez- moi : Facebook.com/lydiepadilla Twitter.com/idylles• Linkedin.com/in/lydiepadilla Slideshare.net/lydiepadilla 4200, boul. Saint-Laurent, Suite 701 Montréal QC H2W 2R2 15

    ×