Teknisk SEO for Next.js-udviklere: Tips og værktøjer

Teknisk SEO er essentiel for at sikre, at dit Next.js-site er let at indeksere, hurtigt og konkurrencedygtigt i søgeresultater. Denne guide dækker strategier, værktøjer og praktiske kodestumper for at tage din SEO til næste niveau, med særligt fokus på flersprogede sider.

1. Dynamiske metatags og Open Graph

Next.js 13+ muliggør centraliseret metatag-håndtering ved hjælp af generateMetadata-funktionen:

export async function generateMetadata({ params }) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'common' });
  return {
    title: t('title'),
    description: t('description'),
    openGraph: {
      title: t('title'),
      description: t('description'),
      images: ['/public/placeholder.svg'],
    },
    icons: {
      icon: '/favicon.ico',
    },
  };
}

Tip: Husk at opdatere metatags for hvert sprog og hver side ved hjælp af dynamiske oversættelser.

2. Automatisk sitemap og robots.txt

Til at generere sitemaps og robots.txt, brug next-sitemap:

npm install next-sitemap

Konfigurer next-sitemap.config.js til at understøtte sprog:

module.exports = {
  siteUrl: 'https://spinny.dev',
  generateRobotsTxt: true,
  i18n: {
    locales: [
      'it',
      'en',
      'fr',
      'de',
      'es',
      'ar',
      'hi',
      'ja',
      'zh',
      'pt',
      'bn',
      'ru',
      'id',
      'ur',
      'ko',
      'tr',
      'vi',
      'th',
      'pl',
    ],
    defaultLocale: 'it',
  },
};

Ekstra værktøj: Prøv next-seo til avanceret metatag- og struktureret datahåndtering.

3. Internationalisering (i18n) og flersproget SEO

Next.js understøtter lokaliserede ruter. Husk at:

• Bruge hreflang-tagget for hvert sprog.
• Generere flersprogede sitemaps.
• Oversætte metatags.

Eksempel på hreflang-tag:

<link rel="alternate" href="https://spinny.dev/it" hreflang="it" />
<link rel="alternate" href="https://spinny.dev/en" hreflang="en" />

Bedste praksis: Tilbyd altid en synlig sprogvælger og oprethold URL-konsistens.

4. Ydeevne og Core Web Vitals

• Brug Next.js <Image /> til optimerede billeder.
• Aktiver lazy loading.
• Analysér med Lighthouse og Vercel Analytics.
• Minimér ubrugt JavaScript og CSS.
• Udnyt Vercels cache og CDN.

5. Struktureret data (JSON-LD)

Tilføj struktureret data for at forbedre synligheden i rich snippets:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'BlogPosting',
      headline: 'Teknisk SEO for Next.js-udviklere',
      datePublished: '2025-07-28',
      author: { '@type': 'Person', name: 'Filippo Spinella' },
      inLanguage: 'da',
    }),
  }}
/>

Tip: Inkludér også struktureret data for brødkrummer, artikler og produkter, hvis det er relevant.

6. Fejlhåndtering og brugerdefinerede 404-sider

Opret en lokaliseret not-found.tsx-side for hvert sprog. Dette forbedrer brugeroplevelsen og SEO.

Tip: Tilpas også 500- og serverfejlsider.

7. Nyttige værktøjer

• next-sitemap: sitemaps og robots.txt
• next-seo: avanceret metatag-håndtering
• Google Search Console: SEO-overvågning
• Ahrefs Webmaster Tools: teknisk analyse
• Screaming Frog: avanceret crawling
• Mermaid: til visualisering af SEO-flows og arkitekturer

8. Overvågning og analyse

Integrér Google Analytics, Vercel Analytics, og overvåg Core Web Vitals.

• Brug Google Tag Manager til centraliseret tag-håndtering.
• Overvåg adgangslogfiler og fejl med værktøjer som Sentry.

Konklusion

Teknisk SEO i Next.js kræver opmærksomhed på detaljer som metatags, ydeevne, internationalisering og struktureret data. Automatisér hvor muligt og overvåg konstant resultaterne!

Afsluttende tjekliste:

• Dynamiske metatags
• Flersproget sitemap
• Struktureret data
• Optimeret ydeevne
• Aktiv overvågning