Kom i gang med strukturerte data

27. mai 2019
Asbjørn Ness

Strukturerte data har flere navn: RDFa, JSON-LD eller enkelt nok Microdata. Felles er at dette er metoder for å servere renere data fra din webside til de som skulle ha nytte av det. I mitt tilfelle er det først og fremst Google. Googles søk ser etter mikrodata for å kunne vise sine Rich Cards i søkeresultatet.

Illustrasjon: Official Google Webmaster Central Blog

Med artikkeltype som eksempel

I denne veiledningen skal jeg benytte article fra schema.org som eksempel, og nærmere bestemt NewsArticle. Dette er en av typene som Google gjengir som Rich Cards i søkeresultatet. I tillegg skal jeg servere informasjonen i formatet JSON-LD. Dette er anbefalingen fra Google, og en metode som gir en god visuell oversikt i koden over, uten å blande det med annen kode.

Forhåndskunnskap

Det er en fordel, men ikke krav om du allerede kan kode. Målet med veiledningen er like mye å være en innføring i hva strukturerte data dreier seg om.

Jeg tar utgangspunkt i ProcessWires API senere i veiledeningen, da jeg kommer inn på den dynamiske implementeringen av strukturerte data. Metoden er overførbar til andre CMS-er som har tilsvarende API som lar deg hente ut felter fra en side, som er de fleste, deriblant WordPress.

Koden vi skal bruke

Dokumentasjonen til schema.org om article inneholder et stort uvalg av muligheter, men jeg skal holde meg til det mest grunnleggende.

<script type="application/ld+json">
{
	"@context":"http://schema.org",
	"@type":"NewsArticle",
	"headline": "Artikkelens tittel",
	"image": [
 		"http://www.lenketilbilde.no/bilde.jpg"
	],
	"datePublished": "åååå-mm-ddTtt:mm",
	"description": "Kort tekst, ofte ingress.",
	"articleBody": "Lang tekst, hele artikkelen. Kan inneholde <strong>HTML.</strong>",
	"url": "http://www.lenketilartikkelen.no/artikkel/"
}
</script>

Legg merke til at dato og tid skilles med en stor T, for eksmpel: 2016–03–23T08:14.

Denne koden kan plasseres nesten hvor som helst på en side, men siden den ikke er det primære innholdet en vanlig besøker skal ha tak i, plasserer jeg den i bunnen av koden, før </body>-tagen. Da lastes det viktige innholdet først og raskest.

Dette er alt som skal til for å fortelle Google (og andre) hvilke data som kan brukes til blant annet Rich Cards. I hovedsak gjør det innholdet om til renere data, og lettere maskinlesbart, uten at innholdet må læres og tolkes.

Kodeeksempel for ProcessWire

I min ProcessWire-mal for nyheter henter jeg ut data fra følgende felter til JSON-LD:

  • Overskrift (headline)
  • Bilde (image)
  • Publiseringsdato og tid (publish)
  • Ingress (ingress)
  • Brødtekst (body)
<script type="application/ld+json">
{
	"@context":"http://schema.org",
	"@type":"NewsArticle",
	"headline": "<?= $page->headline ?>",
	"image": [
  	"<?= $page->image->httpUrl ?>"
	],
	"datePublished": "<?= strftime('%Y-%m-%d', $page->publish) ?>T<?= strftime('%H:%M', $page->publish) ?>",
	"description": "<?= $page->ingress ?>",
	"articleBody": "<?= $page->body ?>",
	"url": "<?= $page->httpUrl ?>"
}
</script>

Det skal også nevnes at image skiller seg ut i koden fordi det er lagt opp som en matrise (array), med mulighet til å legge inn en kode for å hente flere bildeadresser som skilles med et komma innenfor [ og ].