Technische SEO-Checkliste für Entwickler (2026)
Zurück zum Blog
Strategie & Business

Technische SEO-Checkliste für Entwickler (2026)

21. Januar 2026
14 min Lesezeit
Jonas Höttler

Technische SEO-Checkliste für Entwickler

Technisches SEO ist das Fundament. Ohne es bringt der beste Content nichts. Diese Checkliste deckt alles ab, was du als Entwickler wissen musst – mit Code-Beispielen, die du direkt umsetzen kannst.

1. Crawling & Indexierung

robots.txt

Location: /robots.txt

User-agent: *
Allow: /

# Block admin and API routes
Disallow: /admin/
Disallow: /api/
Disallow: /_next/

# Sitemap location
Sitemap: https://example.com/sitemap.xml

Checkliste:

  • robots.txt existiert und ist erreichbar
  • Wichtige Seiten sind nicht blockiert
  • Sitemap-Location angegeben
  • API/Admin-Bereiche blockiert

Test: site:yourdomain.com in Google – siehst du alle wichtigen Seiten?

XML Sitemap

Location: /sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-01-21</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/blog/article-1</loc>
    <lastmod>2026-01-15</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Für Next.js (automatisch generieren):

// next-sitemap.config.js
module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  changefreq: 'weekly',
  priority: 0.7,
  exclude: ['/admin/*', '/api/*'],
}

Checkliste:

  • Sitemap enthält alle wichtigen URLs
  • lastmod-Daten sind aktuell
  • Sitemap in Search Console eingereicht
  • Keine 4xx/5xx URLs in der Sitemap

Canonical Tags

Vermeide Duplicate Content:

<link rel="canonical" href="https://example.com/blog/article" />

Typische Probleme:

  • /blog/article vs /blog/article/
  • http:// vs https://
  • www. vs non-www
  • URL-Parameter (z.B. ?utm_source=...)

Next.js Beispiel:

import Head from 'next/head';

export default function Page() {
  return (
    <Head>
      <link rel="canonical" href="https://example.com/page" />
    </Head>
  );
}

2. Core Web Vitals

LCP (Largest Contentful Paint)

Ziel: < 2,5 Sekunden

Häufige Probleme und Lösungen:

1. Bilder optimieren:

<!-- Vorher -->
<img src="hero.jpg" />

<!-- Nachher -->
<img
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
  loading="eager"
  fetchpriority="high"
  alt="Hero Image"
/>

2. Preload kritischer Ressourcen:

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">

3. Server Response Time:

  • CDN verwenden
  • Caching implementieren
  • Server-Side Rendering für kritischen Content

FID/INP (First Input Delay / Interaction to Next Paint)

Ziel: < 100ms (FID), < 200ms (INP)

Hauptproblem: JavaScript blockiert den Main Thread

Lösungen:

1. Code Splitting:

// Dynamischer Import
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
});

2. Web Workers für schwere Berechnungen:

// worker.js
self.onmessage = function(e) {
  const result = heavyCalculation(e.data);
  self.postMessage(result);
};

// main.js
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => console.log(e.data);

3. Debounce und Throttle:

const handleScroll = throttle(() => {
  // Expensive operation
}, 100);

CLS (Cumulative Layout Shift)

Ziel: < 0,1

Hauptprobleme und Lösungen:

1. Bilder ohne Dimensionen:

<!-- Schlecht -->
<img src="photo.jpg" />

<!-- Gut -->
<img src="photo.jpg" width="800" height="600" />

<!-- Oder mit aspect-ratio -->
<img src="photo.jpg" style="aspect-ratio: 4/3; width: 100%;" />

2. Ads und Embeds:

.ad-container {
  min-height: 250px; /* Reserviere Platz */
}

3. Web Fonts:

@font-face {
  font-family: 'CustomFont';
  src: url('/font.woff2') format('woff2');
  font-display: swap; /* oder optional */
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 20%;
}

3. Structured Data (Schema Markup)

Article Schema

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Technische SEO-Checkliste für Entwickler",
  "description": "Alles was Entwickler über technisches SEO wissen müssen",
  "author": {
    "@type": "Person",
    "name": "Jonas Höttler",
    "url": "https://hoettler.com"
  },
  "datePublished": "2026-06-30",
  "dateModified": "2026-06-30",
  "publisher": {
    "@type": "Organization",
    "name": "Höttler Tech",
    "logo": {
      "@type": "ImageObject",
      "url": "https://hoettler.com/logo.png"
    }
  },
  "image": "https://hoettler.com/article-image.jpg"
}

FAQ Schema

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Was ist technisches SEO?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Technisches SEO umfasst alle technischen Optimierungen..."
      }
    }
  ]
}

HowTo Schema

Perfekt für Tutorials:

{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "Wie man Core Web Vitals verbessert",
  "step": [
    {
      "@type": "HowToStep",
      "name": "Bilder optimieren",
      "text": "Konvertiere Bilder zu WebP und verwende responsive images."
    }
  ]
}

Implementierung in Next.js:

export default function Article({ data }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: data.title,
    // ...
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* Article content */}
    </>
  );
}

4. Mobile Optimierung

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1" />

Mobile-First CSS

/* Base styles (mobile) */
.container {
  padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    max-width: 1200px;
  }
}

Touch Targets

button, a {
  min-height: 48px;
  min-width: 48px;
  padding: 12px;
}

5. HTTPS & Security

HSTS Header

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

In Next.js (next.config.js):

module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=31536000; includeSubDomains'
          }
        ]
      }
    ]
  }
}

Content Security Policy

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com; style-src 'self' 'unsafe-inline';

6. Internationalisierung (i18n)

hreflang Tags

<link rel="alternate" hreflang="de" href="https://example.com/de/page" />
<link rel="alternate" hreflang="en" href="https://example.com/en/page" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page" />

In der Sitemap

<url>
  <loc>https://example.com/de/page</loc>
  <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/page"/>
  <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/page"/>
</url>

7. Performance Optimierung

Resource Hints

<!-- DNS Prefetch für externe Domains -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">

<!-- Preconnect für kritische Domains -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Preload für kritische Ressourcen -->
<link rel="preload" href="/critical.css" as="style">

<!-- Prefetch für wahrscheinlich benötigte Ressourcen -->
<link rel="prefetch" href="/next-page.js">

Lazy Loading

<!-- Native Lazy Loading -->
<img src="image.jpg" loading="lazy" alt="...">

<!-- Intersection Observer für komplexere Fälle -->
<script>
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
</script>

Die ultimative Checkliste

Crawling & Indexierung

  • robots.txt korrekt konfiguriert
  • XML Sitemap vorhanden und aktuell
  • Sitemap in Search Console eingereicht
  • Canonical Tags auf allen Seiten
  • Keine Duplicate Content Probleme

Core Web Vitals

  • LCP < 2,5s
  • INP < 200ms
  • CLS < 0,1
  • Bilder optimiert (WebP, responsive)
  • Fonts optimiert (preload, font-display)

Structured Data

  • Article Schema auf Blog-Posts
  • FAQ Schema wo relevant
  • Organization Schema auf Homepage
  • Schema validiert (Rich Results Test)

Mobile

  • Viewport Meta Tag vorhanden
  • Mobile-responsive Design
  • Touch Targets mindestens 48x48px
  • Keine horizontalen Scrollbars

Security

  • HTTPS überall
  • HSTS Header gesetzt
  • Mixed Content vermieden

Internationalisierung

  • hreflang Tags korrekt
  • Sprache im HTML-Tag angegeben
  • Sprachversionen in Sitemap

Tools für die Überprüfung

ToolPrüftLink
Google Search ConsoleIndexierung, Fehlersearch.google.com/search-console
PageSpeed InsightsCore Web Vitalspagespeed.web.dev
Rich Results TestStructured Datasearch.google.com/test/rich-results
Mobile-Friendly TestMobile Optimierungsearch.google.com/test/mobile-friendly
LighthouseAllesIn Chrome DevTools

Fazit

Technisches SEO ist kein einmaliges Projekt – es ist kontinuierliche Arbeit. Aber einmal richtig aufgesetzt, bildet es das Fundament für alle weiteren SEO-Maßnahmen.

Die wichtigsten Prioritäten:

  1. Crawlbar sein – robots.txt, Sitemap, keine Blocker
  2. Schnell sein – Core Web Vitals optimieren
  3. Strukturiert sein – Schema Markup implementieren
  4. Mobile-first – responsive, touch-friendly

Nutze die Checkliste als Startpunkt und arbeite sie systematisch ab.

Du willst mehr über Keyword-Recherche ohne teure Tools erfahren? Unser Guide SEO für Tech-Blogs zeigt dir kostenlose Methoden.

#Technisches SEO#Core Web Vitals#Schema Markup#Web Performance#Developer SEO

Ähnliche Artikel

Dark Patterns: Warum manipulatives Design funktioniert – und wie es besser geht
General Articles

Dark Patterns: Warum manipulatives Design funktioniert – und wie es besser geht

Weiterlesen
Das umfassende Handbuch zur Prozessoptimierung und Automatisierung

Das umfassende Handbuch zur Prozessoptimierung und Automatisierung

Weiterlesen
Automatisierung für Unternehmen: Wo anfangen?

Automatisierung für Unternehmen: Wo anfangen?

Weiterlesen

Hast du ein ähnliches Projekt?

Lass uns darüber reden, wie ich dir helfen kann.

Kontakt aufnehmen