Webdesign-Wissen A–Z: alles, was man 2026 über Websites wissen muss

Der Weg einer Anfrage: DNS, TCP/QUIC, TLS, HTTP

Jeder Seitenaufruf durchläuft dieselbe Kette. Jedes Glied kostet Zeit, und jedes lässt sich optimieren.

1. URL parsen: Der Browser zerlegt https://www.example.de/leistungen/?ref=x#preise in Schema, Host, Pfad, Query und Fragment. Das Fragment (#preise) wird nie an den Server gesendet.
2. DNS-Auflösung: Der Hostname wird in eine IP-Adresse übersetzt (A-Record für IPv4, AAAA für IPv6). Antworten werden gemäß ihrer TTL zwischengespeichert. Langsames DNS kostet bei jedem Erstbesuch 20 bis 200 Millisekunden.
3. Verbindungsaufbau: Bei HTTP/1.1 und HTTP/2 ein TCP-Handshake plus TLS-Handshake. Bei HTTP/3 läuft beides zusammen über QUIC auf UDP und spart mindestens eine Round-Trip-Zeit. Das hilft vor allem in Mobilfunknetzen.
4. TLS: Zertifikat prüfen, Schlüssel aushandeln. TLS 1.3 ist Standard, TLS 1.0 und 1.1 sind abgeschaltet. Ohne HTTPS gibt es heute weder HTTP/2 noch Service Worker, Geolocation oder gute Rankings.
5. HTTP-Request und Response: Der Browser sendet Methode, Pfad und Header. Der Server antwortet mit Statuscode, Headern und Body. Die Zeit bis zum ersten Byte heißt TTFB (Time to First Byte).
6. Rendering: Der Browser baut aus HTML, CSS und JavaScript die sichtbare Seite. Details dazu im Abschnitt zur Rendering-Pipeline.

HTTP-Statuscodes, die jeder kennen muss

Statuscodes steuern, wie Browser, Suchmaschinen und KI-Crawler mit einer URL umgehen. Falsche Codes gehören zu den häufigsten technischen SEO-Fehlern.

# Statuscode, Weiterleitungskette und Header einer URL prüfen
curl -sIL https://www.example.de/alte-seite/

# Nur den finalen Statuscode und die Ziel-URL ausgeben
curl -s -o /dev/null -w "%{http_code} %{url_effective}\n" -L https://example.de/

Die wichtigsten HTTP-Header

Header sind die Steuerzentrale zwischen Server und Browser. Diese Gruppen sollte man kennen:

• Caching: Cache-Control (max-age, immutable, no-cache, no-store, stale-while-revalidate), ETag, Last-Modified, Vary.
• Inhalt: Content-Type mit Zeichensatz (immer UTF-8), Content-Encoding (br für Brotli, gzip, zstd), Content-Language.
• Sicherheit: Strict-Transport-Security, Content-Security-Policy, X-Content-Type-Options, Referrer-Policy, Permissions-Policy. Details im Kapitel Sicherheit.
• SEO: X-Robots-Tag (noindex für PDFs und andere Nicht-HTML-Dateien), Link: rel="canonical" als Header-Variante.
• Performance: Link: rel=preload, 103 Early Hints, Server-Timing für Messwerte aus dem Backend.

# .htaccess: sinnvolle Cache-Strategie für eine typische Website
<IfModule mod_headers.c>
  # Versionierte Assets (Dateiname enthält Hash): ein Jahr, unveränderlich
  <FilesMatch "\.(?:css|js|woff2|avif|webp|jpg|png|svg)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>
  # HTML: immer revalidieren, damit Änderungen sofort sichtbar sind
  <FilesMatch "\.html$">
    Header set Cache-Control "no-cache"
  </FilesMatch>
</IfModule>

Die Rendering-Pipeline des Browsers

Aus Bytes werden Pixel in festen Schritten. Wer sie kennt, versteht Core Web Vitals und Layout-Probleme.

1. HTML parsen: Der Parser erzeugt den DOM-Baum. Ein klassisches <script> ohne defer oder async hält den Parser an. Der Preload-Scanner schaut parallel voraus und lädt erkannte Ressourcen schon vor.
2. CSS parsen: Es entsteht das CSSOM. CSS ist render-blockierend: Ohne vollständiges CSSOM wird nichts gezeichnet.
3. Style: DOM und CSSOM werden kombiniert, für jedes Element werden die berechneten Stile ermittelt.
4. Layout: Größe und Position jedes Elements werden berechnet. Nachträgliche Änderungen lösen ein erneutes Layout aus (Reflow).
5. Paint: Text, Farben, Schatten und Bilder werden in Ebenen gezeichnet.
6. Compositing: Die Ebenen werden auf der GPU zusammengesetzt. Animationen von transform und opacity laufen nur hier und sind deshalb flüssig.

Architekturmodelle: MPA, SPA, SSR, SSG, ISR und Islands

Wo und wann HTML entsteht, ist die wichtigste Architekturentscheidung eines Webprojekts.

Für Unternehmens-Websites gilt 2026: Inhalte gehören als fertiges HTML in die Serverantwort. Das ist für Nutzer am schnellsten, für Google am zuverlässigsten und für KI-Crawler entscheidend, denn viele von ihnen führen kein JavaScript aus. Eine reine SPA ist für eine Firmenwebsite fast nie die richtige Wahl.

Webstandards, Baseline und Browser-Support

HTML wird als „Living Standard“ von der WHATWG gepflegt, CSS in Modulen vom W3C, JavaScript als ECMAScript jährlich von TC39. Versionsnummern wie „HTML5“ oder „CSS3“ sind historische Marketingbegriffe, in der Praxis zählt der Support einzelner Features.

Dafür gibt es Baseline: Ein Feature ist „newly available“, sobald es in den aktuellen Versionen von Chrome, Edge, Firefox und Safari funktioniert, und „widely available“, wenn das seit 30 Monaten der Fall ist. Baseline-Angaben stehen auf MDN und bei caniuse.com und sind die beste Entscheidungsgrundlage, ob sich ein Feature ohne Fallback einsetzen lässt.

Die Browser-Landschaft besteht aus drei Engines: Blink (Chrome, Edge, Opera, Samsung Internet, Brave), WebKit (Safari, bis vor Kurzem alle iOS-Browser) und Gecko (Firefox). Der Internet Explorer ist seit 2022 endgültig abgeschaltet und muss nicht mehr berücksichtigt werden.

Das Grundgerüst einer modernen Seite

Ein vollständiges, aktuelles Grundgerüst enthält nur, was wirklich gebraucht wird. Alte Relikte wie X-UA-Compatible, Keywords-Meta oder type="text/javascript" können entfallen.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>Webdesign Augsburg: Websites, die verkaufen | Firmenname</title>
  <meta name="description" content="Präzise Zusammenfassung in 140 bis 160 Zeichen mit Nutzenversprechen.">
  <link rel="canonical" href="https://www.example.de/webdesign/">
  <meta name="robots" content="index, follow, max-image-preview:large">

  <!-- Social Sharing -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Webdesign Augsburg: Websites, die verkaufen">
  <meta property="og:description" content="Präzise Zusammenfassung ...">
  <meta property="og:image" content="https://www.example.de/assets/og/webdesign.jpg">
  <meta property="og:url" content="https://www.example.de/webdesign/">

  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <link rel="preload" href="/assets/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="/assets/css/style.css">
  <script src="/assets/js/main.js" defer></script>
  <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "LocalBusiness" }</script>
</head>
<body>
  <a class="skip-link" href="#main">Zum Inhalt springen</a>
  <header>…</header>
  <main id="main">…</main>
  <footer>…</footer>
</body>
</html>

Semantische Struktur und Überschriften

Semantik bedeutet: Das Element beschreibt, was der Inhalt ist, nicht wie er aussieht. Ein <div> sagt nichts, ein <nav> sagt „hier ist Navigation“.

Überschriften bilden das Inhaltsverzeichnis für Screenreader und Suchmaschinen. Regeln: genau eine h1 pro Seite, danach keine Ebenen überspringen, Überschriften nie nur wegen der Schriftgröße wählen. Das Aussehen regelt CSS. Der früher geplante „Document Outline“-Algorithmus, bei dem jede section wieder mit h1 beginnen darf, wurde nie umgesetzt und ist aus dem Standard entfernt.

Bilder, Video und responsive Medien

Bilder sind meist der größte Teil des Seitengewichts und häufig das LCP-Element. Modernes HTML löst Format, Auflösung und Ladeverhalten deklarativ.

<!-- Art Direction + moderne Formate + Auflösungsvarianten -->
<picture>
  <source type="image/avif"
          srcset="/img/hero-800.avif 800w, /img/hero-1600.avif 1600w"
          sizes="(min-width: 900px) 50vw, 100vw">
  <source type="image/webp"
          srcset="/img/hero-800.webp 800w, /img/hero-1600.webp 1600w"
          sizes="(min-width: 900px) 50vw, 100vw">
  <img src="/img/hero-800.jpg" alt="Webdesigner arbeitet an einem Website-Layout"
       width="1600" height="1067"
       fetchpriority="high" decoding="async">
</picture>

<!-- Bilder unterhalb des sichtbaren Bereichs -->
<img src="/img/team.webp" alt="Das Team im Büro in Augsburg"
     width="800" height="533" loading="lazy" decoding="async">

• width und height immer angeben. Der Browser reserviert damit den Platz und vermeidet Layout-Sprünge (CLS).
• loading="lazy" nur für Bilder außerhalb des ersten Bildschirms. Das Hero-Bild nie lazy laden, sondern mit fetchpriority="high" priorisieren.
• Formate: AVIF komprimiert am besten, WebP ist der sichere Standard, JPEG und PNG bleiben Fallback. SVG für Logos und Icons.
• Alt-Texte: beschreiben Inhalt und Funktion. Rein dekorative Bilder erhalten alt="", damit Screenreader sie überspringen.
• Video: <video> mit preload="none" oder metadata, einem poster und bei Autoplay zwingend muted playsinline. Untertitel über <track kind="captions">.
• Einbettungen: YouTube, Maps und Co. erst nach Klick laden („Fassade“). Das spart Megabytes und löst das Datenschutzproblem.

Formulare: Validierung, Autofill und Bedienbarkeit

Formulare entscheiden über Anfragen und Umsatz. Der Browser bringt fast alles mit, was man braucht.

<form action="/contact.php" method="post" novalidate>
  <div class="field">
    <label for="name">Ihr Name</label>
    <input id="name" name="name" type="text" autocomplete="name" required>
  </div>
  <div class="field">
    <label for="email">E-Mail-Adresse</label>
    <input id="email" name="email" type="email" autocomplete="email"
           inputmode="email" required aria-describedby="email-hint">
    <p id="email-hint" class="hint">Wir antworten innerhalb von 24 Stunden.</p>
  </div>
  <div class="field">
    <label for="tel">Telefon (optional)</label>
    <input id="tel" name="tel" type="tel" autocomplete="tel" inputmode="tel">
  </div>
  <!-- Honeypot gegen Spam-Bots, für Menschen unsichtbar -->
  <div hidden><label>Bitte leer lassen <input name="website" tabindex="-1" autocomplete="off"></label></div>
  <button type="submit">Anfrage senden</button>
</form>

Moderne interaktive Elemente ohne JavaScript-Bibliothek

Viele Dinge, für die früher jQuery-Plugins nötig waren, kann HTML heute selbst, inklusive Tastaturbedienung und Barrierefreiheit.

<!-- Popover ganz ohne JavaScript -->
<button popovertarget="kontakt-info">Kontakt</button>
<div id="kontakt-info" popover>
  <p>Telefon: 0821 123456</p>
</div>

<!-- Exklusives Akkordeon: es ist immer nur ein Eintrag offen -->
<details name="faq"><summary>Was kostet eine Website?</summary><p>…</p></details>
<details name="faq"><summary>Wie lange dauert die Umsetzung?</summary><p>…</p></details>

<!-- Modaler Dialog -->
<dialog id="angebot">
  <form method="dialog"><button>Schließen</button></form>
</dialog>
<button onclick="document.getElementById('angebot').showModal()">Angebot anfordern</button>

Meta-Tags und Link-Relationen im Detail

Validierung und typische HTML-Fehler

Browser verzeihen fast alles, Maschinen weniger. Fehlerhaftes HTML führt zu schwer auffindbaren Darstellungs-, Barrierefreiheits- und Parsing-Problemen.

• Doppelte IDs: brechen Label-Verknüpfungen, Sprungmarken und ARIA-Referenzen.
• Block-Elemente in <p>: Der Parser schließt den Absatz automatisch, das Layout zerfällt.
• Interaktive Elemente verschachtelt: ein Button in einem Link oder ein Link in einem Link ist ungültig.
• Fehlende Alt-Attribute: Screenreader lesen dann den Dateinamen vor.
• Inhalte im Head, die dort nicht hingehören: Ein <div> oder ein Tracking-Pixel im Head beendet ihn vorzeitig. Alle nachfolgenden Meta-Tags, auch Canonical und hreflang, landen dann im Body und werden ignoriert.

Werkzeuge: der W3C Nu HTML Checker (validator.w3.org/nu), die Browser-DevTools im Reiter „Issues“, Lighthouse und axe für Barrierefreiheit. Eine Validierung gehört vor jeden Launch.

Kaskade, Spezifität, Vererbung und Layers

Welche Regel gewinnt, entscheidet die Kaskade in dieser Reihenfolge: Herkunft und Wichtigkeit (!important), dann Cascade Layers, dann Spezifität, zuletzt die Reihenfolge im Code.

Spezifität wird als Tripel gezählt: IDs, dann Klassen, Attribute und Pseudoklassen, dann Elemente. #nav .item a ergibt 1-1-1 und schlägt .nav .item .link mit 0-3-0. Zwei nützliche Werkzeuge: :where() hat immer Spezifität null und eignet sich für überschreibbare Grundstile. :is() übernimmt die höchste Spezifität aus seiner Liste.

Cascade Layers beenden Spezifitätskriege. Die Reihenfolge der Layer wird einmal festgelegt. Spätere Layer gewinnen unabhängig von der Spezifität, und Stile ohne Layer schlagen alle Layer.

/* Reihenfolge einmal definieren: rechts gewinnt */
@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
}
@layer components {
  .btn { padding: .75em 1.4em; border-radius: 999px; }
}
@layer utilities {
  .mt-0 { margin-top: 0; }   /* gewinnt gegen .btn, obwohl gleiche Spezifität */
}

/* Fremdes CSS in einen niedrigen Layer sperren */
@import url("vendor/slider.css") layer(vendor);

Custom Properties und Design Tokens

CSS-Variablen leben zur Laufzeit im Browser, vererben sich und lassen sich per Media Query, Klasse oder JavaScript ändern. Sie sind die Grundlage jedes Design-Systems: Farben, Abstände, Radien und Schriftgrößen werden als Tokens definiert und überall referenziert.

:root {
  /* Primitive Tokens */
  --red-500: oklch(58% 0.23 27);
  --gray-900: oklch(15% 0.01 270);

  /* Semantische Tokens verweisen auf primitive */
  --color-accent: var(--red-500);
  --color-text: var(--gray-900);
  --color-surface: white;

  --space-s: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
  --space-l: clamp(2rem, 1.2rem + 3vw, 4rem);
  --radius: 18px;
}

/* Typisierte Variable: lässt sich animieren und hat einen Fallback */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

Layout: Flexbox, Grid, Subgrid

Faustregel: Flexbox für eine Dimension und inhaltsgetriebene Verteilung, etwa Navigation, Button-Gruppen oder Karten-Inhalt. Grid für zwei Dimensionen und layoutgetriebene Raster wie Seitenlayout, Galerien und Formulare. Floats und Tabellen-Layouts sind seit Jahren Geschichte.

/* Responsives Kartenraster ohne eine einzige Media Query */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-l);
}

/* Subgrid: Überschrift, Text und Button aller Karten fluchten zeilenweise */
.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

/* Klassisches Seitenlayout mit benannten Bereichen */
.page {
  display: grid;
  grid-template-areas: "header" "main" "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

/* Zentrieren, endgültig gelöst */
.center { display: grid; place-items: center; }

• gap funktioniert in Grid und Flexbox und ersetzt Margin-Tricks.
• aspect-ratio ersetzt den Padding-Hack für Videos und Bildplatzhalter.
• Viewport-Einheiten: dvh, svh und lvh berücksichtigen ein- und ausfahrende Browserleisten auf Mobilgeräten. 100vh führt dort zu abgeschnittenen Inhalten.
• Logische Eigenschaften: margin-inline, padding-block, inset sind kürzer und funktionieren auch bei Schreibrichtungen von rechts nach links.
• Masonry-Layouts sind als natives CSS in Arbeit, aber 2026 noch nicht browserübergreifend verfügbar. Bis dahin helfen Spalten oder eine kleine JavaScript-Lösung.

Responsive Design: Media Queries, Container Queries, fluide Typografie

Mobile First heißt: Das Basis-CSS gilt für kleine Bildschirme, größere werden per min-width erweitert. Das ergibt weniger Code und entspricht dem Mobile-First-Index von Google.

Container Queries sind der größte Fortschritt im responsiven Design seit 2010. Eine Komponente reagiert auf die Breite ihres Containers, nicht des Fensters. Dieselbe Karte funktioniert dadurch in der Sidebar, im Raster und im Vollbild.

/* Media Query mit moderner Bereichssyntax */
@media (width >= 900px) {
  .nav-toggle { display: none; }
}

/* Container Query: die Komponente kennt ihren eigenen Platz */
.card-wrap { container-type: inline-size; container-name: card; }

@container card (width > 480px) {
  .card { grid-template-columns: 200px 1fr; }
}

/* Fluide Typografie: wächst stufenlos zwischen 2rem und 3.5rem */
h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); }

/* Schönerer Umbruch */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Nutzerpräferenzen respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (prefers-color-scheme: dark) { /* dunkle Tokens */ }
@media (hover: hover) and (pointer: fine) { /* Hover-Effekte nur mit Maus */ }

:has(), Nesting, @scope und weitere moderne Selektoren

:has() ist der lange gewünschte „Eltern-Selektor“ und kann noch mehr: Er wählt ein Element abhängig davon, was es enthält oder was ihm folgt. Natives Nesting macht den Hauptgrund für Sass überflüssig.

/* Karte hervorheben, wenn sie ein Bild enthält */
.card:has(img) { grid-template-rows: 200px 1fr; }

/* Formularfeld-Gruppe rot markieren, wenn das Feld ungültig ist */
.field:has(input:user-invalid) label { color: var(--color-accent); }

/* Seite sperren, solange ein Dialog offen ist */
body:has(dialog[open]) { overflow: hidden; }

/* Natives Nesting */
.btn {
  background: var(--color-accent);
  &:hover { filter: brightness(1.1); }
  &.btn--ghost { background: transparent; }
  @media (width < 640px) { width: 100%; }
}

/* @scope: Stile gelten nur innerhalb der Komponente, bis zu einer Grenze */
@scope (.card) to (.card-content) {
  img { border-radius: var(--radius); }
}

/* Sichtbarer Fokus nur bei Tastaturbedienung */
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

:user-invalid greift erst, nachdem der Nutzer mit dem Feld interagiert hat, und ersetzt damit das störende Sofort-Rot von :invalid.

Farben: OKLCH, color-mix(), light-dark()

Der Farbraum OKLCH beschreibt Farben über Helligkeit, Sättigung (Chroma) und Farbton und ist wahrnehmungsgetreu: Gleiche Helligkeitswerte wirken tatsächlich gleich hell. Das macht Farbpaletten und Kontraste berechenbar, was mit HSL nie funktioniert hat. Zudem erreicht OKLCH die kräftigeren Farben moderner Displays (Display P3).

:root {
  color-scheme: light dark;   /* Formularelemente und Scrollbars folgen dem Modus */

  --accent: oklch(58% 0.23 27);
  --accent-hover: color-mix(in oklch, var(--accent), black 15%);
  --accent-soft: color-mix(in oklch, var(--accent), white 88%);

  /* Ein Wert für hell, einer für dunkel, ganz ohne Media Query */
  --surface: light-dark(#ffffff, #0f0f11);
  --text: light-dark(#0a0a0a, #f3f3f5);
}

/* Relative Farbsyntax: aus einer Farbe eine transparente Variante ableiten */
.badge { background: oklch(from var(--accent) l c h / 0.15); }

Kontrast bleibt Pflicht: mindestens 4,5:1 für normalen Text und 3:1 für großen Text sowie Bedienelemente. Details im Kapitel Barrierefreiheit.

Animation: Transitions, View Transitions, Scroll-Driven Animations

Animation soll Orientierung geben, nicht beeindrucken. Technisch gilt: nur transform und opacity animieren, Dauer zwischen 150 und 400 Millisekunden, und prefers-reduced-motion respektieren.

/* Einblenden von Elementen, die aus display:none kommen (Popover, Dialog) */
[popover] {
  opacity: 1; transform: none;
  transition: opacity .25s, transform .25s, display .25s allow-discrete, overlay .25s allow-discrete;
  @starting-style { opacity: 0; transform: translateY(8px); }
}

/* View Transitions zwischen Seiten einer klassischen Multi-Page-Website */
@view-transition { navigation: auto; }
.hero-img { view-transition-name: hero; }

/* Scroll-gesteuerte Animation ohne JavaScript */
@supports (animation-timeline: view()) {
  .reveal {
    animation: fade-up linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } }

View Transitions animieren den Wechsel zwischen zwei Zuständen oder sogar zwischen zwei Seiten. Eine normale Multi-Page-Website fühlt sich damit an wie eine App, ganz ohne SPA-Framework. Browser ohne Unterstützung zeigen einfach den normalen Seitenwechsel. Scroll-Driven Animations ersetzen Bibliotheken für Einblend-Effekte, sind aber noch nicht in allen Browsern verfügbar. Deshalb immer mit @supports absichern, damit Inhalte ohne Unterstützung sichtbar bleiben.

Ebenfalls neu: Anchor Positioning positioniert Tooltips und Menüs relativ zu einem Ankerelement ohne JavaScript-Bibliothek. 2026 in Chromium-Browsern und Safari verfügbar, in Firefox in Arbeit.

Webfonts richtig einbinden

Schriften beeinflussen Ladezeit, Layout-Stabilität und in Deutschland auch die Rechtslage: Google Fonts vom Google-Server einzubinden überträgt IP-Adressen in die USA und war Gegenstand von Abmahnwellen. Schriften gehören lokal auf den eigenen Server.

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;            /* Variable Font: eine Datei, alle Schnitte */
  font-display: swap;              /* Text sofort mit Ersatzschrift anzeigen */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}

/* Ersatzschrift metrisch angleichen, damit beim Wechsel nichts springt */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}
body { font-family: "Inter", "Inter Fallback", system-ui, sans-serif; }

CSS-Architektur: BEM, Utility-First, Komponenten

Für klassische Unternehmens-Websites reicht 2026 natives CSS: Custom Properties als Tokens, Layers für die Ordnung, Nesting für die Lesbarkeit. Sass ist weiterhin solide, aber selten noch nötig. Wichtiger als die Methode ist Konsequenz: eine Konvention, ein Ort für Tokens, keine Inline-Styles, kein ungenutztes CSS aus Page-Buildern.

Skripte richtig laden: defer, async, Module

<!-- Import Map: kurze Modulnamen ohne Bundler -->
<script type="importmap">
  { "imports": { "app/": "/assets/js/app/" } }
</script>
<script type="module">
  import { initNav } from "app/nav.js";
  initNav();

  // Schwere Funktionen erst bei Bedarf nachladen
  document.querySelector("#open-map")?.addEventListener("click", async () => {
    const { initMap } = await import("app/map.js");
    initMap();
  });
</script>

Moderne Sprachfeatures (ES2020 bis ES2025)

ECMAScript erscheint jährlich. Alle folgenden Features laufen in aktuellen Browsern ohne Transpiler.

// Optional Chaining und Nullish Coalescing
const city = user?.address?.city ?? "unbekannt";

// Logische Zuweisung
options.timeout ??= 5000;

// Unveränderliche Array-Methoden (ES2023): das Original bleibt unangetastet
const sorted = prices.toSorted((a, b) => a - b);
const last = prices.at(-1);
const found = items.findLast((item) => item.active);

// Gruppieren (ES2024)
const byCategory = Object.groupBy(posts, (post) => post.category);

// Promise.withResolvers (ES2024)
const { promise, resolve, reject } = Promise.withResolvers();

// Set-Operationen (ES2025)
const both = new Set(tagsA).intersection(new Set(tagsB));

// Iterator-Helfer (ES2025): lazy, ohne Zwischen-Arrays
const firstFive = items.values().filter((i) => i.visible).take(5).toArray();

// Tiefe Kopie ohne JSON-Umweg
const copy = structuredClone(state);

// Top-Level await in Modulen
const config = await fetch("/config.json").then((r) => r.json());

Weitere wichtige Bausteine: const und let statt var, Destructuring, Spread, Template-Strings, Klassen mit privaten Feldern (#feld), Intl für Zahlen, Währungen, Datumsangaben und relative Zeiten ganz ohne Bibliothek. Die Temporal-API als moderner Ersatz für das fehleranfällige Date kommt 2026 schrittweise in die Browser. Bis zur breiten Verfügbarkeit ist ein Polyfill oder Intl.DateTimeFormat die sichere Wahl.

Asynchrones JavaScript und fetch

JavaScript läuft im Browser auf einem einzigen Hauptthread. Die Event Loop arbeitet Aufgaben nacheinander ab. Solange eine Aufgabe läuft, reagiert die Seite nicht. Asynchroner Code gibt den Thread frei, während auf Netzwerk oder Timer gewartet wird.

async function loadReviews() {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), 8000);
  try {
    const res = await fetch("/api/reviews.json", { signal: controller.signal });
    if (!res.ok) throw new Error("HTTP " + res.status);   // fetch wirft bei 404/500 NICHT von selbst
    return await res.json();
  } catch (err) {
    console.error("Bewertungen konnten nicht geladen werden:", err);
    return [];                                            // Seite bleibt benutzbar
  } finally {
    clearTimeout(timer);
  }
}

// Mehrere Anfragen parallel statt nacheinander
const [reviews, posts] = await Promise.all([loadReviews(), loadPosts()]);

// Lange Aufgaben aufteilen, damit Eingaben nicht blockieren (wichtig für INP)
const yieldToMain = () => globalThis.scheduler?.yield?.() ?? new Promise((r) => setTimeout(r));

async function processAll(items) {
  let last = performance.now();
  for (const item of items) {
    process(item);
    if (performance.now() - last > 40) {   // spätestens alle 40 ms den Hauptthread freigeben
      await yieldToMain();
      last = performance.now();
    }
  }
}

DOM, Events und die wichtigsten Web-APIs

jQuery ist für neue Projekte nicht mehr nötig. Das native DOM-API ist vollständig und schneller.

// Event Delegation: ein Listener für beliebig viele, auch spätere Elemente
document.addEventListener("click", (event) => {
  const toggle = event.target.closest("[data-toggle]");
  if (!toggle) return;
  const target = document.getElementById(toggle.dataset.toggle);
  const open = target.toggleAttribute("hidden") === false;
  toggle.setAttribute("aria-expanded", String(open));
});

// IntersectionObserver statt Scroll-Listener
const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      entry.target.classList.add("is-visible");
      observer.unobserve(entry.target);
    }
  }
}, { rootMargin: "0px 0px -10% 0px" });
document.querySelectorAll(".reveal").forEach((el) => observer.observe(el));

// Passive Listener blockieren das Scrollen nicht
window.addEventListener("scroll", onScroll, { passive: true });

Web Components

Web Components sind der browsereigene Komponentenstandard aus Custom Elements, Shadow DOM und Templates. Sie funktionieren in jedem Framework und ohne Framework und eignen sich besonders für langlebige Design-Systeme und einzelne interaktive Bausteine.

class CopyButton extends HTMLElement {
  connectedCallback() {
    this.addEventListener("click", async () => {
      await navigator.clipboard.writeText(this.getAttribute("text") ?? "");
      const old = this.textContent;
      this.textContent = "Kopiert";
      setTimeout(() => (this.textContent = old), 1500);
    });
  }
}
customElements.define("copy-button", CopyButton);
// Verwendung: <copy-button text="info@example.de" role="button" tabindex="0">E-Mail kopieren</copy-button>

Für SEO wichtig: Inhalte sollten im normalen DOM stehen (Light DOM oder Declarative Shadow DOM), damit sie ohne JavaScript im HTML vorhanden sind.

Frameworks und Meta-Frameworks im Überblick

Build-Tools, TypeScript und Qualitätssicherung

• Node.js ist die Laufzeit für fast alle Werkzeuge. Immer eine aktive LTS-Version verwenden. Alternativen wie Bun und Deno sind schneller, aber im Agenturalltag noch Nische.
• Paketmanager: npm, pnpm (platzsparend, strikt) oder Yarn. Die Lock-Datei gehört ins Repository.
• Vite ist der Standard-Bundler und Dev-Server. Webpack findet sich vor allem in Altprojekten. Rust-basierte Werkzeuge wie Rolldown, Rspack, Turbopack, Oxc und Biome beschleunigen Builds und Linting erheblich.
• TypeScript ist in professionellen Projekten Standard. Typen finden Fehler vor der Laufzeit und machen Code selbstdokumentierend. Node.js kann TypeScript-Dateien inzwischen direkt ausführen, indem es die Typen entfernt.
• Qualität: ESLint oder Biome für Regeln, Prettier für Formatierung, Vitest für Unit-Tests, Playwright für End-to-End-Tests im echten Browser.
• Versionsverwaltung: Git, ohne Ausnahme. Auch für WordPress-Themes und statische Seiten.

Progressive Web Apps und Service Worker

Eine PWA ist eine Website mit Web-App-Manifest und Service Worker. Sie ist installierbar, startet im eigenen Fenster und kann offline funktionieren. Der Service Worker sitzt als programmierbarer Proxy zwischen Seite und Netzwerk.

// sw.js: Stale-While-Revalidate für statische Assets
self.addEventListener("fetch", (event) => {
  const req = event.request;
  if (req.method !== "GET" || !req.url.includes("/assets/")) return;
  event.respondWith(
    caches.open("assets-v3").then(async (cache) => {
      const cached = await cache.match(req);
      const network = fetch(req).then((res) => { cache.put(req, res.clone()); return res; });
      return cached ?? network;
    })
  );
});

Für normale Firmenwebsites ist eine PWA selten nötig. Sinnvoll ist sie bei wiederkehrender Nutzung: Kundenportale, Bestell-Apps für Stammkunden, interne Werkzeuge. Seit iOS 16.4 unterstützen auch iPhones Web-Push für installierte PWAs.

Der Webdesign-Prozess von der Idee bis zum Launch

1. Ziele und Zielgruppe: Was soll die Website messbar leisten, etwa Anfragen, Verkäufe, Bewerbungen? Wer entscheidet, mit welchen Fragen und Einwänden? Ohne diese Klärung ist jedes Design Dekoration.
2. Inhaltsstrategie und Keyword-Recherche: Inhalte kommen vor dem Layout. Die Seitenstruktur folgt den Suchintentionen und den Leistungen des Unternehmens.
3. Informationsarchitektur: Sitemap, Navigationskonzept und URL-Struktur. Jede wichtige Seite ist in höchstens drei Klicks erreichbar.
4. Wireframes: Schwarz-Weiß-Skizzen klären Hierarchie und Nutzerführung, bevor über Farben diskutiert wird.
5. Design: Moodboard, Design-System mit Tokens, dann Schlüsselseiten in Figma, mobil zuerst.
6. Entwicklung: Komponentenweise Umsetzung, Inhalte einpflegen, Tracking und Rechtstexte einbinden.
7. Test: Geräte, Browser, Formulare, Performance, Barrierefreiheit, SEO-Grundlagen, Weiterleitungen.
8. Launch und Betrieb: Go-live mit Monitoring, danach messen, lernen und verbessern.

Wie wir diesen Prozess in Kundenprojekten umsetzen, zeigt die Seite Webdesign, Beispiele finden sich in den Referenzen.

Visuelle Hierarchie, Layout und Weißraum

Besucher lesen nicht, sie scannen. Eye-Tracking-Studien zeigen F- und Z-förmige Blickverläufe. Die Aufgabe des Designs ist es, den Blick in der richtigen Reihenfolge zu führen: Versprechen, Beleg, Handlung.

• Größe und Gewicht: Das Wichtigste ist am größten. Pro Bildschirm gibt es genau einen primären Blickfang.
• Kontrast: Die primäre Handlungsaufforderung erhält die auffälligste Farbe und wird nirgends sonst dekorativ verwendet.
• Weißraum: Leerraum gruppiert und gewichtet. Enge Layouts wirken billig, großzügige hochwertig.
• Gestaltgesetze: Nähe, Ähnlichkeit und gemeinsame Region erzeugen Zusammengehörigkeit ohne zusätzliche Linien und Boxen.
• Raster: Ein konsistentes Spalten- und Abstandssystem, etwa eine 8-Pixel-Skala, erzeugt Ruhe.
• Der erste Bildschirm beantwortet drei Fragen in fünf Sekunden: Was wird angeboten, für wen, und was ist der nächste Schritt?

Typografie im Web

Deutsche Texte sind durch lange Komposita anspruchsvoll. Silbentrennung, ausreichend breite Spalten und text-wrap: balance für Überschriften verhindern hässliche Umbrüche, besonders auf Mobilgeräten.

Farbe, Bildsprache und Marke

Die 60-30-10-Regel ist ein verlässlicher Startpunkt: 60 Prozent neutrale Grundfarbe, 30 Prozent Sekundärfarbe, 10 Prozent Akzent für Handlungsaufforderungen. Farben müssen in beiden Modi funktionieren (hell und dunkel) und die Kontrastanforderungen erfüllen.

Bildsprache: Echte Fotos von Team, Räumen und Arbeit schlagen Stockfotos in jeder Vertrauensmessung. Gesichter ziehen Blicke an, und die Blickrichtung einer Person lenkt die Aufmerksamkeit des Betrachters. KI-generierte Bilder sind 2026 Alltag. Sie eignen sich für Illustration und Stimmung, nicht als Ersatz für echte Belege wie Teamfotos oder Referenzprojekte. Mehr dazu unter Unternehmensfotografie.

Konsistenz entsteht über ein Design-System: Tokens, Komponenten und Regeln, dokumentiert und für Print und Web einheitlich. Die Verbindung zur gedruckten Marke beschreibt die Seite Printdesign.

Conversion-Optimierung: aus Besuchern werden Anfragen

• Eine Seite, ein Ziel: Jede Seite hat eine primäre Handlung. Konkurrierende Buttons senken die Abschlussrate.
• Nutzen vor Merkmalen: „Mehr Anfragen über Ihre Website“ überzeugt mehr als „Responsive WordPress-Theme“.
• Sozialer Beweis: Bewertungen mit Namen, Logos, Fallstudien mit Zahlen, Siegel. Möglichst nah an der Handlungsaufforderung platzieren.
• Reibung senken: kurze Formulare, klickbare Telefonnummer, WhatsApp, Rückruf. Jede Kontaktpräferenz bedienen.
• Einwände vorwegnehmen: Preise oder Preisspannen, Ablauf, Dauer, Garantie. Ein FAQ-Bereich direkt vor dem Abschluss wirkt.
• Button-Texte beschreiben das Ergebnis: „Kostenloses Angebot anfordern“ statt „Absenden“.
• Geschwindigkeit ist Conversion: Jede Sekunde Ladezeit kostet messbar Abschlüsse, mobil besonders stark.
• Wiederholung: Die Handlungsaufforderung erscheint mehrfach: im Hero, nach Belegen, am Seitenende und mobil als feste Leiste.

Mobile First in der Praxis

In den meisten Branchen kommen 60 bis 80 Prozent der Besuche vom Smartphone, und Google bewertet ausschließlich die mobile Version. Mobile First ist deshalb keine Designphilosophie, sondern wirtschaftliche Notwendigkeit.

• Daumenzone: Wichtige Bedienelemente gehören in die untere Bildschirmhälfte. Eine feste Kontaktleiste unten ist auf Dienstleister-Websites sehr wirksam.
• Touch-Ziele: mindestens 24 mal 24 Pixel nach WCAG 2.2, empfohlen 44 bis 48 Pixel, mit Abstand zueinander.
• Navigation: Ein Menü-Button ist mobil akzeptiert. Die wichtigsten Ziele bleiben trotzdem ohne Menü erreichbar.
• Eingaben minimieren: richtige Tastaturen über inputmode, Autofill, Auswahl statt Tippen.
• Keine Hover-Abhängigkeit: Alles, was auf dem Desktop beim Überfahren erscheint, braucht mobil eine Alternative.
• Auf echten Geräten testen, auch auf einem günstigen Android-Gerät im Mobilfunknetz, nicht nur im Simulator.

Designtrends 2026 und was davon bleibt

Trends kommen und gehen. Was bleibt: Klarheit, Geschwindigkeit, Glaubwürdigkeit und ein eindeutiger nächster Schritt.

Die Systeme im direkten Vergleich

Entscheidungshilfe: Welches System passt?

• Wer pflegt die Inhalte? Redakteure ohne Technikkenntnisse brauchen ein CMS mit guter Oberfläche. Pflegt ohnehin der Dienstleister, ist eine statische Lösung oft schneller und günstiger.
• Wie oft ändert sich etwas? Täglich neue Inhalte sprechen für ein CMS, zwei Änderungen im Jahr dagegen.
• Welche Funktionen sind nötig? Shop, Mitgliederbereich, Buchung, Mehrsprachigkeit. Je mehr davon, desto eher ein ausgewachsenes System.
• Welches Budget gibt es für den Betrieb? Ein CMS ohne Wartungsvertrag ist ein Sicherheitsrisiko. Updates, Backups und Monitoring gehören in die Kalkulation.
• Wie wichtig ist Unabhängigkeit? Open Source auf eigenem Hosting lässt sich jederzeit umziehen. Bei Mietbaukästen gehört die Website faktisch dem Anbieter.
• Gibt es Integrationen? Warenwirtschaft, CRM, Newsletter. Vorhandene Schnittstellen sparen viel Entwicklungsaufwand.

Gesamtkosten über fünf Jahre (TCO)

Die Erstellung ist nur ein Teil der Kosten. Entscheidend ist der Blick auf mehrere Jahre.

Konkrete Preisspannen für Projekte in Augsburg und Bayern stehen auf der Seite Preise.

Page-Builder: Elementor, Divi, Bricks und der Block-Editor

Page-Builder machen Layouts ohne Code möglich, haben aber ihren Preis: zusätzliches CSS und JavaScript, verschachteltes HTML und Abhängigkeit vom Hersteller. Wird ein Builder deaktiviert, bleibt oft unbrauchbarer Shortcode-Text zurück.

Architektur: Core, Themes, Plugins, Datenbank

• Core: der Kern in wp-admin und wp-includes. Niemals verändern, Änderungen gehen beim nächsten Update verloren.
• wp-content: alles Eigene: Themes, Plugins, Uploads. Nur dieser Ordner und die wp-config.php sind projektspezifisch.
• Datenbank: MySQL oder MariaDB. Inhalte liegen in wp_posts, Zusatzfelder in wp_postmeta, Einstellungen in wp_options. Eine aufgeblähte Options-Tabelle mit automatisch geladenen Einträgen ist eine klassische Performance-Bremse.
• Hooks: Actions und Filter sind das Erweiterungsprinzip. Sauberer Code hängt sich ein, statt Dateien zu überschreiben.
• Inhaltstypen: Beiträge, Seiten, eigene Post Types, Taxonomien und Felder bilden fast jedes Datenmodell ab, von Referenzen über Stellenanzeigen bis zu Immobilien.
• REST-API: Jede Installation bringt eine JSON-Schnittstelle unter /wp-json/ mit. Sie ist die Basis für den Block-Editor und für Headless-Setups.

Systemvoraussetzungen 2026: PHP 8.3 oder neuer (8.4 empfohlen), MySQL 8 oder MariaDB 10.6 und neuer, HTTPS, genügend PHP-Speicher (256 Megabyte) und ein Object Cache bei größeren Seiten. PHP-Versionen ohne Sicherheitsupdates sind ein Ausschlusskriterium für jeden Hoster.

Block-Editor, Full Site Editing und theme.json

Seit WordPress 5.9 lassen sich mit Block-Themes auch Kopfbereich, Fußbereich und Vorlagen im Editor bearbeiten. Das Herzstück ist die theme.json: Sie definiert Farben, Schriften, Abstände und Layoutbreiten zentral. WordPress erzeugt daraus CSS-Variablen und beschränkt die Auswahl im Editor auf das Design-System. Redakteure können das Design dadurch nicht mehr versehentlich zerstören.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "layout": { "contentSize": "760px", "wideSize": "1280px" },
    "color": {
      "defaultPalette": false,
      "palette": [
        { "slug": "accent", "name": "Akzent", "color": "#e40f1a" },
        { "slug": "ink", "name": "Text", "color": "#0a0a0a" }
      ]
    },
    "typography": {
      "fluid": true,
      "fontFamilies": [{
        "slug": "body", "name": "Inter", "fontFamily": "Inter, system-ui, sans-serif",
        "fontFace": [{ "fontFamily": "Inter", "fontWeight": "100 900", "src": ["file:./assets/fonts/inter.woff2"] }]
      }]
    }
  },
  "styles": {
    "elements": { "button": { "border": { "radius": "999px" } } }
  }
}

• Patterns sind vorgefertigte Abschnitte aus Blöcken. Synchronisierte Patterns ändern sich überall gleichzeitig.
• Eigene Blöcke entstehen mit block.json und React oder serverseitig gerendert mit PHP. Die Interactivity API liefert schlanke Frontend-Interaktion ohne eigenes Framework.
• Block Bindings verbinden Blöcke mit eigenen Feldern, was viele Fälle von Advanced Custom Fields im Template ersetzt.
• Schriften lassen sich über die Font Library lokal installieren. Das löst das Google-Fonts-Problem an der Wurzel.
• Klassische Themes mit PHP-Templates funktionieren weiter. Neue Projekte sollten aber auf Block-Themes oder hybride Themes setzen.

Plugins: so wenige wie möglich, so gute wie nötig

Jedes Plugin ist Code eines Dritten mit vollen Rechten auf der Website. Die Mehrzahl aller gehackten WordPress-Seiten wird über veraltete oder verwaiste Plugins kompromittiert, nicht über den Core.

WordPress schnell machen

1. Hosting: aktuelle PHP-Version mit OPcache, SSD-Speicher, HTTP/2 oder HTTP/3, Serverstandort nah an der Zielgruppe. Billig-Hosting mit Hunderten Kunden pro Server ist die häufigste Ursache für schlechte Antwortzeiten.
2. Seiten-Cache: Fertiges HTML wird gespeichert und ohne PHP und Datenbank ausgeliefert. Das senkt die Antwortzeit von 800 auf unter 100 Millisekunden.
3. Object Cache: Redis oder Memcached beschleunigt Datenbankabfragen, vor allem bei Shops und eingeloggten Nutzern.
4. Bilder: WordPress erzeugt automatisch srcset-Varianten und lädt lazy. Zusätzlich auf WebP oder AVIF umstellen und Uploads vorab verkleinern.
5. Assets aufräumen: CSS und JavaScript von Plugins nur dort laden, wo sie gebraucht werden. Emojis, Embeds, jQuery Migrate und Dashicons im Frontend abschalten, wenn ungenutzt.
6. Datenbank pflegen: Revisionen begrenzen, abgelaufene Transients und verwaiste Metadaten löschen, automatisch geladene Optionen unter einem Megabyte halten.
7. Vorab-Laden: Seit WordPress 6.8 sind Speculation Rules im Core: Links werden beim Überfahren vorgeladen, der Seitenwechsel wirkt sofort.

// wp-config.php: sinnvolle Grundeinstellungen
define( 'WP_POST_REVISIONS', 10 );          // Revisionen begrenzen
define( 'AUTOSAVE_INTERVAL', 120 );
define( 'WP_MEMORY_LIMIT', '256M' );
define( 'DISALLOW_FILE_EDIT', true );       // Datei-Editor im Backend abschalten
define( 'WP_AUTO_UPDATE_CORE', 'minor' );   // Sicherheitsupdates automatisch
define( 'DISABLE_WP_CRON', true );          // echten Cronjob nutzen: wp cron event run --due-now
define( 'WP_ENVIRONMENT_TYPE', 'production' );

WordPress absichern

# .htaccess im Ordner wp-content/uploads: kein PHP ausführen
<FilesMatch "\.(?:php|phtml|phar)$">
  Require all denied
</FilesMatch>

# .htaccess im Hauptverzeichnis: sensible Dateien schützen
<FilesMatch "^(wp-config\.php|readme\.html|license\.txt|\.env)$">
  Require all denied
</FilesMatch>

WP-CLI, Staging und professioneller Workflow

wp core update && wp plugin update --all && wp theme update --all
wp core verify-checksums                     # Core-Dateien auf Manipulation prüfen
wp plugin list --update=available
wp search-replace 'https://alt.de' 'https://neu.de' --all-tables --precise --dry-run
wp db export backup-$(date +%F).sql
wp transient delete --expired
wp user list --role=administrator
wp option list --autoload=on --fields=option_name,size_bytes --orderby=size_bytes --order=desc | head -20

• Staging: Updates und Umbauten zuerst auf einer Kopie testen. Viele Hoster bieten das per Klick.
• Versionsverwaltung: Theme und eigene Plugins in Git, Deployment automatisiert statt per FTP.
• Domainwechsel immer mit wp search-replace, weil serialisierte Daten bei einfachem Suchen und Ersetzen in der Datenbank zerbrechen.
• Lokale Entwicklung: LocalWP, DDEV, wp-env oder WordPress Playground im Browser.

WooCommerce und Headless WordPress

WooCommerce macht WordPress zum Shop. Für deutsches Recht ist ein Ergänzungs-Plugin wie Germanized oder German Market nötig: Grundpreise, Lieferzeiten, Button-Lösung, Widerrufsbelehrung, Rechnungen. Seit der Umstellung auf High-Performance Order Storage liegen Bestellungen in eigenen Tabellen, was große Shops deutlich beschleunigt. Warenkorb, Kasse und Kundenkonto dürfen nie im Seiten-Cache landen.

Headless WordPress nutzt WordPress nur als Redaktionssystem und liefert Inhalte per REST-API oder WPGraphQL an ein Frontend aus Astro oder Next.js. Das bringt maximale Geschwindigkeit und Sicherheit, kostet aber Vorschau-Komfort, Plugin-Kompatibilität und Budget. Für die meisten Unternehmenswebsites ist ein gut gecachtes klassisches WordPress die wirtschaftlichere Lösung.

Unsere Leistungen rund um Einrichtung, Wartung und Optimierung beschreibt die Seite WordPress-Agentur Augsburg.

Versionen und Lebenszyklus

Joomla folgt einem festen Rhythmus: alle zwei Jahre eine Hauptversion, dazwischen halbjährliche Funktionsupdates. Jede Hauptversion erhält insgesamt rund vier Jahre Unterstützung. Das macht die Planung verlässlich.

Architektur: Komponenten, Module, Plugins, Templates

• Komponenten sind die Hauptanwendungen einer Seite: Inhalte, Kontakte, Benutzer, Suche, Shop.
• Module sind Bausteine an Template-Positionen: Menü, Login, neueste Beiträge, eigener HTML-Block.
• Plugins reagieren auf Ereignisse und verändern Verhalten: Authentifizierung, Suche, Editor, Systemfunktionen.
• Templates steuern die Ausgabe. Overrides erlauben, die HTML-Ausgabe jeder Komponente und jedes Moduls update-sicher zu überschreiben. Child-Templates gibt es seit Joomla 4.1.
• Menüeinträge bestimmen in Joomla, was eine URL anzeigt. Dieses Konzept unterscheidet Joomla grundlegend von WordPress und ist die häufigste Verständnishürde.

Technisch basiert Joomla auf PHP mit Namespaces, Dependency Injection und einem eigenen Framework. Das Standard-Frontend-Template heißt Cassiopeia, das Backend-Template Atum. Beide sind responsiv und auf Barrierefreiheit ausgelegt. Assets werden über den Web Asset Manager mit Abhängigkeiten verwaltet.

Was Joomla im Kern kann

Erweiterungen und Page-Builder

Das Joomla Extensions Directory (JED) listet mehrere tausend Erweiterungen. Bewährt sind unter anderem Akeeba Backup und Admin Tools (Backup, Sicherheit), YOOtheme Pro, SP Page Builder und Helix (Templates und Page-Builder), RSForm und Convert Forms (Formulare), JCE (Editor), 4SEO und sh404SEF (SEO), HikaShop, VirtueMart und J2Store (Shop).

SEO und Performance in Joomla

• URLs: suchmaschinenfreundliche URLs und URL-Rewriting aktivieren, htaccess.txt in .htaccess umbenennen. Seit Joomla 4 lassen sich die IDs aus den URLs entfernen.
• Metadaten: Seitentitel, Beschreibung und Robots je Menüeintrag und Beitrag. Der Seitentitel wird häufig vom Menüeintrag bestimmt, nicht vom Beitrag.
• Doppelte Inhalte: Derselbe Beitrag kann über mehrere Menüwege erreichbar sein. Canonical-Verhalten prüfen und Menüstruktur sauber planen.
• Caching: System-Cache und das Plugin „Seitencache“ aktivieren, dazu Gzip oder Brotli auf Serverebene.
• Bilder: Lazy Loading ist im Kern aktiv. WebP-Umwandlung und responsive Varianten über Erweiterungen oder das Template lösen.
• Sitemap: über Erweiterungen wie OSMap oder 4SEO, da der Kern keine XML-Sitemap erzeugt.

# Joomla CLI: Wartung ohne Backend
php cli/joomla.php core:check-updates
php cli/joomla.php core:update
php cli/joomla.php extension:list
php cli/joomla.php cache:clean
php cli/joomla.php scheduler:run

Migration: von Joomla 3 nach 5/6 oder zu WordPress

1. Bestandsaufnahme: Erweiterungen, Template, eigene Overrides, PHP-Version. Für jede Erweiterung klären: aktualisierbar, ersetzbar oder verzichtbar.
2. Kopie anlegen und ausschließlich dort arbeiten, zum Beispiel mit Akeeba Backup.
3. Auf die letzte 3.10 aktualisieren, inkompatible Erweiterungen entfernen, dann über den Update-Kanal auf 4, anschließend 5 und 6.
4. Template: Alte Joomla-3-Templates funktionieren nicht mehr. Neues Template oder Neuaufbau auf Cassiopeia einplanen.
5. Alternative Neuaufbau: Bei stark gewachsenen Seiten ist eine frische Installation mit Datenübernahme oft sauberer als eine Migration mit Altlasten.
6. URLs sichern: Alle alten URLs erfassen und per 301 auf die neuen Ziele leiten, egal ob die Seite bei Joomla bleibt oder zu WordPress oder einer statischen Lösung wechselt.

Ein Wechsel zu WordPress lohnt sich, wenn die Joomla-Stärken (Rechte, Mehrsprachigkeit im Kern) nicht gebraucht werden und Redaktion oder Dienstleistersuche einfacher werden sollen. Wer die Stärken nutzt, bleibt mit Joomla 5 oder 6 auf einer modernen, gut gepflegten Plattform.

Das Prinzip: Bauen statt Berechnen

Ein klassisches CMS berechnet jede Seite bei jedem Aufruf neu: PHP starten, Datenbank abfragen, Template füllen. Eine statische Website erledigt das einmal beim Build. Der Server liefert danach nur noch Dateien aus. Das ist die schnellste und robusteste Art, Inhalte ins Web zu bringen.

Static Site Generators im Überblick

Ein eigener Generator ist weniger exotisch, als es klingt. Im Kern sind es drei Schritte: Daten laden, Templates füllen, Dateien schreiben.

// build.js: minimaler Static Site Generator mit Node.js
const fs = require("fs");
const path = require("path");

const pages = require("./data/pages.json");          // [{ slug, title, description, body }]
const layout = fs.readFileSync("./templates/layout.html", "utf8");

for (const page of pages) {
  const html = layout
    .replaceAll("{{title}}", page.title)
    .replaceAll("{{description}}", page.description)
    .replaceAll("{{canonical}}", "https://www.example.de/" + page.slug + "/")
    .replace("{{body}}", page.body);

  const dir = path.join("dist", page.slug);
  fs.mkdirSync(dir, { recursive: true });
  fs.writeFileSync(path.join(dir, "index.html"), html);   // ergibt saubere URLs: /slug/
}

// Sitemap gleich mit erzeugen
const urls = pages.map((p) => "<url><loc>https://www.example.de/" + p.slug + "/</loc></url>").join("");
fs.writeFileSync("dist/sitemap.xml",
  '<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">' + urls + "</urlset>");

Dynamische Funktionen auf statischen Seiten

Hosting, Deployment und saubere URLs

Statische Seiten laufen auf jedem Webspace. Wer ohnehin klassisches Hosting mit Apache hat, lädt den Build-Ordner hoch und steuert Verhalten über die .htaccess. Spezialisierte Plattformen wie Cloudflare Pages, Netlify, Vercel oder GitHub Pages bauen bei jedem Git-Push automatisch neu und verteilen die Dateien weltweit über ein CDN.

# .htaccess für eine statische Website auf Apache
RewriteEngine On

# HTTPS und eine einheitliche Domain erzwingen
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} !^www\.example\.de$ [NC]
RewriteRule ^ https://www.example.de%{REQUEST_URI} [L,R=301]

# Alte .html-Adressen auf saubere Ordner-URLs leiten
RewriteCond %{THE_REQUEST} \s/([^.?\s]+)\.html[\s?] [NC]
RewriteRule ^ /%1/ [L,R=301]

# Einzelne Alt-URLs nach einem Relaunch
Redirect 301 /leistungen/homepage-erstellung/ /webdesign/

ErrorDocument 404 /404/index.html

# Kompression und Cache
<IfModule mod_brotli.c>
  AddOutputFilterByType BROTLI_COMPRESS text/html text/css application/javascript image/svg+xml application/json
</IfModule>
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/html "access plus 0 seconds"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

Wann statisch die richtige Wahl ist

Der Mittelweg heißt Hybrid: Redaktion in einem Headless-CMS oder in WordPress, Auslieferung als statische Dateien. Das verbindet Redaktionskomfort mit der Geschwindigkeit und Sicherheit statischer Seiten.

Die Core Web Vitals und ihre Grenzwerte

Bewertet wird das 75. Perzentil echter Nutzer über 28 Tage, getrennt nach Mobil und Desktop. INP hat im März 2024 die ältere Metrik FID abgelöst und ist deutlich strenger, weil jede Interaktion zählt. Ergänzende Diagnosewerte sind TTFB (Ziel unter 0,8 Sekunden), FCP (unter 1,8 Sekunden) und die Total Blocking Time im Labor.

LCP optimieren

Das LCP-Element ist meist das Hero-Bild oder die Hauptüberschrift. Die LCP-Zeit besteht aus vier Teilen: Antwortzeit des Servers, Verzögerung bis zum Ladebeginn der Ressource, Ladedauer und Verzögerung bis zur Darstellung.

<!-- LCP-Bild: im HTML, priorisiert, mit Abmessungen -->
<img src="/img/hero-1200.avif"
     srcset="/img/hero-800.avif 800w, /img/hero-1200.avif 1200w, /img/hero-2000.avif 2000w"
     sizes="(min-width: 900px) 50vw, 100vw"
     width="1200" height="800" alt="…"
     fetchpriority="high" decoding="async">

INP optimieren

Eine Interaktion besteht aus Eingabeverzögerung, Verarbeitungszeit der Event-Handler und Darstellungszeit. Schlechte Werte entstehen fast immer durch zu viel JavaScript auf dem Hauptthread.

• Drittanbieter reduzieren: Tag-Manager, Chat, Consent-Werkzeuge, Werbung und Tracking sind die häufigsten Verursacher.
• Lange Aufgaben teilen: Arbeit in Häppchen unter 50 Millisekunden zerlegen und dazwischen mit scheduler.yield() oder setTimeout den Thread freigeben.
• Sofort reagieren: erst die sichtbare Rückmeldung darstellen, dann die eigentliche Arbeit erledigen.
• DOM klein halten: Unter 1.500 Knoten ist ein gutes Ziel. Page-Builder erzeugen leicht das Dreifache.
• Hydration begrenzen: Bei Framework-Seiten nur interaktive Teile hydratisieren (Islands, Server Components).
• Teure CSS-Effekte meiden: großflächige backdrop-filter, box-shadow-Animationen und Layout-Eigenschaften.
• Messen: Die Long Animation Frames API und der Performance-Tab der DevTools zeigen, welches Skript blockiert.

CLS vermeiden

• Bilder, Videos und iframes immer mit width und height oder aspect-ratio.
• Platz für nachgeladene Inhalte reservieren: Werbung, Einbettungen, Cookie-Banner, Bewertungs-Widgets. Eine min-height genügt.
• Inhalte nie oberhalb bestehender Inhalte einfügen, außer als Reaktion auf eine Nutzeraktion.
• Schriftwechsel entschärfen: Ersatzschrift metrisch angleichen (size-adjust), wichtige Schrift vorladen.
• Nur transform animieren. Animationen von Höhe, Breite oder Position verschieben das Layout.
• Cookie-Banner als überlagernde Ebene gestalten, nicht als Element, das den Inhalt nach unten schiebt.

Netzwerk: Kompression, Caching, CDN, Resource Hints

<!-- Speculation Rules: interne Links beim Überfahren vorab rendern -->
<script type="speculationrules">
{
  "prerender": [{
    "where": { "and": [
      { "href_matches": "/*" },
      { "not": { "href_matches": ["/warenkorb/*", "/kasse/*", "/logout*"] } }
    ]},
    "eagerness": "moderate"
  }]
}
</script>

Bilder und Videos optimieren

Messen, Budgets und Monitoring

• PageSpeed Insights: zeigt Feld- und Labordaten in einem Bericht.
• Search Console, Bericht Core Web Vitals: gruppiert URLs nach Problemen auf Basis von Felddaten.
• Chrome DevTools: Performance-Tab mit Live-Metriken, Netzwerk-Drosselung und CPU-Bremse für realistische Tests.
• WebPageTest: Wasserfalldiagramme, Filmstreifen, Tests von echten Standorten und Geräten.
• Eigene Messung: Die Bibliothek web-vitals sendet echte Nutzerwerte an das eigene Analytics.

// Echte Core Web Vitals der eigenen Besucher erfassen
// Bibliothek lokal hosten, nicht von einem fremden CDN laden
import { onLCP, onINP, onCLS } from "/assets/js/vendor/web-vitals.js";

function send(metric) {
  const body = JSON.stringify({ name: metric.name, value: metric.value, rating: metric.rating, page: location.pathname });
  navigator.sendBeacon?.("/vitals", body);
}
onLCP(send); onINP(send); onCLS(send);

Wie Google arbeitet: Crawling, Rendering, Indexierung, Ranking

1. Entdecken: URLs stammen aus Links, Sitemaps und Einreichungen in der Search Console.
2. Crawling: Der Googlebot ruft die URL ab, mobil zuerst. Seit Juli 2024 crawlt Google Websites ausschließlich mit dem Smartphone-Bot. Was mobil fehlt, existiert für Google nicht.
3. Rendering: Google führt JavaScript mit einem aktuellen Chromium aus, aber zeitversetzt und mit begrenzten Ressourcen. Andere Suchmaschinen und die meisten KI-Crawler rendern gar nicht.
4. Indexierung: Inhalt wird analysiert, Duplikate werden zusammengefasst, eine kanonische URL wird bestimmt. Nicht jede gecrawlte Seite wird indexiert. Qualität entscheidet.
5. Ranking: Hunderte Signale, darunter Relevanz zur Suchintention, Qualität und Vertrauenswürdigkeit, Links, Nutzererfahrung, Standort und Aktualität.

Crawl-Budget ist nur für sehr große Websites ab etwa zehntausend URLs ein Thema. Für alle anderen gilt: keine URL-Varianten durch Parameter und Filter erzeugen, Fehlerseiten korrekt mit 404 beantworten, interne Links pflegen.

robots.txt, Meta-Robots und X-Robots-Tag

Die robots.txt steuert das Crawling, nicht die Indexierung. Eine gesperrte URL kann trotzdem im Index erscheinen, wenn sie verlinkt ist. Wer eine Seite aus dem Index halten will, braucht noindex und muss das Crawling erlauben.

# robots.txt
User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php
Disallow: /*?s=
Disallow: /warenkorb/

# KI-Crawler gezielt steuern (siehe Kapitel GEO & AEO)
User-agent: GPTBot
Allow: /

User-agent: Google-Extended
Allow: /

Sitemap: https://www.example.de/sitemap.xml

XML-Sitemap und IndexNow

• Nur indexierbare, kanonische URLs mit Statuscode 200 aufnehmen.
• <lastmod> nur setzen, wenn es das echte Änderungsdatum ist. <priority> und <changefreq> ignoriert Google.
• Maximal 50.000 URLs oder 50 Megabyte pro Datei, darüber eine Index-Sitemap verwenden.
• In der robots.txt verlinken und in der Google Search Console sowie den Bing Webmaster Tools einreichen.
• IndexNow meldet neue und geänderte URLs aktiv an Bing, Yandex und weitere. Da ChatGPT und Copilot auf den Bing-Index zugreifen, ist das auch für KI-Sichtbarkeit relevant. Google nimmt an IndexNow nicht teil.

Canonical, Duplicate Content und URL-Design

Duplicate Content entsteht meist technisch: mit und ohne www, HTTP und HTTPS, mit und ohne Schrägstrich am Ende, Groß- und Kleinschreibung, Tracking-Parameter, Druckversionen, Filter und Sortierungen. Die Lösung besteht aus einer festen Hauptvariante, 301-Weiterleitungen aller anderen und einem selbstreferenzierenden Canonical auf jeder Seite.

Strukturierte Daten mit Schema.org

Strukturierte Daten beschreiben Inhalte maschinenlesbar. Sie ermöglichen Rich Results und helfen Suchmaschinen und KI-Systemen, Entitäten eindeutig zuzuordnen: Wer ist das Unternehmen, wo sitzt es, was bietet es an? Empfohlenes Format ist JSON-LD.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "@id": "https://www.example.de/#unternehmen",
  "name": "Muster Webdesign",
  "url": "https://www.example.de/",
  "telephone": "+49 821 123456",
  "priceRange": "€€",
  "image": "https://www.example.de/assets/img/buero.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Musterstraße 1",
    "postalCode": "86150",
    "addressLocality": "Augsburg",
    "addressRegion": "BY",
    "addressCountry": "DE"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": 48.3705, "longitude": 10.8978 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
    "opens": "09:00", "closes": "18:00"
  }],
  "areaServed": ["Augsburg", "München", "Bayern"],
  "sameAs": ["https://www.facebook.com/…", "https://www.instagram.com/…", "https://www.linkedin.com/company/…"]
}
</script>

Wichtig: Strukturierte Daten müssen dem sichtbaren Inhalt entsprechen. Markup für Inhalte, die nicht auf der Seite stehen, verstößt gegen die Richtlinien. Prüfen mit dem Rich Results Test und dem Schema Markup Validator.

Mehrsprachigkeit und hreflang

<link rel="alternate" hreflang="de" href="https://www.example.com/de/leistungen/">
<link rel="alternate" hreflang="de-at" href="https://www.example.com/at/leistungen/">
<link rel="alternate" hreflang="en" href="https://www.example.com/en/services/">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/en/services/">

• Jede Sprachversion verweist auf alle anderen und auf sich selbst. Fehlt der Rückverweis, wird die Angabe ignoriert.
• Jede Version hat ein Canonical auf sich selbst, nicht auf die Hauptsprache.
• Struktur: Unterverzeichnisse (/de/, /en/) sind am einfachsten zu pflegen und bündeln die Domainstärke. Länderdomains senden das stärkste Ländersignal, kosten aber Mehrfachaufwand.
• Keine automatische Weiterleitung nach IP oder Browsersprache. Besser ein Hinweisbanner mit Sprachwahl.
• Maschinell übersetzte Inhalte ohne Prüfung gelten schnell als minderwertig.

JavaScript-SEO

• Inhalte, Links, Titel, Canonical und strukturierte Daten gehören ins ausgelieferte HTML, nicht erst ins gerenderte DOM.
• Navigation mit echten <a href>-Links. Klick-Handler auf div-Elementen werden nicht verfolgt.
• Keine Inhalte, die erst nach Scrollen oder Klick geladen werden. Der Googlebot scrollt und klickt nicht.
• Saubere Statuscodes auch in SPAs: Eine nicht gefundene Route muss 404 liefern oder auf eine echte 404-Seite leiten.
• Test: In der Search Console „URL-Prüfung“ und „Gecrawlte Seite anzeigen“ nutzen, zusätzlich die Seite mit deaktiviertem JavaScript ansehen. So sehen sie die meisten KI-Crawler.

Werkzeuge und regelmäßige technische Audits

Wie wir technisches SEO für Kunden umsetzen, steht auf der Seite SEO Augsburg.

Suchintention verstehen

Die verlässlichste Methode: das Keyword googeln und ansehen, was auf Seite eins steht. Zeigt Google Ratgeber, rankt keine Verkaufsseite. Zeigt Google lokale Anbieter und eine Karte, braucht es lokale Signale. Inhalt und Format müssen zur Intention passen, sonst hilft keine Optimierung.

Keyword-Recherche und Themenplanung

1. Sammeln: Leistungen, Kundenfragen aus Telefon und E-Mail, Google Suggest, „Ähnliche Fragen“, Search Console, Wettbewerber, Werkzeuge wie Keyword Planner, Ahrefs, Sistrix, AnswerThePublic, AlsoAsked.
2. Bewerten: Suchvolumen, Wettbewerb, Geschäftswert. Zehn Suchanfragen mit Kaufabsicht sind mehr wert als tausend ohne.
3. Gruppieren: Keywords mit derselben Intention gehören auf eine Seite. Mehrere Seiten zum selben Thema konkurrieren miteinander (Kannibalisierung).
4. Zuordnen: Jede wichtige Seite erhält ein Hauptthema und verwandte Begriffe. Das Ergebnis ist eine Keyword-Map.
5. Themencluster: Eine umfassende Hauptseite (Pillar) wird von Detailseiten gestützt, alle untereinander verlinkt. So entsteht thematische Autorität.

OnPage-Optimierung einer einzelnen Seite

Interne Verlinkung ist der am meisten unterschätzte Hebel. Sie verteilt Linkkraft, zeigt Zusammenhänge und führt Nutzer weiter. Wichtige Seiten brauchen viele interne Links aus thematisch passenden Texten, nicht nur aus Menü und Fußbereich. Verwaiste Seiten ohne interne Links werden kaum gecrawlt und ranken selten. Title-Attribute an Links sind dagegen kein Rankingfaktor, sie dienen als Tooltip der Nutzerführung.

E-E-A-T und hilfreiche Inhalte

Googles Qualitätsrichtlinien bewerten Inhalte nach Experience, Expertise, Authoritativeness, Trust: eigene Erfahrung, Fachwissen, Autorität und Vertrauen. E-E-A-T ist kein einzelner Rankingfaktor, sondern das Leitbild, auf das die Ranking-Systeme trainiert werden. Seit März 2024 ist das frühere Helpful-Content-System Teil der Kernalgorithmen.

• Erfahrung zeigen: eigene Fotos, Fallstudien, Zahlen aus Projekten, konkrete Beispiele statt Allgemeinplätzen.
• Autoren sichtbar machen: Name, Foto, Qualifikation, Autorenseite, Person-Markup.
• Vertrauen belegen: vollständiges Impressum, erreichbarer Kontakt, Bewertungen, Siegel, Mitgliedschaften, HTTPS.
• Aktuell halten: veraltete Inhalte überarbeiten oder entfernen. Eine gepflegte kleine Website schlägt ein großes Archiv schwacher Texte.
• Ursprünglichkeit: eigene Daten, eigene Meinung, eigene Beispiele. Zusammenfassungen dessen, was schon zehnmal im Netz steht, liefert inzwischen die KI-Übersicht selbst.

Local SEO: bei Google Maps und lokalen Suchen gefunden werden

Lokale Rankings beruhen auf drei Faktoren: Relevanz (passt das Angebot zur Suche), Entfernung (wie nah ist das Unternehmen am Suchenden) und Bekanntheit (Bewertungen, Erwähnungen, Links, Website-Stärke).

• NAP-Konsistenz: Name, Adresse und Telefonnummer müssen überall identisch sein: Website, Profil, Branchenverzeichnisse, Social Media.
• Standortseiten: Für jede echte Niederlassung oder jedes wichtige Einzugsgebiet eine eigene Seite mit eigenständigem Inhalt, lokalen Referenzen, Anfahrt und LocalBusiness-Markup. Massenhaft geklonte Ortsseiten mit ausgetauschtem Städtenamen gelten als Doorway Pages.
• Lokale Signale: Links und Erwähnungen von regionalen Medien, Vereinen, Kammern, Partnern und Veranstaltungen.
• Weitere Plattformen: Bing Places, Apple Business Connect, relevante Branchenportale. KI-Assistenten beziehen lokale Daten aus mehreren Quellen.

Backlinks und digitale PR

Links bleiben ein wichtiges Signal, aber Qualität zählt weit mehr als Menge. Ein Link von der regionalen Tageszeitung oder vom Branchenverband ist mehr wert als hundert Verzeichniseinträge.

Bezahlte und gesponserte Links müssen mit rel="sponsored" gekennzeichnet sein, nutzergenerierte mit rel="ugc". Das Disavow-Werkzeug ist nur nach einer manuellen Maßnahme oder eigenem Linkkauf in der Vergangenheit nötig. Schlechte Links ignoriert Google sonst von selbst.

SEO-Erfolg messen

• Search Console: Klicks, Impressionen, Klickrate und Position je Suchanfrage und Seite. Die wichtigste und kostenlose Quelle.
• Geschäftskennzahlen: Anfragen, Anrufe und Umsatz aus organischer Suche. Rankings sind Mittel, nicht Ziel.
• Sichtbarkeitsindizes von Sistrix, Ahrefs oder Semrush zeigen Trends und Wettbewerbsvergleich.
• Zero-Click: Durch KI-Übersichten und direkte Antworten sinken Klickraten bei Informationsanfragen. Impressionen und Markensuchen gewinnen als Kennzahl an Bedeutung.
• Geduld: SEO wirkt in Monaten. Drei bis sechs Monate bis zu klaren Effekten sind normal, in umkämpften Märkten länger.

Laufende Betreuung und Berichte gehören zu unserer Leistung Suchmaschinenoptimierung.

Begriffe und Systeme

Die wichtigsten Systeme 2026: ChatGPT mit Websuche (nutzt unter anderem den Bing-Index und eigene Crawler), Google mit AI Overviews, AI Mode und Gemini, Perplexity, Microsoft Copilot, Claude mit Websuche sowie Assistenten in Browsern, Betriebssystemen und Autos.

Wie KI-Suchsysteme Quellen auswählen

KI-Antworten entstehen auf zwei Wegen. Erstens aus dem Trainingswissen des Modells: Marken, die im Netz oft und konsistent in einem thematischen Zusammenhang erwähnt werden, sind im Modell verankert. Zweitens aus der Live-Recherche: Das System sucht, ruft Seiten ab, zerlegt sie in Passagen, bewertet deren Relevanz und formuliert daraus eine Antwort mit Quellenangaben.

Daraus folgen drei Hebel:

1. Auffindbar sein: Die Seite muss im zugrunde liegenden Suchindex stehen (Google, Bing) und für Crawler abrufbar sein. Klassisches SEO ist die Eintrittskarte. Studien zeigen durchgehend eine starke Überschneidung zwischen gut rankenden und zitierten Seiten.
2. Zitierfähig sein: Bewertet werden Passagen, nicht ganze Seiten. Ein Absatz, der eine Frage eigenständig, präzise und mit konkreten Angaben beantwortet, wird eher übernommen als ein Textblock voller Marketingfloskeln.
3. Als Entität bekannt sein: Je klarer und konsistenter ein Unternehmen im Netz beschrieben ist (Website, Profile, Verzeichnisse, Presse, Bewertungen), desto sicherer ordnet die KI es einem Thema und einem Ort zu und empfiehlt es.

KI-Crawler und ihre Steuerung

# robots.txt: für KI-Suche sichtbar bleiben, Training nach Wunsch steuern
User-agent: OAI-SearchBot
Allow: /

User-agent: ChatGPT-User
Allow: /

User-agent: PerplexityBot
Allow: /

User-agent: Claude-SearchBot
Allow: /

# Beispiel: Training untersagen, Suche erlauben
User-agent: GPTBot
Disallow: /

User-agent: CCBot
Disallow: /

llms.txt ist ein Vorschlag für eine Markdown-Datei im Hauptverzeichnis, die KI-Systemen die wichtigsten Inhalte einer Website kompakt auflistet. Stand 2026 ist sie kein Standard, und die großen Anbieter haben keine Nutzung für das Ranking bestätigt. Sie schadet nicht, ist schnell erstellt und kann Entwickler-Werkzeugen und Agenten helfen. Priorität haben aber die Maßnahmen in den folgenden Abschnitten.

Zitierfähige Inhalte schreiben

Ein Beispiel für eine zitierfähige Passage: „Eine professionelle WordPress-Website für ein kleines Unternehmen kostet 2026 in Deutschland meist zwischen 2.200 und 6.000 Euro. Der Preis hängt vor allem von der Seitenzahl, individuellen Funktionen und dem Umfang der Texte und Fotos ab. Laufende Kosten für Hosting und Wartung liegen bei 30 bis 100 Euro im Monat.“ Frage, Antwort, Zahlen, Kontext, alles in drei Sätzen.

Entität und Marke stärken

• Konsistente Stammdaten auf Website, Google-Unternehmensprofil, Bing Places, Apple Business Connect, Branchenverzeichnissen und Social Media.
• Strukturierte Daten: Organization oder LocalBusiness mit sameAs-Verweisen auf alle offiziellen Profile, Person für Inhaber und Autoren, Service für Leistungen.
• Eine aussagekräftige Über-uns-Seite: wer, was, wo, seit wann, für wen, mit welchen Qualifikationen. Sie ist die wichtigste Quelle, wenn eine KI das Unternehmen beschreibt.
• Erwähnungen auf fremden Seiten: Fachartikel, Interviews, Podcasts, Verbandsseiten, lokale Presse, Bestenlisten und Vergleichsartikel. KI-Systeme stützen Empfehlungen auf solche Drittquellen, auch ohne Link.
• Bewertungen auf Google und Branchenportalen. Formulierungen aus Bewertungen tauchen in KI-Empfehlungen auf.
• Plattformen mit hoher Zitierquote: Wikipedia und Wikidata (nur bei echter Relevanz), YouTube, Reddit, LinkedIn, Fachforen. Präsenz dort wirkt auf die Wahrnehmung der Modelle.

KI-Sichtbarkeit messen

• Verweise im Analytics: Besuche von chatgpt.com, perplexity.ai, copilot.microsoft.com, gemini.google.com und claude.ai als eigene Kanalgruppe auswerten. ChatGPT hängt häufig utm_source=chatgpt.com an.
• Server-Logs: Abrufe durch ChatGPT-User, Perplexity-User und Claude-User zeigen, dass Inhalte gerade in einer Antwort verwendet werden.
• Prompt-Tests: Eine feste Liste typischer Kundenfragen monatlich in den wichtigsten Systemen stellen und dokumentieren, ob und wie das Unternehmen genannt wird. Antworten schwanken, deshalb mehrfach fragen.
• Spezialwerkzeuge für KI-Sichtbarkeit gibt es von den großen SEO-Suiten und von spezialisierten Anbietern. Sie automatisieren diese Prompt-Tests.
• Search Console: Klicks aus AI Overviews und AI Mode sind in den normalen Leistungsdaten enthalten, aber nicht getrennt ausgewiesen.
• Markensuchen als indirekte Kennzahl: Wer in KI-Antworten empfohlen wird, wird anschließend häufiger direkt gesucht.

Besucher aus KI-Systemen sind weniger zahlreich als aus der klassischen Suche, aber oft weiter im Entscheidungsprozess. Sie haben ihre Recherche bereits im Dialog erledigt.

GEO/AEO-Checkliste für Unternehmen

Wie wir das für Unternehmen in Augsburg und Bayern umsetzen, zeigt die Seite GEO & AEO für moderne Sichtbarkeit.

Rechtslage: Wer ist betroffen?

Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt den European Accessibility Act um. Es gilt für bestimmte Produkte und für Dienstleistungen im elektronischen Geschäftsverkehr gegenüber Verbrauchern. Darunter fallen Onlineshops, Buchungs- und Terminstrecken, Vertragsabschlüsse über die Website, außerdem Bankdienstleistungen, Telekommunikation, Personenverkehr und E-Books.

WCAG: vier Prinzipien, drei Stufen

Die Web Content Accessibility Guidelines gliedern sich in vier Prinzipien: wahrnehmbar, bedienbar, verständlich, robust. Die Erfolgskriterien sind in die Stufen A, AA und AAA eingeteilt. Rechtlicher und praktischer Maßstab ist AA.

Technische Umsetzung: semantisches HTML zuerst, ARIA sparsam

Die erste Regel von ARIA lautet: kein ARIA verwenden, wenn ein natives HTML-Element dasselbe leistet. Ein <button> bringt Fokus, Tastaturbedienung und Rolle mit. Ein <div role="button"> muss all das nachbauen. Falsches ARIA ist schlimmer als keines.

<!-- Skip-Link als erstes fokussierbares Element -->
<a class="skip-link" href="#main">Zum Inhalt springen</a>

<!-- Mobile Navigation -->
<button class="nav-toggle" aria-expanded="false" aria-controls="menu">
  <span class="visually-hidden">Menü</span>
  <svg aria-hidden="true" focusable="false">…</svg>
</button>
<nav id="menu" aria-label="Hauptnavigation" hidden>…</nav>

<!-- Icon-Link braucht einen zugänglichen Namen -->
<a href="tel:+49821123456" aria-label="Anrufen: 0821 123456">
  <svg aria-hidden="true">…</svg>
</a>

<!-- Statusmeldung, die Screenreader vorlesen -->
<p role="status" aria-live="polite" id="form-status"></p>

<!-- Fehlermeldung am Feld -->
<label for="email">E-Mail</label>
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Bitte geben Sie eine gültige E-Mail-Adresse ein, zum Beispiel name@firma.de.</p>

/* Nur für Screenreader sichtbar */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 9999; }

/* Fokus nie entfernen, sondern gestalten */
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* Fokussiertes Element nicht hinter fixiertem Header verstecken */
html { scroll-padding-top: 6rem; }

Typische Komponenten barrierefrei bauen

Testen: automatisch, manuell, mit Betroffenen

Automatische Werkzeuge finden etwa 30 bis 40 Prozent der Probleme. Der Rest braucht manuelle Prüfung.

Barrierefreiheit ist kein einmaliges Projekt. Jede neue Seite, jedes neue Plugin und jeder Redakteur können Barrieren einführen. Schulung der Redaktion (Alt-Texte, Überschriften, Linktexte) gehört deshalb dazu.

Wichtiger Hinweis vorab

Impressum und Datenschutzerklärung

Impressum: Pflicht für praktisch jede geschäftliche Website. Es muss leicht erkennbar, unmittelbar erreichbar und ständig verfügbar sein, in der Praxis also von jeder Seite mit höchstens zwei Klicks über einen klar benannten Link.

Datenschutzerklärung: beschreibt konkret, welche Daten zu welchem Zweck auf welcher Rechtsgrundlage verarbeitet werden: Hosting und Server-Logs, Kontaktformular, Analytics, Einbettungen, Newsletter, Bewerbungen, Social-Media-Links, eingesetzte Dienstleister, Übermittlungen in Drittländer, Speicherdauer und Betroffenenrechte. Sie muss zur tatsächlichen Technik der Website passen. Eine Erklärung, die nicht vorhandene Dienste nennt oder vorhandene verschweigt, ist fehlerhaft.

Mit jedem externen Dienstleister, der personenbezogene Daten im Auftrag verarbeitet (Hoster, Newsletter-Dienst, Analytics), ist ein Auftragsverarbeitungsvertrag nötig.

Cookies, Einwilligung und Consent-Banner

Paragraf 25 TDDDG verlangt eine Einwilligung für jedes Speichern und Auslesen von Informationen auf dem Endgerät, sofern es nicht unbedingt erforderlich ist, um den vom Nutzer gewünschten Dienst bereitzustellen. Das gilt für Cookies ebenso wie für Local Storage, Pixel und Fingerprinting.

Google Fonts, Maps, YouTube und Drittlandtransfer

• Google Fonts: Das Landgericht München hat 2022 die dynamische Einbindung ohne Einwilligung als rechtswidrig bewertet, es folgten Abmahnwellen. Lösung: Schriften herunterladen und lokal einbinden. Das ist zugleich schneller.
• Google Maps, YouTube, Vimeo, Social-Media-Einbettungen: Zwei-Klick-Lösung. Zunächst erscheint nur ein Vorschaubild mit Hinweis, erst nach Klick wird der Dienst geladen. Für YouTube zusätzlich die Domain youtube-nocookie.com verwenden.
• reCAPTCHA: überträgt umfangreiche Daten an Google und ist einwilligungspflichtig. Alternativen: Honeypot, Zeitprüfung, Friendly Captcha, Cloudflare Turnstile, ALTCHA.
• CDNs für Bibliotheken: jQuery, Bootstrap oder Font Awesome von fremden Servern zu laden überträgt IP-Adressen. Lokal hosten.
• USA-Transfers: Seit Juli 2023 gilt das EU-US Data Privacy Framework. Übermittlungen an zertifizierte US-Unternehmen sind damit zulässig. Das Abkommen wird gerichtlich angegriffen. Wer europäische Anbieter wählt, ist von seinem Schicksal unabhängig.
• Server-Logs: IP-Adressen sind personenbezogen. Speicherdauer begrenzen, üblich sind 7 bis 14 Tage, und in der Datenschutzerklärung nennen.

Zusätzliche Pflichten für Shops und Online-Verträge

Urheberrecht, Bildrechte und KI-Inhalte

• Bilder: nur mit Lizenz verwenden, Lizenzbedingungen und Nachweise dokumentieren. Stockfoto-Lizenzen verlangen teils eine Urhebernennung. Abmahnungen wegen Bildrechten gehören zu den häufigsten und teuersten.
• Personenfotos: Einwilligung der Abgebildeten, bei Mitarbeitern schriftlich und widerruflich.
• Texte und Code: Nutzungsrechte mit Agentur oder Freelancern vertraglich regeln. Open-Source-Lizenzen beachten.
• KI-generierte Inhalte: Rein maschinell erzeugte Werke genießen nach herrschender Meinung keinen Urheberrechtsschutz. Man kann sie also nutzen, aber nicht gegen Übernahme schützen. Verantwortung für Richtigkeit und Rechtsverletzungen trägt, wer veröffentlicht.
• KI-Verordnung: Sie verlangt unter anderem, dass Menschen erkennen können, wenn sie mit einem KI-System wie einem Chatbot interagieren, und dass täuschend echte KI-Bilder, -Videos und -Tonaufnahmen (Deepfakes) gekennzeichnet werden. Diese Transparenzpflichten gelten seit August 2026, für einzelne Pflichten laufen Übergangsfristen. Seit Februar 2025 müssen Unternehmen zudem für ausreichende KI-Kompetenz ihrer Beschäftigten sorgen.
• Eigene Inhalte und KI-Training: Ein maschinenlesbarer Nutzungsvorbehalt nach Paragraf 44b UrhG lässt sich über die robots.txt und ergänzend im Impressum erklären.

Rechts-Checkliste vor dem Launch

Typische Bedrohungen

Die Referenz für Anwendungssicherheit sind die OWASP Top 10. An erster Stelle stehen dort seit Jahren fehlerhafte Zugriffskontrolle, kryptografische Fehler und Injection.

HTTPS, TLS und HSTS

• Zertifikate sind kostenlos (Let's Encrypt) und bei jedem seriösen Hoster automatisiert. Die Laufzeiten öffentlicher Zertifikate werden in den kommenden Jahren schrittweise bis auf 47 Tage verkürzt. Automatische Erneuerung ist damit Pflicht.
• TLS 1.3 und 1.2 zulassen, alles Ältere abschalten. Test: SSL Labs Server Test, Ziel ist die Note A oder A+.
• Alle HTTP-Anfragen per 301 auf HTTPS leiten, gemischte Inhalte beseitigen.
• HSTS weist Browser an, die Domain nur noch verschlüsselt aufzurufen. Erst mit kurzer Dauer testen, dann auf ein Jahr erhöhen.

Sicherheits-Header

<IfModule mod_headers.c>
  Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"
  Header always set X-Content-Type-Options "nosniff"
  Header always set Referrer-Policy "strict-origin-when-cross-origin"
  Header always set Permissions-Policy "camera=(), microphone=(), geolocation=(), interest-cohort=()"
  Header always set X-Frame-Options "SAMEORIGIN"
  Header always set Cross-Origin-Opener-Policy "same-origin"

  # Content Security Policy: zuerst im Report-Only-Modus testen
  Header always set Content-Security-Policy "default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; font-src 'self'; frame-ancestors 'self'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests"
</IfModule>

Für eingebundene Fremddateien schützt Subresource Integrity: Der Browser lädt die Datei nur, wenn ihr Hash stimmt.

<script src="https://cdn.example.com/lib.min.js"
        integrity="sha384-Base64HashDerDatei"
        crossorigin="anonymous" defer></script>

Zugänge, Passwörter, Passkeys

Backups nach der 3-2-1-Regel

Drei Kopien der Daten auf zwei verschiedenen Medien, davon eine außerhalb des Servers. Ein Backup auf demselben Webspace ist bei einem Hack oder Serverausfall wertlos.

• Umfang: Dateien und Datenbank, bei Shops zusätzlich häufiger die Datenbank allein.
• Rhythmus: täglich automatisch, vor jedem Update manuell. Aufbewahrung gestaffelt über mindestens 30 Tage, weil Infektionen oft erst nach Wochen auffallen.
• Verschlüsselung bei Ablage in der Cloud, und ein Auftragsverarbeitungsvertrag mit dem Speicheranbieter.
• Wiederherstellung testen. Ein Backup, das nie zurückgespielt wurde, ist nur eine Hoffnung.
• Statische Websites haben das Backup eingebaut: Der gesamte Stand liegt im Git-Repository.

Notfallplan: Was tun, wenn die Website gehackt wurde?

1. Ruhe bewahren und dokumentieren: Screenshots, Zeitpunkte, auffällige Dateien.
2. Seite in den Wartungsmodus versetzen (Statuscode 503), um Besucher und Ruf zu schützen.
3. Alle Passwörter ändern: Hosting, FTP, Datenbank, CMS, E-Mail. Aktive Sitzungen beenden, geheime Schlüssel erneuern.
4. Ursache finden: Server-Logs, Änderungsdatum von Dateien, unbekannte Administratoren, verdächtige Cronjobs.
5. Bereinigen: am sichersten durch Wiederherstellung eines sauberen Backups oder Neuaufbau mit frischen Core- und Plugin-Dateien. Manuelles Säubern übersieht häufig Hintertüren.
6. Lücke schließen: alles aktualisieren, verwundbare Erweiterung ersetzen, Härtung nachholen.
7. Folgen prüfen: Search Console auf Sicherheitswarnungen, Blacklists, Spam-Seiten im Index. Nach der Bereinigung eine Überprüfung beantragen.
8. Meldepflicht prüfen: Sind personenbezogene Daten betroffen, muss die Datenschutzverletzung binnen 72 Stunden der Aufsichtsbehörde gemeldet werden, bei hohem Risiko auch den Betroffenen.

Hosting-Arten im Vergleich

Domains: Wahl, Verwaltung, Umzug

• Endung: .de genießt in Deutschland das höchste Vertrauen, .com für internationale Ausrichtung. Neue Endungen wie .bayern oder .shop ranken nicht schlechter, werden aber seltener erinnert.
• Name: kurz, eindeutig schreibbar, am Telefon diktierbar. Marken-Domains sind langfristig wertvoller als Keyword-Domains. Ein Keyword in der Domain ist kein nennenswerter Rankingvorteil mehr.
• Umlaute und Bindestriche: Varianten zusätzlich registrieren und weiterleiten.
• Inhaberschaft: Die Domain gehört auf den Namen des Unternehmens, nicht der Agentur. Bei .de ist der Inhaber bei der DENIC eingetragen.
• Umzug: Mit dem Auth-Code (AuthInfo) wechselt die Domain den Anbieter. Vorher die TTL der DNS-Einträge senken und E-Mail-Postfächer sichern.
• Mehrere Domains: Zusatzdomains per 301 auf die Hauptdomain leiten. Gleiche Inhalte auf mehreren Domains sind Duplicate Content. Eigenständige Satelliten-Domains brauchen eigenständige Inhalte.
• Verlängerung automatisch und mit aktueller Zahlungsart. Abgelaufene Domains werden binnen Stunden von Dritten registriert.

DNS verstehen

Die TTL bestimmt, wie lange Einträge zwischengespeichert werden. Vor einem Serverumzug ein bis zwei Tage vorher auf 300 Sekunden senken, danach wieder erhöhen. Änderungen verbreiten sich nicht „bis zu 48 Stunden“, sondern so lange, wie die alte TTL war. DNSSEC signiert Antworten kryptografisch und schützt vor Manipulation.

dig example.de A +short          # IPv4-Adresse
dig example.de MX +short         # Mailserver
dig example.de TXT +short        # SPF und Verifizierungen
dig _dmarc.example.de TXT +short # DMARC-Richtlinie
nslookup -type=mx example.de     # Alternative unter Windows

E-Mail-Zustellbarkeit: SPF, DKIM, DMARC

Seit Februar 2024 verlangen Google und Yahoo, später auch Microsoft, von Absendern eine saubere Authentifizierung. Ohne sie landen Kontaktformular-Mails, Angebote und Newsletter im Spam oder werden abgewiesen.

; SPF: eigener Mailserver plus Newsletter-Dienst, alles andere ablehnen
example.de.                 TXT  "v=spf1 mx include:_spf.newsletterdienst.de -all"

; DKIM: öffentlicher Schlüssel, Selektor vom Mail-Anbieter vorgegeben
s1._domainkey.example.de.   TXT  "v=DKIM1; k=rsa; p=MIIBIjANBgkq…"

; DMARC: erst beobachten (p=none), dann quarantine, schließlich reject
_dmarc.example.de.          TXT  "v=DMARC1; p=quarantine; rua=mailto:dmarc@example.de; adkim=s; aspf=s"

Deployment, Staging und Monitoring

• Drei Umgebungen: lokal entwickeln, auf Staging testen, dann live schalten. Staging immer per Passwort schützen und auf noindex setzen.
• Deployment automatisieren: Git-basiert über GitHub Actions, GitLab CI oder das Werkzeug des Hosters, alternativ per rsync über SSH. FTP-Uploads von Hand sind fehleranfällig und nicht nachvollziehbar.
• Rollback einplanen: Der vorherige Stand muss sich in Minuten wiederherstellen lassen.
• Monitoring: Uptime-Prüfung im Minutentakt, Ablaufwarnung für Zertifikat und Domain, Überwachung von Formularen durch regelmäßige Testanfragen, Fehlerprotokolle.
• Cronjobs für geplante Aufgaben über den Server steuern, nicht über Besucheraufrufe.

# Statische Website per rsync über SSH veröffentlichen
rsync -avz --delete --exclude ".git" --exclude "build/" ./ user@server.example.de:/var/www/example.de/

# Verfügbarkeit und Antwortzeit messen
curl -o /dev/null -s -w "Status %{http_code}, TTFB %{time_starttransfer}s, gesamt %{time_total}s\n" https://www.example.de/

Analyse-Werkzeuge im Vergleich

Google Analytics 4 und Consent Mode v2

GA4 kennt keine Seitenaufrufe und Sitzungen als Grundeinheit mehr, sondern Ereignisse mit Parametern. Wichtige Ereignisse werden als Schlüsselereignisse (früher Conversions) markiert. Die Datenaufbewahrung steht standardmäßig auf zwei Monaten und sollte auf 14 Monate erhöht werden. Für tiefe Analysen dient der kostenlose Export nach BigQuery.

Der Consent Mode v2 ist seit März 2024 Voraussetzung, um in Europa Zielgruppen und Conversions für Google Ads zu nutzen. Er übermittelt den Einwilligungsstatus an Google. Im erweiterten Modus sendet das Tag auch ohne Einwilligung cookielose Signale, aus denen Google Conversions modelliert. Ob das ohne Einwilligung zulässig ist, ist rechtlich umstritten. Der Basismodus lädt Google-Tags erst nach Einwilligung.

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }

  // Standard: alles verweigert, bis der Banner etwas anderes meldet
  gtag("consent", "default", {
    ad_storage: "denied",
    ad_user_data: "denied",
    ad_personalization: "denied",
    analytics_storage: "denied",
    wait_for_update: 500
  });

  // Vom Consent-Werkzeug nach Zustimmung aufgerufen
  function onConsentGranted() {
    gtag("consent", "update", { analytics_storage: "granted" });
  }
</script>

Conversions und Ereignisse sauber messen

// Klicks auf Kontaktwege als Ereignis erfassen (Beispiel mit Plausible, analog für Matomo oder GA4)
document.addEventListener("click", (event) => {
  const link = event.target.closest("a[href]");
  if (!link) return;
  const href = link.getAttribute("href");
  const type = href.startsWith("tel:") ? "Anruf"
             : href.startsWith("mailto:") ? "E-Mail"
             : href.includes("wa.me") ? "WhatsApp" : null;
  if (type && window.plausible) window.plausible("Kontakt", { props: { weg: type, seite: location.pathname } });
});

Kampagnen werden mit UTM-Parametern markiert: utm_source, utm_medium, utm_campaign. Einheitliche Schreibweise festlegen und nie für interne Links verwenden, sonst wird die ursprüngliche Quelle überschrieben.

Die richtigen Kennzahlen

Eitelkeitsmetriken wie Seitenaufrufe, Follower oder Verweildauer sagen ohne Bezug zu Geschäftszielen wenig. Ein monatlicher Einseiter mit den sieben Kennzahlen oben, Vergleich zum Vormonat und Vorjahr und drei abgeleiteten Maßnahmen ist wertvoller als jedes automatische 40-Seiten-Reporting.

Server-Side Tagging und die Zukunft des Trackings

Browser blockieren Drittanbieter-Cookies (Safari, Firefox) oder schränken sie ein, Adblocker filtern bekannte Tracking-Skripte, und Apples Schutzfunktionen verkürzen die Lebensdauer von Cookies. Google hat die Abschaffung von Drittanbieter-Cookies in Chrome nach Jahren der Ankündigung aufgegeben, der Trend zu weniger clientseitigen Daten bleibt dennoch.

• Server-Side Tagging: Der Browser sendet Daten an einen eigenen Endpunkt unter der eigenen Domain, der sie an Analytics- und Werbedienste weiterreicht. Das entlastet den Browser und verbessert die Datenqualität. Die Einwilligungspflicht bleibt unverändert bestehen.
• Conversion-APIs von Meta, Google und anderen übertragen Conversions serverseitig.
• First-Party-Daten: Eigene Kundendaten aus CRM und Newsletter werden zur wertvollsten Grundlage für Marketing.
• Modellierung: Lücken werden statistisch geschätzt. Zahlen aus Werbe- und Analyseplattformen sind deshalb Näherungen, keine Buchhaltung.

Shopsysteme im Vergleich

Conversion im Shop

SEO für Onlineshops

• Kategorieseiten sind die wichtigsten Rankingseiten. Sie brauchen einen einleitenden Text, sinnvolle Überschriften und interne Verlinkung, ohne die Produkte nach unten zu drücken.
• Filter und Sortierung erzeugen unendlich viele URL-Varianten. Nur Filterkombinationen mit echter Nachfrage indexierbar machen, alle anderen per noindex, Canonical oder Parameter-Ausschluss bändigen.
• Produktvarianten: Eine URL pro Produkt, Varianten als Auswahl. Eigene URLs nur, wenn gezielt nach der Variante gesucht wird.
• Nicht mehr lieferbare Produkte: vorübergehend ausverkauft bleibt online mit Hinweis, dauerhaft entfernt wird per 301 auf Nachfolger oder Kategorie geleitet, ohne Ersatz mit 410 beantwortet.
• Strukturierte Daten: Product mit Offer, Preis, Verfügbarkeit, Versand- und Rückgabeinformationen, Bewertungen und eindeutigen Kennungen wie GTIN.
• Google Merchant Center: kostenlose Produkteinträge und Shopping-Anzeigen über einen gepflegten Produktdaten-Feed.
• Paginierung: Jede Seite mit eigenem Canonical auf sich selbst, erreichbar über normale Links.
• KI-Shopping: Assistenten vergleichen und empfehlen Produkte zunehmend selbst. Vollständige, strukturierte Produktdaten und Feeds sind dafür die Eintrittskarte.

Betrieb: Performance, Sicherheit, Schnittstellen

• Performance: Warenkorb, Kasse und Konto sind nicht cachebar und brauchen leistungsfähiges Hosting mit Object Cache. Kategorieseiten und Produktseiten werden gecacht.
• Zahlungssicherheit: Zahlungsdaten nie selbst speichern. Zahlungsdienstleister übernehmen die PCI-DSS-Anforderungen, starke Kundenauthentifizierung ist Standard.
• Schnittstellen: Warenwirtschaft, Buchhaltung (DATEV-Export), Versanddienstleister, Marktplätze. Automatisierung spart im Alltag mehr Geld als jedes Designdetail.
• E-Rechnung: Im Geschäftsverkehr zwischen Unternehmen müssen elektronische Rechnungen seit 2025 empfangen werden können, die Pflicht zum Versand wird bis 2028 schrittweise eingeführt. B2B-Shops sollten XRechnung oder ZUGFeRD erzeugen können.
• Recht: siehe Kapitel Recht und Datenschutz: Button-Lösung, Preisangaben, Widerrufsbutton, Verpackungsgesetz, Produktsicherheit, Barrierefreiheit.
• Monitoring: Testbestellungen nach jedem Update. Ein defekter Checkout kostet ab der ersten Minute Umsatz.

Die Kanäle im Überblick

Google Ads richtig aufsetzen

Anzeigen erscheinen inzwischen auch in und um KI-Übersichten. Kampagnentypen mit KI-Steuerung wie Performance Max brauchen gute Daten: saubere Conversions, Kundenlisten und hochwertige Bild- und Textbausteine. Mehr dazu auf der Seite Digitalmarketing.

Social Media für Unternehmen

• Kanalwahl nach Zielgruppe: Instagram und Facebook für Endkunden und lokale Reichweite, LinkedIn für B2B und Personal, YouTube für erklärungsbedürftige Leistungen, TikTok für junge Zielgruppen und Ausbildungsmarketing, Pinterest für visuelle Produkte.
• Lieber ein Kanal richtig als fünf halbherzig. Ein verwaistes Profil schadet mehr als keines.
• Inhalte: Einblicke in die Arbeit, Vorher-Nachher, Kundenstimmen, Antworten auf häufige Fragen, Team. Menschen folgen Menschen.
• Kurzvideos haben auf allen Plattformen die höchste organische Reichweite.
• Social Signals sind kein direkter Rankingfaktor. Social Media wirkt indirekt über Bekanntheit, Markensuchen, Erwähnungen und Links.
• Open-Graph-Tags sorgen dafür, dass geteilte Links mit Bild, Titel und Beschreibung erscheinen. Ideale Bildgröße 1200 mal 630 Pixel.
• Recht: Impressum im Profil verlinken, Werbung kennzeichnen, bei Gewinnspielen Teilnahmebedingungen bereitstellen, Bildrechte beachten.

E-Mail-Marketing und Newsletter

Content-Marketing und Texte, die wirken

Content-Marketing beantwortet die Fragen der Zielgruppe, bevor sie zum Kunden wird. Es ist die gemeinsame Grundlage von SEO, GEO, Social Media und Newsletter: Ein guter Fachartikel wird zur Suchmaschinen-Landingpage, zur Quelle für KI-Antworten, zu fünf Social-Media-Beiträgen und zu einem Newsletter.

• Themen finden: die zwanzig häufigsten Kundenfragen aus Vertrieb und Support sind der beste Redaktionsplan.
• Formate: Ratgeber, Checklisten, Fallstudien mit Zahlen, Vergleiche, Preisübersichten, Glossare, Videos, Rechner.
• Schreibregeln fürs Web: das Wichtigste zuerst, kurze Sätze, aktive Verben, konkrete Zahlen, Zwischenüberschriften, Listen. Die Leser mit „Sie“ oder „du“ ansprechen, nicht über „wir“ reden.
• Formeln für Verkaufstexte: AIDA (Aufmerksamkeit, Interesse, Verlangen, Handlung) und PAS (Problem, Verstärkung, Lösung).
• Pflege: Bestehende Inhalte jährlich prüfen, aktualisieren, zusammenführen oder löschen. Aktualität ist ein Qualitätssignal für Suchmaschinen und KI.

Regelmäßige Fachbeiträge finden sich in unserem Blog.

Wie große Sprachmodelle funktionieren

Ein Large Language Model (LLM) ist ein neuronales Netz mit Transformer-Architektur, das auf riesigen Textmengen gelernt hat, das jeweils wahrscheinlichste nächste Textstück vorherzusagen. Daraus entstehen erstaunliche Fähigkeiten: formulieren, zusammenfassen, übersetzen, programmieren, schlussfolgern.

Die großen Anbieter 2026 sind OpenAI (GPT-Modelle, ChatGPT), Anthropic (Claude), Google (Gemini), Meta (Llama), Mistral aus Frankreich, xAI (Grok) sowie chinesische Anbieter wie DeepSeek und Alibaba (Qwen). Die Modellgenerationen wechseln im Halbjahrestakt. Entscheidend ist deshalb nicht der Name des gerade besten Modells, sondern ein Arbeitsablauf, in dem sich Modelle austauschen lassen.

RAG: Sprachmodelle mit eigenem Wissen verbinden

Retrieval-Augmented Generation löst das Problem, dass ein Modell das eigene Unternehmen nicht kennt. Der Ablauf:

1. Eigene Dokumente, Webseiten und FAQ werden in Abschnitte zerlegt (Chunking).
2. Jeder Abschnitt wird als Embedding in einer Vektordatenbank gespeichert.
3. Bei einer Frage sucht das System die inhaltlich ähnlichsten Abschnitte, oft kombiniert mit klassischer Stichwortsuche.
4. Frage und gefundene Abschnitte gehen zusammen an das Sprachmodell.
5. Das Modell formuliert die Antwort auf Basis dieser Quellen und nennt sie.

Genau so arbeiten auch die KI-Suchmaschinen, nur mit dem ganzen Web als Dokumentenbestand. Das erklärt die Regeln aus dem Kapitel GEO: Abschnitte müssen für sich verständlich sein, weil sie einzeln gefunden und bewertet werden. Eine klare Struktur mit Überschriften bestimmt, wo ein System Inhalte zerschneidet.

KI-Agenten, Tool Use und das Model Context Protocol

Ein Agent ist ein Sprachmodell, das in einer Schleife arbeitet: Ziel verstehen, planen, ein Werkzeug aufrufen, Ergebnis prüfen, weitermachen. Werkzeuge sind zum Beispiel Websuche, Dateizugriff, Code-Ausführung, Browser-Steuerung oder Schnittstellen zu Geschäftsanwendungen.

• Tool Use (Function Calling): Das Modell erhält eine Beschreibung verfügbarer Funktionen und entscheidet selbst, wann es welche mit welchen Parametern aufruft.
• Model Context Protocol (MCP): ein offener Standard, 2024 von Anthropic vorgestellt und inzwischen von OpenAI, Google, Microsoft und vielen Werkzeugherstellern unterstützt. MCP-Server stellen Daten und Funktionen einheitlich bereit, jeder kompatible Assistent kann sie nutzen. Beispiele: Zugriff auf Google Drive, Shop-Bestellungen, Design-Dateien, Datenbanken.
• Coding-Agenten wie Claude Code, GitHub Copilot im Agentenmodus oder Cursor lesen ganze Projekte, ändern Dateien, führen Tests aus und korrigieren sich selbst.
• Browser-Agenten bedienen Websites im Auftrag von Nutzern: suchen, vergleichen, Formulare ausfüllen, buchen. Mehrere Anbieter haben dafür eigene Browser oder Browser-Erweiterungen veröffentlicht.

Gute Anweisungen schreiben (Prompting)

Die Qualität der Antwort hängt direkt von der Qualität der Anweisung ab. Ein Sprachmodell ist wie ein sehr fähiger neuer Mitarbeiter ohne jedes Vorwissen über das Unternehmen.

Für wiederkehrende Aufgaben lohnen sich feste Systemanweisungen, Projektordner mit Unternehmenswissen oder eigene Assistenten. Komplexe Aufgaben gelingen besser in Schritten: erst Gliederung, dann Abschnitte, dann Feinschliff.

Grenzen, Risiken und Datenschutz

Werkzeuglandschaft 2026

KI im Webdesign- und Entwicklungsprozess

Ein typisches Beispiel: Ein Generator, der aus Daten hunderte HTML-Seiten samt Sitemap, Weiterleitungen und strukturierten Daten erzeugt, entsteht mit einem Coding-Agenten in einem Bruchteil der früheren Zeit. Der Mensch gibt Ziel, Fachwissen und Qualitätsmaßstab vor, die KI schreibt, prüft und korrigiert den Code.

KI für Inhalte: so bleibt die Qualität hoch

1. Eigenes Wissen zuerst: Stichpunkte, Erfahrungen, Zahlen, Kundenfragen und Beispiele sammeln. Das ist der Teil, den keine KI liefern kann.
2. Gliederung mit KI entwickeln, gegen Suchintention und Wettbewerb prüfen.
3. Entwurf abschnittsweise erzeugen lassen, mit dem eigenen Material als Grundlage.
4. Fakten prüfen, Floskeln streichen, eigene Beispiele und Haltung ergänzen.
5. Sprache schärfen: typische KI-Muster entfernen, etwa aufgeblähte Einleitungen, Dreierlisten aus Gewohnheit, leere Steigerungen und das immer gleiche Fazit.
6. Optimieren: Titel, Beschreibung, Zwischenüberschriften, interne Links, strukturierte Daten.
7. Verantwortlich zeichnen: Autor nennen, Datum setzen, regelmäßig aktualisieren.

Nützliche Routineaufgaben für KI: Alt-Texte für große Bildbestände vorschlagen, Produktbeschreibungen aus Datenblättern entwerfen, FAQ aus Support-Anfragen ableiten, bestehende Texte in einfache Sprache übertragen, Inhalte in andere Sprachen übersetzen und von Muttersprachlern prüfen lassen.

KI auf der eigenen Website: Chatbots, Suche, Assistenten

<!-- Chat-Widget erst laden, wenn der Besucher es wirklich öffnet -->
<button id="chat-open" type="button">Frage stellen</button>
<script>
  document.getElementById("chat-open").addEventListener("click", async () => {
    const { openChat } = await import("/assets/js/chat.js");
    openChat();
  }, { once: true });
</script>

Ausblick: das Web der Agenten

• Weniger Klicks, mehr Antworten: Ein wachsender Teil der Informationssuche endet in der KI-Antwort. Websites werden zur Quelle, zum Beleg und zum Ort des Abschlusses.
• Agenten als Besucher: Software recherchiert, vergleicht und bucht im Auftrag von Menschen. Maschinenlesbarkeit wird so wichtig wie Gestaltung.
• Marke schlägt Keyword: Empfohlen wird, wer im Netz als vertrauenswürdige Adresse für ein Thema bekannt ist.
• Eigene Kanäle gewinnen: Newsletter, Bestandskunden und direkte Beziehungen machen unabhängig von Plattformen und Algorithmen.
• Echtheit als Wert: Je mehr generierte Inhalte es gibt, desto wertvoller werden echte Fotos, echte Referenzen, echte Personen und überprüfbare Erfahrung.
• Technische Hygiene bleibt die Basis: schnelles, semantisches, barrierefreies HTML ist die gemeinsame Sprache von Menschen, Suchmaschinen und Agenten.

Vor dem Relaunch: Bestandsaufnahme

URL-Mapping und 301-Weiterleitungen

Das Herzstück jedes Relaunchs ist die Weiterleitungstabelle: Jede alte URL erhält ein neues Ziel. Die beste Weiterleitung ist allerdings die, die man nicht braucht. Funktionierende URLs sollten unverändert bleiben.

• Jede alte URL einzeln auf die inhaltlich passendste neue Seite leiten. Pauschale Weiterleitungen auf die Startseite wertet Google als Soft-404.
• Immer Statuscode 301, keine Ketten, keine Schleifen. Alte Weiterleitungen aus früheren Relaunches direkt auf das endgültige Ziel umstellen.
• Auch Bilder, PDFs und andere Dateien mit Rankings oder Backlinks berücksichtigen.
• Varianten abdecken: mit und ohne www, HTTP, Schrägstrich am Ende, Großschreibung, alte Parameter.
• Weiterleitungen mindestens ein Jahr, besser dauerhaft bestehen lassen.

# Einzelne Seiten
Redirect 301 /leistungen/homepage.html /webdesign/
Redirect 301 /ueber-mich.php /ueber-uns/

# Ganze Verzeichnisse mit gleicher Struktur
RedirectMatch 301 ^/news/(.*)$ /blog/$1

# Alte Parameter-URLs eines CMS
RewriteEngine On
RewriteCond %{QUERY_STRING} (^|&)id=42(&|$)
RewriteRule ^index\.php$ /referenzen/? [L,R=301]

# Alle alten URLs nach dem Launch automatisch prüfen (urls.txt: eine URL pro Zeile)
while read url; do
  printf "%s -> " "$url"
  curl -s -o /dev/null -w "%{http_code} %{redirect_url}\n" "$url"
done < urls.txt

Launch-Checkliste

Wartungsplan

Eine Website ist kein Projekt mit Enddatum, sondern ein laufender Vertriebskanal. Die Erfahrung aus vielen Jahren zeigt: Websites, die nach dem Launch monatlich gepflegt werden, überholen innerhalb eines Jahres fast jede teurere Website, die danach sich selbst überlassen wird.

Den richtigen Dienstleister finden

Warnsignale sind Ranking-Garantien, Knebelverträge mit langer Laufzeit, Mietmodelle, bei denen die Website der Agentur gehört, und Angebote ohne Fragen zum Geschäft. Ein gutes Erstgespräch erkennt man daran, dass mehr gefragt als präsentiert wird.

Wenn Sie nach der Lektüre lieber umsetzen lassen als selbst umsetzen: Hier fordern Sie ein kostenloses, unverbindliches Angebot an, oder Sie werfen zuerst einen Blick auf unsere Preise und Referenzen. Antworten auf häufige Fragen bündelt die FAQ-Wissensdatenbank.