Rich snippets i din HTML
Skrevet d. 13. Jan, 2012 af Johnny Krogsgård i kategorien Google
Der er efterhånden nogle stykker som har spurgt mig om rich snippets, sikkert fordi at Yoast har haft fokus på det og senest har Rosenstand haft et indlæg på E-universe.dk om det. Sidenote: Hvis du ikke er medlem af e-universe, så bliv det.
Både Rosenstand og Yoast taler begge om wordpress plugins som automatisk hjælper dig med rich snippets, men hvad gør du hvis du ikke har wordpress, eller hvis du blot selv gerne vil have lidt mere kontrol? Jeg gravede lidt ned i emnet og så at det faktisk er relativt nemt selv at indsætte noget HTML. Herunder er et eksempel på en af de kodetyper jeg bruger til rich snippets. Det er beregnet til anmeldelser (af et produkt) og jeg har simplificeret koden så meget som muligt. Du skal faktisk kun rette tre steder.
<!-- Snippet start --> <div class="hreview"> <p>[NORMAL TEKST] <span class="item"><span class="fn">[DET DU ANMELDER]</span></span> [NORMAL TEKST]</p> <div> <span class="rating"> <span class="value-title" title="[ANTAL STJERNER (eks: 4.5)]"></span> </span> <span class="reviewer"> <span class="value-title" title="[ANMELDERNAVN]"></span> </span> </div> </div> <!-- Snippet slut -->
Tilføj flere parametre
Hvis du vil kan man indsætte flere ting som eksempelvis pris, det gøres blot ved at indsætte følgende.
<span class="pricerange"> <span class="value-title" title="[PRIS]"></span> </span>
Test dine rich snippets
Når du selv sidder og laver koden, kan det være meget godt at kunne teste om det virker efter hensigten. Google har heldigvis lavet et Rich Snippets Testing Tool som præcist hjælper med dette.
UPDATE: Søren Sprogø har gjort mig opmærksom på at rich snippets ikke er rullet 100% ud i Danmark endnu, og det er uvist hvornår det bliver det. Så det skal man naturligvis være opmærksom på inden man går i gang. Jeg kan dog nævne at jeg i flere måneder har brug ovenstående kode med success.
14 Kommentarer til “Rich snippets i din HTML”
Vær den første til at kommentere
Følg mig på Google+
Nyeste indlæg
Hold dig opdateret
Søren Sprogø
13. Jan, 2012
Update #2: Ser ud til at de første rich snippet ratings rent faktisk ER begyndt at dukke op i DK!
Så det er NU du skal til at have det implementeret!
Johnny Krogsgård
13. Jan, 2012
Jep det kører live med anmeldelser, prøv eksempelvis at google dette indlæg
jesper
13. Jan, 2012
Hej Johnny.
Hvordan kan det være, at jeg ikke kan se noget om det i html koden for dette indlæg?
Johnny Krogsgård
13. Jan, 2012
Hej Jesper, det er nederst i indlægget (lige inden update) kig efter div’en med class “hreview”
Michael Oxkjær
13. Jan, 2012
Det er altså lidt smart, nu kan man jo så lave et review med maks. stjerner og skrive det er lavet af ens nærmeste konkurrent
Johnny Krogsgård
13. Jan, 2012
Ha ha, jep det kan man. Men som nogle også allerede har pointeret, så er dette så nemt at “snyde” med, og derfor vil google sandsynligvis også lave det om på et tidspunkt.
Søren Malling
13. Jan, 2012
Er der ikke tale om Semantisk markup (Semantic Web), som Google & Bing bl.a. har været med til at skabe en fælles standard for?
http://www.schema.org/docs/gs.html#microdata_how
Der har du et skema baseret på den enkelte data stump som du præsentere.
Rosenstand
13. Jan, 2012
Hej
Du er ikke bange for den der “display:none” på dine stjerner?
Johnny Krogsgård
13. Jan, 2012
Ha ha, jeg vidste der var en som ville opdage den..
Jeg er i gang med at teste lidt forskellige måder at “skjule den”. (display:none, height:auto, osv..) – Men jo..
Jan Skovgaard
19. Jan, 2012
@Søren: Det der vises i ovenstående eksempel er ikke fra schema.org men er derimod et såkaldt microformat som er udarbejdet af folkene bag http://microformats.org/ som er lidt græsrodsagtig.
Idéen bag microformater er at berige ens markup, med en række klassenavne, som dermed gør den mere semantisk som du er inde på og det bevirker at dit website kommer til at fungere som et lille API, hvor søgemaskiner og andre kan finde de informationer der er “hihglighted” med microformatet.
Så det er super let for google og andre søgemaskiner at finde ud af, at hvad det er for nogle data og derved kan man komme til at ranke bedre end konkurrenterne (lidt forsimplet sagt)
schema.org er som du nævner en fælles standard som bing, yahoo og google har udarbejdet og den baserer sig på nogle patterns, hvor HTML5 attributten itemprop benyttes.
Microformater baserer sig som nævnt på CSS klasser.
Paris Nakita Kejser
16. Feb, 2012
Sider og tænker lidt over dette, og sad og lavet nogle test men den sage hele tiden at der mangles “reviews”
Så jeg vil høre lidt omkring det er muligt at lave det uden “rating” og “reviews” eller om det er noget man skal gøre?
Johnny Krogsgård
17. Feb, 2012
Hej Paris, jeg er ikke helt med på hvad dit spørgsmål går på. Med alle de tests jeg har lavet har jeg ikke fået en “warning med mangler ratings”?
Nikolaj Mogensen
21. Feb, 2012
Hej Johnny
Rigtig godt indlæg – masse a credit herfra. Har efter indlægget får lagt anmeldelser ind på produktniveau på min webshop e-scarf.
Anmeldelser en rigtig godt til at give Google mere data de så kan give videre til søgerne.
Ser frem til at se brugergenerede anmeldelser og reviews i søgeresultatet
dbh
Johnny Krogsgård
22. Feb, 2012
Mange tak for rosen Nikolaj, dejligt at høre at det bruges i praksis derude..