Die erste Hälfte dieses Traums ist inzwischen Realität. Claude, ChatGPT und Co. bauen dir in wenigen Minuten eine Website, die - auf den ersten Blick - oft ziemlich gut aussieht. Die zweite Hälfte (die Kund*innen am laufenden Band) liefert dir leider noch kein Tool mit.

Damit wir uns richtig verstehen: Ich bin keine KI-Gegnerin. Ich arbeite regelmäßig mit Claude und ChatGPT und habe auch getestet, eine Website komplett von der KI erstellen zu lassen Mein Ziel ist es, dir die Arbeit, das Marketing, die Technik soweit zu erleichtern, wie möglich - aber ohne, dass das Ergebnis darunter leidet. Gerade deshalb möchte ich dir zeigen, wo dir KI beim Website-Erstellen Zeit spart und wo dich die Abkürzung am Ende mehr Zeit kostet, als sie dir bringt.

Website mit KI erstellen: Warum der Zauberknopf nicht reicht

Hinter einer Website, die Kund*innen gewinnt, stecken unzählige Entscheidungen. Bevor die erste Seite steht, klärst du unter anderem diese Fragen:

• Wer sind deine Wunschkund*innen und was beschäftigt sie gerade?
• Welches Angebot steht im Mittelpunkt und welches Problem löst es?
• Was unterscheidet dich von den vielen anderen, die etwas Ähnliches anbieten?
• Welche Unterseiten brauchst du?
• Welchen Weg gehen Besucher*innen bis zur Anfrage?
• Welche Farben, Schriften und Fotos passen zu dir und deiner Marke?
• Welche Tools hängen dran: Newsletter, Terminbuchung, Zahlungsanbieter?

Für diese Fragen brauchst du Zeit. Viele Antworten findest du erst, wenn du über dein Business nachdenkst, mit Kund*innen sprichst oder dein Angebot ein paar Mal verkauft hast. Eine KI kann dich dabei als Sparringspartnerin begleiten, die Antworten musst du aber letztlich selbst finden, damit sie auch wirklich zu dir passen.

Und hier liegt der Haken: Gibst du der KI diese Entscheidungen nicht mit, trifft sie sie für dich. Sie wählt dabei das Wahrscheinlichste, und das ist das, was sie in unzähligen anderen Websites gesehen hat - heraus kommt also ein ziemlich gewöhnlicher Durchschnitt. Genau das, was du im Marketing bei einem sehr vollen Markt NICHT möchtest.

KI-Websites: Schön reicht einfach nicht aus

Bei meinem eigenen Test war das Ergebnis eindeutig: Ohne viel Aufwand, Hintergrundinfos und richtig guten Input sah die Website langweilig und generisch aus - wenn du schon mehrere KI-Websites gesehen hast, wird dir das Muster schnell auffallen.

Aber fast noch schlimmer sind meist die Texte: Du liest dir einen Abschnitt durch und es hört sich vielleicht ganz gut an, aber nach dem Lesen denkst du dir "Äh... was möchte die Person damit eigentlich konkret sagen?"

Äh.... bitte was?

Ganz besonders schlimm finde ich persönlich diese Häufung von Worten wie "trägt" oder "ehrlich" - oft in Zusammenhängen, in denen sie einfach gar keinen Sinn machen und mittlerweile von der KI einfach inflationär gebraucht werden.

Ein "ehrlicher" Impuls? Gibt es also auch unehrliche Impulse?

Das ist ein Problem: Alle haben Zugriff auf dieselben Tools. Erstellen viele Selbstständige ihre Website auf diese Weise, sehen die Ergebnisse sehr ähnlich aus und klingen auch so. Deine Besucher*innen denken „Ahja, nett“ - aber buchen nichts. Denn bei der Masse an Angeboten reicht „nett“ einfach nicht mehr aus, damit sich jemand für dich entscheidet.

Nicht so. Nicht so. Sondern so - wir alle können es mittlerweile nicht mehr lesen, oder?

Die größere Gefahr sehe ich aber sogar noch woanders: Eine KI-Website sieht auf den ersten Blick gut aus, du denkst dir dann als Anbieterin „Wow, super!“, hakst das Thema Website gedanklich ab und kümmerst dich um andere Aufgaben. Dass deine Website nicht für dich arbeitet, merkst du oft erst Monate später, wenn überhaupt. In der Zwischenzeit lässt sie Besucher*innen verwirrt zurück und/oder holt sie nicht ab. Aber genau diese Menschen hätten deine Wunschkund*innen werden können.

Die KI scheint oft zu probieren, wie kurz Sätze wohl werden können...

Design-Fails

Der Name WebDESIGN kommt nicht von ungefähr - gerade mit Farben, Schriften, Anordnung, Abständen, Hintergründen, Bildern, Hierarchie lässt sich so unfassbar viel übermitteln, was weit über das geschriebene Wort hinausgeht. Wenn du dein Branding mit eine*r Branddesigner*in ausarbeitest, wird unter anderem berücksichtigt, welche Zielgruppe du hast, was deine Persönlichkeitsmerkmale sind, wie du auftreten möchtest, was du anbietest, was dich besonders macht und von anderen unterscheidet - all das wird dann übersetzt in ein stimmiges Design, was einfach schon auf den ersten Blick vermittelt "hier bin ich richtig" - und zwar den richtigen Kund*innen!

Gerade das kann die KI einfach noch nicht leisten (und ich bin mir ziemlich sicher, dass sie hier nie so gut werden wird wie Designer*innen mit Erfahrung und Wissen) und sowohl was ich bei Kontrasten als auch bei Gradienten, Farbverläufen schon gesehen habe ist teilweise ganz schön krass:

Kannst du das etwa gut lesen? Also ich persönlich hätte da eine weiße Schrift gewählt... Kontraste sind wichtig für Barrierefreiheit!

Hui, da wurden die Farbverläufe aber wirklich unpassend zusammengestellt..

Fazit: Was eine Website unverwechselbar macht, kann die KI sich nicht einfach ausdenken (bzw. sollte sie bitte nicht). Es kommt aus dir und deinem Business:

• deine Haltung und deine Meinung zu Themen deiner Branche
• echte Beispiele und Ergebnisse aus der Arbeit mit deinen Kund*innen
• die Worte, mit denen deine Kund*innen ihr Problem beschreiben
• deine Geschichte und der Grund, warum du tust, was du tust
• eigene Fotos statt Stockbilder

Gibst du der KI dieses Material mit, wird das Ergebnis deutlich besser. Dafür musst du es allerdings erst einmal erarbeitet haben - die Basis kannst du also nicht überspringen, egal wie sehr du dir das wünschst.

Du musst das Ergebnis beurteilen können

Deine Steuererklärung würdest du auch nicht von einer KI erstellen lassen und auf gut Glück abschicken (hoffe ich zumindest). Bei deiner Website gilt dasselbe: Die KI liefert dir ein Ergebnis, das auf den ersten Blick vielleicht überzeugend aussieht. Ob alles aber nach Design-, Copywriting-, Datenschutz-, und Sicherheitsaspekten Sinn macht und korrekt ist, kann sie dir allerdings nicht garantieren. Diese Prüfung bleibt an dir hängen und ist oft wesentlich schwieriger bei neu erstellten KI-Dateien durchzuführen als bei etablierten Systemen wie z.B. WordPress, bei denen du unzählige Anleitungen und Expert*innen findest.

Diese Punkte solltest du bei jeder Website prüfen können, die eine KI für dich erstellt hat:

Datenschutz: Impressum und Datenschutzerklärung brauchst du als Selbstständige auch auf einer KI-Website. Außerdem bindet KI-generierter Code ggf. externe Dienste direkt ein, zum Beispiel Google Fonts, YouTube-Videos, ein Newsletter-Anmeldeformular oder Analyse-Tools. Ohne Einwilligung deiner Besucher*innen wird das datenschutzrechtlich heikel.

Sicherheit: Eine reine HTML-Seite ohne Formulare bietet an sich noch relativ wenig Angriffsfläche. Kritisch wird es aber, sobald Kontaktformulare, Logins oder Skripte auf dem Server dazukommen. Diesen Code hat die KI geschrieben, und außer dir hält ihn niemand aktuell. Im Zweifelsfall öffnest du damit Angreifern Tür und Tor, um Schadcode zu verbreiten. Bei WordPress kannst du mit einigen Maßnahmen (Sicherheitsplugins, regelmäßigen Updates, Backups) schon die größten Sicherheitslücken schließen und trotzdem den großen Funktionsumfang an getesteten, etablierten Plugins genießen.

Mobile Version: Teste jede Seite auf deinem eigenen Handy und am besten auch auf dem Tablet. Lässt sich das Menü bedienen? Sind Schrift und Buttons groß genug (die KI arbeitet sehr gerne mit Ameisenschrift)? Bricht ein Bild oder eine Tabelle aus dem Layout?

Barrierefreiheit: Reichen die Kontraste? Haben alle Bilder Alternativtexte? Stimmt die Reihenfolge der Überschriften? Kannst du die Seite mit der Tastatur bedienen?

SEO: Hat jede Seite einen eigenen Titel und eine Meta-Beschreibung? Gibt es eine Sitemap? Hast du die Website in der Google Search Console angemeldet? Wie du außerdem in KI-Suchmaschinen sichtbar wirst, liest du in meinem Artikel GEO statt SEO.

Bist du bei einigen dieser Fragen unsicher, ist das kein Grund zur Panik. Du weißt jetzt, wo du dir Wissen aneignen solltest, bevor du die KI für dich arbeiten lässt.

Daneben gibt es die größeren Fragen rund um KI: Urheberrecht, Datenschutz bei den KI-Anbietern selbst und die Umweltkosten. Sarah Osenberg hat dazu einen lesenswerten Artikel geschrieben: KI und GenAI kritisch betrachtet.

Fehler, Fails, lustige und weniger lustige Probleme: In diesem Artikel sind weltweite Fehler der KI auf Websites gezeigt, wie zu teilweise größeren Problemen geführt haben. Auch hier gilt natürlich: Bitte prüfe jede Information, bevor du sie einfach so übernimmst oder online stellst - die KI tut das nämlich nicht sondern bietet dir Texte an, die erstmal plausibel klingen, egal ob sie es wirklich sind oder nicht.

5 Wege, KI für deine Website zu nutzen (kleiner Praxis-Check)

KI kann dir auf sehr unterschiedliche Arten beim Website-Erstellen helfen. Diese fünf Wege habe ich mir genauer angeschaut.

Weg 1: Website mit Claude oder ChatGPT als Code erstellen

Du beschreibst der KI deine Website, und sie schreibt dir den Code dafür: HTML für die Inhalte, CSS für das Design und oft etwas JavaScript. Diese Dateien lädst du bei deinem Webhoster hoch, und deine Website ist online. Das geht schnell, und gestalterisch hast du alle Freiheiten.

Die Haken zeigen sich, sobald du mit der Website arbeiten willst:

• Jede Änderung passiert im Code. Ein neuer Preis, ein anderes Foto, ein einzelnes Wort: Ohne HTML-Kenntnisse findest du die richtige Stelle kaum, ohne dabei etwas anderes zu verschieben. Deshalb bitten viele in der Praxis für jede Kleinigkeit die KI um eine neue Version und laden dann die Datei neu hoch - echt viel Aufwand für Mini-Änderungen.
• Menü und Footer stecken in jeder Datei. Kommt eine neue Unterseite dazu, passt du das Menü auf jeder einzelnen Seite an. Auch Farben und Schriften sind oft über viele Dateien verteilt. Und selbst wenn die KI sie sauber in einer eigenen Datei bündelt, hast du noch keine Oberfläche, in der du deine Inhalte bequem pflegst. Genau dafür wurden ja vor über 20 Jahren Content-Management-Systeme wie WordPress entwickelt - damit man eben nicht mehr einzeln in Dateien rumpfuschen muss 😉
• Neue Funktionen müssen programmiert werden. Ein Kontaktformular braucht zum Beispiel einen Teil, der auf dem Server läuft und die Nachricht verschickt. In WordPress greifst du auf ein großes Verzeichnis an getesteten, etablierten Plugins zu, oft inklusive Support und Updates. Bei einer KI-Website lässt du dir jede Funktion neu programmieren oder bindest einen externen Dienst ein. Dann müsstest du jede der neu programmierten Funktionen ausgiebig testen - und als jemand, der im Software-Testing gearbeitet hat kann ich dir sagen: Der Aufwand davon wird in der Praxis oft unterschätzt.
• Ein Blog wird mühsam. Jeder Artikel ist eine neue Datei, und die Übersichtsseite pflegst du von Hand.
• Das Hochladen will gelernt sein. Du findest heraus, wie die Dateien zu deinem Webhoster kommen, zum Beispiel per FTP, über den Dateimanager deines Hosters oder Anbieter wie Netlify.

Von WordPress bist du damit unabhängig - dafür hängst du bei jeder Änderung an der KI, solange du den Code nicht selbst im Detail verstehst.

Mein Fazit 👎: Für Selbstständige ohne Programmierkenntnisse empfehle ich diesen Weg nicht. Als schneller Entwurf, um eine Designrichtung auszuprobieren oder Ideen visualisiert zu sehen, kann er dir trotzdem helfen.

Weg 2: WordPress mit KI verknüpfen

Seit WordPress 7.0 (Mai 2026) steckt im Kern von WordPress eine Grundlage für KI. In einem zentralen Bereich verbindest du deine Website mit einem KI-Anbieter wie OpenAI, Anthropic oder Google, und Plugins können diese Verbindung anschließend nutzen. Du kannst dir das wie eine Steckdose vorstellen: WordPress liefert den Anschluss, die Funktionen selbst kommen über Plugins.

Das offizielle KI-Plugin erstellt zum Beispiel Titel, Auszüge, Alternativtexte und Bilder. Im Block-Editor erscheint die Möglichkeit, Inhalte mit KI erstellen zu lassen - allerdings brauchst du dafür separates Guthaben beim jeweiligen KI-Anbieter, unabhängig vom normalen monatlichen Abo, was du evtl. schon bezahlst.

WordPress spricht über die Schnittstelle (API) mit dem Anbieter, und die rechnet er separat nach Verbrauch ab. Du legst dir dafür ein eigenes API-Konto an und lädst Guthaben auf. Bedenke außerdem: Alles, was du über das Plugin an die KI schickst, landet beim Anbieter.

Für Technik-Interessierte: Über die neue Abilities API können KI-Assistenten mit passenden Zusatz-Tools auch Aktionen auf deiner Website ausführen, zum Beispiel Entwürfe anlegen. Das richtet sich bisher vor allem an Entwickler*innen.

Mein Fazit 👎: Beim Seitenbauen bringt dir die KI-Integration in WordPress aktuell noch wenig. Das Fundament an sich klingt aber trotzdem schon ganz gut: Du arbeitest auf einem stabilen System mit Benutzerverwaltung, Sicherheitsplugins und vernünftigem Datenschutz und setzt KI gezielt dort ein, wo sie dir hilft.

Weg 3: Unterseiten mit Divi AI erstellen lassen

Arbeitest du mit dem Divi Theme, erstellt dir Divi AI eine Unterseite nach deiner Beschreibung. Die Seiten an sich haben mich aber in der Vergangenheit überhaupt nicht überzeugt und auch die Prompts werden anders als in normalen KI-Tools nicht korrekt berücksichtigt.

Hier ein Video aus meinem Praxistest von 2025:

Eine wesentlich bessere Alternative ist der - leider kostenpflichtige - Divi KI Agent, siehe nächster Punkt.

Mein Fazit👎: Als Rohbau höchstens ein bisschen brauchbar - in der Praxis geht es aber oft schneller und vor allem viel besser, wenn du die Unterseite mit Divi selbst erstellst.

Weg 4: Den Divi KI Agenten nutzen

Seit Divi 5.12 (September 2026) gibt es einen KI-Agenten direkt im Divi Builder, und er geht deutlich weiter als Divi AI. Im Build Mode beschreibst du, was passieren soll, und der Agent setzt es direkt auf deiner Seite um: Er legt Layouts an, bearbeitet Module, ändert Design-Einstellungen und verwaltet Menüs. Im Ask Mode stellst du Fragen zu deiner Seite, ohne dass sich etwas verändert. Ganz fehlerfrei arbeitet er noch nicht, und leider brauchst du für ihn ein Divi-AI-Abo plus Guthaben.

Wie der Agent funktioniert und was er im Praxistest kann, zeige ich dir in meinem Artikel Divi KI Agent: So funktioniert er & was er kann, inklusive Video.

Mein Fazit 👍: Sieht ganz vielversprechend aus, vor allem wenn er bei den kleinen Einstellungsproblemen in Divi helfen kann oder Seiten anhand von Screenshots nachbauen kann - in der Praxis funktioniert aber noch nicht alles so super.

Weg 5: Divi-Layouts mit Claude & Co. erstellen.

Du kannst dir von der KI JSON-Dateien erstellen lassen und diese als Layout in Divi importieren. So verbindest du die Gestaltungsfreiheit der KI mit dem stabilen Fundament von WordPress. Du kannst diese erstellte Seite dann zum Glück vollständig mit dem Divi Builder weiter bearbeiten und musst nicht - wie bei der reinen HTML Datei, siehe Weg 1 - eine neue Datei erstellen für jede Änderung.

Bevor die Seite erstellt werden kann musst du der KI (ich habe es mit Claude getestet) eine Beispiel JSON Datei mitgeben, damit sie das Format korrekt auslesen und nachbauen kann. Das ist nicht immer ganz einfach und braucht manchmal mehrere Anläufe. Wie das geht, zeige ich im Divi 5 Powerkurs.

Mein Fazit 👎: Relativ viel Aufwand für ein Ergebnis, dass du mit ein bisschen Divi Kenntnissen vermutlich schneller und schöner selbst gemacht hättest. Aber wenn du weder Zeit noch Nerven hast, das selbst nachzubauen, ist das ggf. ein Weg für dich.

Mein Fazit: KI beim Website-Erstellen? Jein, wenn dann nur mit Vorarbeit

KI kann dir beim Website-Erstellen viel Zeit sparen. Allerdings nur, wenn du die Grundlagen geklärt hast und weißt, wie ein gutes Ergebnis aussieht. Mein Test hat genau das bestätigt: Eine KI-Website lohnt sich erst, wenn die ganze Vorarbeit erledigt ist (Und ganz ehrlich? Selbst dann mache ich es noch schneller und besser per Hand).

Ja zur KI, wenn du

• genau weißt, wer deine Zielgruppe ist, was du anbietest und was dich ausmacht,
• der KI alles mitgibst, was sie für die Aufgabe wissen muss, inklusive Hintergrundwissen und deiner Erfahrungen,
• beurteilen kannst, ob das Ergebnis richtig gut ist oder nur an der Oberfläche kratzt.

Nein zur KI, wenn du auf gut Glück Zeit sparen willst und am Ende eine hübsch aussehende, nett klingende, aber austauschbare Website hast.

Meine Empfehlung: WordPress als stabile Basis, dazu KI als Sparringspartnerin. Arbeitest du mit Divi, beschleunigen der KI-Agent und importierte JSON-Layouts das Bauen. Abraten würde ich dir davon, deine Business-Website komplett als Code von Claude oder ChatGPT erstellen zu lassen, solange du diesen Code nicht selbst verstehst.

So nutze ich KI selbst: Claude und ChatGPT sind für mich Sparringspartner. Ich lasse sie größere Datenmengen auswerten, Muster erkennen, Texte korrekturlesen und Ideen ordnen. Meine Texte schreibe ich selbst und lasse sie gegenchecken: Habe ich etwas doppelt? Komme ich schnell genug zum Punkt? Gibt es einen roten Faden? Die Grundidee kommt von mir, und auch die Antwort der KI ist für mich eine Meinung und nie der Weisheit letzter Schluss. Das Denken sollten wir weiterhin selbst übernehmen.

Häufige Fragen zum Website-Erstellen mit KI

Kann KI eine Website erstellen?

Ja. Claude oder ChatGPT schreiben dir den Code für eine komplette Website, und in Divi baut der KI-Agent Seiten nach deiner Beschreibung. Ob diese Website Kund*innen gewinnt, hängt von deiner Vorarbeit ab: Zielgruppe, Angebot, Positionierung und Inhalte, die nach dir klingen.

Ist eine KI-Website gut für SEO?

Nur weil sie oft schneller geladen wird, ist sie nicht automatisch besser für Suchmaschinen. Ganz im Gegenteil: Ob du gefunden wirst, entscheidet vor allem, ob deine Inhalte die Fragen deiner Zielgruppe beantworten. Dazu kommen technische Grundlagen wie Seitentitel, Meta-Beschreibungen und eine Sitemap, an die die KI nicht zuverlässig von selbst denkt.

Lohnt sich eine Website mit KI?

Als alleiniges Bauwerkzeug: Nein. Als Unterstützung: Ja, wenn du die Grundlagen geklärt hast und das Ergebnis beurteilen kannst. In diesem Fall spart dir KI Zeit beim Strukturieren, Formulieren und Bauen einzelner Abschnitte, wenn du das nicht selbst erledigen möchtest. Ohne diese Vorarbeit bekommst du eine austauschbare Website, und die kostet dich am Ende mehr Zeit (und Umsatz!!), als sie dir spart.

Brauche ich für die KI-Funktionen in WordPress ein Claude- oder ChatGPT-Abo?

Ein normales Abo reicht dafür nicht. WordPress verbindet sich über die Schnittstelle (API) mit dem KI-Anbieter, und die rechnet der Anbieter separat nach Verbrauch ab. Du brauchst ein eigenes API-Konto mit Guthaben.

Mit Vorlagen und strategisch eingesetzter KI zu mehr Sichtbarkeit und Umsatz: Rock your Website

In meinen Gruppenprogrammen arbeiten wir mit händisch erstellten, kuratierten Vorlagen für deine Unterseiten. Sie enthalten Textplatzhalter und sind auf den deutschsprachigen Markt zugeschnitten, denn der tickt anders als der US-Markt. Dazu bekommst du KI-Prompts mit einer detaillierten Beschreibung, damit die KI dich insbesondere bei der Recherche (für Suchmaschinen, für Kooperationspartner etc.) beim Texten unterstützt, statt alles für dich zu schreiben. So kommst du schneller zu einem richtig guten Ergebnis, das zu dir und deinem Business passt, und stichst mit deiner Persönlichkeit heraus.

In Rock your Website, meinem 4-monatigen Mentoring für mehr Sichtbarkeit, Umsatz und Reichweite, machen wir genau die Vorarbeit, ohne die keine KI ein gutes Ergebnis liefert. Die nächste Runde startet Ende Januar 2027.

Hier kommst du auf die Warteliste für Rock your Website

oder auch: Webdesign-Trends 2026: Was sich für Coaches und Berater*innen WIRKLICH ändert (und was du getrost ignorieren kannst)

Vielleicht warst du neugierig und hast in den letzten Wochen schon die eine oder andere Liste mit "Webdesign-Trends 2026" gesehen? Falls ja, hast du dich vielleicht durch so Begriffe gequält wie "immersive 3D-Erlebnisse", "AR/VR-Integration", "kinetische Typografie" und "glassmorphistischem Design" und gedacht "waaaaasss???"

Oder auch "Schön und gut, aber was hat das mit meiner eigenen Website zu tun, wenn ich gar kein Webdesigner bin? Ich brauche doch keine schwebenden 3D-Objekte, sondern Kund*innen!"

Darum habe ich die ganzen Trends mal runtergebrochen und geschaut, was sich für uns - Coaches, Dienstleister*innen und Berater*innen - wirklich ändert und was wir auf unseren Websites beachten sollten, um in 2026 mehr Anfragen in dein Postfach zu holen.

Bereit? Dann lass uns mal schauen, was 2026 für deine Website wirklich wichtig wird.

Warum die meisten Trend-Listen unwichtig sind

Bevor wir einsteigen, lass uns kurz klären, warum 99% der Webdesign-Trends für dich ziemlich irrelevant sind:

Die meisten dieser Trends kosten richtig viel Geld und Zeit in der Umsetzung - aber bringen dir als Coach oder Berater*in schlichtweg nichts (ob du jetzt eine schwebende Schrift und verrückte Effekte hast, entscheidet nicht, ob jemand bei dir kauft oder nicht).

Was du stattdessen brauchst, ist eine Website, die:

• Vertrauen aufbaut
• Deine Persönlichkeit zeigt
• Klar macht, was du anbietest
• Menschen in deinen Newsletter bringt
• Und am Ende: zu Anfragen führt

Dazu brauchst du zum Glück eben keine fancy animierten 3D-Schriftarten.

Trotzdem gibt es ein paar Entwicklungen, die du 2026 definitiv im Blick haben solltest. Und zwar nicht, weil sie im Trend sind, sondern weil sie direkten Einfluss darauf haben, ob Menschen dich finden, dir vertrauen und bei dir kaufen.

Trend #1: Der Markt wird noch voller - Klarheit wird zur Überlebensfrage

Die Coaching-Branche soll bis 2026 weltweit 6,4 Milliarden Dollar erreichen – das ist ein Anstieg von 62% seit 2019. Die Zahl an zertifizierten Coaches hat sich in dieser Zeit mehr als verdoppelt, von 71.000 auf über 167.000.

Das heißt konkret: Es gibt natürlich immer mehr Konkurrenz.

Aber – und jetzt kommt das Wichtige – das bedeutet NICHT, dass du keine Chance mehr hast. Ganz im Gegenteil!

Denn während der Markt wächst, wächst zum Glück auch die Akzeptanz für Online-Dienstleistungen. Vor 10 Jahren hättest du vermutlich noch komische Blicke geerntet, wenn du von deinem Online-Hypnose-Coaching erzählt hättest. Heute ist das dagegen schon salonfähig.

Was das für deine Website bedeutet:

2026 reicht es nicht mehr, auf deiner Startseite zu schreiben "Ich bin Coach für berufliche Veränderung".

Stattdessen wird das stärkste Wachstum aus sehr stark spezialisierten Nischen kommen. Denk an "Karriereübergangs-Coaching für Frauen in Tech-Führungspositionen" oder "Burnout-Prävention für selbständige Therapeut*innen".

Generische Angebote verlieren einfach an Zugkraft. Menschen suchen nach Resonanz – nach dem Gefühl, dass dein Angebot GENAU für ihre spezifische Situation gemacht ist, denn dann spricht es an, weckt Emotionen, holt ab.

Deine Aufgabe für 2026: Mach auf deiner Startseite innerhalb von 5 Sekunden klar:

• Wer bist du?
• Für WEN genau arbeitest du?
• Welches KONKRETE Problem löst du?

Und das darfst du nicht mehr schwammig formulieren, nicht mehr für alle - sondern glasklar für deine Wunschkund*innen.

Trend #2: Mobilfreundlichkeit ist nicht mehr optional (war sie eigentlich noch nie)

Über 75% des Website-Traffics kommt im Durchschnitt mittlerweile von mobilen Geräten.

Das heißt: Drei Viertel deiner Besucher*innen schauen sich deine Website auf dem Handy an. Beim Warten auf den Bus, in der Mittagspause, abends auf dem Sofa. Das heißt: Die Website MUSS auf dem Handy funktionieren, und zwar nicht "so halbwegs", sondern richtig gut, mit mobil optimierten Bildern, angepasster Schriftgröße und sehr guten Kontrasten.

Was 2026 konkret wichtig wird:

• Ladezeit unter 3 Sekunden: Rund 53% der Nutzer*innen verlassen eine Seite, wenn sie länger als 3 Sekunden zum Laden braucht.
• Daumenfreundliche Navigation: Deine wichtigsten Buttons sollten so platziert sein, dass man sie mit dem Daumen erreichen kann, ohne das Handy neu greifen zu müssen.
• Große, klare CTAs: "Jetzt Erstgespräch buchen" sollte auf dem Handy nicht aussehen wie ein winziger Klecks, auf den man 5x tippen muss, bis es funktioniert.

Mein Tipp: Schau dir deine Website unbedingt auf einem Handy (besser: Auf mehreren) und auf einem Tablet an. Nicht in der mobilen Ansicht deines Browsers, sondern wirklich auf dem jeweiligen Gerät - du wirst überrascht sein, was dir dabei alles auffällt.

Trend #3: Vertrauen wird zur Währung (und du brauchst Social Proof)

In einer Welt, in der jeder zweite einen Online-Kurs oder ein Coaching anbietet, wird eine Frage immer wichtiger:

"Warum sollte ich DIR vertrauen?"

Vertrauenssignale wie Kundenbewertungen, Testimonials und Social Proof werden 2026 noch entscheidender. Menschen sind Herdentiere – wir schauen, was andere machen und sagen. Wenn andere dich weiterempfehlen, ist das ein starkes Signal.

Was das konkret bedeutet:

• Zeig echte Ergebnisse: Nicht "Meine Kund*in war sehr zufrieden", sondern "Lisa M. hat nach 6 Wochen ihr erstes 3.000-Euro-Paket verkauft – hier ist ihre Geschichte."
• Nutze Vorher-Nachher-Szenarien: Was hat sich verändert? Wie fühlte sich deine Kund*in vorher, wie fühlt sie sich jetzt?
• Mach aus Testimonials kleine Geschichten: Die besten Testimonials zeigen das konkrete Problem, den Lösungsweg und das Ergebnis.

Auch wichtig: Testimonials gehören nicht mehr auf eine "Kundenstimmen"-Seite, die niemand besucht. Sie gehören auf deine Startseite, auf deine Angebotsseiten, in deinen Newsletter, also überall da, wo Menschen eine Entscheidung treffen sollen.

Trend #4: Geschwindigkeit entscheidet über Erfolg oder Verlust

Ich hab's oben schon kurz erwähnt, aber dieser Punkt ist so wichtig, dass er einen eigenen Abschnitt verdient:

Deine Website-Geschwindigkeit ist 2026 extrem entscheidend.

Selbst 1 Sekunde Verzögerung kann deine Conversions (also wie viele Menschen bei dir etwas buchen, sich in den Newsletter eintragen etc.) um 20% reduzieren.

Das bedeutet: Von 10 Menschen, die eigentlich bei dir kaufen würden, springen 2 ab, nur weil deine Seite zu langsam lädt.

Was deine Seite langsam macht:

• Riesige Bilder, die nicht komprimiert sind
• Zu viele Plugins oder Widgets
• Videos, die automatisch laden (auch wenn sie noch gar nicht sichtbar sind)
• Fancy Animationen, die mehr beeindrucken als helfen
• ein langsamer Webhoster

Mein Tipp: Mach mal einen Speed-Test bei PageSpeed Insights von Google. Wenn du unter 80 Punkten landest, gibt es Handlungsbedarf (im Blogartikel "7 Tipps, um deine Website schneller zu machen" zeige ich dir hierzu auch konkrete Umsetzungstipps).

Trend #5: Klarheit schlägt alles (und deine Startseite hat 3-5 Sekunden Zeit)

2026 erwarten Besucher*innen Klarheit über allem.

Deine Startseite hat nur 3-5 Sekunden Zeit, um drei Fragen zu beantworten:

1. Wer bist du?
2. Was machst du (und für wen)?
3. Warum sollte ich hierbleiben?

Wenn diese Fragen nicht innerhalb von wenigen Sekunden beantwortet sind, sind deine Besucher*innen weg.

Das heißt konkret:

Nicht: "Willkommen! Schön, dass du da bist. Ich begleite Menschen auf ihrem Weg zu mehr Klarheit und Selbstverwirklichung."

Sondern: "Ich helfe selbständigen Frauen, die zwischen Kundenprojekten und Haushalt nicht mehr wissen, wo ihnen der Kopf steht, ihre Woche so zu strukturieren, dass wieder Zeit für sie selbst bleibt – ohne schlechtes Gewissen."

Der Unterschied: Der erste Text könnte von jedem Coach der Welt stammen, weil er einfach sehr generisch klingt. Der zweite? Der spricht eine bestimmte Person sehr konkret an und diese Person denkt sofort: "Oh wow, das bin ja ich!"

Trend #6: Navigation muss simpel sein (kein Menü-Chaos mehr)

Hier wird's ganz praktisch:

Dein Menü sollte so einfach und klar sein, dass deine Oma es versteht (oder eben jemand, der mit geteilter Aufmerksamkeit nur schnell die Seite überfliegt).

Was 2026 funktioniert:

Klare Menübeschriftungen wie:

• Start
• Angebote / Mit mir arbeiten
• Über mich
• Blog
• Kontakt

Was NICHT funktioniert:

Kreative Begriffe wie:

• "Magic Moments" (Was ist das? Deine Angebote? Dein Portfolio? Deine Katzenfotos?)
• "Let's connect" (Kontakt? Newsletter? Social Media?)
• "Journey" (Blog? Über mich? Kundenstimmen?)

Ich weiß, es ist verlockend, kreativ zu sein. Aber jeder zusätzliche Schritt, den deine Besucher*innen denken müssen, reduziert die Chance, dass sie bleiben. Gerade im Menü ist Kreativität ein "No-Go" - hier wollen wir Orientierung und Sicherheit bieten und das klappt nur, wenn wir uns an die gängigen Konventionen halten.

Trend #7: Jede Dienstleistung braucht eine eigene Seite

Viele packen alle ihre Angebote auf eine einzige "Angebote"-Seite und wundern sich, warum niemand bucht.

Aber jede Dienstleistung, jedes Angebot sollte im Idealfall eine vollständige, Suchmaschinen optimierte Seite bekommen.

Warum? Zwei Gründe:

1. Google findet dich besser: Wenn jemand nach "Burnout-Coaching für Therapeut*innen" sucht und du genau dafür eine eigene Seite hast, bist du viel sichtbarer als mit einer allgemeinen Angebots-Übersicht.
2. Deine Besucher*innen bekommen alle Details, die sie brauchen: Eine eigene Seite gibt dir Raum, das Problem zu beschreiben, deine Lösung zu erklären, Testimonials zu zeigen und einen klaren Call-to-Action zu platzieren.

Das heißt nicht, dass du 20 verschiedene Angebotsseiten brauchst (wenn du so viele unterschiedliche Angebote hast, ist das Problem ein anderes 😄). Aber deine 2-3 Hauptangebote verdienen jeweils eine eigene - ausführliche, klare - Bühne.

Trend #8: CTAs müssen klar sein (nicht kreativ)

Wie gern klickst du auf einen Button, auf dem steht "Lass uns zaubern" oder "Ready for your transformation?"? Wenn es dir geht wie mir, dann ist hier eher unklar, was genau beim Klick passiert - und das fühlt sich nicht gerade einladend an.

Was 2026 funktioniert:

Klare, handlungsorientierte Buttons wie:

• "Jetzt Erstgespräch buchen"
• "Kostenlose Checkliste herunterladen"
• "Zum Newsletter anmelden"

Keine Spielereien, keine verrückten Metaphern, keine ausgefallenen Versprechen. Kommunizere einfach ganz klar, was als nächstes passiert.

Auch wichtig: Deine CTAs sollten prominent platziert sein - zum Beispiel auf der Startseite, auf deinen Angebotsseiten, am Ende deiner Blogartikel.

Mach es deinen Besucher*innen so leicht wie möglich, den nächsten Schritt zu gehen.

Trend #9: KI verändert, wie Menschen dich finden (und das ist gut für dich!)

Die Art, wie Menschen im Internet suchen, ändert sich MASSIV (siehe auch den Blogartikel GEO statt SEO). Und das hat direkten Einfluss auf deine Website.

Was passiert gerade:

• Immer mehr Menschen nutzen KI-Tools wie ChatGPT, Perplexity oder Google's KI-Suche
• Die Fragen werden dadurch länger und natürlicher
• Statt "Website SEO" suchen Menschen jetzt "Wie mache ich meine Website 2026 fit für SEO trotz KI?"

Das kannst du gut für dich nutzen:

Für kleine Selbständige wie dich und mich ist das SUPER! Denn auf längere, spezifische Suchbegriffe zu optimieren ist viel viel einfacher als auf hart umkämpfte Begriffe wie "Coaching" oder "Business Mentoring".

Was das für deine Website bedeutet:

Werde noch spezifischer in deinen Texten. Nicht "Ich biete Unterstützung bei beruflichen Herausforderungen", sondern "Ich helfe Lehrer*innen, die kurz vor dem Burnout stehen, ihre Arbeitsbelastung so zu reduzieren, dass sie wieder mit Freude unterrichten können."

Schreib so, wie Menschen wirklich suchen. In ganzen Fragen, in natürlicher Sprache.

Und probier's mal aus: Frag ChatGPT oder dein KI-Tool der Wahl, ob es dich schon mal weiterempfohlen hat. Falls nicht, kannst du es darum bitten, dich zukünftig in bestimmten Kontexten zu empfehlen - manchmal hilft das tatsächlich.

Trend #10: SEO ist nicht tot (aber es verändert sich)

Ich weiß, viele sagen gerade: "Mit der ganzen KI lohnt sich SEO doch gar nicht mehr!" Das stimmt nicht.

Aber – und das ist wichtig – SEO verändert sich:

• Längere, natürlichere Suchbegriffe werden wichtiger (siehe Trend 9)
• Deine Website-Struktur muss klar sein (damit auch KI versteht, worum es geht)
• Vertrauenssignale und Verlinkungen von anderen werden noch wichtiger

Die ganzen Grundlagen für Suchmaschinenoptimierung gelten nach wie vor - du bietest super guten Service für deine Leser*innen an, beantwortest ihre Fragen, strukturierst deine Inhalte optimal - dann bleibst du relevant.

Du musst nicht alles über den Haufen werfen. Oft reichen ein paar kleine Stellschrauben für viel bessere Ergebnisse. Und wie immer gilt: Das muss keine Hau-Ruck-über-Nacht-Aktion sein, sondern lässt sich nach und nach umsetzen.

Was du NICHT brauchst (und dir damit eine Menge Stress sparen kannst)

Was du 2026 NICHT brauchst:

• Keine aufwendigen 3D-Animationen – Sie verlangsamen nur deine Seite und verwirren mehr, als sie helfen
• Keine komplexen interaktiven Elemente – Deine Besucher*innen wollen Infos finden, nicht auf Schatzsuche gehen
• Keine "trendigen" Features ohne Zweck – Nur weil alle gerade über Glassmorphism reden (also so einen Look, wo Teile der Website wie durch eine Glasscheibe bedeckt werden), heißt das nicht, dass es dir mehr Kund*innen bringt
• Keine austauschbaren Template-Designs – Menschen erkennen Standard-Templates sofort, was Vertrauen reduziert (das gilt auch für Stockfotos).
• Keine 47 verschiedenen Schriftarten – Das ist kein Design-Statement, das ist Chaos

Stattdessen: Konzentrier dich auf das, was wirklich zählt.

Der Realitätscheck: Was deine Website 2026 WIRKLICH braucht

Fassen wir also zusammen. Wenn du über deine Website noch kaum oder keine Kund*innen gewinnst, liegt es wahrscheinlich nicht daran, dass dein Button-Radius 5px statt 8px hat.

Und es liegt vermutlich nicht daran, dass du noch kein professionelles Fotoshooting hattest.

Was deine Website 2026 wirklich braucht:

• Einen klaren ersten Eindruck – Innerhalb von 3 Sekunden sollte klar sein: Wer bist du, was machst du, für wen?
• Emotionale Texte statt Feature-Listen – Nicht "Ich biete 1:1 Coaching", sondern "Schluss mit dem Gefühl, nie genug zu sein – ich zeige dir, wie du deine Selbstzweifel in Selbstvertrauen verwandelst"
• Geschwindigkeit – Unter 3 Sekunden Ladezeit wären optimal
• Mobilfreundlichkeit – Rund 75% deiner Besucher*innen schauen auf dem Handy
• Einen logischen, einfachen Weg zum Newsletter – Überall sollte klar sein: Hier kannst du dich eintragen und bekommst dafür das hier (ein tolles Freebie zum Beispiel)
• Social Proof – Case Studies, Testimonials, Vorher/Nachher – aber nicht irgendwelche, sondern die, die GENAU das Problem ansprechen, das deine Traumkund*innen haben
• Klare CTAs – Sag deinen Besucher*innen genau, was sie als nächstes tun sollen
• Spezifische, konkrete Texte für KI – Damit auch ChatGPT & Co. dich weiterempfehlen können

Was du ab heute lassen kannst

Damit du nicht in die Perfektionismus-Falle tappst, hier nochmal klar, was du NICHT tun musst:

• Stundenlang über Farbkombinationen grübeln
• Dich mit anderen Websites vergleichen ("Die sieht ja viel professioneller aus...")
• Jeden Monat das Layout ändern
• Oder noch schlimmer: Jede Woche dein Angebot ändern (ich hab's versucht – hat nichts gebracht 😂)
• Dir Sorgen machen, ob du dein Angebot billiger machen solltest, damit endlich jemand kauft

Der größte Hebel liegt nicht im nächsten Website-Relaunch, sondern darin, dass Menschen deine Website FINDEN und dann bei dir BLEIBEN (Newsletter) und dir VERTRAUEN (Content).

Dein Fahrplan für 2026

Du denkst jetzt vielleicht: "Okay, das klingt alles logisch, aber WO fange ich an?"

Hier mein Vorschlag:

Phase 1: Klarheit schaffen (Woche 1-4)

• Positionierung schärfen: Für WEN genau arbeitest du? Welches konkrete Problem löst du?
• Startseite überarbeiten: Besteht sie den 3-Sekunden-Test?
• Navigation vereinfachen: Ist es auch für abgelenkte Menschen sofort klar?
• Wichtigste Texte optimieren: Emotional statt sachlich

Phase 2: Vertrauen aufbauen (Woche 5-8)

• Testimonials sammeln und strategisch platzieren
• Case Studies erstellen
• Über-mich-Seite persönlicher machen
• Speed-Test machen und optimieren

Phase 3: Sichtbarkeit erhöhen (Woche 9-12)

• Jede Dienstleistung bekommt eigene Seite
• Blog-Strategie für längere Suchbegriffe
• KI-Optimierung: Spezifische Begriffe einbauen
• Optional: ChatGPT & Co. fragen, ob es dich empfiehlt

Du musst nicht alles auf einmal perfekt machen. Starte mit dem, was den größten Impact hat.

Die Wahrheit über Website-Trends

Also zusammengefasst: Deine Website soll nicht (nur) beeindrucken, sondern in erster Linie verkaufen. Sie soll nicht (nur) "wow" auslösen, sondern "genau das brauche ich!"

Und dafür brauchst du keine animierten Schriften oder special Effects, sondern:

• Klarheit
• Vertrauen
• Geschwindigkeit
• Einen Newsletter

Das sind die "Trends", die 2026 wirklich zählen. Und eigentlich sind es keine neuen Trends, sondern das war auch 2024 schon wichtig und wird 2027 immer noch wichtig sein - weil sie an sich keine Trends sind, sondern grundlegend dafür, wie Menschen Kaufentscheidungen treffen.

Mach deine Website zur besten Mitarbeiterin

Vergiss schicke Design-Trends - konzentrier dich auf das, was wirklich funktioniert.

Wenn du dabei Unterstützung möchtest – wenn du nicht alleine herausfinden willst, welche Stellschrauben bei DIR am meisten bringen – dann bist du genau richtig bei mir.

Du hast noch keine Website? Dann kannst du sie mit meinem "Divi 5 Powerkurs" blitzschnell erstellen.

Deine Website ist fertig, aber nichts passiert? In "Rock your Website" erweitern wir deine Website um Newsletter und Sichtbarkeitshebel, damit du auch wirklich mehr Kund*innen gewinnst und zwar nachhaltig und langfristig.

Ich zeige dir im Detail, wie die Zahnräder ineinandergreifen und wie du das Ganze auch für dich möglichst unkompliziert und nachhaltig umsetzen kannst.

Denn mal ehrlich: Du bist nicht Selbständig geworden, um den ganzen Tag an deiner Website zu basteln, oder?

Du willst mit Kund*innen arbeiten, einen Unterschied machen, und abends auch mal abschalten können, ohne ständig über Marketing nachzudenken.

Und genau dafür ist deine Website da: Um DIR den Rücken freizuhalten, während sie für dich arbeitet.

Lass uns das gemeinsam hinbekommen 💪

Als Webdesignerin werde ich immer häufiger gefragt: „Muss meine Website barrierefrei sein?" und „Wie mache ich meine WordPress-Website barrierefrei?"

In diesem ausführlichen Blogartikel zeige ich dir:

• Wann das neue Barrierefreiheitsgesetz für dich gilt
• Wie du prüfst, ob deine Website barrierefrei ist
• Schritt-für-Schritt Anleitungen für WordPress und Divi
• Wie du deine Website für Screenreader optimierst
• Welche Tools dir bei der Umsetzung helfen
• Häufige Fehler und wie du sie vermeidest

Was bedeutet Barrierefreiheit bei Websites?

Barrierefreiheit (auch Web Accessibility genannt) bedeutet, dass deine Website für alle Menschen zugänglich und nutzbar ist – unabhängig von körperlichen oder technischen Einschränkungen.

Das betrifft konkret Menschen mit:

• Sehbehinderungen oder Blindheit (nutzen oft Screenreader, wo ihnen der Bildschirminhalt vorgelesen wird)
• Hörbehinderungen oder Gehörlosigkeit
• Motorischen Einschränkungen (können z.B. keine Maus verwenden)
• Kognitiven Beeinträchtigungen
• Temporären Einschränkungen (z.B. gebrochener Arm)

Eine barrierefreie Website ist aber nicht nur für Menschen mit Behinderungen hilfreich – sie verbessert die Nutzererfahrung für alle Besucher*innen und kann sogar dein SEO-Ranking positiv beeinflussen! Also unabhängig davon, ob das Gesetz für dich gilt oder nicht, kannst du dir aus diesem Artikel eine Verbesserungsvorschläge für deine Website mitnehmen!

Das Barrierefreiheits-stärkungsgesetz – gilt es für deine Website?

Ab dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) auch für bestimmte private Unternehmen. Die wichtigste Frage ist: Bist du betroffen?

Wer muss seine Website barrierefrei gestalten?

Das Gesetz gilt für Unternehmen, die Dienstleistungen für Verbraucher*innen anbieten in folgenden Bereichen:

• E-Commerce und Online-Shops (Verkauf von Produkten)
• Dienstleistungen im Bereich Mobilität (z.B. Reisebuchungen, Taxi-Services)
• Bankwesen und Finanzdienstleistungen
• Kommunikationsdienste (Telefonie, Messaging)
• Personenbeförderung (Fluglinien, Bahn, Bus)
• Audiovisuelle Mediendienste (Streaming, Video-on-Demand)

So prüfst du, ob das Gesetz für dich gilt:

1. Bietest du Dienstleistungen für Endverbraucher*innen an? (B2C, nicht B2B)
2. Fällst du in eine der oben genannten Kategorien?
3. Hast du mehr als 10 Mitarbeiter*innen ODER einen Jahresumsatz über 2 Millionen Euro?

Wenn du alle drei Fragen mit "Ja" beantwortest, dann gilt das Gesetz für dich. Für einen Großteil der Leser*innen hier - mich eingeschlossen - wird das Gesetz also offiziell nicht gelten.

Aber Achtung: Auch wenn du nicht direkt betroffen bist, ist es sinnvoll, deine Website barrierefrei zu gestalten – für bessere Nutzererfahrung und potenzielle Kund*innen.

Die Richtlinien für barrierefreie Websites - WCAG 2.1

Es wird jetzt etwas technisch, aber wichtig: Die Web Content Accessibility Guidelines (WCAG) 2.1 sind der internationale Standard für barrierefreie Websites. Sie basieren auf vier Grundprinzipien:

1. Wahrnehmbar (Perceivable)

Informationen müssen für alle Nutzer*innen wahrnehmbar sein.

Das heißt konkret: Die Inhalte müssen für alle erfassbar sein - auch z.B. für Menschen mit Seh- oder Hörbeeinträchtigung.
Beispiel:
Du hast ein schönes Bild auf deiner Startseite, das zeigt, wie du mit Kund*innen arbeitest. Wenn du keinen Alternativtext (ALT-Text) hinzufügst, weiß ein Screenreader nicht, was darauf zu sehen ist - und blinde Menschen bekommen diese Info nicht mit.
Lösung: Schreib z. B. als ALT-Text: „Coach arbeitet mit Kundin in hellem Büro, beide lachen.“

2. Bedienbar (Operable)

Die Website muss mit verschiedenen Eingabemethoden bedienbar sein.

Das heißt konkret: Nutzer*innen müssen sich auf deiner Website zurechtfinden – auch ohne Maus.
Beispiel:
Eine Nutzerin kann nur mit der Tastatur navigieren - doch dein Menü klappt nur per Maus auf? Dann ist die Seite für sie nicht nutzbar.
Lösung: Achte darauf, dass dein Menü, Buttons und Formulare per Tabulator erreichbar sind. Das kannst du selbst testen: Einfach mal mit der Tab-Taste durch deine Seite springen.

3. Verständlich (Understandable)

Inhalte und Bedienung müssen verständlich sein.

Das heißt konkret: Inhalte und Bedienung sollen klar und nachvollziehbar sein - auch bei kognitiven Einschränkungen oder wenn Deutsch nicht die Muttersprache ist.
Beispiel:
Du schreibst: „Tragen Sie zur Authentifizierung bitte Ihren Token ein.“
Vielleicht wissen aber viele gar nicht, was genau ein Token und eine Authentifizierung genau sind. Verständlicher wäre: „Gib bitte deinen Anmeldecode ein.“
Lösung: Vermeide Fachchinesisch und erkläre, was du meinst - am besten so, dass auch 12-jährige ohne Expertise in deinem Bereich verstehen können.

4. Robust (Robust)

Die Website muss mit verschiedenen Technologien kompatibel sein.

Es gibt drei Konformitätsstufen: A (grundlegend), AA (erweitert) und AAA (höchste Stufe). Für die meisten Websites ist Level AA der angestrebte Standard.

Das heißt konkret: Deine Website sollte mit möglichst vielen Geräten, Browsern und Hilfstechnologien funktionieren.
Beispiel:
Ein Formularfeld ist falsch programmiert, sodass ein Screenreader es nicht erkennt - z. B. fehlt das „Label“, das erklärt, was hier eingetragen werden soll.
Lösung: Nutze sauberen, standardkonformen HTML-Code oder gute Page Builder mit sinnvoller Strukturierung. Lass deine Seite am besten mal von einem Screenreader „vorlesen“ - du wirst staunen, was da (nicht) ankommt.

Und was ist mit den Stufen A, AA und AAA?

Die WCAG kennt drei Stufen:

• A: Das absolute Minimum – hier geht es z. B. um einfache Tastaturbedienung oder ALT-Texte.
• AA: Der Standard, den öffentliche Stellen und auch die meisten Unternehmen anstreben sollten.
• AAA: Die Königsdisziplin – zum Beispiel mit Gebärdensprachvideos oder besonders einfacher Sprache.

Für die meisten Websites reicht Level AA - aber selbst das ist oft noch Neuland. Und genau deshalb lohnt sich ein Blick auf die wichtigsten Stellschrauben, die du auch ohne Technikstudium umsetzen kannst. Bevor du damit loslegst, kannst du erstmal den Status Quo abfragen.

So prüfst du, ob deine WordPress-Website barrierefrei ist

Bevor du mit der Optimierung beginnst, solltest du deine WordPress-Website einmal unter die Lupe nehmen.

Das kannst du zum Beispiel mit den folgenden Tools ausprobieren:

Automatisierte Tests über Online-Tools

1. Experte.de
   • Mein aktueller Favorit!
   • Als Website aufrufbar: https://www.experte.de/barrierefreiheit
   • Prüft deine Website und alle Unterseiten und gibt dir deutschsprachige Hinweise dazu, was genau auf welcher Seite optimiert werden müsste (z.B. Kontrast erhöhen)
2. WAVE (Web Accessibility Evaluation Tool)
   • Kostenlose Browser-Erweiterung
   • Zeigt Fehler direkt auf der Website an
   • Link: wave.webaim.org
3. axe DevTools
   • Browser-Erweiterung für Chrome/Firefox
   • Sehr detaillierte Fehleranalyse
   • Perfekt für Entwickler*innen
4. Lighthouse
   • In Chrome DevTools integriert
   • Prüft auch Performance und SEO
   • Rechtsklick → Untersuchen → Lighthouse

Nach der Analyse wird dir dann ein umfangreicher Bericht zur Verfügung gestellt inkl. Verbesserungshinweisen (die mal mehr, mal weniger kryptisch sind 😬)

Manuelle Tests

Automatisierte Tools erfassen nur etwa 30% aller Barrieren. Daher sind manuelle Tests wichtig:

1. Tastatur-Navigation testen
   • Navigiere nur mit der Tab-Taste durch deine Website
   • Alle Elemente sollten erreichbar und sichtbar fokussiert sein
2. Screenreader testen auf deinem Computer
   • Windows: NVDA (kostenlos)
   • Mac: VoiceOver (integriert)
   • Teste, ob alle Inhalte vorgelesen werden (ist nicht ganz einfach, die Bedienung von Screenreadern zu verstehen, je nachdem welches System du nutzt musst du dafür evtl. noch eine spezielle Anleitung zu Rate ziehen)
3. Kontraste prüfen
   • Hierzu gibt es viele kostenlose Tools, ich mag: https://coolors.co/contrast-checker/112a46-acc8e5
   • Prüfe für kleinen und großen Text, ob der Kontrast ausreichend ist und erhöhe ihn nach Bedarf

Hierzu gelten die offiziellen Empfehlungen für Level AA:

Ein Kontrastverhältnis von mindestens 4,5:1 ist erforderlich für normalen Fließtext.
Für großen Text (mindestens 18 pt oder fett formatiert) genügt ein Verhältnis von 3:1.

Level AAA (höchste Stufe):

Ein Verhältnis von mindestens 7:1 für normalen Text
und mindestens 4,5:1 für großen oder fetten Text.

Barrierefreiheit in WordPress umsetzen – Schritt für Schritt

WordPress bietet von Haus aus bereits eine gute Basis für Barrierefreiheit. Hier ist deine Schritt-für-Schritt-Anleitung:

Schritt 1: Barrierefreies Theme wählen

Wenn du noch kein Theme hast, wähle ein Theme, das als "accessibility-ready" bzw. "Für Barrierefreiheit geeignet" zertifiziert ist.

In WordPress kannst du dazu bei Design -> Themes nach Funktionen filtern:

Beliebte barrierefreie Themes sind:

• Twenty Twenty-Four
• Astra
• GeneratePress
• Kadence

Wenn du wie ich das Divi-Theme nutzt, kannst du weiter unten Tipps finden, wie du deine Inhalte damit weitestgehend barrierefrei umsetzt.

Schritt 2: Überschriften richtig strukturieren

Sorge dafür, dass die Überschriften auf deinen Seiten - mit H1, H2 usw. eingeteilt - korrekt verwendet werden. Auf jeder Seite kannst du nur eine H1 verwenden, wenn du weitere Unterüberschriften hast, sollten diese H2 sein und Überschriften, die deine Inhalte noch feiner einteilen dann H3, also ungefähr so:

html<h1>Hauptüberschrift (nur einmal pro Seite)</h1>
<h2>Hauptabschnitt</h2>
<h3>Unterabschnitt</h3>
<h2>Zweiter Hauptabschnitt</h2>

Ich kenne ja einige, die die Überschriften danach auswählen, wie groß der Text gerade dargestellt werden soll - das solltest du allerdings ab jetzt nicht mehr tun.

In WordPress:

• Nutze die Überschriften-Blöcke im Gutenberg-Editor (oder im Divi Builder beim Textmodul die H1, H2 etc. Auswahl)
• Überspringe keine Überschriftenebenen (nicht von H1 auf H3)
• Pro Seite nur eine H1-Überschrift

Übrigens empfehle ich dir auch wenn du das Divi-Theme oder ein anderes Theme mit Pagebuilder verwendest, die Blogartikel ruhig mit dem Gutenberg-Editor zu schreiben. Der erzeugt meist sehr sauberen Code ohne Schnickschnack, während du bei Pagebuildern eigentlich immer noch weitere Codeschnipsel auf deiner Seite hast, die die Barrierefreiheit verringern.

Schritt 3: Alt-Texte für alle Bilder

Generell solltest du schon beim Hochladen der Bilder in deine Mediathek darauf achten, dass du einen "vernünftigen" = sprechenden Dateinamen (also z.B. Frau-am-Computer.jpg statt IMG01238.jpg) verwendest.

In den ALT-Texten /ALT Tags beschreibst du dann, was genau in dem Bild zu sehen ist.

So geht's in WordPress:

1. Klicke auf ein Bild im Editor (oder in der Mediathek)
2. Rechte Sidebar → "Alt-Text (alternativer Text)"
3. Beschreibe den Bildinhalt prägnant - was sieht man auf dem Bild?
4. Bei dekorativen Bildern: Alt-Text leer lassen, sonst wird vom Screenreader was vorgelesen, was gar nicht relevant ist

Gute Alt-Texte:

• "Frau arbeitet am Laptop im Café"
• "Balkendiagramm zeigt Umsatzsteigerung von 20%"

Schlechte Alt-Texte:

• "Bild1.jpg"
• "Klicke hier"
• Zu lange Beschreibungen

Schritt 4: Links verständlich gestalten

Schlechte Linktexte:

• "Hier klicken"
• "Weiterlesen"
• "Mehr"

Gute Linktexte:

• "Kostenlose Website-Checkliste herunterladen"
• "Preise für Webdesign-Pakete ansehen"
• "Kontakt für individuelle Beratung"

Schritt 5: Farben und Kontraste optimieren

Als nächstes schaust du, ob du wirklich Farben mit guten Kontrasten verwendest - falls nicht, kannst du diese jetzt anpassen.

WordPress-Anpassungen:

1. Gehe zu Design → Customizer → Farben oder → Global - Farben (je nachdem, welches Theme du verwendest, kann dies auch an anderer Stelle stehen - bei Divi findest du Farben z.B. bei Divi → Theme Optionen → Standardpalette Farbauswähler und kannst diese dann separat bei Typographie, Buttons, Footer etc. im Theme Customizer einstellen)
2. Prüfe alle Farbkombinationen mit https://coolors.co/contrast-checker/112a46-acc8e5, oder WebAIM Contrast Checker (oder einem anderen Kontraste-Tool deiner Wahl)
3. Mindestkontrast: 4.5:1 für normalen Text, 3:1 für große Überschriften - wenn du es ganz genau wissen willst:

Schritt 6: Formulare barrierefrei gestalten

Wichtige Elemente:

• Jedes Eingabefeld braucht ein eindeutiges Label (quasi einen Titel für das Feld)
• Pflichtfelder solltest du deutlich kennzeichnen (üblich ist ein *)
• Fehlermeldungen sollten klar formuliert sein, damit man genau weiß, was nicht passt (z.B. Postleitzahl darf nur aus 5 Ziffern bestehen)

Schritt 7: Videos barrierefrei einbinden

• Untertitel für alle Videos
• Audio-Beschreibung für wichtige visuelle Inhalte
• Steuerelemente mit Tastatur bedienbar

Wenn du Videos aus Youtube einbettest, würdest du es über diesen angepassten Code machen können:

html<!-- Barrierefrei eingebettetes YouTube-Video -->
<div class="video-container" role="region" aria-label="Video: Website-Optimierung Tipps">
<iframe
src="https://www.youtube.com/embed/VIDEO-ID?cc_load_policy=1"
title="Website-Optimierung: 10 wichtige Tipps"
allowfullscreen>
</iframe>
</div>

Schritt 8: Menü barrierefrei gestalten

Damit dein Hauptmenü barierefrei wird, prüfe einmal die folgenden Punkte:

Skip-Links einbauen
Ermögliche deinen Besucher*innen, direkt zum Hauptinhalt zu springen – ohne sich erst durch zig Menüpunkte oder Header-Elemente tabben zu müssen. Das spart Nerven und Zeit. Beispiel: Ein unsichtbarer Link ganz oben auf der Seite, der beim Fokus sichtbar wird und direkt zum Inhalt führt. Klingt unscheinbar, macht aber einen riesigen Unterschied.

Tastaturfreundlich statt Maus-zentriert
Dein Menü sollte sich komplett mit der Tastatur bedienen lassen - also per Tab-Taste durchklickbar, Untermenüs sollten sich mit Enter öffnen lassen und nicht nur beim Hovern mit der Maus auftauchen. Probiere es selbst mal aus: Hände weg von der Maus und einmal durch die Navigation tabben. Läuft’s flüssig?

Aktuellen Menüpunkt markieren
Ein kleiner, aber wichtiger Helfer für die Orientierung: Markiere den aktuell aktiven Menüpunkt visuell - z. B. durch eine andere Farbe oder Unterstreichung. So wissen alle sofort, wo sie sich auf deiner Website gerade befinden.

Breadcrumb-Navigation ergänzen
Besonders auf größeren Websites lohnt sich eine Brotkrumen-Navigation (auch Breadcrumbs genannt). Sie zeigt übersichtlich den Pfad zur aktuellen Seite an - z. B. Startseite > Blog > SEO-Tipps. Du kennst es vielleicht aus Online-Shops, aber oft macht dies auch auf Websites mit viel Inhalt Sinn. Es hilft nicht nur Nutzer*innen mit Screenreader, sondern auch allen anderen, die sich sonst schnell verirren.

Schritt 9: Barrierefreie Schriftarten für Websites: Das solltest du bei der Schriftwahl beachten

Barrierefreiheit endet nicht beim Überschriftenlevel oder den Kontrasten - auch die gewählte Schriftart beeinflusst ganz erheblich, wie gut deine Inhalte wahrgenommen werden.

Denn: Eine schöne Schrift bringt nichts, wenn sie niemand entziffern kann.

Hier sind ein paar einfache, aber oft übersehene Regeln, mit denen du die Lesbarkeit deiner Website sofort verbesserst:

Diese Schriftarten solltest du auf barrierefreien Websites vermeiden

• Schnörkelschriften und verspielte Fonts (z. B. für Zitate oder Überschriften) wirken zwar hübsch, sind aber oft schwer lesbar, besonders für Menschen mit Legasthenie, Sehschwäche oder Konzentrationsproblemen.
  → Wenn überhaupt, dann bitte sparsam und nur dekorativ als Akzent verwenden.
• Zentrierter Fließtext über mehrere Zeilen:
  Klingt unwichtig, aber erschwert beim Lesen enorm die Orientierung – gerade bei längeren Absätzen. Der Blick muss bei jeder neuen Zeile erst wieder den Anfang suchen.
  → Besser: Linksbündig – das ist übrigens auch auf Mobilgeräten deutlich angenehmer. Netter Nebeneffekt: Verringert auch die Absprungrate deiner Besucher*innen, weil sie deinen Text besser und einfacher aufnehmen können!
• Längere Texte in Großbuchstaben (VERSALIEN):
  Wir erkennen Wörter nicht nur Buchstabe für Buchstabe, sondern als Form - Großbuchstaben zerstören diese Form und sollten daher auch nicht für längere Texte verwendet werden.
  → Verwende Großbuchstaben nur für ganz kurze Wörter oder Buttons.
• Zu dünne, zu kleine oder extrem gestaltete Schriftarten:
  Gerade bei kleiner Darstellung oder schlechtem Kontrast gehen feine Linien unter. Achte also darauf, dass insbesondere feine / dünne Schriftarten ausreichend groß dargestellt werden, damit sie lesbar bleiben.
  → Wichtig für Mobilansicht & ältere Bildschirme!

Empfohlene Schriftarten für barrierefreie Websites: 19 gut lesbare Fonts

Wenn du auf Nummer sicher gehen willst, nutze gut ausgebaute, serifenlose Schriften, die speziell für Bildschirmdarstellung optimiert wurden.
Hier findest du eine Auswahl von 19 Schriftarten, die sich für barrierefreie Websites besonders eignen:

Google Fonts – zuverlässig & DSGVO-konform einbindbar (lokal, wie ich das in diesem Blogartikel zeige)

• Poppins – klar, modern, vielseitig
• Open Sans – Klassiker mit sehr guter Lesbarkeit
• Inter – speziell für Interfaces entwickelt
• Roboto – technisch & vertraut
• Lato – weich und neutral
• Source Sans Pro – neutraler Allrounder
• Nunito / Nunito Sans – freundlich, leicht rund
• Work Sans – schlicht und effektiv
• IBM Plex Sans – modern mit Charakter
• Mulish – leicht und vielseitig einsetzbar

Weitere barrierefreundliche Schriften:

• Arial – langweilig, aber funktional
• Verdana – für Bildschirmdarstellung entwickelt
• Tahoma – sehr gute Abstände, ideal für kleinere Schrift
• Trebuchet MS – webfreundlich & robust
• Atkinson Hyperlegible – speziell für Sehbehinderte entwickelt
• Fira Sans – technisch, gut bei kleinen Schriftgrößen
• Segoe UI – von Microsoft für gute Lesbarkeit optimiert
• Quicksand – eher weich, aber gut strukturiert
• Helvetica Neue – gut lesbar, aber nur mit sauberem Einbau empfehlenswert

Mehr zur Auswahl findest du in meinem Blogartikel "Schriftarten für deine Website wählen".

Divi barrierefrei gestalten – Spezielle Tipps

Divi ist nicht von Haus aus barrierefrei, kann aber mit einigen Anpassungen deutlich verbessert werden:

Divi-spezifische Probleme und Lösungen

Problem 1: Fehlende Überschriften-Struktur

• Lösung: Nutze die Text-Module und stelle die Überschriften manuell ein
• Markiere dafür eine Zeile und wähle H1, H2, H3 etc. bewusst aus - passend zur Inhaltsstruktur

Tipp: Auf jeder Seite sollte es nur eine H1 geben - das ist die Hauptüberschrift. Danach folgt logisch die H2 (z. B. für einzelne Abschnitte) und dann H3 (z. B. für Unterpunkte).

Problem 2: Fehlende Alt-Texte bei Hintergrundbildern

• Lösung: Nutze das Bild-Modul statt Hintergrundbilder für wichtige Inhalte

Problem 3: Slider sind schwierig für Screenreader

Wenn es irgendwie möglich ist, solltest du auf Slider verzichten (das gilt nicht nur für das Divi-Theme). Oft lassen sie sich nicht per Tastatur bedienen, die Inhalte darin werden nicht korrekt vorgelesen und die Bewegung lenkt ab oder ist nicht steuerbar.

Wenn du unbedingt Slider nutzen möchtest, dann ...

• Max. 3–5 Slides – und diese kurz & aussagekräftig
• Keine Autoplay-Funktion aktivieren, wenn der Slider nicht manuell pausiert werden kann
  das geht oft direkt im Inhaltsbereich unter "Slider -> Autoplay": NO statt YES 🙂

• Pfeile & Punkte gut sichtbar machen, damit Nutzer*innen sehen, dass hier etwas gesteuert werden kann

Wie genau das im Detail umgesetzt wird, lernst du auch in meinem Divi Powerkurs.

Hilfreiche Plugins und Tools

WordPress-Plugins für Barrierefreiheit

1. WP Accessibility

• Kostenlos
• Skip-Links einfügen: Besucher*innen können per Tastatur direkt zum Hauptinhalt springen, ohne durch Header und Menü zu tabben.
• Formulare verbessern: Das Plugin ergänzt fehlende Beschriftungen (Labels) und sorgt so dafür, dass Screenreader die Felder korrekt vorlesen.
• Fehlende Alt-Texte kennzeichnen - damit du keinen vergisst.
• Barrierefreiheits-Hinweise anzeigen - z. B. zu Kontrasten oder Strukturelementen.

2. One Click Accessibility - fügt eine Toolbar zu deiner Website hinzu!

Mit dieser Toolbar können Besucher*innen selbst:

• Schriftgröße ändern - Ideal für Menschen mit eingeschränkter Sehkraft.
• Kontrastmodus aktivieren - Z. B. hoher Kontrast oder dunkler Hintergrund.
• Screenreader-Modus einschalten - Anpassungen, die das Lesen per Screenreader erleichtern.
• Unterstreichung aller Links - Für bessere Sichtbarkeit von klickbaren Elementen.
• Benutzerdefinierte Einstellungen für Farben und Sichtbarkeit

3. AccessibleWP – Accessibility Toolbar

1. Kostenlos
2. Tastaturnavigation: Ermöglicht die Navigation mit der Tastatur.
3. Animationen deaktivieren: Schaltet CSS3-Animationen aus.
4. Kontrastmodus: Bietet Optionen für dunklen Kontrast und ermöglicht die Auswahl benutzerdefinierter Farben.
5. Schriftgröße ändern: Erlaubt das Vergrößern oder Verkleinern der Schriftgröße.
6. Lesbare Schriftart: Wechselt zu einer besser lesbaren Schriftart.
7. Titel markieren: Hebt Überschriften hervor.

Die Plugins werde ich in Kürze testen und dann hier im Detail berichten! Schreib mir gern in die Kommentare, ob du eins der Plugins - oder ein anderes - schon kennst und nutzt und empfehlen kannst.

Häufige Fehler bei der Barrierefreiheit vermeiden

Fehler 1: Nur auf automatisierte Tests vertrauen

Problem: Tools wie WAVE erfassen oft nur 30% aller Barrieren.

Lösung: Kombiniere automatisierte Tests mit manuellen Tests:

• Tastatur-Navigation testen
• Screenreader verwenden
• Verschiedene Browser testen

Fehler 2: Alt-Texte für dekorative Bilder

Problem: Dekorative Bilder sollten leere Alt-Texte haben.

Beispiel:

html<!-- Dekoratives Bild -->
<img src="deko-linie.jpg" alt="" role="presentation">

<!-- Inhaltliches Bild -->
<img src="team-foto.jpg" alt="Unser fünfköpfiges Team bei der Arbeit">

Fehler 3: Farbe als einziges Unterscheidungsmerkmal beim Link

Problem: Links nur durch Farbe zu kennzeichnen reicht nicht. Sie sollten unterstrichen sein, oder du arbeitest alternativ mit Icons wie z.B. 🔗, die du vor oder nach den Linktext stellst. Den folgenden CSS Code könntest du für eine Unterstreichung in deinem Theme Customizer bei "Zusätzliches CSS" eintragen und deine Farbe entsprechend anpassen.

Codebeispiele:

css/* Nur Links im Fließtext unterstreichen */
p a,
li a {
  color: #005fcc;
  text-decoration: underline;
}

Das eignet sich, wenn du z. B. Links im Footer, Header oder Navigationsmenü ausnehmen willst.

css/* Alle Links unterstreichen, aber NICHT innerhalb von Buttons oder mit Bildern */
a {
  color: #005fcc;
  text-decoration: underline;
}

/* Ausnahmen definieren */
a.et_pb_button,         /* Divi-Buttons */
a.button,               /* generische Button-Klassen */
a img,                  /* verlinkte Bilder */
.et_pb_button a,        /* Buttons innerhalb von anderen Elementen */
.wp-block-button__link, /* Gutenberg-Buttons */
a[class*="button"]      /* Buttons mit „button“ im Klassennamen */
{
  text-decoration: none !important;
}

Diese Variante funktioniert gut mit Divi, Gutenberg und vielen Themes – du kannst sie bei Bedarf noch um eigene Button-Klassen erweitern.

Fehler 4: Unverständliche Fehlermeldungen

Problem: "Fehler in Feld 3" sagt nichts aus.

Lösung: Konkrete, hilfreiche Fehlermeldungen:

html<!-- Schlecht -->
<div class="error">Ungültige Eingabe</div>

<!-- Gut -->
<div class="error" role="alert">
    Die E-Mail-Adresse muss ein @-Zeichen enthalten.
    Beispiel: name@domain.de
</div>

Video: Barrierefreie Website ab 2025: Wer ist betroffen & 5 einfache Maßnahmen

Fazit: Barrierefreiheit ist ein Prozess

Barrierefreiheit ist kein einmaliges Projekt, sondern ein kontinuierlicher Prozess. Starte mit den wichtigsten Punkten:

1. Prüfe deine rechtliche Verpflichtung mit den Kriterien oben
2. Teste deine aktuelle Website mit den vorgestellten Tools und manuellen Tests
3. Behebe die wichtigsten Probleme zuerst (Überschriften, Alt-Texte, Kontraste)
4. Implementiere systematisch weitere Verbesserungen
5. Teste regelmäßig mit echten Nutzer*innen

Die Investition in Barrierefreiheit lohnt sich: Du erreichst eine größere Zielgruppe, verbesserst dein SEO-Ranking und zeigst gesellschaftliche Verantwortung 💪. Außerdem ist eine barrierefreie Website oft auch für alle anderen Nutzer*innen benutzerfreundlicher!

Brauchst du Hilfe bei der Umsetzung? Barrierefreiheit kann am Anfang überfordernd wirken. Gerne unterstütze ich dich in meiner Technik & Strategie-Session dabei, deine WordPress-Website mit Divi barrierefrei zu gestalten – von der ersten Analyse bis zur vollständigen Umsetzung.

Schreib mir gerne in die Kommentare, welche Fragen du zur Barrierefreiheit hast oder welche Tools du bereits verwendest!

Microsoft Clarity ist ein kostenloses Analysetool, mit dem du das Verhalten deiner Website-Besucher*innen besser verstehen kannst. Es bietet Heatmaps, Session Recordings (also Aufzeichnungen der Sitzung von Besucher*innen) und detaillierte Analysen, um Schwachstellen auf deiner Website zu identifizieren und die Nutzererfahrung zu verbessern.

Microsoft Clarity wurde entwickelt, um eine Alternative zu kostenpflichtigen Analyse-Tools zu bieten. Es kombiniert leistungsstarke Funktionen mit einer intuitiven Benutzeroberfläche, sodass auch Anfänger ohne technisches Vorwissen sofort loslegen können. Während Google Analytics vor allem auf Daten, Zahlen und Statistiken fokussiert ist, ermöglicht Clarity eine visuelle Analyse des Nutzerverhaltens.

Warum solltest du Microsoft Clarity nutzen?

Kostenlos & unbegrenzt

Im Gegensatz zu vielen anderen Tools gibt es keine Einschränkungen bei der Menge der Datenerfassung. Selbst für stark besuchte Websites mit viel Traffic fallen keine Kosten an.

Einfache Integration

Microsoft Clarity lässt sich mit wenigen Klicks in WordPress, Shopify und andere Plattformen einbinden. Auch mit Google Analytics kann es verknüpft werden, um eine noch tiefere Analyse zu ermöglichen.

Heatmaps & Session Recordings

• Heatmaps: Zeigen, wo Nutzer*innen klicken, scrollen und interagieren.
• Session Recordings: Zeichnen echte Besuche auf, sodass du das Verhalten jedes einzelnen Besuchers nachvollziehen kannst.

DSGVO-konform & datenschutzfreundlich

MS Clarity anonymisiert Nutzerdaten automatisch und speichert keine sensiblen Informationen. Trotzdem musst du den MS Clarity Cookie in dein Cookie-Banner einfügen und das Tool in die Datenschutzerklärung mit aufnehmen.

Die wichtigsten Funktionen von Microsoft Clarity

Heatmaps: Nutzerverhalten visuell analysieren

Heatmaps helfen dir zu verstehen, wie Besucher mit deiner Website interagieren. Es gibt zwei Hauptarten:

• Click-Heatmaps: Zeigen, wo Nutzer*innen am häufigsten klicken, sodass du optimieren kannst, ob wichtige Elemente richtig platziert sind.
• Scroll-Heatmaps: Analysieren, wie weit Nutzer*innen nach unten scrollen. Das ist besonders wichtig für lange Landingpages und Blogartikel.

Session Recordings: Besucher in Echtzeit beobachten

Mit den Sitzungsaufzeichnungen - meiner Lieblingsfunktion - kannst du genau sehen, wie Besucher*innen sich auf deiner Website verhalten. Es wird also konkret eine Aufzeichnung gemacht, wohin sie scrollen, was sie anklicken, wie lange sie wo bleiben - total spooky, aber auch super cool!

Damit kannst du nicht nur sehen, welche Inhalte beliebt und nützlich sind, sondern auch nachvollziehen, welche Probleme Nutzer*innen auf deiner Website haben:

• Werden wichtige Buttons übersehen?
• Gibt es technische Fehler, die zum Absprung führen?
• Wo brechen Nutzer*innen am häufigsten ab?

Links unten bei den Sitzungen gibt es übrigens immer die Möglichkeit, Sitzungserkenntnisse per KI generieren zu lassen (siehe Screenshot), die oft sehr hilfreich sind.

Praxis-Tipp:

Betrachte mindestens 10–15 Aufzeichnungen pro Tag, um Muster zu erkennen. Falls viele Nutzer*innen an derselben Stelle abbrechen, solltest du diese Stelle gezielt optimieren und dann erneut prüfen, ob sich das Verhalten verändert hat.

3. Insights & Filter

MS Clarity bietet verschiedene Filteroptionen, um spezifische Nutzergruppen gezielt zu analysieren. Mögliche Filter sind:

• Gerät (Desktop, Mobile, Tablet)
• Betriebssystem & Browser
• Sitzungsdauer & Interaktionsgrad
• Fehlermeldungen und JavaScript-Probleme

Besonders spannend: MS Clarity erkennt automatisch sogenannte "Wut-Klicks" – also Situationen, in denen Nutzer wiederholt auf dasselbe Element klicken, weil sie eine Funktion erwarten, die nicht vorhanden ist (Wobei ich sowas auch oft einfach mal so mache, z.B. damit der Bildschirm sich ohne Ladegerät nicht dunkel schaltet, oder einfach aus Gewohnheit vor dem Weiterscrollen - ich bin nicht wütend!).

Microsoft Clarity in WordPress integrieren

Schritt 1: Microsoft Clarity Konto erstellen

Besuche clarity.microsoft.com und melde dich mit deinem Microsoft-Konto an (oder erstelle eins, wenn du noch keins hast).

Schritt 2: Tracking-Code DSGVO-konform hinzufügen

• Füge den Tracking-Code in dein Cookie-Banner (z.B. Borlabs) ein, um den Besucher*innen die Möglichkeit zu geben, ein Tracking anzunehmen oder abzulehnen
• Aktualisiere deine Datenschutzerklärung (z.B. mit e-recht24.de), um einen Abschnitt zu Microsoft Clarity mit aufzunehmen

Schritt 3: Erste Analysen durchführen

Sobald MS Clarity aktiv ist, kannst du - je nachdem, wie viele Besucher*innen du auf deiner Website hast - nach wenigen Stunden oder Tagen die ersten Heatmaps und Session Recordings auswerten.

Microsoft Clarity vs. Google Analytics: Was ist besser?

Wann solltest du welches Tool nutzen?

• Nutze Microsoft Clarity, wenn du insbesondere das Nutzerverhalten auf deiner Website verstehen möchtest.
• Nutze Google Analytics, wenn du detaillierte Traffic-Daten und Conversion-Tracking brauchst.

Fazit: Warum Microsoft Clarity ein Must-Have für deine Website ist

Microsoft Clarity ist eine wertvolle Ergänzung zu klassischen Analyse-Tools. Es hilft dir, das Verhalten deiner Website-Besucher*innen besser zu verstehen, Schwachstellen zu identifizieren und die Nutzererfahrung zu optimieren – und das vollkommen kostenlos.

Microsoft Clarity hilft dir dabei,

• Heatmaps & Session Recordings zu analysieren
• Fehler auf deiner Website zu entdecken
• Die Conversion-Rate zu steigern
• Deine Inhalte gezielt zu optimieren

Wenn du das Ganze gemeinsam umsetzen möchtest: In "Rock your Website" zeige ich dir nicht nur, wie du Microsoft Clarity nutzen kannst, sondern auch generell, mit welchen Schritten du deine Website bei Google ganz nach vorne bringst! Trag dich gern auf die unverbindliche Warteliste ein, um den nächsten Start nicht zu verpassen.

Doch Vorsicht: Auch mit automatischen Updates musst du sicherstellen, dass regelmäßig ein Backup deiner Website erstellt wird. Außerdem solltest du händisch prüfen – z. B. alle 1-2 Wochen – ob alle Funktionen auf deiner Website noch funktionieren. Gerade bei größeren Websites, die z. B. auch einen Shop oder eine Kursplattform bereitstellen, würde ich auf die automatischen Updates verzichten. Zu groß wäre das Risiko, dass ein Problem nach einem Update auftritt, welches dann für einige Tage unentdeckt bleibt.