Grunderna i strukturerade data med JSON-LD
Lägg till maskinläsbara strukturerade data med JSON-LD
Grunderna i strukturerade data med JSON-LD är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad är strukturerad data?
Strukturerad data är maskinläsbar JSON som beskriver vad sidan handlar om — en artikel, ett recept, en produkt eller ett evenemang. Sökmotorer använder den för att visa utökade sökresultat (stjärnbetyg, receptkort och brödsmulor) i stället för vanliga blå länkar.
JSON-LD är det rekommenderade formatet
Googles föredragna format är JSON-LD: ett enda <script type="application/ld+json">-block i head eller body som innehåller ett eller flera schema.org-objekt. Det är frikopplat från den synliga HTML-koden, så att lägga till eller uppdatera det kräver ingen omskrivning av mallen.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Learn HTML",
"author": { "@type": "Person", "name": "Ada Lovelace" },
"datePublished": "2024-05-01"
}
</script>@context och @type
Varje JSON-LD-objekt behöver @context (nästan alltid "https://schema.org") och @type (schema.org-klassen: Article, Recipe, Product, FAQPage). @context talar om för parsers vilket vokabulär egenskapsnamnen kommer från.
Vanliga Article-egenskaper
För Article anger du headline, image (URL eller array), datePublished, dateModified, author (ett Person- eller Organization-objekt) och publisher (Organization med logo). Detta är minimifälten som krävs för att Google ska överväga sidan för karusellen med toppnyheter.
Produktschema
Produktsidor deklarerar @type Product med name, image, description, brand, sku och ett offers-underobjekt som innehåller price, priceCurrency och availability. Tillsammans med aggregateRating kan Google visa stjärnbetyg och prisutdrag direkt i sökresultatet.
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Coddy Plus",
"offers": { "@type": "Offer", "price": "29.00", "priceCurrency": "USD" }
}Brödsmuleschema
BreadcrumbList beskriver navigeringshierarkin. Varje itemListElement är ett ListItem med position, name och item (URL:en). När det finns ersätter Google URL-raden i utdraget med en namngiven brödsmulesti, vilket ger fler klick.
FAQ och HowTo
Scheman för FAQPage och HowTo låste tidigare upp widgetar för utökade sökresultat i SERP. Google har sedan dess begränsat utökade FAQ-resultat till ett fåtal webbplatskategorier (gov, edu), men uppmärkningen är fortfarande värdefull för röstassistenter och andra konsumenter – behåll den på riktiga FAQ-sidor.
Matcha den synliga sidan
Google nedvärderar uppmärkning som inte stämmer överens med det användarna ser. Ange inte ett femstjärnigt betyg som inte visas på sidan och lista inte ett pris på 9,99 dollar som användaren aldrig ser. Strukturerade data måste korrekt beskriva det renderade innehållet.
Validera med Rich Results Test
Googles Rich Results Test (search.google.com/test/rich-results) tolkar valfri URL eller inklistrad kod, listar upptäckta schematyper och varnar för saknade obligatoriska egenskaper. Kör testet innan du driftsätter ändringar i strukturerade data.
Flera scheman per sida
Du kan deklarera flera JSON-LD-block på samma sida (till exempel Article + BreadcrumbList + Organization) eller kombinera dem i en enda @graph-array. Båda formerna är giltiga – välj den som är enklast att malla i din byggpipeline.
Uppdatera utan omrendering
JSON-LD finns i en script-tagg som är separat från det synliga innehållet. Om du vill uppdatera den ska du generera om JSON-blocket – injicera aldrig strukturerade data enbart via JavaScript på klientsidan, eftersom Googlebot inte alltid kör JavaScript tillförlitligt före indexering.
Kunskapskontroll
Vilka två egenskaper på toppnivå måste alla JSON-LD-objekt innehålla för att vara giltiga strukturerade data?
Sammanfattning
JSON-LD deklarerar strukturerade data i ett enda application/ld+json-scriptblock, där @context och @type identifierar varje objekt. Vanliga scheman (Article, Product, BreadcrumbList) låser upp utökade sökresultat när uppmärkningen korrekt återspeglar den synliga sidan. Validera med Rich Results Test innan driftsättning.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Grunderna i strukturerade data med JSON-LD” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Grunderna i strukturerade data med JSON-LD”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Grunderna i strukturerade data med JSON-LD”?
Lägg till maskinläsbara strukturerade data med JSON-LD Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Grunderna i strukturerade data med JSON-LD”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- OpenGraph og:title og:description og:image
- Metataggar för Twitter Card
- Grunderna i strukturerade data med JSON-LD
- Hreflang för internationella sidor