So erstellst du mit KI eine optimierte, konversionsstarke Website für ein lokales Unternehmen

Das kennen wir alle, die Websites erstellen.

Wir sprechen mit einem potenziellen Kunden, der ein lokales Unternehmen betreibt – eines, bei dem Kunden ins Büro kommen oder das Dienstleistungen in einem begrenzten Umkreis anbietet – und dann heißt es: „Nur eine ganz einfache Website, damit man mich anrufen oder mir bei WhatsApp schreiben kann.“

Ganz einfach. Na klar.

Natürlich sind ein Onlineshop mit Tausenden Produkten oder ein SaaS viel komplexer. Aber wenn ein Unternehmen über seine Website Kunden gewinnen will (und dabei meist wenig oder gar nichts für Werbung ausgeben möchte), kann ich dir versichern: So einfach ist das nicht.

Denn bevor du überhaupt loslegst, musst du verstehen, was das Unternehmen anbietet, herausfinden, wie Kunden danach suchen, entscheiden, welche Seiten nötig sind, Texte schreiben, Bilder auswählen, Formulare erstellen, Leads messen und prüfen, ob alles auf dem Smartphone funktioniert.

Willst du die Website außerdem in mehreren Sprachen veröffentlichen, vervielfacht sich die Zahl der Entscheidungen.

Ich habe schon einige davon erstellt. Und alle, alle, wirklich ausnahmslos alle haben ihre Ziele übertroffen und mehr Leads generiert als ursprünglich vereinbart. Ich weiß also, wovon ich spreche.

Bisher hatte ich dafür ein System, das auch das unverzichtbare Marketing umfasste und fast immer mit WordPress umgesetzt wurde – aus offensichtlichen Gründen.

Doch jetzt ist KI da. Sie erleichtert Dinge, die früher sehr lange dauerten, kaum zu bewältigen waren oder sich schlicht nicht lohnten. Jetzt lohnt es sich. Deshalb habe ich meine neueste Website, die für das Transportunternehmen Rondabus, ohne CMS erstellt, und zwar mit einem Entwicklungsframework namens Astro, das ich vorher nicht kannte. Aber als ich ChatGPT erklärte, was ich wollte, empfahl es mir genau dieses Framework.

Und ich glaube, das war genau richtig. Denn es setzt auf etwas, das ich schon lange denke: Für Unternehmenswebsites, die monatelang kaum verändert werden und nicht zur regelmäßigen Veröffentlichung neuer Inhalte dienen, bietet statisches HTML drei klare Vorteile:

1. Schneller.
2. Sicherer.
3. Kein kostenpflichtiges Hosting erforderlich.

Auf den dritten Punkt gehe ich später beim Technologie-Stack genauer ein, falls er dich überrascht hat.

Eine Unternehmenswebsite mit allem, was du zur Leadgenerierung brauchst (Formular, E-Mail, Telefon und WhatsApp), für lediglich etwa 3 bis 10 € jährlich für die Domain – das klingt ziemlich gut.

Und das ist es auch.

In dieser Anleitung zeige ich dir Schritt für Schritt, wie du das selbst umsetzen kannst. Neben einer Domain brauchst du nur ein kostenpflichtiges ChatGPT-Konto für Analyse, Strukturierung, Schreiben, Übersetzen und Überprüfen, während Codex am Code arbeitet..

Natürlich kannst du auch andere Tools verwenden. Das sage ich vor allem für den Fall, dass du auch für Claude bezahlst: Die Kombination aus ChatGPT als Analyst und Claude als Entwickler ist sogar noch besser.

Da die Anforderungen geklärt sind, legen wir Schritt für Schritt los.

1. Verstehe das Projekt und lege vor dem Start alles fest

Zuerst muss dir der Kunde erklären:

1. Worum es bei seinem Unternehmen geht.
2. Welche Dienstleistungen es anbietet.
3. An wen es sich richtet.
4. In welchen Gebieten es tatsächlich tätig ist.
5. Wer seine Wettbewerber sind.
6. Was es von ihnen unterscheidet.
7. Welche Nachweise es vorlegen kann.
8. Welche Aktionen Besucher auf der Website ausführen sollen. Also: Wie soll der digitale Kanal dem Unternehmen tatsächlich Geschäft bringen?

Zusammen mit diesen Informationen legt ihr (du, der Kunde oder ihr beide) Folgendes fest:

• Die Domain.
• Kontaktkanäle (Telefon, WhatsApp, E-Mail, Formular …)
• Geplante Sprachen.
• Erstellung der Texte.
• Fotos oder Bilder.
• Ob regelmäßig neue Inhalte entstehen sollen.

All das braucht sowohl die KI als auch du.

Hier unterscheiden wir drei Arten von Entscheidungen:

1. Die Entscheidungen zum Geschäft bestimmen, was an wen verkauft wird.
2. Die Entscheidungen zu Inhalten und Design bestimmen, was erzählt und wie es präsentiert wird.
3. Die technischen Entscheidungen bestimmen, wie die Website umgesetzt, veröffentlicht und gepflegt wird.

Wenn all das feststeht, halte diese Entscheidungen in einem Briefing und einem Anforderungsdokument (PRD) fest, bevor du mit dem Bau der Seiten beginnst. Wenn wir diese Dokumente ChatGPT geben, müssen wir nicht in jedem Gespräch erneut erklären, welche Domain richtig ist, welche Seiten freigegeben wurden oder woher Telefonnummer und E-Mail-Adresse stammen.

Die Technologie ist zunächst egal. Diese Methode funktioniert mit WordPress, Astro oder jedem anderen System: Lege einen eindeutigen Ort für Entscheidungen fest und eine separate Quelle für Unternehmensdaten.

Ergebnis

Ein kurzes Briefing und ein vollständiges PRD, einschließlich Freigaben, offener Entscheidungen, Konversionsziele, verfügbarer Materialien und Zuständigkeiten.

Ändert sich eine Entscheidung, aktualisiere das PRD selbst oder bitte Codex, das für dich zu übernehmen.

2. Erstelle Mockups, um das Design festzulegen

Bevor du Codex irgendetwas programmieren lässt, solltest du zwei oder drei Entwürfe erstellen, um verschiedene Ansätze vergleichen zu können. Es müssen keine drei fertigen Websites sein. Meist reichen die Startseite oder eine Dienstleistungsseite pro Entwurf, um einen Eindruck vom gesamten Look-and-feel zu bekommen.

Wichtig ist allerdings, auch die mobile Version zu zeigen, damit es keine Überraschungen gibt.

Das ist das Erste, worum wir Codex bitten.

Als Ausgangspunkt entwickeln wir drei Konzepte für eine Dienstleistungsseite. Sie können hell oder dunkel sein und sich in Farben und Stil unterscheiden. Was auch immer deiner Meinung nach zum Projekt passt – aber lass drei erstellen. Zwei sind zu wenig, vier oder fünf werden langsam zu viel.

Wenn die Alternativen nebeneinanderliegen, prüfe, ob die nötigen Module enthalten sind, die Texte stimmen (deine eigenen oder die von ChatGPT erzeugten), Telefonnummer oder WhatsApp korrekt angezeigt werden, das Formular nur notwendige Angaben verlangt, die Bilder zur Dienstleistung passen usw. Kurz: ob die grundlegenden Voraussetzungen für CRO erfüllt werden..

Sobald du die erforderlichen Anpassungen vorgenommen hast, kannst du dem Kunden die Entwürfe zeigen, seine Meinung einholen und erklären, welchen du selbst für den besten hältst. Achte aber darauf, dass das Gezeigte dem endgültigen Design möglichst nahekommt, statt nur eine grobe Annäherung zu sein. Der Kunde muss bei der Webentwicklung schließlich nicht denselben Abstraktionsgrad gewohnt sein wie du.

Ergebnis

Mockup mit freigegebener visueller Richtung, Desktop- und Mobilversionen, einer Liste wiederkehrender Elemente (Header, Footer, Icons, Hero-Bereich mit Formular …) und den Details, die bei der Umsetzung eingehalten werden müssen.

3. Führe eine pragmatische Marktanalyse durch

Du brauchst keine hundertseitige Studie, um die erste Struktur einer lokalen Website festzulegen. Du brauchst nur genügend Daten, um die Seiten nicht nach Bauchgefühl auszuwählen. Weder nach deinem noch – schlimmer noch – nach dem des Kunden. Die Analyse besteht aus zwei Teilen: Nachfrage und Wettbewerb..

Nachfrageanalyse: Was, wie viel und wo suchen Nutzer?

Zuerst musst du herausfinden, ob es für das Angebot deines Kunden bereits Nachfrage gibt oder ob du diese erst schaffen musst. Vor allem bei lokalen Unternehmen ist entscheidend, wie groß die Nachfrage im Einzugsgebiet ist..

Dazu findest du hier einen ausführlichen Schritt-für-Schritt-Artikel zur Nachfrageanalyse im E-Commerce, den ich im Folgenden für eine lokale Unternehmenswebsite zusammenfasse und anpasse.

Erstelle zunächst eine Dienstleistungsliste mit Begriffen, die ein Kunde verwenden würde. Ergänze Varianten, Bedürfnisse und geografische Zusätze. Ein Beispiel aus meinem Projekt:

• Busvermietung.
• Busvermietung Ronda.
• Hochzeitstransport.
• Hochzeitsbus Ronda.
• …

Verständlich, oder?

Prüfe anschließend, welche Suchanfragen eine Kauf- oder Buchungsabsicht erkennen lassen, welche nach Informationen suchen und welche Dienstleistungen betreffen, die sich eine Seite teilen sollten. So beschreiben „Bus für Hochzeiten mieten“, „Reisebus für Hochzeitsgäste“ und „Transport für eine Feier“ ein ähnliches Bedürfnis. Dafür brauchst du nicht drei Seiten, nur weil es drei Formulierungen gibt. „Schülerbeförderung“ und „Flughafentransfer“ richten sich dagegen an unterschiedliche Zielgruppen mit anderen Bedingungen und Fragen und verdienen eigene Seiten.

In dieser ersten Phase, wenn du die Website-Struktur festlegst, konzentriere dich ausschließlich auf Suchanfragen mit kommerzieller Absicht. Der Rest ist Stoff für den Blog, falls es irgendwann einen gibt.

Nutze den Google Ads Keyword-Planer für Schätzungen und grenze das geografische Gebiet ein. Damit bekommen wir einen Eindruck vom möglichen Traffic. Beachte aber, dass das Suchvolumen nicht der Zahl der organischen Besucher entspricht, sondern nur ein Teil davon auf deine Website kommen wird. Anhand dieser Daten und einer geschätzten Conversion-Rate können wir die monatlich erreichbaren Leads abschätzen.

Wettbewerb: Gegen wen kämpfst du um Kunden?

Auch hier findest du einen Artikel, in dem ich ausführlich erkläre, wie du eine Wettbewerbsanalyse im E-Commerce durchführst. Er ist zwar älter und einiges hat sich geändert, aber die Grundlagen sind geblieben.

Für ein lokales Unternehmen suchst du aus den relevanten Gebieten so, wie es ein Kunde tun würde, und notierst, welche Unternehmen in den organischen und lokalen Ergebnissen auftauchen. Achte auf folgende Aspekte:

• Dienstleistungen.
• Werbetexte, CTAs und Inhalte.
• Website-Struktur.
• Geografische Abdeckung.
• Handlungsaufforderungen.
• Kontaktmöglichkeiten.
• Online-Reputation (Bewertungen auf Plattformen wie Google Maps oder Trustpilot).
• Lead-Magneten, falls vorhanden (meist nicht, denn sie betreiben normalerweise kein E-Mail-Marketing).
• Preise.

Es geht nicht darum, den Erstplatzierten zu kopieren. Der Vergleich soll dir helfen, unbeantwortete Fragen in deinen Inhalten aufzudecken, deine Alleinstellungsmerkmale zu verdeutlichen und Chancen zu erkennen, die dein Unternehmen tatsächlich nutzen kann.

Wenn du keinen Zugang zu Finanzdaten eines Wettbewerbers hast, erfinde sie nicht. Frag ChatGPT, vielleicht mithilfe von Deep research..

Ergebnis

Zweierlei:

Eine Tabelle mit den Keywords, gruppiert nach möglicher Ziel-URL (meist Startseite und Dienstleistungsseiten), geografischem Gebiet, geschäftlicher Priorität, sichtbaren Wettbewerbern und Schlussfolgerungen. Damit triffst du Entscheidungen über Website-Struktur und Inhalte, vor allem die Überschriften der jeweiligen Seiten.

Dazu kommt ein Dokument mit sämtlichen guten Ideen der Wettbewerber, die sich auf mein Unternehmen und meine Website übertragen lassen.

4. Leite aus der Nachfrage die Website-Struktur und jede URL ab

Verwandle die vorläufigen Keyword-Gruppen jetzt in eine konkrete Seitenübersicht. Halte für jede geplante URL fest:

• Welches Bedürfnis sie erfüllt, an wen sie sich richtet und welche Dienstleistung sie beschreibt.
• Welche Handlung sie auslösen soll (Formular, Klick auf Telefonnummer oder WhatsApp, Terminbuchung …).
• Welche Inhalte sie benötigt.
• Ob ich echte Erfahrungsberichte beschaffen kann.
• Von wo interne Links auf die Seite führen.
• Auf welches geografische Gebiet sie ausgerichtet ist (vielleicht nur eines, vielleicht ist es sinnvoll, die Dienstleistungsseite für Kunden in zwei Ländern oder Städten zu wiederholen).

Entscheide auch, welche Seiten indexiert werden sollen. Oder besser andersherum: welche nicht indexiert werden sollen. Zum Beispiel rechtliche Seiten und solche mit doppelten Inhalten (Über mich und Startseite).

Für die Inhalte ist außerdem wichtig: Wenn das Unternehmen ein Google Unternehmensprofil hat, müssen die dort genannten Daten (Name, Dienstleistungen, Kontaktangaben, Öffnungszeiten und tatsächliche Einzugsgebiete) exakt übereinstimmen mit den Angaben auf der Website.

Ergebnis

Seitenübersicht mit:

• URL.
• Ziel-Keywords.
• Besonderen Entscheidungen zum Seiteninhalt.
• Indexierung: ja oder nein.

5. Schließe die Anforderungen ab und wähle die passende Technik

Bevor wir mit der Entwicklung beginnen, müssen alle bisherigen Entscheidungen in ein Arbeitsdokument überführt werden, eine neue, vollständige Version unseres ursprünglichen PRD. Das Dokument muss einer anderen Person – in diesem Fall der KI – verständlich machen, was gebaut werden soll und woran wir erkennen, dass die Arbeit fertig ist.

Meist ist es bequemer, all diese Informationen in einem ChatGPT-Projekt zu sammeln und daraus einen Entwurf erstellen zu lassen. ChatGPT soll dabei nach allen fehlenden Angaben fragen. Anschließend musst du ihn nur noch prüfen und bearbeiten. Das geht deutlich schneller.

Jetzt, da alle Informationen vorliegen, wählen wir die Technologie. Für solche Websites würde ich zwei Systeme in Betracht ziehen: das Framework Astro (hier seine Vor- und Nachteile) oder WordPress. In diesem Artikel findest du einen direkten Vergleich der beiden, damit du verstehst, warum ich für diese Projekte derzeit Astro bevorzuge.

Die Gewinnerkombination ist die, die ich selbst verwende, und genau die nutzen wir in dieser Anleitung::

• Astro zum Generieren der Website.
• GitHub als Code-Repository.
• Cloudflare für die Veröffentlichung (nicht unbedingt nötig, aber einfacher, wenn du die Domain ebenfalls dort gekauft hast)
• Zoho Mail für die geschäftliche E-Mail und die Formular-API.

Braucht das Team eines Unternehmens dagegen ein Backend, um häufig viele Inhalte zu bearbeiten, kann WordPress der bessere Ausgangspunkt sein.

Neben der Technologie solltest du jetzt auch die Quelldateien organisieren. Erstelle dazu auf deinem PC einen Ordner mit mehreren Unterordnern, beispielsweise:

• Originalmaterialien des Kunden.
• Deine Materialien (Nachfrageanalyse, Mockups, PSD-Dateien, Texte …)
• Code.
• Fertige Ressourcen, die die Website benötigt (das, was auf Cloudflare landet: hauptsächlich HTML, CSS, JS und Bilder).
• Geheimnisse (Passwörter) für die Produktionsumgebung.

Nicht all das gehört ins Repository, sondern nur das, was zum Wiederherstellen der Website nötig ist. Keine Passwörter und keine riesigen Originaldokumente, die wir lediglich als Arbeitsmaterial aufbewahren.

Sobald diese Struktur steht, ist es Zeit, ein Projekt in Codex anzulegen, das nicht mit unserem ChatGPT-Projekt identisch ist. Es sind zwei unterschiedliche Projekte, die Materialien wie das PRD gemeinsam nutzen. Ab jetzt kannst du dir vorstellen, dass zwei Personen für dich arbeiten:

1. ChatGPT: der Analyst, der das System nach deinen Vorgaben entwirft und Lösungen vorschlägt.
2. Codex: der Entwickler, der die Website nach den Anweisungen des Analysten erstellt.

Um das Projekt in Codex anzulegen, musst du nur:

1. Ein neues Projekt in der Anwendung erstellen.
2. Ihm einen Namen geben.
3. Den Stammordner des Projekts freigeben, den wir auf dem PC angelegt haben.
4. Codex zeigen, wo das PRD liegt, und es bitten, alles vor dem Start zu prüfen.

Zum Abschluss dieses Schritts müssen nur noch einige Punkte vor der Entwicklung geklärt werden:

• Wie werden Änderungen vor der Veröffentlichung überprüft (soll Codex das erledigen oder möchtest du selbst manuell prüfen?)
• Wie wird veröffentlicht (committet Codex nach GitHub und von dort nach Cloudflare oder machst du das manuell?)
• Ob die Website mehrsprachig wird und mit welcher Sprache wir anfangen.

Wenn das geklärt ist, lass diese Entscheidungen ins PRD eintragen. Da Codex Schreibzugriff auf den Ordner hat, kann es das Dokument entsprechend ändern. Von jetzt an arbeiten wir nach diesem Ablauf:

1. Du überlegst, was du brauchst. Du bist der Eigentümer (Owner) des Projekts.
2. Du erklärst es ChatGPT, und ihr besprecht gemeinsam die einzelnen Punkte und offenen Fragen.
3. Sobald alles klar ist, bittest du ChatGPT, den Prompt für Codex zu schreiben.
4. Du fügst ihn in Codex ein, wo er ausgeführt wird.
5. Du bewertest das Ergebnis und lässt es gegebenenfalls überarbeiten.
6. Du gehst zum nächsten Entwicklungsschritt über.

Ab jetzt besteht deine einzige Aufgabe darin, zu überlegen, zu entscheiden und festzulegen. Dein Analyst und dein Entwickler bauen die Website.

Ergebnisse

• Freigegebenes PRD vor Entwicklungsbeginn (es kann sich während des Projekts noch ändern).
• Ordner mit Repository-Struktur.
• Veröffentlichungs- und Testplan.

6. Schreibe die Texte

Falls du es noch nicht getan hast: Sobald Website-Struktur und Projekt eingerichtet sind, ist es Zeit, die Inhalte für jede URL zu erstellen.

Die Startseite soll das allgemeine Angebot erklären und zu den Dienstleistungen führen. Jede Dienstleistungsseite muss beschreiben, was angeboten wird, für wen und in welchen Situationen, welche Fragen Kunden typischerweise haben und wie man Kontakt aufnimmt. SEO-Texte ersetzen dabei keine hilfreichen Texte für Menschen: Sind beide gut durchdacht, ergänzen sie sich.

Nutze KI, um Entwürfe mit ausreichend Kontext zu erstellen. Erkläre ihr:

• Die Dienstleistung.
• Dein Alleinstellungsmerkmal.
• Zielgruppe.
• Geografisches Gebiet.
• Tonfall.
• Echte häufig gestellte Fragen.
• Vorhandene Kundenstimmen. Falls es ein Google Unternehmensprofil gibt, lassen sich dort vielleicht gute Bewertungen finden.

Überarbeite die Ergebnisse so lange, bis sie veröffentlichungsreif sind. Überlege dann, wie du sie auf verschiedene Module verteilst, oder bitte ChatGPT um Vorschläge. Möglicherweise tauchen Module auf, die sich auf der gesamten Website wiederholen (Formular, Karte, allgemeine Vorteile). Darum musst du dich noch nicht kümmern; das berücksichtigen wir im nächsten Schritt.

Hier ist ein Beispiel-Prompt für den Entwurf einer Dienstleistungsseite:

Schreibe die Seite für [servicio] von [negocio] in [zona]. Alleinstellungsmerkmal: [propuesta]. Zielgruppe: [audiencia]. Hauptabsicht: [necesidad]. Kundenstimmen: [lista]. Häufige Fragen: [lista]. CTA: [acción]. Verwende den Ton [tono]. Schlage Struktur, Werbetexte, SEO-Metadaten und Schema vor. Markiere jede Aussage, die belegt werden muss, und erfinde keine Zahlen, Bewertungen, Fahrzeuge oder Einzugsgebiete.

Erstelle die Inhalte aller Seiten nacheinander.

Ergebnis

Freigegebene Seiten-Steckbriefe mit Texten, CTAs, Metadaten, Nachweisen und Bildmaterial. Du kannst zunächst die Startseite und eine typische Dienstleistungsseite erstellen, um zu prüfen, ob das System funktioniert, bevor du es auf weitere Dienstleistungen und die Kontaktseite ausweitest.

7. Trenne wiederverwendbare Komponenten

Nimm die Mockups und Seiten-Steckbriefe zur Hand und markiere die Elemente, die tatsächlich wiederkehren: Header, Navigation, Footer, Buttons, Formular, Vorteilskarten, Bildblöcke, abschließende CTAs und Hinweise …

Dafür verwenden wir wiederverwendbare Komponenten. Ändert sich die Telefonnummer, musst du sie nur an einer Stelle in der Komponente anpassen, damit sie auf allen URLs aktualisiert wird. Header und Footer sind offensichtlich wiederverwendbar, aber wahrscheinlich gibt es noch mehr.

Vielleicht sollen außerdem alle Dienstleistungsseiten dasselbe Design oder dieselbe Struktur verwenden. Trenne deshalb Struktur von den Daten. Beispiele:

• Eine Vorlage für Dienstleistungsseiten kann gemeinsame Abschnitte zusammenstellen, ohne jeder Seite denselben Text aufzuzwingen.
• Genauer: Eine Vorteils-Komponente kann ihr Layout behalten, während sich Überschrift, Beschreibung und Icon ändern.

Teste das praktisch, bevor du das Muster vervielfältigst: Bitte ChatGPT um einen Prompt, mit dem Codex die Startseite und eine Dienstleistungsseite umsetzt. Vergleiche sie mit den Mockups und ändere sowohl die individuellen Inhalte als auch die gemeinsamen Komponenten.

Prüfe das Ergebnis auf Desktop und Mobile. Sobald alles stimmt, übertrage das System auf die übrigen Seiten.

Ergebnis

Umgesetzte Startseite und eine Dienstleistungsseite.

Liste der Komponenten, der Daten, die sie jeweils erhalten, und der Seiten, auf denen sie eingesetzt werden.

8. Bereite Bilder für die Veröffentlichung vor

So, nach den Texten kommen jetzt die Bilder dran.

Idealerweise hat dir der Kunde brauchbare Fotos geschickt. In der Praxis ist das meist nicht der Fall. Zum Glück gilt: Wenn du dich mit Photoshop nicht auskennst, ist ChatGPT dein Freund, und sein System zur Bilderzeugung und -bearbeitung ist wirklich sehr, sehr gut. Also los.

Mach es nicht unnötig kompliziert: Ein bis drei Bilder pro URL sollten genügen. Wahrscheinlich werden einige mehrfach verwendet. Das erste Bild, also das Header-Bild, sollte möglichst auf jeder Seite anders sein.

Bewahre die Originale des Kunden auf und speichere bei jedem neu erstellten Bild eine hochwertige Masterdatei in Ordnern, die nicht ins Repository hochgeladen werden.

Bitte ChatGPT anschließend darum, Codex anzuweisen, jedes Bild für seinen Platz auf der Website anzupassen, und zwar so:

• Versionen in passenden Größen und Formaten erstellen, normalerweise .webp für Fotos und SVG für Icons.
• Responsive Größen definieren, damit Smartphones nicht Dateien laden müssen, die für riesige Bildschirme gedacht sind.
• Platz für das Bild reservieren, damit die Seite beim Laden nicht springt. Das Hauptbild kann Download-Priorität benötigen, ein Foto weit unten darf dagegen warten.
• Ein guter Alternativtext beschreibt den Bildinhalt; lässt sich ein passendes Keyword sinnvoll unterbringen, umso besser.

Ergebnis

Fertige Bilder für die Website.

9. Erstelle die Icons

Wahrscheinlich ist das der schwierigste Optimierungspunkt bei Websites mit vielen Icons (mehr als 20 oder 30).

Denn es ist schwierig, für alle Icons Varianten im selben Stil zu erzeugen, insbesondere innerhalb desselben Icon-Bogens. Am Ende bearbeitest du sie einzeln, und das kostet Zeit.

Und danach wird es noch schwieriger: sie in SVG umzuwandeln, sodass sie gut aussehen. Deshalb mein Rat: Wenn du auf manuell ausgeschnittene PNGs zurückgreifen musst oder auf eine in Photoshop erstellte Icon-Kachel, dann mach das. Du erreichst zwar keine 100 % der möglichen Optimierung, sparst aber jede Menge Zeit. Ich spreche aus Erfahrung.

Bei Rondabus habe ich beispielsweise verschiedene Lösungen ausprobiert, weil die ersten Zeichnungen von den Vorlagen abwichen: Manche waren zu schlicht, andere wirkten unterschiedlich groß, obwohl sie gleich große Rahmen ausfüllten. Ich testete sogar Ausschnitte und PNGs aus den freigegebenen Bögen, aber für Version 2.0 entschieden wir uns schließlich für die ursprünglichen SVGs mit größerer Darstellungsgröße..

So gehst du vor:

1. Ermittle zuerst, wo jedes Icon erscheint und wofür es steht.
2. Gruppiere wiederkehrende Icons.
3. Bewahre pro Zeichnung oder Icon-Bogen eine Masterdatei auf.
4. Erstelle eine Vorschau in den tatsächlichen Einsatzbereichen: Hero, Dienstleistungskarten, Vorteilslisten, Kontakt …
5. Passe die optische Größe an, ohne die Formen zu verzerren: Zwei Icons mit gleicher Dateibreite können aufgrund ihrer Innenabstände sehr unterschiedlich groß wirken.
6. Prüfe zuerst eine Auswahl auf einer wichtigen Seite (Startseite oder Dienstleistungen), bevor du alle Seiten änderst. Wenn ein Versuch den Mockup-Stil nicht richtig wiedergibt, geh zurück zur Vorlage und verwerfe ihn.
7. Wende das Ergebnis auf die restlichen Seiten an.
8. Das Dateiformat ist eine technische Umsetzungsfrage. Die visuelle Qualität und die Konsistenz sind dagegen das, was der Nutzer wahrnimmt. Und das ist entscheidend.

Ergebnis

Freigegebenes Icon-Set mit Masterdateien.

10. Baue die Website in Etappen

Sobald Startseite und Vorlage für Dienstleistungsseiten freigegeben sind, baue die übrigen Seiten und prüfe sie einzeln. Dass sie dieselbe Vorlage nutzen, bedeutet nicht, dass sie alle optisch funktionieren: Überschriften, Fotos, Zahl der Vorteile, Button-Texte und Bedürfnisse der Zielgruppe unterscheiden sich.

Prüfe Desktop-Ansichten und verschiedene Breiten auf Smartphones und Tablets. Betrachte jede Seite aus Nutzersicht, vergleiche sie mit dem Mockup und kontrolliere alles, was ein statischer Entwurf nicht zeigen kann:

• Aufklappmenü.
• Links.
• Frontend-Validierung des Formulars.
• Bilder und Icons, die korrekt geladen werden.
• Längere Inhalte
• Zeilenumbrüche in Überschriften.
• …

Es ist sinnvoll, Code-Checkpoints zu sichern, wenn eine Etappe mit mehreren Änderungen freigegeben wurde. Bitte ChatGPT darum, während du die Details verfeinerst.

Ergebnis

Fertige Seiten im Frontend (das Formular muss gegebenenfalls noch geprüft werden).

Checkpoint des fertiggestellten Frontends, Website Version V1 (eine Sprache). Wenn du deine Website zu diesem Zeitpunkt als fertig betrachtest, spring zu Schritt 17, um sie online zu veröffentlichen.

11. Richte ein Formular und weitere Kontaktmöglichkeiten ein

Wenn du meine Artikel über Astro gelesen hast, sollten dir zwei Dinge klar sein:

1. Du veröffentlichst HTML-Dateien.
2. Auf einem Server ohne serverseitige Programmiersprache (PHP, Python).

Das hat viele Vorteile und einen Haken: Formulare lassen sich nicht direkt versenden.

Dafür gibt es mehrere Lösungen, darunter:

• Kostenpflichtige Cloudflare-Dienste nutzen.
• Einen E-Mail-Anbieter (kostenlos oder kostenpflichtig) verwenden und ihn über eine API einbinden.

In meinem Fall richte ich bei solchen Projekten meistens auch das E-Mail-System ein und verwende die kostenlose Version von Zoho Mail. Deshalb nutze ich diesen Dienst zum Versenden der Formularnachrichten, statt einen weiteren Anbieter hinzuzufügen.

Das ist ein bisschen kompliziert und erfordert mehrere Schritte, die du manuell erledigen musst, also bitte ChatGPT, dich Schritt für Schritt zu begleiten. Und vor allem: Lade niemals Secrets ins GitHub-Repository hoch. Cloudflare bietet einen eigenen Speicherort dafür.

Fülle das fertige Formular anschließend einmal korrekt und einmal fehlerhaft aus, um sowohl die Validierung als auch den Versand zu testen.

Falls noch nicht geschehen, ist jetzt auch ein guter Moment, den Telefon- und WhatsApp-Link auf einem echten Smartphone zu testen, sofern du sie eingebaut hast – was du höchstwahrscheinlich tun solltest.

Ergebnis

Vollständig getestetes, durchgehend funktionierendes Formular.

Checkpoint, Website Version V1.5 (fertig mit Formular und einer Sprache).

Damit hätten wir – abgesehen von der Veröffentlichung der Website (Schritt 17) – alles Wesentliche für jede lokale Unternehmenswebsite abgeschlossen. Allerdings sind die nächsten Schritte DRINGEND ZU EMPFEHLEN, wenn wir wirklich Kunden gewinnen wollen.

12. Messe Kontakte und richte die Einwilligung ein

Wir beginnen die optionalen Schritte mit einer grundlegenden Aufgabe: messen.

Was wollen wir messen? Das Wesentliche:

• Conversion-Ereignisse.
• Traffic.

Wozu?

Damit wir wissen, woher unsere Verkäufe kommen, besonders wenn wir Werbung schalten wollen, um die ersten Kunden zu gewinnen (das solltest du unbedingt in Betracht ziehen).

Daher erstellen wir zuerst einen Analyseplan mit den geschäftsrelevanten Ereignissen, bevor wir irgendetwas installieren. Diese Ereignisse sind ziemlich eindeutig:

• Kontakt per Telefon.
• Per WhatsApp.
• Per E-Mail.
• Per Formular.
• Terminbuchung im Kalender.
• Anmeldung (zum Newsletter, falls vorhanden).
• Klick zur Anzeige der Adresse in Google Maps.

Wahrscheinlich sind das bereits alle Ereignisse, die du auf dieser Art Website messen musst.

Lege fest, welche für dich relevant sind, und bitte ChatGPT um Folgendes:

• Den Ereignisnamen nach den von Google empfohlenen Namensregeln, denn ich schlage vor, Google Analytics 4 für die Messung zu verwenden.
• Auslösebedingung des Ereignisses.
• Zusätzliche Parameter (falls erforderlich).

Das System funktioniert folgendermaßen:

Website-Nutzer löst ein Ereignis aus > Google Tag Manager erfasst es > GA4 speichert es, damit du die Daten auswerten kannst.

Melde dich mit deinem Google-Konto sowohl bei GA4 als auch bei GTM an und am besten gleich bei GSC, das wir später für SEO brauchen.

Wenn dein Unternehmen in der Europäischen Union sitzt, hängt die Messung auch von Datenschutzentscheidungen ab. Bitte ChatGPT deshalb, den erweiterten Google Consent Mode v2 zu implementieren, einschließlich einer Möglichkeit, die Einstellungen erneut zu öffnen. So entsteht das übliche Cookie-Banner.

Wenn alles festgelegt ist, bitte ChatGPT, Codex eine JSON-Datei mit dem Container für den GTM-Import erstellen zu lassen. Die KI wird nach den Kennungen deiner GA4- und GTM-Konten fragen und dir eine importfertige Datei mit allen nötigen Einstellungen geben.

Dann musst du nur noch jedes Ereignis in der GTM-Vorschau testen, bevor du den Container veröffentlichst und echte Website-Daten sammelst.

Ergebnis

Messkonzept sowie funktionierende GTM- und GA4-Einrichtung, einschließlich getesteter Einwilligung, soweit zutreffend.

13. Schließe das technische SEO ab und veröffentliche die erste Version

Wenn du lokales SEO betreibst, was du tun solltest, ist es Zeit, Screaming Frog zu starten und Fehler zu überprüfen. Bitte ChatGPT, sie für dich zu beheben.

Verknüpfe die Website mit deinem Google Unternehmensprofil. Prüfe Name, Kategorien, Adresse beziehungsweise Einzugsgebiet, Telefonnummer, Öffnungszeiten, Fotos und Dienstleistungen, ohne Standorte zu erfinden.

Außerdem solltest du in der GSC (Google Search Console) die erzeugte Sitemap einreichen. Wenn du die URL nicht kennst, frag Codex direkt. Beobachte nach einigen Tagen, ob wichtige Seiten gecrawlt und indexiert werden können.

Ergebnis

Eine Website ohne technische SEO-Fehler, mit überprüften URLs und Sitemap sowie korrekter kanonischer Domain.

Das könnten wir Version V2 nennen..

14. Entscheide, ob sich weitere Sprachen für die Website lohnen

Wir kommen zum letzten Teil des Prozesses: der Übersetzung der Website in andere Sprachen.

Bevor du dich entscheidest, kläre:

• Welche Zielgruppen du ansprechen willst.
• In welcher Sprache du sie betreuen kannst.

Es ist ein Unterschied, ob du einem Norweger in Málaga eine Massage anbietest, ohne seine Sprache zu sprechen, oder Rechtsberatung. Du kannst auch Japaner gewinnen, die in Ronda ein Taxi suchen, musst aber deutlich machen, dass du sie nur auf Englisch betreust.

Eine zusätzliche Sprache bedeutet außerdem, Inhalte, Menüs, Formulare, Metadaten, Schema und künftige Änderungen zu übersetzen. Es reicht nicht, einen Button mit einer Flagge hinzuzufügen.

Wenn klar ist, welche Sprachen deine Website haben soll, lege gemeinsam mit ChatGPT Folgendes fest:

• Die Ausgangssprache, die bereits auf deiner öffentlichen Website verwendet wird.
• Die Sprachen, in die übersetzt werden soll.
• Welche Seiten übersetzt werden müssen – nicht alle (zum Beispiel nicht die 404-Fehlerseite oder die rechtlichen Seiten)
• Die URL-Regeln. Entscheide, ob Slugs übersetzt werden, wie äquivalente Seiten miteinander verknüpft werden und was bei fehlender Übersetzung geschieht.

Die Architektur sollte jede Seite anhand eines sprachunabhängigen, stabilen Codes identifizieren. So kann der Sprachwechsler die entsprechende Seite öffnen und die Website hreflang -Beziehungen erzeugen, ohne anhand des sichtbaren Titels raten zu müssen.

All das muss vor der Übersetzung feststehen.

Ergebnis

Übersetzungsplan.

15. Trenne Export, Übersetzung und Integration

Am besten funktioniert für mich ein aufgeteilter Arbeitsablauf.

1. Codex untersucht das Projekt und bereitet ein Textpaket mit stabilen Kennungen, Ausgangstexten, Kontext, Zielsprache, Platzhaltern, Links und geschützten Begriffen vor. Normalerweise entsteht dabei ein JSON- oder XML-Paket.
2. ChatGPT übersetzt diese Pakete, prüft die Werte und liefert uns die übersetzten Dateien zurück.
3. Codex integriert diese Dateien und validiert die Seiten.

Durch diese Aufteilung kannst du den Übersetzer wechseln (auch zu einem Menschen), ohne dass er den Code verstehen muss oder der Entwickler die Bedeutung jeder Formulierung erraten muss. Natürlich ersetzt eine Prüfung durch ChatGPT keine professionelle sprachliche Prüfung durch einen vereidigten Übersetzer.

Prompt für den Export:

Untersuche das Projekt und erstelle ein übersetzbares Inventar für [idiomas]. Berücksichtige sichtbare Texte, Navigation, Formulare, Metadaten und Slugs. Gib für jede Einheit eine stabile ID, den Ausgangstext, Kontext, Platzhalter, Links und geschützte Begriffe an. Übersetze oder verändere die Seiten noch nicht. Melde mehrdeutige Texte und Inhalte ohne Entsprechung.

Prompt für die Übersetzung:

Übersetze ausschließlich die Werte des Pakets in [idioma y variante]. Zielgruppe: [audiencia]. Ton: [tono]. Glossar: [términos]. Bewahre IDs, Struktur, Reihenfolge, Platzhalter, Eigennamen, Links und Code. Kennzeichne außerhalb des Pakets Formulierungen, die eine geschäftliche Entscheidung oder eine Prüfung durch Muttersprachler benötigen.

Prompt für die Integration:

Importiere diese freigegebenen Übersetzungen ins Projekt. Prüfe IDs, Platzhalter, geschützte Begriffe, Slugs und äquivalente Pfade. Veröffentliche keine Sprache, in der erforderliche Texte fehlen. Führe die Übersetzungsprüfung, die Projektprüfungen und den Build aus; melde Abweichungen vor dem Deployment.

Ergebnis

Mehrsprachige Website, noch nicht überprüft.

16. Prüfe jede Sprache wie eine vollständige Website

Öffne nach der Integration die übersetzten Seiten: Selbst eine gültige Datei kann ein überlaufendes Menü, einen zu langen CTA oder einen Hinweis verursachen, der das Formular verdeckt. Prüfe jede URL in jeder Sprache auf Desktop und Smartphone.

Überprüfe beim SEO (selbst oder mit ChatGPT):

• <html lang>.
• Titel.
• Beschreibung.
• Lokalisierte URL.
• Eigener Canonical-Link.
• Hreflang-Beziehungen zwischen entsprechenden Seiten.
• Sitemap der indexierbaren URLs.
• Der Sprachwechsler soll beim Wechsel nach Möglichkeit auf der entsprechenden aktuellen Seite bleiben.
• Prüfe auch die Footer-Links.
• Formulare und Fehlermeldungen.
• Alternativtexte der Bilder.
• Strukturierte Daten mit Texten oder URLs.

Wiederhole die Prüfung, bis alles sauber funktioniert.

Ergebnis

Vollständig überprüfte mehrsprachige Website, Version V3.

17. Veröffentliche eine eindeutig gekennzeichnete Version und prüfe die Produktionsumgebung

Ob nach Schritt 10 (V1), 11 (V1.5), 13 (V2) oder dem vorherigen Schritt (V3): Wir haben eine Website in einer Testumgebung erstellt. Jetzt muss sie noch in Produktion gehen. Genau das machen wir hier.

Wir bitten ChatGPT, Codex anzuweisen, den Build auf Cloudflare zu veröffentlichen.

Dazu wird Codex:

1. Sich bei unserem GitHub-Konto anmelden.
2. Uns bitten, das passende Repository auszuwählen oder zu erstellen.
3. Sich bei unserem Cloudflare-Konto anmelden.
4. Uns fragen, auf welcher Domain veröffentlicht werden soll.
5. Die neueste Version der Website veröffentlichen.

Und wir müssen nur noch prüfen, dass alles genauso aussieht wie in unserer Testversion.

Dann sind wir mit der Website fertig.

Ergebnis

Vollständige Website-Version, veröffentlicht.

18. Mache aus dem Projekt eine wiederholbare Methode

Dieser Schritt ist noch optionaler, aber sehr empfehlenswert, wenn du denselben Ablauf für die Website eines anderen Unternehmens nutzen möchtest.

Du musst ChatGPT nur bitten, eine Skill mit dem gesamten durchgeführten Prozess zu erstellen. Dann musst du dich weder an jeden einzelnen Schritt vom letzten Mal erinnern noch diesen Artikel wieder aufrufen. ChatGPT hat alles gespeichert und Codex die Skill installiert.

So lässt sich die nächste lokale Unternehmenswebsite viel schneller erstellen.

Cool, oder?