SEO Grundlagen fuer HTML

SEO (Search Engine Optimization) bedeutet, deine Webseite so zu gestalten, dass sie von Suchmaschinen wie Google besser gefunden und hoeher gerankt wird. Gutes HTML ist die Grundlage fuer erfolgreiches SEO.

Wie Suchmaschinen funktionieren

Suchmaschinen durchlaufen drei Schritte:

Crawling: Bots (Crawler) besuchen Webseiten und lesen den HTML-Code
Indexing: Die gesammelten Inhalte werden analysiert und gespeichert
Ranking: Bei einer Suchanfrage werden die relevantesten Seiten sortiert

Was die Bots lesen, ist dein HTML-Code — nicht das, was der Nutzer visuell sieht.

Der Title-Tag

Der wichtigste SEO-Tag ueberhaupt:

<head>
    <title>CSS Grid lernen - Vollstaendiger Guide 2026 | WebDev Blog</title>
</head>

Best Practices fuer Titles

Regel	Erklaerung
50-60 Zeichen	Laengere Titel werden abgeschnitten
Keyword vorne	Das wichtigste Wort zuerst
Einzigartig	Jede Seite braucht einen eigenen Titel
Marke ans Ende	”Seitentitel \| Markenname”
Beschreibend	Sagt, worum es auf der Seite geht

<!-- Gut -->
<title>HTML & CSS lernen - Kostenloser Kurs für Anfänger | ProgrammierenLernen</title>

<!-- Schlecht -->
<title>Startseite</title>
<title>Meine Webseite</title>

Meta Description

Die Beschreibung, die in den Suchergebnissen unter dem Titel erscheint:

<meta name="description"
      content="Lerne HTML und CSS von Grund auf mit unserem kostenlosen Kurs. Schritt-fuer-Schritt-Tutorials, praktische Projekte und moderne Techniken fuer 2026.">

Best Practices

150-160 Zeichen maximale Laenge
Call-to-Action einbauen (“Lerne jetzt”, “Entdecke”)
Keyword natuerlich einbauen
Einzigartig fuer jede Seite

Ueberschriften-Hierarchie fuer SEO

<!-- Eine einzige h1 pro Seite mit dem Hauptkeyword -->
<h1>CSS Grid Layout: Der vollstaendige Guide fuer Anfaenger</h1>

<!-- h2 fuer Hauptabschnitte -->
<h2>Was ist CSS Grid?</h2>
<h2>Grid-Container erstellen</h2>
<h2>Items platzieren</h2>

<!-- h3 fuer Unterabschnitte -->
<h3>grid-template-columns</h3>
<h3>grid-template-rows</h3>

Suchmaschinen nutzen die Ueberschriften-Hierarchie, um die Inhaltsstruktur zu verstehen.

Semantisches HTML fuer SEO

Suchmaschinen verstehen semantische Tags:

<article>
    <!-- Google weiss: Das ist ein eigenstaendiger Artikel -->
    <header>
        <h1>Titel des Artikels</h1>
        <time datetime="2026-03-10">10. Maerz 2026</time>
    </header>
    <p>Inhalt...</p>
</article>

<nav>
    <!-- Google weiss: Das ist eine Navigation -->
</nav>

<main>
    <!-- Google weiss: Das ist der Hauptinhalt -->
</main>

Wenn jemand deine Seite auf Social Media teilt, bestimmen diese Tags die Vorschau:

<head>
    <!-- Open Graph (Facebook, LinkedIn) -->
    <meta property="og:title" content="CSS Grid lernen">
    <meta property="og:description" content="Der vollstaendige Guide fuer Anfaenger.">
    <meta property="og:image" content="https://example.com/images/og-css-grid.jpg">
    <meta property="og:url" content="https://example.com/css-grid">
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="WebDev Blog">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="CSS Grid lernen">
    <meta name="twitter:description" content="Der vollstaendige Guide fuer Anfaenger.">
    <meta name="twitter:image" content="https://example.com/images/twitter-css-grid.jpg">
</head>

OG-Image Best Practices

Eigenschaft	Empfehlung
Groesse	1200 x 630 Pixel
Format	JPG oder PNG
Dateigroesse	Unter 1 MB
Inhalt	Titel lesbar, Branding sichtbar

Canonical URL

Wenn derselbe Inhalt unter mehreren URLs erreichbar ist, sagst du Google, welche die Haupt-URL ist:

<link rel="canonical" href="https://example.com/css-grid-guide">

Beispiel: example.com/seite und example.com/seite?ref=twitter haben denselben Inhalt — der Canonical verweist auf die saubere URL.

Strukturierte Daten (Schema.org)

Strukturierte Daten helfen Google, den Inhalt besser zu verstehen und Rich Snippets anzuzeigen:

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "CSS Grid Layout lernen",
    "author": {
        "@type": "Person",
        "name": "Max Mustermann"
    },
    "datePublished": "2026-03-10",
    "description": "Ein vollstaendiger Guide zu CSS Grid Layout.",
    "image": "https://example.com/images/css-grid.jpg"
}
</script>

Haeufige Schema-Typen

<!-- FAQ-Seite (kann als Rich Snippet erscheinen) -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {
            "@type": "Question",
            "name": "Was ist CSS Grid?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "CSS Grid ist ein zweidimensionales Layout-System in CSS."
            }
        }
    ]
}
</script>

<!-- Breadcrumbs -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com" },
        { "@type": "ListItem", "position": 2, "name": "Tutorials", "item": "https://example.com/tutorials" },
        { "@type": "ListItem", "position": 3, "name": "CSS Grid" }
    ]
}
</script>

Bilder fuer SEO optimieren

<!-- Beschreibender Dateiname (nicht "IMG_1234.jpg") -->
<img src="css-grid-layout-beispiel.jpg"
     alt="CSS Grid Layout mit drei Spalten und zwei Zeilen"
     width="800"
     height="400"
     loading="lazy">

Dateinamen: Beschreibend mit Bindestrichen
Alt-Text: Keyword natuerlich einbauen
Groesse: Optimiert (WebP/AVIF)
Lazy Loading: Fuer Bilder unter dem Fold

Links und SEO

Interne Verlinkung

<!-- Verwende beschreibende Linktexte -->
<p>Lerne mehr in unserem
    <a href="/tutorials/css-flexbox">CSS Flexbox Tutorial</a>.
</p>

<!-- Nicht: -->
<p>Mehr zu Flexbox findest du <a href="/tutorials/css-flexbox">hier</a>.</p>

Externe Links

<!-- Vertrauenswuerdige externe Links -->
<a href="https://developer.mozilla.org/de/docs/Web/CSS/Grid"
   target="_blank"
   rel="noopener noreferrer">
    MDN Web Docs: CSS Grid
</a>

<!-- Gesponserte/Werbe-Links -->
<a href="https://example.com" rel="sponsored">Partner</a>

<!-- Nutzer-generierte Links -->
<a href="https://example.com" rel="ugc nofollow">Kommentar-Link</a>

Technisches SEO im HTML

<head>
    <!-- Zeichensatz -->
    <meta charset="UTF-8">

    <!-- Viewport fuer Mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Sprache -->
    <html lang="de">

    <!-- Canonical -->
    <link rel="canonical" href="https://example.com/seite">

    <!-- Mehrsprachig -->
    <link rel="alternate" hreflang="de" href="https://example.com/de/seite">
    <link rel="alternate" hreflang="en" href="https://example.com/en/page">

    <!-- Sitemap -->
    <link rel="sitemap" type="application/xml" href="/sitemap.xml">

    <!-- RSS Feed -->
    <link rel="alternate" type="application/rss+xml"
          title="WebDev Blog" href="/feed.xml">

    <!-- Robots -->
    <meta name="robots" content="index, follow">
</head>

SEO-Checkliste fuer jede Seite

Einzigartiger, beschreibender <title> (50-60 Zeichen)
Meta Description (150-160 Zeichen)
Eine <h1> mit dem Hauptkeyword
Logische Ueberschriften-Hierarchie
Semantische HTML-Tags
Alt-Texte fuer alle informativen Bilder
Canonical URL
Open Graph Tags
Strukturierte Daten wo sinnvoll
lang-Attribut auf <html>

Uebungen

Uebung 1: SEO-Audit

Pruefe den <head> einer beliebigen Webseite und identifiziere:

Title-Tag und Meta Description
Open Graph Tags
Canonical URL
Strukturierte Daten

Uebung 2: Optimierter Head

Erstelle einen vollstaendigen <head>-Bereich fuer eine Blog-Seite mit allen wichtigen SEO-Tags.

Uebung 3: Strukturierte Daten

Fuege Schema.org-JSON-LD fuer einen Blogartikel hinzu — mit Autor, Datum und Beschreibung.

Was kommt als Naechstes?

Jetzt kommen die Praxis-Projekte! Du setzt alles Gelernte um:

Eine professionelle Landing Page
Ein persoenliches Portfolio
Ein Blog-Layout

Zusammenfassung

Der <title> Tag ist der wichtigste SEO-Faktor — einzigartig und beschreibend
Meta Description beeinflusst die Klickrate in den Suchergebnissen
Semantisches HTML hilft Suchmaschinen, Inhalte zu verstehen
Open Graph Tags steuern die Social-Media-Vorschau
Strukturierte Daten (Schema.org) ermoeglichen Rich Snippets
Beschreibende Linktexte und Alt-Texte verbessern SEO und Barrierefreiheit
Jede Seite braucht eine einzige <h1> mit dem Hauptkeyword

Pro-Tipp: Nutze das kostenlose Tool “Google Search Console”, um zu sehen, wie Google deine Seite sieht. Es zeigt dir Fehler bei strukturierten Daten, mobile Probleme und fuer welche Suchbegriffe deine Seite bereits gefunden wird!