Deine eigene Homepage mit ChatGPT – der ausführliche Einsteiger‑Guide (wirklich)

Eine Website wirkt oft wie ein Berg: Domain, Design, Texte, SEO, Rechtliches, Technik – uff. Mit ChatGPT kannst du das runterbrechen: planen, schreiben, strukturieren, checken. Dieser Guide führt dich einmal komplett von null bis „online“ – inklusive Beispielen, Prompts und Tool‑Links.

1) Das Fundament: Ziel, Publikum, Nutzen (20 Minuten)

Was soll die Seite leisten?

  • Informieren (Portfolio, Vita, Referenzen)
  • Verkaufen (Leistungen/Shop, Terminbuchung)
  • Publikum aufbauen (Blog/Newsletter)

Mini‑Workshop (du + ChatGPT):
Prompt: „Du bist mein Web‑Planer. Stelle mir nacheinander 10 Fragen, um Ziel, Zielgruppe, Nutzenversprechen, Tonalität und Inhalte meiner Website zu klären. Fasse danach alles als Positioning‑Statement in zwei Sätzen zusammen.“

Outcomes, die du danach notierst: 1) Ziel der Seite, 2) Primäre Zielgruppe, 3) Top‑3‑Probleme dieser Zielgruppe, 4) Dein Nutzen in einem Satz (Hero‑Claim), 5) Ton (seriös / locker / künstlerisch).

2) Die Struktur: Sitemap & Content‑Plan (30–45 Minuten)

Starte schlank. Eine gute Einsteiger‑Sitemap:

  • Startseite (Claim, 1–2 Kernangebote, Social Proof, Kontakt‑CTA)
  • Über mich/uns (wer, warum, wie – mit Foto)
  • Leistungen/Angebote (klarer Nutzen, Preise/„ab…“, Ablauf, FAQ)
  • Blog/News (3–5 Startartikel)
  • Kontakt (Formular, E‑Mail, Social, Öffnungszeiten)

Prompt für die Gliederung:
„Erstelle mir eine Sitemap und Seiten‑Gliederungen (H1–H3 + Stichpunkte) für [Thema/Branche], zielgruppengerecht für [Zielgruppe], Ton: [Ton]. Gib zusätzlich je Seite 2 CTA‑Vorschläge.“

3) Die Plattform wählen: No‑Code vs. „mehr Kontrolle“

Für Einsteiger funktionieren Website‑Baukästen sehr gut. Kurzer Überblick:

  • WordPress.com – flexibel, riesiges Ökosystem, Blog‑König. Gut skalierbar. WordPress.comWordPress.org
  • Wix – extrem einfach, viele Vorlagen, AI‑Assistent, All‑in‑One. wix.com
  • Squarespace – schicke Templates, alles aus einem Guss (CMS, Domains, Shop). Squarespace
  • Webflow – visuell, sehr präzises Design, etwas steilere Lernkurve. webflow.com

Entscheidungs‑Regel:

  • Willst du schnell, hübsch, „ein Tool“ → Wix / Squarespace. wix.comSquarespace
  • Willst du Blog‑Power + später mehr Kontrolle → WordPress.com. WordPress.com
  • Willst du Pixel‑Genauigkeit & Animations‑Finesse → Webflow. webflow.com

Tipp: Entscheide in 30 Minuten. Perfektionismus frisst Momentum.

4) Domain, Technik, Sicherheit (30 Minuten)

  • Domain kurz, merkbar, ohne Sonderzeichen.
  • HTTPS ist Pflicht: moderne Hoster/Baukästen aktivieren’s automatisch. Falls Self‑Hosting: Let’s Encrypt liefert kostenlose TLS‑Zertifikate. letsencrypt.org

Österreich‑Spezifika (keine Rechtsberatung):

5) Design „ohne Designer“: Farben, Schriften, Icons (45–60 Minuten)

  • Farben: Mit Coolors Palette generieren; 1 Primär, 1 Akzent, 2 Neutrale. Coolors.co
  • Schriften: Google Fonts – kombiniere eine Serif/Sans als Headline + eine gut lesbare Sans als Fließtext. Google Fonts
  • Icons: Material Symbols (Google) oder Font Awesome – konsistent einsetzen. Google Fontsfontawesome.com

Prompt für dein Mini‑Branding:
„Erstelle ein Micro‑Branding: 1 Primärfarbe (Hex), 1 Akzentfarbe (Hex), 2 neutrale Grautöne, 2 Google‑Fonts (Headline/Body) inkl. Begründung. Ton: modern, ruhig, hochwertig.“

6) Inhalte schreiben – mit ChatGPT schneller zum Punkt

So briefst du ChatGPT pro Seite:

  • Ziel (z. B. Beratungstermin buchen)
  • Zielgruppe & Problem
  • Nutzenversprechen (ein Satz)
  • Beweise (Referenzen, Zahlen, Zitate)
  • Tonalität (z. B. klar, nahbar)
  • CTA (z. B. „Kostenloses Erstgespräch sichern“)

Prompt‑Beispiel (Startseite):
„Schreibe eine Startseiten‑Hero‑Section für [Angebot] an [Zielgruppe], Problem: [X], Lösung/Nutzen: [Y]. Ton: [Ton]. 1 Claim (max. 9 Wörter), 1 Unterzeile (max. 18 Wörter), 2 Bullet‑Vorteile, 1 CTA‑Button‑Text.“

Bilder: authentische Fotos wirken. Quellen für freie Bilder: Unsplash, Pexels. Komprimieren vor dem Upload (siehe unten). unsplash.comPexels

7) Bilder & Geschwindigkeit: klein, aber scharf

Warum: Schnelle Seiten ranken und konvertieren besser. Google misst Core Web Vitals (LCP/INP/CLS). Teste mit PageSpeed Insights oder Lighthouse. web.devpagespeed.web.devChrome for Developers

Workflow

  1. Export in WebP/JPEG →
  2. Squoosh (lokal im Browser) oder TinyPNG komprimieren →
  3. sinnvolle Dateinamen + Alt‑Text. squoosh.apptinypng.com

Mehr dazu: PSI erklärt Messung & Tipps, Lighthouse gibt konkrete Audits. Google for DevelopersChrome for Developers

8) SEO für Einsteiger – ohne Voodoo

Basics, die reichen

  • Eine Seite = ein Hauptthema.
  • Title & Meta‑Description sauber formulieren.
  • Überschriften‑Hierarchie (H1 einmal, H2/H3 logisch).
  • Interne Links (von relevanten Seiten vernetzen).
  • Hilfreiche Inhalte für Menschen, nicht für Maschinen.

Offizielle Guides: Google SEO Starter Guide & „People‑First Content“. Google for Developers+1

Keywords finden (kostenlos): Google Trends gibt Nachfrage‑Gefühl; tiefergehendes Research optional mit weiteren Tools. Google Trends

Messen & verbessern

  • Search Console einrichten (Indexierung, Suchanfragen, CTR). Google
  • Optional GA4 (Verhalten, Conversions) oder Plausible (datenschutzfreundlich, leicht). Google HilfePlausible Analytics

9) Barrierefreiheit: besser für alle, oft sofort machbar

  • Kontrast prüfen, Alt‑Texte schreiben, Tastatur‑Bedienbarkeit, Formular‑Labels.
  • Orientierung an WCAG‑Quick‑Reference. W3C+1

10) Test & Launch: Checkliste

Vor Livegang

Nach Livegang

11) Betrieb & Pflege: klein anfangen, konsistent bleiben

  • Redaktionsplan (1 Post/Woche).
  • Monatlich Lighthouse/PSI laufen lassen, Bilder nachoptimieren. pagespeed.web.devChrome for Developers
  • Vierteljährlich Inhalte aktualisieren, veraltete Seiten zusammenführen.
  • Backup/Updates (falls WordPress selbst gehostet). Bei Baukästen übernimmt der Anbieter vieles.

12) 20 praktische Tipps aus der Praxis

  1. Starte mit einer Seite (Start) und erweitere – Content gewinnt gegen „Under Construction“.
  2. Above‑the‑fold: Claim + CTA, keine Wände aus Text.
  3. CTA‑Texte aktiv: „Kostenlos testen“, „Erstgespräch sichern“, nicht „Senden“.
  4. Telefon & Mail anklickbar (tel:, mailto:).
  5. Trust‑Signale: Logos, Bewertungen, Zertifikate – knapp präsentieren.
  6. Preise transparent („ab…“, Pakete) – spart Mails, steigert Leads.
  7. Bildgrößen passend (keine 5000px‑Header).
  8. Farbkontraste > Mindeststandard – gerade auf Mobil. W3C
  9. Lesbarkeit: 16–18px Body, 60–80 Zeichen Zeilenlänge.
  10. Interne Links in Fließtext – so führst du User & Crawler. Google for Developers
  11. Meta‑Descriptions wie Mini‑Ads schreiben (max. 160 Zeichen). Google for Developers
  12. Bilder komprimieren (Squoosh/TinyPNG) – jedes KB zählt. squoosh.apptinypng.com
  13. Icons statt Stock‑Flut – ruhiger, klarer (Material/FA). Google Fontsfontawesome.com
  14. 404‑Seite mit Suchfeld & 3 Top‑Links – Bounce senken.
  15. Formulare kurz – Name, E‑Mail, Nachricht reicht häufig.
  16. FAQ pro Leistung – Einwände entkräften, SEO‑Gold. Google for Developers
  17. Core Web Vitals halbjährlich tracken (PSI, Lighthouse). pagespeed.web.devChrome for Developers
  18. Alt‑Texte beschreiben Zweck, nicht „Bild1“. W3C
  19. HTTPS überall, Weiterleitung http→https aktiv. letsencrypt.org
  20. Search Console Alerts ansehen – Google sagt dir, was weh tut. Google

13) Content‑Vorlagen (zum Direkt‑Einsetzen)

Startseite: Hero (Beispiel)

  • Claim: „[Kernnutzen] – ohne [Hauptärgernis].“
  • Unterzeile: „Für [Zielgruppe], die [Ergebnis] wollen – klar, schnell, fair.“
  • CTA: „Erstgespräch sichern“ | Zweit‑CTA: „Portfolio ansehen“

„Über mich“: 5‑Satz‑Story

  1. Problem deiner Zielgruppe in einem Satz.
  2. Warum du das Thema machst (1 persönlicher Satz).
  3. Deine Methode in 2–3 Stichworten.
  4. 1 messbares Ergebnis (Zahl/Zitat).
  5. Einladung/CTA.

Leistungsseite: Abschnitts‑Muster

  • Ergebnis‑Headline („In 14 Tagen live: Ihre Website, die verkauft“)
  • Kurzer Nutzenabsatz (2–3 Sätze)
  • Paket (Leistungsumfang in 5 Bullets)
  • Ablauf (Schritt 1–3)
  • FAQ (3 häufige Einwände kurz beantworten)
  • CTA

14) Beispiel‑Prompts, die wirklich helfen

  1. „Erstelle 5 Startseiten‑Claims (max. 7–9 Wörter) für [Angebot], Ton [Ton].“
  2. „Gib mir eine H1/H2‑Struktur + 150‑Wörter‑Absätze für eine Leistungsseite [Thema], inkl. 3 FAQs.“
  3. „Formuliere 3 Meta‑Descriptions (≤160 Zeichen) für [Seite], jeweils mit klarer Handlungsaufforderung.“ Google for Developers
  4. „Schreibe 10 Blog‑Ideen mit Hook + 1‑Satz‑Zusammenfassung, Suchintention: informational.“
  5. „Überarbeite diesen Text in klarer, konkreter Sprache, streiche Füllwörter, halte Sätze <20 Wörter.“
  6. „Erstelle Alt‑Texte für diese 5 Bildbeschreibungen – Zweck erklären, keine Keyword‑Stopfung.“ W3C
  7. „Gib mir 3 A/B‑Varianten für diesen CTA‑Button, aktiv, maximal 3 Wörter.“

15) Nützliche Links (kuratiert & offiziell, wo möglich)

SEO & Qualität

Baukästen

Design

Bilder & Komprimierung

Testing

Analytics

Sicherheit & Recht (AT, ohne Gewähr)

Schluss: So setzt du es diese Woche um

  • Tag 1: Ziel + Positioning + Sitemap (mit ChatGPT).
  • Tag 2: Plattform auswählen, Template picken, Farben/Fonts/Icons fixen.
  • Tag 3: Start, Über, Leistungen – Texte mit ChatGPT + Bilder komprimieren.
  • Tag 4: Kontakt + Rechtliches + Onpage‑SEO (Titles, Meta, H‑Struktur).
  • Tag 5: Tests (DevTools/Lighthouse), Launch, Search Console & Analytics aktivieren.

Entdecke mehr von Der BROWNZ Blog

Melde dich für ein Abonnement an, um die neuesten Beiträge per E-Mail zu erhalten.