Microdata Grundlæggende

MicrodataBegynder

Introduktion til Microdata markup med Product eksempel

Om dette eksempel

Lær hvordan man bruger Microdata til at annotere eksisterende HTML elementer med struktureret data. Microdata er integreret direkte i HTML markup ved hjælp af attributter som itemscope, itemtype og itemprop. Dette eksempel viser hvordan man markerer produktinformation op for bedre visibility i søgeresultater.

Kode Eksempel

<!DOCTYPE html>
<html lang="da">
<head>
  <meta charset="UTF-8">
  <title>Trådløse Høretelefoner Pro X</title>
</head>
<body>
  <div itemscope itemtype="https://schema.org/Product">
    <h1 itemprop="name">Trådløse Høretelefoner Pro X</h1>
    
    <img itemprop="image" src="/images/headphones-pro-x.jpg" 
         alt="Trådløse Høretelefoner Pro X">
    
    <p itemprop="description">
      Premium trådløse høretelefoner med aktiv støjreduktion, 
      40 timers batteritid og exceptionel lydkvalitet. Perfekt til 
      musik, podcasts og opkald.
    </p>
    
    <div itemprop="brand" itemscope itemtype="https://schema.org/Brand">
      <span itemprop="name">AudioTech</span>
    </div>
    
    <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
      <span itemprop="price" content="1499.00">1.499,00</span>
      <meta itemprop="priceCurrency" content="DKK"> kr.
      
      <link itemprop="availability" href="https://schema.org/InStock">
      <span>På lager</span>
      
      <meta itemprop="priceValidUntil" content="2025-12-31">
      <meta itemprop="url" content="https://www.example.com/headphones-pro-x">
      
      <div itemprop="seller" itemscope itemtype="https://schema.org/Organization">
        <meta itemprop="name" content="ElectroShop Danmark">
      </div>
    </div>
    
    <div itemprop="aggregateRating" itemscope 
         itemtype="https://schema.org/AggregateRating">
      <span itemprop="ratingValue">4.8</span> ud af 
      <span itemprop="bestRating">5</span> stjerner
      (<span itemprop="reviewCount">342</span> anmeldelser)
    </div>
    
    <meta itemprop="sku" content="HPX-2024-BLK">
    <meta itemprop="mpn" content="ATPX2024">
    <meta itemprop="gtin13" content="1234567890123">
  </div>
</body>
</html>

Forklaring

Dette eksempel demonstrerer hvordan Microdata integreres direkte i HTML markup. itemscope angiver at elementet indeholder struktureret data, mens itemtype definerer schema typen. itemprop attributter markerer specifikke egenskaber som navn, pris og rating. Microdata er især nyttigt når du vil annotere eksisterende HTML uden at tilføje separate scripts. Meta tags bruges til data der ikke vises visuelt men er vigtige for søgemaskiner.

Use Cases

→E-commerce produktsider der skal vise rich snippets med pris og rating
→Produktkataloger med hundredvis af varer der skal optimeres
→Integration med eksisterende CMS systemer uden JSON-LD support
→Sider hvor du vil have tight coupling mellem visuel og struktureret data
→Legacy websites der skal opgraderes med struktureret data
→Produkter der skal vises i Google Shopping resultater

Best Practices

✓Brug itemscope og itemtype sammen på samme element
✓Anvend meta tags for data der ikke vises visuelt (SKU, GTIN osv.)
✓Sørg for at priser matcher det brugeren faktisk ser på siden
✓Inkluder både machine-readable og human-readable versioner af data
✓Nest child schemas korrekt med itemscope på nested elementer
✓Valider at alle required properties for produkter er inkluderet
✓Brug content attribut på meta tags for at specificere eksakte værdier
✓Test hvordan markup påvirker Google Shopping og Product rich results

Quick Info

Kategori: Microdata
Sværhedsgrad: Begynder
Use Cases: 6
Best Practices: 8

← Tilbage til alle eksempler