Gå videre til hovedindholdet

VoiceSearch: Gør dit webindhold "speakable" - med CSS-selektorer

Med produkter som Google Home og Google Assistant har Google sat turbo på Voice Search, stemmestyret søgning. Søgemaskine-giganten er i den forbindelse begyndt at understøtte semantisk opmærkning med "speakable"-egenskaben fra vokabularet schema.org (dog i første omgang i USA). Som navnet antyder, bruges "speakable" til at indikere, hvilke dele af en (web)tekst, der er særlig velegnet til at blive læst op.

Rent teknisk henviser speakable-metadata til bestemte elementer i en websides HTML-struktur. Disse kan udpeges på forskellige måde. En er at benytte en såkaldt CSS-selektor, som en indikator, der normalt har til formål at identificere elementer, der skal formateres på en bestemt måde. Men nu altså også elementer, der skal "formateres mundtligt", så at sige.

Nedenstående kodeeksempel viser, hvordan det kan gøres. Eksemplet består af schema.org-metadata i dataformatet Json-LD indlejret i et HTML script-element. Af disse metadata fremgår det af CSS-selektoren (markeret med rødt), at de elementer, der har værdien "card-title" eller "card-text" i HTML-attributten "class", er velegnede til at blive læst op. Disse referencer kunne for eksempel være indeholdt i en webside indeholdende cards, kort, om nye bøger, og udarbejdet ved hjælp af Bootstrap, et populært webdesign-framework, således som illustreret i dette eksempel


 <script type="application/ld+json">
{
 "@context": "https://schema.org/",
 "@type": "NewsArticle",
 "name": "Semantisk søgning og søgemaskineoptimering",
 "speakable":
{
  "@type": "SpeakableSpecification",
  "cssSelector": [".card-title", ".card-text"]
  }
 }
  </script>

At Google kan bruge CSS-selektoren til at fremfinde og uddrage de dele af websiden, der kan læses op, ses af dette screenshot, der viser Googles læsning af siden: