🔗

SiteNavigationElement Schema

Hjælp Google med at forstå din sites navigation og forbedre Sitelinks visning

Hvad er SiteNavigationElement?

SiteNavigationElement bruges til at definere de vigtigste navigation links på dit website. Det hjælper Google med at forstå din site struktur og kan potentielt påvirke hvilke sitelinks der vises under dit brand i søgeresultater.

Fordele:

• Hjælper Google forstå site hierarki
• Kan påvirke sitelinks valg
• Forbedrer crawling efficiency
• Støtter voice search navigation
• Bedre forståelse af site arkitektur

Required Properties

name

Link navn/label

url

Link destination URL

Complete Example

Hovednavigation Schema

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "SiteNavigationElement",
      "@id": "https://example.com/#nav-produkter",
      "name": "Produkter",
      "url": "https://example.com/produkter",
      "description": "Se alle vores produkter",
      "position": 1
    },
    {
      "@type": "SiteNavigationElement",
      "@id": "https://example.com/#nav-services",
      "name": "Services",
      "url": "https://example.com/services",
      "description": "Vores service tilbud",
      "position": 2
    },
    {
      "@type": "SiteNavigationElement",
      "@id": "https://example.com/#nav-om",
      "name": "Om Os",
      "url": "https://example.com/om",
      "description": "Læs mere om virksomheden",
      "position": 3
    },
    {
      "@type": "SiteNavigationElement",
      "@id": "https://example.com/#nav-blog",
      "name": "Blog",
      "url": "https://example.com/blog",
      "description": "Læs vores artikler",
      "position": 4
    },
    {
      "@type": "SiteNavigationElement",
      "@id": "https://example.com/#nav-kontakt",
      "name": "Kontakt",
      "url": "https://example.com/kontakt",
      "description": "Kontakt os",
      "position": 5
    }
  ]
}

Next.js Header Implementation

// components/Header.tsx
export default function Header() {
  const navigationItems = [
    { name: 'Produkter', url: '/produkter' },
    { name: 'Services', url: '/services' },
    { name: 'Om Os', url: '/om' },
    { name: 'Blog', url: '/blog' },
    { name: 'Kontakt', url: '/kontakt' }
  ];

  const navigationSchema = {
    "@context": "https://schema.org",
    "@graph": navigationItems.map((item, index) => ({
      "@type": "SiteNavigationElement",
      "@id": `https://example.com/#nav-${item.name.toLowerCase()}`,
      "name": item.name,
      "url": `https://example.com${item.url}`,
      "position": index + 1
    }))
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(navigationSchema)
        }}
      />
      <nav>
        {navigationItems.map((item) => (
          <Link key={item.name} href={item.url}>
            {item.name}
          </Link>
        ))}
      </nav>
    </>
  );
}

Hierarchical Navigation

For navigation med under-menuer, brug nested struktur:

{
  "@type": "SiteNavigationElement",
  "name": "Produkter",
  "url": "https://example.com/produkter",
  "hasPart": [
    {
      "@type": "SiteNavigationElement",
      "name": "Elektronik",
      "url": "https://example.com/produkter/elektronik"
    },
    {
      "@type": "SiteNavigationElement",
      "name": "Tøj",
      "url": "https://example.com/produkter/toej"
    },
    {
      "@type": "SiteNavigationElement",
      "name": "Sport",
      "url": "https://example.com/produkter/sport"
    }
  ]
}

Combined with WebSite

Kombiner med WebSite schema for komplet site information:

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebSite",
      "@id": "https://example.com/#website",
      "name": "Example Company",
      "url": "https://example.com"
    },
    {
      "@type": "SiteNavigationElement",
      "name": "Produkter",
      "url": "https://example.com/produkter",
      "isPartOf": {
        "@id": "https://example.com/#website"
      }
    }
  ]
}

Best Practices

✓ Gør dette

• Inkluder kun primær navigation
• Brug klare, beskrivende navne
• Angiv position/rækkefølge
• Hold antal links under 10
• Match faktisk navigation på siden
• Brug absolute URLs

✗ Undgå dette

• For mange navigation items (>15)
• Links der ikke findes på siden
• Irrelevante eller spam links
• Broken URLs
• Inkonsistent med faktisk navigation
• Footer links som navigation