Dette blogindlæg er et gæsteindlæg fra dygtige Morten Vadskær, der er partner i webshop systemet Shoporama.
Morten er en erfaren kode-herre med rigtig godt styr på SEO. I dette blogindlæg skal vi “back to basics” og jeg synes selv, at der er rigtig meget godt at hente i hans ord.
Med de ord, giver jeg ordet videre til Morten.
Okay – det virker kryptisk, det medgiver jeg. Men der er en god forklaring og den skal du nok få her. Men først skal vi lige tilbage og se lidt på “gammel kode”. Vi spoler tiden tilbage til før 2007, hvor Steve Jobs introducerede os for smartphones.
Indtil iPhones kom, blev langt de fleste hjemmesider vist på en desktop computer. Vi kendte ret præcist brugerens skærms størrelse. Det var enten 800 x 600 eller 1024 x 768 pixels. Der var næsten ingen afvigelser. Det var gode tider og rimeligt at designe til.
Så kom smartphones. Mange hjemmesider så vitterligt rædderlige ud på en iPhone. De fleste blev med tiden reddet af responsivt design, men der var en enkelt sten i skoen: Tabeller.
Tabulære data i tabeller.
De havde en tendens til at være brede og dermed være noget virkeligt knald på smartphones. Man skulle scrolle sidelæns og det var både grimt, ikke brugervenligt og besværligt.
Men hvad er tabeller og hvad skal der være i tabeller?
Tabulære data bør være i tabeller.
Og hvad er så “tabulære data”, kan du med rette spørge. Jamen det kan være:
- Navne og tider fra et motionsløb
- Stillingen i f.eks. en sport (de forskellige hold, kamp og mål)
- Sammenligning af firmaer/services/produkter, deres priser evt. ydelser
- Opstilling af byer og deres indbyggertal
- Opremsning af indholdet i f.eks. madvarer
- Liste over nobelprismodtagere og årstal, de modtog prisen
Jeg gætter på, du er ved at have fanget pointen i hvilke data, der bør være i dét, der hedder en tabel i html.
Før 2007 var tabulære data i tabeller. For det så fint ud og var helt okay for udviklerne. Men de var ikke kønne på smartphones og de var virkeligt besværlige at gøre responsive. Så (lidt for) smarte webudviklere lavede frameworks og løsninger, der viste tabulære data virkeligt pænt på smartphones og tablet. I stedte for at bruge table elementet, så brugte de div elementer. Det så pænt ud, men det var ikke semantisk korrekt. De data burde være i et table element.
Skaden var dog ikke så stor, da table elementet forsvandt. Det havde nemlig ikke nogen stor semantisk betydning (dengang). Det havde mest betydning for den webudvikler, der skulle kode hjemmesiden. Det var nemt at præsentere tabulære data pænt (på desktops). Så derfor var der ikke mange, der brokkede sig, da tabeller blev udskiftet med div’er. Det så pænt ud både på desktop og mobil med div’er og der var ingen, der havde tabt noget ved den manglende semantik.
Men nu sker der noget
For du har nok bemærket det… der er nogle resultater, der fylder meget mere end andre i SERP. Lad os se et eksempel.
Et resultat, der skiller sig ud fra de andre. Og ikke nok med det. Klikker man på “Se 8 rækker mere”, så ryger man direkte ind på siden. Så her har du pluselig to links i stedet for ét ude i SERP.
Men du kan faktisk krydre den endnu mere. For Google viser også gerne emojis i dine tabeller. Her ser du et af mine egne eksempler (du kan se det ved at søge “metalligaen stilling”).
Nifty, ikke? (Og her er der kun en enkelt emoji. Man bør jo strø dem ud med rund hånd).
Vent ... der er faktisk flere fordele ved tabulære data
Måske har du allerede opdaget det. Google er begyndt at hive nogle af de tabulære data ud i søgeresultaterne. Se dette her fra Wikipedia.
Værsgo’. Det er et søgeresultat, der skiller sig ud.
Det er relevant for brugeren
Og Wikipedia har ikke mindre end 6 links ude i søgeresultatet (mod konkurrenternes ene link per resultat).
Her kan man tale om bang for the buck.
Så lad os se lidt på siden. De ekstra data ude i søgeresultatet kommer herfra.
Og vælger vi at tage et kig på koden, så vil vi se, at …. tadaaaaa… table… det gode gamle table-element fyldt med data. Lige til at Google kan labbe i sig.
Den korte og simple historie her er: Wikipedia har gjort relevante data tilgængelige både for brugeren og for Google. De gør det nemt for Google og bliver belønnet med det.
Og man skal ikke være Wikipedia for at få belønningen. Her ser du et dansk eksempel, hvor et produkts indhold er hevet med ud. Både relevant for brugerne og de fylder mere i søgeresultaterne.
Så hvad gør du nu?
Skal du gøre dig håb om også at få fine tabeller eller dine tabulære data i søgeresultaterne, så skal du identificere de tabulære data, du har på din side (det er typisk opremsninger eller data sat i system). Så må du se i koden, om de er listet med et table element eller en div. Er det et div element (kan også være et p element eller helt tredje html element), skal du have det lavet om til et table element. Er det et table er du good to go og skal bare sætte dig tilbage og vente på, at Google belønner dig. Måske har du allerede tabulære data og tabeller med ude i SERP, men skal blot lige identificere de søgninger, du har dem på.
Håber du er blevet inspireret til at støve det gode gamle table element af og bruge det, hvor det sig hør og bør. Der er kun fordele ved at skifte til table. Det var en fejl, at table har været i bad standing i næsten 14 år.
