Modul 7: Website-Feinschliff – Workshop Lernportal

⏱️ Ablauf (105 Min)

12:30–12:55	🔧 Input: Impressum, Datenschutz, Barrierefreiheit, SEO-Basics
12:55–14:00	🏗️ Praxis: Letzte Schliffe – Social-Media-Verlinkung, Kontaktformular, Mobil optimieren
14:00–14:15	✅ Check: Checkliste abhaken, letzte Screenshots für Präsentation

🔧 Pflichtseiten für jede Website

1. Impressum

In Deutschland gesetzlich vorgeschrieben (§5 TMG). Muss mindestens enthalten:

Name der Einrichtung (vollständiger Name, wie im Handelsregister)
Anschrift (Straße, PLZ, Ort – kein Postfach!)
Kontakt (E-Mail und Telefon)
Vertretungsberechtigte (z.B. Leitung, Vorstand)
Ggf. Registereintrag (falls eingetragener Verein)

2. Datenschutzerklärung

Nach DSGVO (Art. 13/14) Pflicht, sobald personenbezogene Daten verarbeitet werden.

Welche Daten werden erhoben? (z.B. Server-Logfiles, Kontaktformular)
Warum? (Zweck der Verarbeitung)
Rechtsgrundlage (z.B. berechtigtes Interesse, Einwilligung)
Wie lange werden Daten gespeichert?
Welche Rechte haben Nutzer:innen? (Auskunft, Löschung, Berichtigung, Widerspruch)
Wer ist verantwortlich? (gleiche Angaben wie Impressum)

💡 Quick-Tipp

Nutzt einen Generator (z.B. e-recht24.de) und passt den Text an eure Einrichtung an. Keine 1:1-Kopie – das fällt auf.

3. Barrierefreiheit (WCAG 2.1 Basics)

Seit 2025 auch für private Websites Pflicht (Barrierefreiheitsstärkungsgesetz). Mindeststandards:

Alt-Texte für Bilder: Jedes Bild braucht eine Beschreibung für Screenreader
Ausreichender Kontrast: Text zu Hintergrund mindestens 4.5:1
Überschriften-Hierarchie: h1 > h2 > h3 (nicht springen!)
Tastatur-Navigation: Alle Elemente ohne Maus erreichbar
Untertitel für Videos: Falls ihr Videos einbettet

🔍 SEO-Basics – Damit eure Website gefunden wird

SEO (Search Engine Optimization) sorgt dafür, dass eure Website bei Google gut rankt.

Element	Warum wichtig	Maximale Länge
Seitentitel (Title-Tag)	Erscheint in Google-Suchergebnissen und Browser-Tab	50-60 Zeichen
Meta-Beschreibung	Der kurze Text unter dem Suchergebnis-Link	150-160 Zeichen
Überschriften (H1)	Signalisiert Google, worum es auf der Seite geht	1 H1 pro Seite
Bild-Dateinamen	Google liest Dateinamen: "header-startseite.jpg" besser als "IMG_1234.jpg"	beschreibend, mit Bindestrich
Interne Links	Verlinkungen zwischen eigenen Seiten helfen Google, die Struktur zu verstehen	-

📝 Beispiel: SEO-optimierte Startseite

Title-Tag: "Kindergarten St. Raphael Lindau | Inklusive Kita am Bodensee" (58 Zeichen)

Meta-Beschreibung: "Der Kindergarten St. Raphael in Lindau bietet liebevolle Betreuung für 60 Kinder von 1-6 Jahren mit Schwerpunkt Inklusion und christlichen Werten." (156 Zeichen)

🏗️ Praxis: Letzte Schliffe (65 Min)

Arbeitsliste – Hakt ab, was ihr erledigt habt:

☐	Impressum-Seite – Alle Pflichtangaben eingetragen
☐	Datenschutz-Seite – Generator genutzt, Text angepasst
☐	Kontaktformular – Funktioniert es? Checkbox für Datenschutz?
☐	Social-Media-Links – Mastodon-Profil, Instagram, etc. verlinkt
☐	Mobil-Ansicht – Auf dem Smartphone geprüft
☐	Bilder optimiert – Alt-Texte gesetzt, Dateinamen aussagekräftig
☐	Seitentitel & Meta-Beschreibung – Für jede Seite gesetzt
☐	SSL geprüft – "https://" und Schloss-Symbol im Browser?
☐	Finaler Screenshot – Für die Präsentation