Wie ich meine Bewerbungsseite mit Claude Code gebaut habe
Das Projekt aus meinem SEO-Praktikum ist vertraulich, deshalb zeige ich als Arbeitsprobe diese Website: meine Bewerbungsseite für eine Stelle in SEO, GEO und Content. So habe ich die Arbeit von Claude Code gesteuert:
- Regeln und Grenzen festgelegt, Quellen für Inhalte und Recherche vorgegeben
- eigene Ideen eingebracht und mehrere Varianten erstellen lassen
- Ergebnisse geprüft, bearbeitet und mit neuen Ideen weiterentwickelt
- ChatGPT als zweite KI und die KI-Prüfhelfer von Claude Code zusätzlich zu meiner eigenen Prüfung eingesetzt
Methodik
Vorgehen
Schritt 1
Planen
Zuerst habe ich die Seitenstruktur und die Inhalte geplant. Erfinden durfte Claude Code nichts: Wenn etwas fehlte, hat es mich gefragt. Zitate aus dem Zeugnis stehen wörtlich auf der Seite.
Schritt 2
Recherchieren
Ich habe mir die Startseiten von rund 50 Unternehmen angesehen, bei denen ich gern arbeiten würde: den ersten Bildschirm, Schriften, Farben und den Aufbau der Seiten. Daraus sind die Ideen für diese Website entstanden.
Schritt 3
Prototyp bauen
Beim Bau des Prototyps in HTML und CSS habe ich Claude Code angeleitet.
Schritt 4
Prüfen
Jedes Ergebnis habe ich selbst geprüft. Zusätzlich haben KI-Prüfhelfer von Claude Code die Seite nach jeder größeren Änderung geprüft: die Texte, SEO und GEO, die Nutzerführung, die Technik auf Desktop und Handy und die Barrierefreiheit.
Schritt 5
Nach WordPress übertragen
Danach haben wir die Seiten nach WordPress übertragen und dort getestet. Neue Änderungen probiere ich zuerst im Prototyp aus.
Formulierungen
Texte im Vergleich
Drei Beispiele, wie ich Inhalte für Suchmaschinen, KI-Systeme und Besucher verbessert habe.
SEO
Konkrete Angaben statt allgemeiner Wörter
Vorher
„Vor Kurzem habe ich meinen Quereinstieg in die Bereiche SEO, GEO und Content-Optimierung begonnen.“
Nachher
„Ich bin Alisa aus Passau und beschäftige mich seit 2026 mit SEO, GEO und Webinhalten.“
„Vor Kurzem“ stimmt nach ein paar Monaten nicht mehr und lässt sich nicht einordnen, „seit 2026“ schon.
GEO
Inhalte lesbar machen, die sonst nur ein Skript zeigt
Vorher
Die Antworten und Bewertungen des Match-Checks erschienen erst nach einem Klick, ein Skript erzeugte sie.
Nachher
Alle Fragen, Antworten und Begründungen stehen zusätzlich als Tabelle unter „Alle Antworten ansehen“ im Seitentext.
Viele KI-Werkzeuge führen kein JavaScript aus. Was nur ein Skript anzeigt, sehen sie nicht. In der Tabelle können Suchmaschinen und KI-Systeme den ganzen Check lesen, und Menschen ohne JavaScript auch.
CRO
Ein klarer, kurzer Einstieg in den Match-Check
Vorher
Knopf „Passen wir zusammen?“, sechs Fragen
Nachher
Knopf „Zum kurzen Match-Check“, drei Fragen statt sechs, immer nur eine Frage auf einmal mit Fortschrittsbalken („Frage 1 von 3“) und der Satz „Drei Fragen, etwa eine Minute. Danach weißt du, ob ich zu eurer Stelle passe.“
Bei „Passen wir zusammen?“ war nicht klar, ob man klickt, um es herauszufinden, oder erst, wenn man sich schon entschieden hat. Wer weiß, wie lange etwas dauert, fängt eher an. Deshalb nennt die Seite die Zahl der Fragen und die Dauer, und der Balken zeigt, wie weit man ist.
Erscheinungsbild
Gestaltung im Vergleich
Von jedem Baustein habe ich mehrere Fassungen nach klaren Anweisungen erstellen lassen, danach habe ich eine Version ausgewählt und nach meinen Wünschen verbessert.
Logo
Die ersten Entwürfe von Claude Code wirkten auf mich amateurhaft, auch mit feineren Linien und einer lockereren Form. Deshalb beruht das heutige Logo auf einer Vorlage aus ChatGPT, die Claude Code in eine Vektorgrafik umgewandelt hat.
Schriftzug
Orange in den Buchstaben war schwer zu lesen, egal ob halb, nur im Vornamen oder mit gefiederter Kante. Deshalb steht jetzt „ALISA“ in Weiß und „STRUGAC“ in einem hellen Pfirsichton, derselben Farbe wie die Markierungen im Text. Ohne dunkle Kontur wirkt der Schriftzug ruhiger und passt zur weißen Schrift im Menü.
Erster Bildschirm
Nach mehreren Entwürfen habe ich mich für den hellen Hintergrund mit meinem Foto entschieden. Die Karte mit einem Zitat aus dem Praktikumszeugnis kam später dazu. Nach einer Prüfung habe ich die Farben beruhigt, weil zu viele orange Akzente gleichzeitig zu sehen waren.
Sichtbarkeit
SEO und GEO auf dieser Website
Diese Website steht absichtlich auf „noindex“. Ich teile sie nur per Link mit Unternehmen, bei denen ich mich bewerbe, deshalb soll sie nicht in Google erscheinen. Vorbereitet ist sie trotzdem so, als sollte sie gefunden werden.
Inhalt
- Aussagen mit wörtlichen Zitaten aus dem Praktikumszeugnis und einer Referenz mit Namen belegt
- Angaben zu Werkzeugen und Arbeitgebern ohne Widersprüche, damit Suchmaschinen und KI-Systeme sich auf die Fakten verlassen können
- ein Stand-Datum, weil Angaben wie „ab sofort“ sonst nicht einzuordnen sind
- alle Antworten des Match-Checks zusätzlich als Text auf der Seite, damit auch KI-Werkzeuge ohne JavaScript sie lesen können
- Häufige Fragen so formuliert, wie man sie in eine Suchmaschine oder einen KI-Chat eintippen würde, mit kurzen Antworten, die gleich mit dem Wichtigsten beginnen
Technik
- Title und Meta-Description für die Suchergebnisse
- je Seite eine Hauptüberschrift und eine klare Gliederung der Abschnitte
- strukturierte Daten (schema.org „Person“) mit Name, Ort, Sprachen und Themen, damit Suchmaschinen und KI-Systeme die Angaben eindeutig zuordnen können
- Beschreibungen für Bilder, Bedienung per Tastatur und geprüfte Kontraste
- für kurze Ladezeiten die Schrift auf dem eigenen Server und Bilder im WebP-Format
Werkzeuge
Womit ich gearbeitet habe
Claude Code
Texte, Prototyp, Prüfrunden und die Übertragung nach WordPress
ChatGPT
Zweite Meinung zu Entwürfen und Texten, Vorlage für das Logo
WordPress
Theme Twenty Twenty-Five mit eigenem Child-Theme
Rank Math
SEO-Plugin in WordPress
Novamira
Plugin, über das Claude Code auf WordPress zugreift
lima-city
Kostenloses Hosting
Nächster Schritt
Passe ich zu eurer Stelle?
Der Match-Check zeigt dir in etwa einer Minute, wo ich zu euch passe und wo nicht. Oder schreib mir direkt.