HTML SEO & Zugänglichkeit

6 Kernkonzepte
Die wichtigsten Konzepte für SEO und Barrierefreiheit in HTML: Semantik · Meta-Tags · Open Graph · WAI-ARIA · Landmarks · Accessibility Diese Konzepte verbessern die Sichtbarkeit in Suchmaschinen und machen Ihre Webseite für alle Nutzer zugänglich – inklusive Screenreader und assistiver Technologien.

Semantische Elemente – header, main, article, section

<header> · <main> · <article> · <section>
<!-- Semantische Struktur --> <header>Logo & Navigation</header> <main> <article>Hauptinhalt</article> <section>Unterabschnitt</section> </main> <footer>Impressum & Links</footer>

Semantische Elemente geben dem HTML-Code eine Bedeutung – sie beschreiben die Struktur und den Inhalt einer Seite. Das verbessert SEO und Barrierefreiheit.

Die wichtigsten semantischen Elemente

Element Beschreibung
<header> Kopfbereich (Logo, Navigation, Sucher)
<nav> Navigationsbereich
<main> Hauptinhalt der Seite (nur einmal)
<article> Eigenständiger, wiederverwendbarer Inhalt
<section> Inhaltlicher Abschnitt mit Überschrift
<aside> Zusätzlicher Inhalt (Seitenleiste, Randnotiz)
<footer> Fußbereich (Impressum, Links)
<figure> Medieninhalt mit <figcaption>
Beispiele
<header>
<h1>Meine Webseite</h1>
<nav>
<ul>
<li><a href="#home">Start</a></li>
<li><a href="#about">Über uns</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Artikelüberschrift</h2>
<p>Artikelinhalt...</p>
</article>
</main>
Tipp: Verwenden Sie <main> nur einmal pro Seite. Screenreader-Nutzer können mit einer Tastenkombination direkt zum Hauptinhalt springen.

Meta-Tags – title, description, robots, viewport

<title> · <meta name="description"> · <meta name="robots">
<!-- Grundlegende Meta-Tags --> <title>Seitentitel | IT-Grundlagen</title> <meta name="description" content="Beschreibung der Seite für Google"> <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta-Tags liefern Suchmaschinen und Browsern wichtige Informationen über Ihre Seite. Sie sind entscheidend für SEO und die Darstellung in Suchergebnissen.

Wichtige Meta-Tags

Tag Beschreibung
<title> Seitentitel (max. 55-60 Zeichen)
name="description" Seitenbeschreibung (max. 155-160 Zeichen)
name="robots" Anweisungen für Suchmaschinen (index, follow, noindex, nofollow)
name="viewport" Responsive Design (mobile Darstellung)
name="keywords" Keywords (weniger wichtig, oft ignoriert)
name="author" Autor der Seite
name="language" Sprache (veraltet, besser lang-Attribut)
Beispiele
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>HTML SEO Cheatsheet – Grundlagen für bessere Sichtbarkeit</title>
<meta name="description" content="Lernen Sie die wichtigsten HTML-Meta-Tags für SEO und Barrierefreiheit – inklusive Open Graph, WAI-ARIA und semantischen Elementen.">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Tipp: Der <title> ist das wichtigste SEO-Element. Platzieren Sie Ihre Hauptkeywords möglichst am Anfang des Titels.

Open Graph Tags – Social Media Vorschau

<meta property="og:title"> · og:image · og:description
<!-- Open Graph Tags für Social Media --> <meta property="og:title" content="HTML SEO Cheatsheet"> <meta property="og:description" content="Alle wichtigen HTML-Tags für SEO und Barrierefreiheit"> <meta property="og:image" content="https://example.com/vorschaubild.jpg"> <meta property="og:url" content="https://example.com/seite">

Open Graph (OG) Tags steuern, wie Ihre Seite in sozialen Netzwerken wie Facebook, LinkedIn und X (Twitter) dargestellt wird. Sie verbessern die Sichtbarkeit und Klickrate.

Wichtige OG-Tags

Tag Beschreibung
og:title Titel der Seite (max. 60 Zeichen)
og:description Kurzbeschreibung (max. 155 Zeichen)
og:image Vorschaubild (mind. 1200x630 Pixel)
og:url Kanonische URL der Seite
og:type Seitentyp (website, article, video, etc.)
og:site_name Name der Webseite
og:locale Sprache (de_DE)
Beispiele
<!-- Open Graph Grundlagen -->
<meta property="og:type" content="website">
<meta property="og:locale" content="de_DE">
<meta property="og:site_name" content="IT-Grundlagen Wiki">
<!-- Twitter Cards (zusätzlich) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML SEO Cheatsheet">
<meta name="twitter:description" content="Alle wichtigen HTML-Tags für SEO">
<meta name="twitter:image" content="https://example.com/twitter-bild.jpg">
Tipp: Testen Sie Ihre Open Graph-Tags mit dem Facebook Sharing Debugger oder dem Twitter Card Validator.

WAI-ARIA – Barrierefreiheit für dynamische Inhalte

role · aria-label · aria-labelledby · aria-hidden
<!-- ARIA-Rollen und Attribute --> <div role="button" aria-label="Schließen" tabindex="0">×</div> <nav aria-label="Hauptnavigation">...</nav> <div aria-hidden="true">Dekoratives Element</div>

WAI-ARIA (Accessible Rich Internet Applications) verbessert die Barrierefreiheit von dynamischen Inhalten und interaktiven Elementen. Es ergänzt semantisches HTML dort, wo native Elemente nicht ausreichen.

Wichtige ARIA-Attribute

Attribut Beschreibung
role Definiert die Rolle eines Elements (button, navigation, dialog, etc.)
aria-label Beschriftet ein Element (für Screenreader)
aria-labelledby Verweist auf ein Element, das die Beschriftung enthält
aria-describedby Verweist auf eine Beschreibung des Elements
aria-hidden Verbirgt ein Element vor Screenreadern (dekorativ)
aria-expanded Gibt an, ob ein Akkordeon/ Menü geöffnet ist
aria-controls Verweist auf das gesteuerte Element
aria-live Dynamische Inhalte (polite, assertive)
Beispiele
<!-- Button mit ARIA -->
<button aria-label="Menü öffnen" aria-expanded="false" aria-controls="main-menu">
☰
</button>
<!-- Navigation mit aria-label -->
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Produkte</a></li>
</ul>
</nav>
<!-- Live-Region für Fehlermeldungen -->
<div role="alert" aria-live="assertive">
Bitte korrigieren Sie die Eingabe.
</div>
<!-- Beschriftung eines Formularfelds -->
<label for="email">E-Mail</label>
<input type="email" id="email" aria-describedby="email-hinweis">
<span id="email-hinweis">Bitte geben Sie eine gültige E-Mail ein.</span>
Tipp: Verwenden Sie native HTML-Elemente (<button>, <nav>, etc.), bevor Sie auf ARIA zurückgreifen. ARIA ist ein Ergänzung für dynamische Inhalte – nicht ein Ersatz für semantisches HTML.

Landmarks – Orientierung für Screenreader

role="banner" · role="navigation" · role="main"
<!-- Landmark-Rollen --> <header role="banner">...</header> <nav role="navigation">...</nav> <main role="main">...</main> <footer role="contentinfo">...</footer>

Landmarks sind ARIA-Rollen, die die Hauptbereiche einer Seite markieren. Sie ermöglichen es Screenreader-Nutzern, schnell zwischen Bereichen zu navigieren.

Die wichtigsten Landmark-Rollen

Rolle Beschreibung Semantisches Element
banner Kopfbereich (Logo, Titel) <header>
navigation Navigationsbereich <nav>
main Hauptinhalt (nur einmal) <main>
complementary Zusätzlicher Inhalt (Seitenleiste) <aside>
contentinfo Fußbereich (Impressum, Links) <footer>
search Suchbereich <form role="search">
form Formular <form>
Beispiele
<body>
<!-- Banner -->
<header role="banner">
<h1>Meine Webseite</h1>
</header>
<!-- Navigation -->
<nav role="navigation" aria-label="Hauptmenü">
<ul>
<li><a href="#home">Start</a></li>
<li><a href="#about">Über uns</a></li>
</ul>
</nav>
<!-- Hauptinhalt -->
<main role="main">
<article>...</article>
</main>
<!-- Seitenleiste -->
<aside role="complementary">
<h2>Neuigkeiten</h2>
<p>...</p>
</aside>
<!-- Footer -->
<footer role="contentinfo">
© 2025 IT-Grundlagen
</footer>
</body>
Tipp: Screenreader-Nutzer können mit Tastenkombinationen (z.B. D für Landmarks) schnell zwischen Bereichen navigieren. Eine klare Landmark-Struktur verbessert die Usability enorm.

Accessibility – Best Practices für barrierefreies HTML

alt · label · lang · focus · contrast
<!-- Barrierefreiheit im Alltag --> <img src="bild.jpg" alt="Beschreibung für Screenreader"> <html lang="de"> <!-- Sprache des Dokuments --> <label for="name">Name</label> <input type="text" id="name">

Accessibility (Barrierefreiheit) stellt sicher, dass Ihre Webseite von allen Menschen genutzt werden kann – unabhängig von körperlichen oder technischen Einschränkungen. Diese Best Practices sind essenziell für eine inklusive Web-Erfahrung.

Best Practices für Barrierefreiheit

Praxis Beschreibung
Alt-Texte Jedes <img> benötigt ein alt-Attribut (leer bei dekorativen Bildern)
Label für Formulare Jedes Formularfeld benötigt ein <label> oder aria-label
lang-Attribut Die Sprache des Dokuments und einzelner Abschnitte angeben
Tastaturzugriff Alle interaktiven Elemente müssen mit der Tastatur erreichbar sein (tabindex)
Kontrast Ausreichender Farbkontrast (mind. 4.5:1 für Text)
Überschriften-Struktur Logische Hierarchie (h1 → h2 → h3) ohne Sprünge
Focus-Indikator Sichtbarer Fokus für Tastaturnavigation (outline nicht entfernen)
Semantisches HTML Elemente mit Bedeutung verwenden (button, nav, main)
Beispiele
<!-- Alt-Texte -->
<img src="logo.png" alt="IT-Grundlagen Logo">
<img src="deko.jpg" alt="" role="presentation"> <!-- Dekorativ -->
<!-- Formular mit Label -->
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" required>
<!-- Überschriften-Hierarchie -->
<h1>Hauptüberschrift</h1>
<h2>Unterkapitel</h2>
<h3>Unter-Unterkapitel</h3>
<!-- Focus-Outline beibehalten (nicht entfernen!) -->
<!-- Schlecht: outline: none; -->
<!-- Gut: custom focus style -->
<style>
:focus-visible { outline: 2px solid #ff6b6b; }
</style>
Tipp: Testen Sie Ihre Seite mit einem Screenreader (z.B. NVDA oder VoiceOver) und prüfen Sie die Tastaturnavigation. Verwenden Sie Tools wie Lighthouse oder WAVE für automatische Tests.

SEO & Accessibility im Überblick

<title> Seitentitel (SEO)
Max. 55-60 Zeichen
og: Open Graph
Social Media Vorschau
role ARIA-Rollen
Landmarks, Widgets
alt Bildbeschreibung
Barrierefreiheit
lang Sprachen-Attribut
Screenreader-Unterstützung
label Formular-Beschriftung
Usability & Accessibility

Quick Summary

semantic
Semantische Elemente
meta
Meta-Tags
og:
Open Graph
aria
WAI-ARIA
role
Landmarks
alt
Accessibility
<title>Titel</title> · <meta property="og:title" content="..."> · <img src="..." alt="..."> · <nav role="navigation">
Alle Cheatsheets Impressum Datenschutz
Zum Drucken
© ITGrundlagen.com · HTML SEO & Zugänglichkeit Cheatsheet · Befehlsübersicht · Schnellreferenz