24
1 Intro Schema.org Fronteers Q? Contact: Pieter Mergan @Digital

Intro schema.org / microdata voor frontend developers

Embed Size (px)

DESCRIPTION

Intro tot microdata, het belang ervan voor SEO, code voorbeelden, tips & tricks om de microdata markup optimaal te integreren

Citation preview

Page 1: Intro schema.org / microdata voor frontend developers

1

Intro Schema.org

Fronteers

Q? Contact: Pieter Mergan @Digital

Page 2: Intro schema.org / microdata voor frontend developers

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

Page 3: Intro schema.org / microdata voor frontend developers

3

Achtergrond:

belang van gestructureerde opmaak voor SEO

3

Page 4: Intro schema.org / microdata voor frontend developers

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

Page 5: Intro schema.org / microdata voor frontend developers

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

Page 6: Intro schema.org / microdata voor frontend developers

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

Page 7: Intro schema.org / microdata voor frontend developers

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

Page 8: Intro schema.org / microdata voor frontend developers

8

Schema.org via Microdata

8

Page 9: Intro schema.org / microdata voor frontend developers

http://www.seoskeptic.com/basic-vocabulary-for-schema-org-and-structured-data/

SCHEMA.ORG VIA MICRODATATERMINOLOGIE/TECHNOLOGIE

9

Page 10: Intro schema.org / microdata voor frontend developers

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/

Page 11: Intro schema.org / microdata voor frontend developers

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>

Page 12: Intro schema.org / microdata voor frontend developers

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)

Page 13: Intro schema.org / microdata voor frontend developers

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>

Page 14: Intro schema.org / microdata voor frontend developers

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

Page 15: Intro schema.org / microdata voor frontend developers

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)

Page 16: Intro schema.org / microdata voor frontend developers

16

Schema.org

Rich Snippets voorbeelden

16

Page 17: Intro schema.org / microdata voor frontend developers

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

Page 18: Intro schema.org / microdata voor frontend developers

iRobot roomba

http://www.kieskeurig.be/robotstofzuiger/product/1

007039-irobot-roomba-780/reviews

VOORBEELDENPRODUCT

18

Page 19: Intro schema.org / microdata voor frontend developers

Foo fighter tour dates

www.songkick.com/artists/29315-foo-fighters

VOORBEELDENEVENEMENT

19

Page 20: Intro schema.org / microdata voor frontend developers

Interstellar

http://www.cinenews.be/nl/films/interstellar/

VOORBEELDENFILM

20

Page 21: Intro schema.org / microdata voor frontend developers

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

Page 22: Intro schema.org / microdata voor frontend developers

kommil foo ruimtevaarder

Tv on the radio

http://www.ew.com/ew/article/0,,20874130,00.html

VOORBEELDENRECENSIE MUZIEK / BOEK

22

Page 23: Intro schema.org / microdata voor frontend developers

https://developers.google.com/gmail/markup/reference/event-reservation

https://support.google.com/webmasters/answer/3105381?hl=nl

VOORBEELDENEMAIL MET VLUCHTGEGEVENS

23

Page 24: Intro schema.org / microdata voor frontend developers

VRAGEN?

24