Då vi skapar hemsidor och skriver dess innehåll ska man alltid göra detta för den mänskliga klienten som tros besöka sidan. Men vi har också en annan besökare som frekvent kommer in på sidan för att se sig om, dvs sökmotorernas spindlar. Dessa är redan välutvecklade för att kunna tyda innehållet du har skapat men vill du ändå ge dom lite hjälp så finns där lite olika saker att tänka på.
Den mest vanliga och grundläggande ”on page” optimeringen är en klar struktur i dokumentet. En väl utformad hierarki bland rubriker och underrubriker.
Ett annat sätt är semantiska klassnamn och microformat där vi namnger element efter dess innehåll vilket lättare kan tydas av spindlarna. Tanken är att man ska kunna förklara för robotar vad som står på sidan utan att påverka den mänskliga upplevelsen.
På samma vis appliceras även microdata. Microdata är en html5 specifikation som är i skrivande stund under utveckling av W3C. Det används för att märka upp och beskriva innehållet i din htmlkod.
Schema.org är scheman över fördefinierade objekt som togs fram och underhålls av Google, Bing och Yahoo tillsammans. Tjänsten är framförallt inriktad på att användas tillsammans med microdata men säger sig i skrivande stund även ha som målsättning att stödja fler format längre fram i tiden.
Hur det appliceras
Vi börjar med att sätta ett ”itemscope” på ett element av typen ”WebPage” på följande vis:
<body itemscope itemtype="http://schema.org/WebPage">
...
</body>
Jag har här valt att sätta specifikationen på body -elementet för att få full frihet att markera upp de olika egenskaperna i hela dokumentet.
Om vi tar en titt på tabellen över WebPage på schema.org så ser vi en rad av olika egenskaper vi kan märka upp. Du lägger kanske märke till att tabellen är uppdelad i olika delar, detta är för att ”WebPage” ärver egenskaper av dess föräldrar. Det gör det samma för dig som applicerar egenskaperna, alla i tabellen går att använda.
För att märka upp någon av dessa egenskaper använder attributet itemprop:
<body itemscope itemtype="http://schema.org/WebPage">
...
<div itemprop="breadcrumb">
<a href="foo.html"></a> >
<a href="foo/bar.html"></a> >
<a href="foo/bar/baz.html"></a>
</div>
...
</body>
I exemplet ovan har vi nu markerat vad som är brödsmulor i dokumentet. Något som kan komma att visa sig som rich snippets i sökmotorsresultatet.
Detta var en enkel märkning som tog emot typen text. Som du ser så finns det däremot andra egenskaper som vill ha olika objekt som typ.
<body itemscope itemtype="http://schema.org/WebPage">
...
<div itemprop="breadcrumb">
<a href="foo.html"></a> >
<a href="foo/bar.html"></a> >
<a href="foo/bar/baz.html"></a>
</div>
...
<p itemprop="author" itemscope itemtype="http://schema.org/Person">
Mitt namn är
<span itemprop="name">
<span itemprop="givenName">Erik</span>
<span itemprop="familyName">Landvall</span>
</span> och jag sysslar med
<span itemprop="jopTitle">webbutveckling</span>.
</p>
...
</body>
Vi märkte här upp att hemsidan är skapat av en snubbe som heter Erik Landvall och som jobbar med webbutveckling.
Egenskapen ”author” kunde bara sättas på ett element som var av typen ”Person”. Och eftersom vi sätter attributet itemscope på elementet så faller alla definierade egenskaper däri på ”Person” istället för ”WebPage”.
På detta viset kan vi alltså kedja och definiera datan på hemsidan. Men vi är inte restrukturerade till att alltid kedja från root typen. Vi kan ha separata objekt på sidan som inte har med varandra att göra.
<body itemscope itemtype="http://schema.org/WebPage">
...
<div itemprop="breadcrumb">
<a href="foo.html"></a> >
<a href="foo/bar.html"></a> >
<a href="foo/bar/baz.html"></a>
</div>
...
<div itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Lorem ipsum</h1>
<p itemprop="articleBody">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla tristique imperdiet elit..
</p>
</div>
...
<p itemprop="author" itemscope itemtype="http://schema.org/Person">
Mitt namn är
<span itemprop="name">
<span itemprop="givenName">Erik</span>
<span itemprop="familyName">Landvall</span>
</span> och jag sysslar med
<span itemprop="jopTitle">webbutveckling</span>.
</p>
...
</body>
Det går så klart även att kedja vidare på ”Artikel” objektet här ovan med en annan ”author” som då är specificerad som författare till artikeln.
Länkar
http://support.google.com/webmasters/
http://googlewebmastercentral.blogspot.se/
http://schema.org
http://www.google.com/webmasters/tools/richsnippets
http://dev.w3.org/html5/md-LC/
http://net.tutsplus.com/tutorials/
http://manu.sporny.org/