Intro schema.org / microdata voor frontend developers

  • View
    149

  • Download
    0

  • Category

    Design

Preview:

DESCRIPTION

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

Citation preview

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

Recommended