Implementer strukturerte data (Schema.org) i Shoporama-temaet ditt

Strukturerte data (Schema.org) hjelper Google og andre søkemotorer med å forstå innholdet på sidene dine. For en nettbutikk er det spesielt viktig å merke opp produkter, butikkinformasjon, brødsmuler og produktanmeldelser, slik at du kan oppnå «rich snippets» i søkeresultatene med for eksempel pris, lagerstatus og stjernevurdering.

Tips: Shoporama legger automatisk til grunnleggende Schema.org-markering for produkter via våre innebygde SEO-funksjoner. Les om automatiske strukturerte data og SEO i Shoporama. Denne artikkelen er for deg som ønsker å lage eller utvide markeringen selv i temaet ditt.

Hva er strukturerte data?

Strukturerte data er en standardisert måte å beskrive sidens innhold på i et format som søkemotorer forstår. JSON-LD er det anbefalte formatet og plasseres i en <script type="application/ld+json">-tag. Det påvirker ikke sidens visuelle utseende, men gir søkemotorene strukturert informasjon som kan brukes til rich snippets.

De riktige safe-metodene på SafeProduct, SafeWebshop og SafeCompany

Før du lager din egen JSON-LD-markering, er det viktig å kjenne til de «safe»-metodene som faktisk finnes på objektene i et Shoporama-tema. Dette er de stabile metodene du kan bruke i Smarty.

På $product (SafeProduct):

• getName(), getDescription(), getOwnId(), getGtin(), getMpn(), getBrandName()
• getPrice(), getSalePrice(), getRealPrice(), getLowest30DayPrice()
• getStockCount(), getIsInStock() og getAllowNegativeStock()
• getImage() og getImages() returnerer SafeImage med getSrc($w, $h, $type)
• getAvgRating($no_round), getReviewCount(), getProductReviews($limit)
• getUrl() gir produktets relative sti

På $webshop (SafeWebshop):

• getName(), getDescription(), getCurrency(), getUrl(), getLogo()
• getCompany() returnerer SafeCompany

På $webshop->getCompany() (SafeCompany):

• getName(), getRegNr(), getEmail(), getPhone()
• getAddress(), getZipcode(), getCity(), getCountry()

Escaping: bruk @json_encode, ikke escape:javascript

JSON-LD er JSON, og JSON har sine egne regler for hvordan spesialtegn skrives. Dette er den klart vanligste årsaken til at en ellers korrekt markering blir avvist av Google, så det er verdt å få kontroll på dette før du skriver din første blokk.

Bruk i stedet |@json_encode. Den skriver verdien som en ferdig JSON-streng inkludert anførselstegnene, så anførselstegnene må fjernes fra malen din:

Feil:  "name": "<{$product->getName()|escape:'javascript'}>",
Riktig:  "name": <{$product->getName()|@json_encode}>,

Dermed håndteres apostrofer, anførselstegn, tilbakeslag og linjeskift riktig. Linjeskift er verdt å merke seg: en anmeldelsestekst skrevet over flere linjer ødelegger JSON hvis den ikke er eskapet, og dette fanges verken opp av |escape eller av <{strip}>. I tillegg eskaperer metoden skråstreker, slik at en </script> i et produktnavn ikke kan lukke skriptblokken din for tidlig.

• Hvis feltet kan være tomt, må du sette inn |default:"" før, f.eks. <{$product->getOwnId()|default:""|@json_encode}>. Ellers blir resultatet null i stedet for en tom streng.
• Hvis HTML skal fjernes først, setter du inn |strip_tags:true før, altså |strip_tags:true|@json_encode.
• Det finnes ingen |escape:'json' i Smarty. Bruker du den, skjer det ingen eskaping i det hele tatt.
• Tall og faste verdier, for eksempel pris, valuta og schema.org-URL-er, skal fortsatt stå i vanlige anførselstegn. De inneholder ikke spesialtegn.
• |escape:'javascript' er fortsatt det riktige valget i vanlig JavaScript, f.eks. i en dataLayer-push. Det er kun i JSON-LD at det er feil.

Produktmarkering (Product)

Den viktigste typen for en nettbutikk er produktmarkering. Sett inn blokken i produktmalen din (vanligvis product/view.html):

<{assign var="availability" value=$product->getStructuredDataAvailability()}>
<{assign var="availabilityStarts" value=$product->getStructuredDataAvailabilityStarts()}>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": <{$product->getName()|@json_encode}>,
  "description": <{$product->getDescription()|strip_tags|@json_encode}>,
  "sku": <{$product->getOwnId()|@json_encode}>,
  <{if $product->getGtin()}>
  "gtin": <{$product->getGtin()|@json_encode}>,
  <{/if}>
  <{if $product->getMpn()}>
  "mpn": <{$product->getMpn()|@json_encode}>,
  <{/if}>
  <{if $product->getBrandName()}>
  "brand": {
    "@type": "Brand",
    "name": <{$product->getBrandName()|@json_encode}>
  },
  <{/if}>
  <{if $product->getImage()}>
  "image": "<{$product->getImage()->getSrc(800, 800, 'fit')}>",
  <{/if}>
  "offers": {
    "@type": "Offer",
    "url": "<{$webshop->getUrl()}><{$product->getUrl()}>",
    "price": "<{$product->getRealPrice()|string_format:"%.2f"}>",
    "priceCurrency": "<{$webshop->getCurrency()}>",
    "availability": <{$availability|@json_encode}><{if $availabilityStarts}>,
    "availabilityStarts": <{$availabilityStarts|@json_encode}><{/if}>
  }
}
</script>

Tre viktige punkter i eksemplet:

• Prisen hentes med getRealPrice(), slik at eventuelle salgspriser og rabatter inkluderes, og merverdiavgiften legges til.
• Valuta hentes med getCurrency() på $webshop (returnerer f.eks. «DKK» eller «EUR»).
• Lagerstatus hentes med getStructuredDataAvailability(), som returnerer den ferdige schema.org-URL-en, altså https://schema.org/InStock, OutOfStock eller BackOrder. Metoden bruker nøyaktig samme logikk som Google Shopping-feeden vår, slik at produktsiden og feeden alltid sier det samme. Ikke bygg den selv ved hjelp av getIsInStock() og getAllowNegativeStock(): denne kombinasjonen overser at butikken selv bestemmer om varer på restordre skal sendes som «backorder», og da oppstår nettopp den uoverensstemmelsen du ønsket å unngå.
• getStructuredDataAvailabilityStarts() gir forventet leveringsdato for en vare på restordre, altså feltet availabilityStarts. Den returnerer tomt når varen ikke er på restordre, eller når du ikke har angitt en leveringstid i Google Shopping, så sett den inn i en <{if}> -tag som i eksemplet.

Tidligere pris (Omnibus-direktivet)

Hvis produktet er på salg, anbefaler Google å vise den laveste prisen de siste 30 dagene som referansepris. Bruk getLowest30DayPrice() for å hente den. Funksjonen returnerer null hvis det ikke finnes nok prishistorikk.

Produktanmeldelser (AggregateRating)

Hvis du bruker Shoporamas innebygde anmeldelsessystem, kan du legge til en gjennomsnittlig vurdering direkte i Product-markupen. Dette kan gi stjerner i Googles søkeresultater. Sett inn blokken inne i Product-objektet:

<{if $product->getReviewCount() > 0}>
,
"aggregateRating": {
  "@type": "AggregateRating",
  "ratingValue": "<{$product->getAvgRating(true)|string_format:"%.1f"}>",
  "reviewCount": "<{$product->getReviewCount()}>"
}
<{/if}>

Parameteren true til getAvgRating() gir et ikke-avrundet gjennomsnitt, noe Google foretrekker (f.eks. 4,3 i stedet for bare 4).

Butikkinformasjon (Store / LocalBusiness)

Du kan også markere selve nettbutikken, f.eks. i fotmalen din. Hent kontaktdata fra $webshop->getCompany(), slik at opplysningene du allerede har lagt inn under Firma, Firmainformasjon, inkluderes automatisk:

<{$company = $webshop->getCompany()}>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Store",
  "name": <{$webshop->getName()|@json_encode}>,
  "url": "<{$webshop->getUrl()}>"
  <{if $company}>
  ,
  <{if $company->getEmail()}>
  "email": <{$company->getEmail()|@json_encode}>,
  <{/if}>
  <{if $company->getPhone()}>
  "telephone": <{$company->getPhone()|@json_encode}>,
  <{/if}>
  "address": {
    "@type": "PostalAddress",
    "streetAddress": <{$company->getAddress()|@json_encode}>,
    "postalCode": <{$company->getZipcode()|@json_encode}>,
    "addressLocality": <{$company->getCity()|@json_encode}>,
    "addressCountry": <{$company->getCountry()|@json_encode}>
  }
  <{/if}>
  <{if $webshop->getLogo()}>
  ,
  "logo": "<{$webshop->getLogo()->getSrc(400, 400, 'fit')}>"
  <{/if}>
}
</script>

Sørg for at firmaopplysningene er fylt ut riktig i admin under Firma, Firmaopplysninger. Hvis du har en fysisk butikk, kan du bruke LocalBusiness eller en mer spesifikk undertype (f.eks. ClothingStore) som @type.

Brødsmuler (BreadcrumbList)

På produkt- og kategorisider er det god SEO-praksis å markere brødsmuler. Eksempel for et produkt med hovedkategori:

<{if $product->getMainCategory()}>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": <{$webshop->getName()|@json_encode}>,
      "item": "<{$webshop->getUrl()}>"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": <{$product->getMainCategory()->getName()|@json_encode}>,
      "item": "<{$webshop->getUrl()}><{$product->getMainCategory()->getUrl()}>"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": <{$product->getName()|@json_encode}>,
      "item": "<{$webshop->getUrl()}><{$product->getUrl()}>"
    }
  ]
}
</script>
<{/if}>

Test dine strukturerte data

Bruk verktøyene fra Google og Schema.org til å validere markeringen din før du går live:

• Rich Results Test sjekker om markeringen din gir rich snippets i Google
• Schema Markup Validator validerer JSON-LD-syntaksen
• I Google Search Console kan du se rapporter om produktene dine og rich results etter at sidene er indeksert

Ofte stilte spørsmål

Må jeg i det hele tatt kode JSON-LD selv?

Nei, ikke nødvendigvis. Shoporama har innebygd automatisk strukturert data for produkter, og det dekker det meste. Å kode selv er først og fremst relevant hvis du vil legge til flere felt eller bruke en mer spesifikk @type, for eksempel for hoteller, restauranter eller arrangementer.

Hvilke skjematyper kan jeg bruke i tillegg til Product?

I et Shoporama-tema kan du bygge alle Schema.org-typer som finnes som JSON-LD. De mest brukte for nettbutikker er Product, Offer, AggregateRating, Review, BreadcrumbList, Store, LocalBusiness, Organization, WebSite med SearchAction og FAQPage for faste FAQ-sider.

Hvorfor får jeg feilmeldinger i Rich Results Test?

De vanligste feilene er manglende felt (f.eks. «price» uten «priceCurrency»), feil formatering av tall eller spesialtegn som ødelegger JSON-syntaksen. Den desidert vanligste årsaken er «escaping»: kjør alle tekstverdier gjennom |@json_encode og ikke |escape:'javascript', som gjør et apostrof til ugyldig JSON. Se avsnittet om «escaping» lenger oppe.

Hvor lang tid tar det før jeg ser stjerner i Google?

Google må først gjennomsøke siden på nytt før den nye markeringen tas i bruk. Det kan ta alt fra noen få dager til et par uker. I Search Console kan du be om rask reindeksering av enkeltstående sider.

Påvirker dette rangeringene mine i Google?

Strukturerte data er ikke en direkte rangeringfaktor, men rich snippets med for eksempel pris og stjerner gjør søkeresultatet ditt mer synlig og kan øke klikkfrekvensen. På sikt bidrar det til å forbedre din samlede SEO.

Hvordan håndterer jeg merverdiavgift i prisfeltet?

Bruk getRealPrice(), som returnerer prisen inkl. moms. Det er prisen kunden møter i butikken, og den prisen Google forventer i Product-markup på en B2C-butikk. Hvis du skal vise pris ekskl. moms (B2B), bruk getPriceExVat() i stedet.

Må jeg ha anmeldelser før jeg viser AggregateRating?

Ja. Legg bare til AggregateRating hvis produktet faktisk har anmeldelser. Eksemplet ovenfor sjekker at getReviewCount() > 0, slik at markeringen ikke legges til produkter uten anmeldelser. Falske eller tomme rangeringer kan utløse en straff fra Google.

Hvor finner jeg bedriftsopplysningene mine til Store-markup?

Gå inn i admin under Bedrift, Bedriftsopplysninger. Dataene du fyller ut her blir tilgjengelige via $webshop->getCompany() i temaet ditt, slik at Store-blokken fylles ut automatisk.

Hvor skal JSON-LD plasseres på siden?

Du kan plassere den enten i <head> eller i <body>. Begge deler er gyldige ifølge Google. På produktsider er det vanlig å plassere den nederst i produktmalen.

Nettbutikken min selger på flere språk. Må jeg ha markering for hvert språk?

Ja, navn og beskrivelser i markeringen må gjenspeile den siden kunden ser. Siden $product->getName() og $product->getDescription() automatisk returnerer den oversatte teksten for det aktive språket, skjer dette helt automatisk når du bruker eksemplene her.

Trenger du hjelp med strukturerte data? Kontakt oss på support@shoporama.dk.