Astro-Kurs 27: SEO und Barrierefreiheit

Modul 5 – Webseiten erweitern · Astro-Anfängerkurs der Know-How-Schmiede

Voraussetzung: Etappe 1 und 2 des Kurses. Das Beispielprojekt „Meine Modellbau-Werkstatt“ wird fortgeführt. Kopiere Code nicht blind über schon vorhandene Seiten, sondern ergänze bestehende Bereiche.

Lernziele

Du verbesserst Seitentitel, Beschreibung, Überschriften, Linktexte und Tastaturbedienung. Du verstehst, dass SEO und Barrierefreiheit fortlaufende Qualitätsaufgaben sind.

1. Metadaten zentral verwalten

Erweitere den Frontmatter-Bereich deines src/layouts/Layout.astro so, dass er Titel und Beschreibung annimmt (falls bereits Props existieren, kombiniere sie):

---
const {
  title = 'Meine Modellbau-Werkstatt',
  description = 'Projekte zu Modellbau und 3D-Druck',
} = Astro.props;
---

Ergänze im <head> des bestehenden Layouts:

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

Achtung: Bereits vorhandene title- oder viewport-Elemente ersetzen, nicht duplizieren.

Auf deiner Projektseite:

<Layout
  title="Modellbauprojekte | Meine Modellbau-Werkstatt"
  description="Flugmodelle und 3D-Druckprojekte aus meiner Werkstatt"
>
  <h1>Meine Modellbauprojekte</h1>
  <!-- vorhandene Projektkarten hier einfügen -->
</Layout>

2. Barrierefreiheit praktisch

• Nutze für die Seitenhauptüberschrift eine klare <h1>.
• Verwende <button> für Aktionen und <a> für Navigation.
• Jedes Eingabefeld braucht ein zugeordnetes <label>.
• Sinnvolle Bild-Alternativtexte beschreiben den Inhalt; dekorative Bilder erhalten alt="".
• Prüfe Kontrast sowie Bedienbarkeit ohne Maus.

3. Sitemap (optional)

Eine Sitemap kann Suchmaschinen das Auffinden der Seiten erleichtern:

npx astro add sitemap

Setze dazu in astro.config.mjs die korrekte produktive site-URL deiner eigenen Domain und kontrolliere die erzeugten Dateien nach npm run build. Keine Platzhalterdomain veröffentlichen.

Übung

Prüfe jede Kursseite mit der Tastatur und verbessere zwei unklare Linktexte wie „Hier klicken“.