intro schema.org / microdata voor frontend developers
DESCRIPTION
Intro tot microdata, het belang ervan voor SEO, code voorbeelden, tips & tricks om de microdata markup optimaal te integrerenTRANSCRIPT
1
Intro Schema.org
Fronteers
Q? Contact: Pieter Mergan @Digital
https://www.linkedin.com/in/pietermergan
https://twitter.com/FirstManOnDaMoo
• Digital Expert SEO & Analytics
• Meer dan 10 jaar actief in online business
• Immoweb Gouden Gids Persgroep (na 9 terug)
• Local SEO News SEO
• Geen SEO copywriter / Technical SEO
OVER MEZELF
2
3
Achtergrond:
belang van gestructureerde opmaak voor SEO
3
http://www.frankwatching.com/archive/2013/11/12/hummingbird-wat-je-moet-weten-over-googles-nieuwste-algoritme/
• “Beestig” Werkterrein dat continue evolueert:
(http://moz.com/google-algorithm-change)
•Panda (4.1) 02/2011
=> focus op “magere” inhoud , “duplicate” inhoud, …
•Penguin (3.0) 04/2012 => nu in roll-out
=> focus op “slechte” links, linknetwerken,
•Hummingbird 09/2013
=> volledig nieuw search algo – focus op “context en betekenis van
woorden” – “menselijker” en “persoonlijker”
•Pigeon 07/2014
=> Focus op lokale zoekresultaten
ACHTERGRONDHET ALGORITME EVOLUEERT
4
http://searchengineland.com/future-seo-understanding-entity-search-172997 | http://www.branded3.com/blogs/structured-data-mark-higher-ctr/
Hummingbird
Google wil inspelen op de “motivatie/intentie” van een gebruiker op het moment dat hij een
zoekopdracht ingeeft, dit om de gebruiker het meest gepaste antwoord te bieden.
Google creëert daarom continu profielen van “entiteiten”
(personen, dingen, plaatsen, bedrijven, boeken, …) op basis van ontelbare bronnen.
Het doel is de gebruiker zo compleet en exact mogelijke informatie te verschaffen.
ACHTERGRONDENTITY SEARCH
5
http://searchengineland.com/future-seo-understanding-entity-search-172997 | http://www.branded3.com/blogs/structured-data-mark-higher-ctr/
Hummingbird
INPUT = Structured Markup:
Om “entities” te creëren heeft Google o.a.
meer en meer nood aan gestructureerde opmaak
=
(html/javascript)code die betekenis verschaft aan de inhoud en/of
die exact aangeeft waar een bepaald soort informatie zich bevindt op de pagina
OUTPUT = Rich Snippets:
search engines kunnen gestructureerde opmaak gebruiken om de eigen zoekresultaten te verrijken
CTR neemt toe (nog geen exacte cijfers)!
Heeft geen impact op rankings!
ACHTERGRONDENTITY SEARCH
6
http://searchenginewatch.com/article/2363063/How-Google-Pigeon-Impacted-Local-Queries-and-What-You-Can-Do
Pigeon biedt opportuniteiten
Redactionele stukken, recensies
over restaurants, winkels kunnen,
mits technische ondersteuning,
extra visibiliteit krijgen in Google.
ACHTERGRONDHET ALGORITME EVOLUEERT
7
8
Schema.org via Microdata
8
http://www.seoskeptic.com/basic-vocabulary-for-schema-org-and-structured-data/
SCHEMA.ORG VIA MICRODATATERMINOLOGIE/TECHNOLOGIE
9
http://www.seoskeptic.com/basic-vocabulary-for-schema-org-and-structured-data/ | https://support.google.com/webmasters/answer/3069489?hl=nl&ref_topic=3070267
… mbv Microdata …Microdata maakt gebruik van
eenvoudige kenmerken in HTML-
codering (vaak <span> of <div>) om
korte en beschrijvende namen toe te
wijzen aan entiteiten en hun
eigenschappen.
SCHEMA.ORG VIA MICRODATAWAT GOOGLE AANRAADT
10
Gebruik Schema.org …Schema.org provides a
collection of shared
vocabularies webmasters can
use to mark up their pages in
ways that can be understood by
the major search engines:
Google, Microsoft, Yandex and
Yahoo!
… voor Web én Email.U kunt het beste kiezen voor
microdata of JSON-LD en de
twee typen niet combineren op
één pagina of in één e-mail.
Google geeft de voorkeur aan
microdata voor webinhoud.
MAAR
in enkele gevallen ondersteunt Google (nog) niet Schema.org=> gebruik in dat geval http:// data-vocabulary.org/
http://www.seoskeptic.com/basic-vocabulary-for-schema-org-and-structured-data/ | https://support.google.com/webmasters/answer/3069489?hl=nl&ref_topic=3070267
Type => welk onderwerp?
Mbv het attribuut itemtype specifieer je over
welk type van onderwerp/entiteit je meer
informatie wil delen.
Dit kan over een concreet ding gaan, over een
mens, een evenement, …
De info ophalen over het type gebeurt
steeds met een http:// request
SCHEMA.ORG VIA MICRODATASYNTAX
11
Item => waar in de code?
Mbv itemscope baken je letterlijk het
“terrein” af.
Je duidt specifiek dat deel van je
pagina/code aan waarop alle daarop
volgende markup betrekking heeft.
Eigenschap => wat?
Elk onderwerp heeft eigenschappen.
Mbv. Attribuut itemprop specifieer je
per onderwerp een eigenschap.
De eigenschappen kunnen verschillen
per type.
<div itemscope itemtype="http://schema.org/Person"><span itemprop="name">Albert Einstein</span>
</div>
http://www.seoskeptic.com/basic-vocabulary-for-schema-org-and-structured-data/ | https://support.google.com/webmasters/answer/3069489?hl=nl&ref_topic=3070267
SCHEMA.ORG VIA MICRODATASYNTAX
12
Meer over eigenschappen (Property):
• inherited ifv. Type Hierarchy
http://schema.org/docs/full.html
• de waarde van een eigenschap (Expected type):
• URL (http://www.persgroep.be)
• Text (Dit is tekst)
• Number (10)
• …
• Embedded items(bv. schema.org/Person)
SCHEMA.ORG VIA MICRODATASYNTAX
13
<div itemscope itemtype="http://schema.org/Article"><p>Copyright
<span itemprop="copyrightHolder" itemscopeitemtype="http://schema.org/Organization">
<span itemprop="name">De Persgroep</span>
<span>
</p></div>
http://www.schema.org/docs/extension.html | http://schema.org/docs/gs.html#advanced_dates | https://developers.google.com/webmasters/richsnippets/sitelinkssearch
SCHEMA.ORG VIA MICRODATASYNTAX
14
Enkele tips
• Opgelet met “Niet-zichtbare inhoud” => uitzondering op de
regel dat alles zichtbaar moet zijn voor gebruikers
•Extension Mechanism => signaal sturen naar schema.org om nieuwe types te maken
• NIEUW: Sitelinks Search Box
SCHEMA.ORG VIA MICRODATASYNTAX
15
Enkele tips• Markup op voor Breadcrumbs doe je door het Type aan te roepen viahttp://data-vocabulary.org
• idem voor Review door een 1 specifiek persoon(kan samen met schema.org gebruikt worden)
16
Schema.org
Rich Snippets voorbeelden
16
Google Structured Data Testing tool
http://www.google.nl/webmasters/tools/richsnippets
Semantic Inspector Chrome plugin
https://chrome.google.com/webstore/detail/semantic-
inspector/jobakbebljifplmcapcooffdbdmfdbjh
Tip: https://www.google.nl/webmasters/markup-helper/
VOORBEELDENTOOLS OM VOORBEELDEN UIT TE LEGGEN
17
iRobot roomba
http://www.kieskeurig.be/robotstofzuiger/product/1
007039-irobot-roomba-780/reviews
VOORBEELDENPRODUCT
18
Foo fighter tour dates
www.songkick.com/artists/29315-foo-fighters
VOORBEELDENEVENEMENT
19
Interstellar
http://www.cinenews.be/nl/films/interstellar/
VOORBEELDENFILM
20
Pastorale
http://en.resto.be/restaurant/rumst/2840-rumst/2197-pastorale/
De Haararchitect
http://www.goudengids.be/de-haararchitect-zemst-1980/
VOORBEELDENLOKAAL BEDRIJF/RESTAURANTS
21
kommil foo ruimtevaarder
Tv on the radio
http://www.ew.com/ew/article/0,,20874130,00.html
VOORBEELDENRECENSIE MUZIEK / BOEK
22
https://developers.google.com/gmail/markup/reference/event-reservation
https://support.google.com/webmasters/answer/3105381?hl=nl
VOORBEELDENEMAIL MET VLUCHTGEGEVENS
23
VRAGEN?
24