Strukturerte data du bør ha

27. mai 2019
Asbjørn Ness

Strukturerte data er begrep som blir brukt om å tilby data merket med hvilken informasjonstype den er. Dette for at maskiner skal få beskjed om hva de leser, uten å måtte analysere. Jeg skal her gå gjennom tre typer oppsett av strukturerte data du bør ha på websiden din.

Illustrasjon: Colourbox

Introduksjon til strukturerte data

Jeg har tidligere vært innom strukturerte data i innlegget Kom i gang med strukturerte data. Der gikk jeg gjennom oppsettet av Schema.org-typen NewsArticle. Schema.org er en metode for å merke strukturerte data som har flere store søkemotoroperatører i ryggen.

Søkemotorer lever av å kunne tilby informasjon raskt og godt. For å gjøre dette trenger de en god innholdsleveranse fra deg. Kan du tilby dette i form av blant annet strukturerte data, så belønnes du gjerne i form av rangering.

I dette innlegget skal jeg ta et skritt tilbake til tre mer grunnleggende typer instrukser du kan sette opp nesten uavhengig hva siden din handler om.

WebSite

Det første scriptet du trygt kan implementere er av typen WebSite. I eksempelet under har jeg kopiert koden som er plassert like foran </body> på alle sider på Filmdagbok.no.

<script type="application/ld+json">
{
  "@context": "http:\/\/schema.org",
  "@type": "WebSite",
  "name": "Filmdagbok",
  "alternateName": "Filmdagbok: Norsk filmblogg",
  "url": "https:\/\/filmdagbok.no\/",
  "dateModified": "2016-11-16",
  "sameAs": [
    "https:\/\/www.facebook.com\/filmdagbok",
    "https:\/\/twitter.com\/filmdagbok"
  ],
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https:\/\/filmdagbok.no\/sok\/?q={q}",
    "query-input": "required name=q"
  }
}
</script>

Her er websidens navn, et alternativt navn, websidens adresse, en dato for når siden siste ble oppdatert, henvisning til Filmdagbok på andre sider og en del som sier noe om hvordan søket på websiden fungerer.

Å være nevnt med samme informasjon flere steder på web bidrar positivt til troverdigheten siden din har for søkemotorene. Ved å bruke sameAs bekrefter du at sammenhenger mellom sider som kommuniserer noe om websiden din er gyldige.

potentialAction er med å fortelle Google om hvordan søket ditt fungerer, og kan bidra til at du får en søkeboks i Googles resultatliste. Her spiller flere faktorer inn, men det får bli et innlegg til senere.

En kommentar

På Filmdagbok har jeg implementer koden over som PHP for at den skal bli dynamisk oppdatert. Gå til slutten av innlegget for å se den fullstendige koden jeg bruker i ProcessWire.

BreadcrumbList

Så sant du ikke har en webside som kun består av en enkelt side, kan du dra nytte av type BreadcrumbList.

En dynamisk variant av koden under har jeg plassert foran </body> på alle sider på Filmdagbok. Den endrer seg etter hvilke side du er på.

<script type="application/ld+json">
{
  "@context": "http:\/\/schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@id": "https:\/\/filmdagbok.no\/",
        "name": "Hjem"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@id": "https:\/\/filmdagbok.no\/blogg\/",
        "name": "Blogg"
      }
    }
  ]
}
</script>

Det finnes alternative metoder å sette opp strukturerte data på. Og har du en synlig brødsmulesti på websiden din fra før, kan det være unødvendig å legge til denne informasjonen dobbelt opp. Da kan du heller bruke Microdata-varianten, i motsetning til JSON-LD som vist over. Se eksemplene nederst på Schema.orgs side BreadcrumbList. Jeg går også kjapt gjennom Microdata i mitt siste eksempel tilknyttet SiteNavigationElement, les videre for dette.

Det denne koden gjør er å fortelle hvor i sidestrukturen du er. Det kan være både til Google, som drar nytte av dette for å optimalisere visningen av brødsmulesti i søkeresultatet sitt, men også til maskinlesere for de med nedsatt syn.

En kommentar

På Filmdagbok har jeg implementer koden som PHP for at den skal bli dynamisk oppdatert. Gå til slutten av innlegget for å se den fullstendige koden jeg bruker i ProcessWire.

SiteNavigationElement

Den siste metoden for strukturerte data jeg skal ta for meg i denne omgang er typen SiteNavigationElement. I dette eksempelet vil jeg bruke formatet Microdata, og ikke JSON-LD som på de foregående.

Grunnen til dette er at jeg på Filmdagbok viser en hovedmeny på alle sider. Derfor kan jeg ta utgangspunkt i den eksisterende koden for menyen når jeg vil stadfeste hva som er strukturerte data.

Hva som er beste praksis av Microdata, JSON-LD eller andre metoder, kan være avhengig av hvor mye ekstra kode den ene eller andre metoden fører til. Større sider er lik lenger lastetid. I tilfeller der dette betyr lite, foretrekker jeg JSON-LD, da det gir ryddigere oppsett av kode. Men i mitt tilfelle med SiteNavigationElement var det minimalt med ekstra kodeoppsett, så jeg valgte likevel Microdata.

<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
  <li itemprop=name><a itemprop=url href="/blogg/">Blogg</a></li>
  <li itemprop=name><a itemprop=url href="/regissor/">Regissører</a></li>
  <li itemprop=name><a itemprop=url href="/manusforfatter/">Manusforfattere</a></li>
</ul>

I eksempelet over har jeg fjernet CSS class, og står igjen med koden til en uordnet liste. itemscope, itemtype=”http://www.schema.org/SiteNavigationElement", itemprop=name og itemprop=url er det som er lagt til relatert til strukturerte data.

Ved å ha SiteNavigationElement på din side, gir du blant annet et signal til Google om hvilke lenker du helst ønsker at skal vises som undersider i søkeresultatet. Det gjelder i de tilfellene hvor Google viser seks undersider.

Testverktøy for strukturerte data

Du kan bruke Googles Testverktøy for strukturerte data for å teste hele websiden, eller kun de aktuelle kodesnuttene du har implementert, for å sjekke om de er gyldige

Se et eksempel for testen av Filmdagboks side Get Low i testverktøyet for å se hvordan kodene over slår ut i praksis.

Google Search Console

Har du satt opp Google Search Console, vil du etter hvert få en oversikt der inne over hvor mange elementer med strukturterte data websiden din har.

Dynamisk kode for PHP og ProcessWire

Koden under er den jeg benytter på Filmdagbok.no for WebSite og BreadcrumbList. Funksjonene som det vises til første har jeg i en egen PHP-fil, og implementeringen som vises til nederst settes inn før </body></html> i en felles malfil for websiden.

<?php
  // Homepage reference for settings etc.
  $homepage = $pages->get('/');

  // Structured data
  // Breadcrumbs
  $schema_breadcrumbs;

  if(strlen($page->parents()) > 0) {

    $listItems = array();
    $positionCounter = 1;

    foreach($page->parents() as $parent) {

    $listItems[] = [
      "@type" => "ListItem",
      "position" => $positionCounter,
      "item" => [
        "@id" => $parent->httpUrl,
        "name" => $parent->title
      ]
    ];

    $positionCounter++;

  }

  $schema_breadcrumbs = array(
      "@context" => "http://schema.org",
      "@type" => "BreadcrumbList",
      "itemListElement" => $listItems
    );

  }

  // WebSite
  $schema_website = array(
    "@context" => "http://schema.org",
    "@type" => "WebSite",
    "name" => $homepage->subtitle,
    "alternateName" => $homepage->meta_title,
    "url" => $homepage->httpUrl,
    "dateModified" => strftime('%Y-%m-%d', time()),
    "sameAs" => [
        "https://www.facebook.com/{$homepage->service->facebook}",
        "https://twitter.com/{$homepage->service->twitter}"
      ],
    "potentialAction" => [
      "@type" => "SearchAction",
      "target" => "{$homepage->filmdagbok_pages->search->httpUrl}?q={q}",
      "query-input" => "required name=q"
    ]
  );
?>

<!-- Schema -->
<!-- WebSite -->
<script type="application/ld+json"><?= json_encode($schema_website); ?></script>
<?php if(strlen($page->parents()) > 0) { ?>
<!-- Breadcrumbs -->
<script type="application/ld+json"><?= json_encode($schema_breadcrumbs); ?></script>
<?php } ?>

Deler av funksjonene er satt opp til å løse nødvendigheten ved å være dynamisk. Som i at BreadcrumbList må bli ulik for hver webside. Mens det for WebSite er en del referanser til websidens innstillinger.

På slutten implementeres alltid WebSite, mens BreadcrumbListimplementeres på alle sider som ikke er forsiden.

Oppsummering

I dette innlegget har jeg tatt en praktisk gjennomgang av hvordan tre typer intruksjoner for strukturerte data kan settes opp. Dette er en presentasjonsmåte av informasjon som kan bidra til at andre letter kan hente ut godt innhold fra sidene dine, og kanskje belønne deg ved å gi deg mer trafikk.

Det kan også ha andre fordeler, som å legge tilrette for at andre som bruker maskiner til å fange opp innholdet på siden din, får lettere tilgang.

Tiden framover

Google satser stadig mer presentering av innhold som lages basert på strukturerte data. Rich cards ble introdusert i mai 2016, men hentingen av strukturerte data har foregått i lenger tid.

Hva framtiden bringer er selvfølgelig vanskelig å si, men med tanke på at presentasjonsflatene blir stadig flere, og at talestyring og -søk er stort allerede, så er det kanskje snart på tide å overlate til andre hvordan ting presenteres, og heller fokusere på innholdet — som kan tilbys som strukturerte data.