Handbuch · Kapitel 4.7

KI-Kennzeichnung ohne CMS: Next.js, Nuxt, Hugo und andere Generatoren

Worum es hier geht: Um Frameworks und Generatoren, die eine Website vorab zu fertigen Dateien bauen oder sie auf dem Server zusammensetzen – von Next.js und Nuxt über Hugo bis zu handgeschriebenem HTML. Gemeinsam ist ihnen, dass kein Redaktionssystem dazwischensteht.

Statische Websites sind für dieses Thema der unkomplizierteste Fall. Was ausgeliefert wird, steht fertig in der Datei – kein Datenmodell dazwischen, keine API, kein Zugang nötig. Der Abgleich liest schlicht das, was auch der Besucher bekommt.

Dieses Kapitel gilt für alles, was fertige Seiten ausliefert – Next.js und Nuxt ebenso wie Hugo, Eleventy, Jekyll, Zola, SvelteKit, vibe-codete Projekte aus Cursor, v0 oder Bolt und handgeschriebenes HTML. Für Astro, Framer und Lovable gibt es eigene Kapitel, weil dort je eine Besonderheit dazukommt.

Was bei Websites ohne CMS besonders ist

Es gibt kein Medienverzeichnis. Wo ein CMS eine Mediathek hat, liegen die Bilder hier verstreut: im Repository unter public/ oder static/, neben den Inhalten, teilweise fest im Template. Eine zentrale Liste, in der man nachschauen könnte, existiert nicht.

Die Angabe lebt im Code oder beim Inhalt. Es gibt kein Feld, das jemand ohne Entwicklungsumgebung setzen könnte. Das heißt nicht, dass es aufwendig wäre – aber es heißt, dass die Entscheidung „ist das KI?” dort landen muss, wo auch der Inhalt gepflegt wird, sonst pflegt sie niemand.

Die Adresse eines Bildes ist selten sein Dateiname. Viele Generatoren hängen beim Bauen eine Prüfsumme an – aus hero.avif wird hero.C4fR9z2q.avif, damit Browser-Caches sauber greifen. Andere schieben Bilder durch einen Optimierer und liefern sie unter einer ganz anderen Adresse aus: Next.js etwa über /_next/image?url=…&w=640, Nuxt über /_ipx/…. Für Sie ist beides ohne Bedeutung – nur eine Kennzeichnung, die sich am Dateinamen festhält, hätte damit ein Problem.

Was vorher geklärt sein muss

Bevor Sie etwas einbauen, muss feststehen, welche Medien betroffen sind. Die Pflicht greift nicht bei allem, was mit KI zu tun hatte, sondern bei Deepfakes – siehe Was gekennzeichnet werden muss und Deepfake, KI-generiert, KI-bearbeitet. Für eine erste Einordnung genügen ein paar Fragen im Kennzeichnungs-Check.

Was die Kennzeichnung leisten muss

Ohne Redaktionssystem dazwischen bestimmen Sie das Markup vollständig selbst. Das hat eine angenehme und eine unangenehme Seite: Was Sie einmal als Partial oder Shortcode richtig bauen, ist überall richtig – und was Sie einmal falsch bauen, ist überall falsch. Worauf es ankommt, steht in Artikel 50 Absatz 5: Die Information muss spätestens beim ersten Ansehen bereitstehen, klar und eindeutig sein und den Barrierefreiheitsanforderungen entsprechen. Der Verhaltenskodex der EU-Kommission ergänzt die Platzierung – wahrnehmbar, nicht überlagert, im Inhalt eingebettet, möglichst auch beim Teilen noch sichtbar. An den Kodex muss sich nur binden, wer ihn unterzeichnet – an Artikel 50 alle.

Für ein Projekt ohne CMS folgt daraus:

• Bauen Sie es einmal, an einer Stelle. Ein Partial oder Shortcode ist hier mehr als Bequemlichkeit: Er ist der Unterschied zwischen einer Korrektur und vierzig.
• Metadaten ersetzen den Hinweis nicht. Auch wenn Ihr Bildpipeline-Schritt Herkunftsangaben durchreicht – sichtbar ist das für niemanden, und „klar und eindeutig” wird es damit nicht.
• Das Symbol braucht einen eigenen Alt-Text. Als CSS-Hintergrund gesetzt trägt es keinen. Nehmen Sie ein <img> mit sinnvollem alt oder setzen Sie ein aria-label.

Weg A: von Hand im Template

Sinnvoll bei überschaubaren Projekten oder wenn nur einzelne Bilder betroffen sind. Ein Textelement unter dem Bild, dazu das Symbol:

<figure>
  <img src="/bilder/hero.avif" alt="…" />
  <figcaption class="ki-hinweis">
    <img src="/eu-icons/ai_generated_black.svg"
         alt="EU-Symbol: KI-generiert" width="20" height="20" />
    Mit KI erstellt
  </figcaption>
</figure>

Für das Symbol müssen Sie nichts entwerfen: Die EU-Kommission hat im Juni 2026 drei Zeichen veröffentlicht, die frei genutzt werden dürfen. Welches davon passt, hängt davon ab, wie stark KI beteiligt war:

Basissymbol

KI war an der Erstellung beteiligt.

Vollständig KI-generiert

Komplett von einer KI erzeugt, ohne von Menschen geschaffene Elemente.

Teilweise KI-verändert

Bestehender Inhalt wurde mit KI verändert, etwa ein ausgetauschtes Gesicht.

Es gibt sie in Schwarz, Weiß und je einer halbtransparenten Fassung. Alle zwölf Dateien und die Platzierungsregeln stehen in Die offiziellen EU-Icons.

Ein Hinweis, der oft untergeht: Die Verwendung dieser Symbole ist freiwillig, die Kennzeichnungspflicht ist es nicht. Und die Kommission hat getestet, dass die Zeichen deutlich besser verstanden werden, wenn ein kurzer Text danebensteht – das Symbol allein sagt vielen Menschen noch nichts.

Bauen Sie sich das einmal als Partial oder Shortcode – bei Hugo etwa als layouts/shortcodes/ki-hinweis.html, bei Eleventy als Shortcode, bei Next.js als Komponente. Dann steht es an einer Stelle und lässt sich später dort ändern.

Der Haken ist die Pflege: Sie müssen wissen, welches Bild betroffen ist, und daran denken, wenn eines ausgetauscht wird.

Weg B: über das Front Matter

Der bessere Weg, sobald Inhalte aus Markdown-Dateien kommen – also bei Blogs, Projektlisten, Dokumentation. Die Entscheidung steht dann beim Inhalt und nicht im Layout:

---
titel: "Unser neues Bürogebäude"
bild: /bilder/buero.avif
bildKiErzeugt: true
---

Im Template gebunden, hier am Beispiel Hugo:

{{ with .Params.bild }}
  <figure>
    <img src="{{ . }}" alt="{{ $.Params.bildAlt }}" />
    {{ if $.Params.bildKiErzeugt }}
      <figcaption class="ki-hinweis">Mit KI erstellt</figcaption>
    {{ end }}
  </figure>
{{ end }}

Der Vorteil: Wer einen Beitrag schreibt, beantwortet die Frage einmal beim Inhalt. Neue Beiträge sind damit von Anfang an richtig ausgezeichnet.

Die Grenze: Es wirkt nur für Medien, die über das Front Matter laufen. Bilder, die direkt im Fließtext oder fest im Template stehen, bleiben Handarbeit nach Weg A.

Weg C: automatisiert mit wirklich.ai

Ab ein paar hundert Medien wird Handarbeit unwirtschaftlich. Und anders als bei Weg A und B haben Sie hier am Ende einen Nachweis darüber, wer wann was entschieden hat.

Voraussetzung: eine Sitemap

Der Abgleich liest die Seitenliste aus ihre-domain.de/sitemap.xml. Sehen Sie dort zuerst nach – je nach Generator ist sie längst da:

• Hugo erzeugt sie ohne Zutun. Sie wäre nur weg, wenn jemand disableKinds: ['sitemap'] gesetzt hat.
• Next.js über eine sitemap.ts im App-Verzeichnis.
• Nuxt über das Sitemap-Modul.
• Jekyll über das Plugin jekyll-sitemap.
• Eleventy über ein kleines Template – dort ist nichts eingebaut.

Fehlt sie, findet der Abgleich die Startseite und folgt einmal den internen Links. Für eine Seite mit zehn Unterseiten genügt das; bei zweihundert fehlt der größte Teil. Eine Sitemap anzulegen lohnt sich ohnehin, weil auch Suchmaschinen davon leben.

Anbindung einrichten

Beim Anlegen des Projekts in der wirklich.ai App wählen Sie Andere statische Website und tragen die Adresse Ihrer Live-Site ein. Mehr braucht es nicht: kein Zugriff auf Ihr Repository, kein Schlüssel, keine Änderung an Ihrem Build.

Zu den Prüfsummen in Dateinamen, die weiter oben stehen: Die gängigen Muster rechnet der Abgleich heraus und erkennt das Bild nach jedem Deployment wieder. Ihre Einstufungen bleiben also gültig.

Einbau der Scripte

In das Layout, das alle Seiten verwenden, vor dem schließenden </body>. Bei Next.js gehört es in app/layout.tsx – am saubersten über die Script-Komponente mit strategy="afterInteractive"; bei Nuxt in die nuxt.config unter app.head.script:

<!-- wirklich.ai · KI-Kennzeichnung -->
<script src="https://cdn.wirklich.ai/label.js"
        data-wirklich-site="IHRE-SITE-ID" async></script>

Unter 10 kB, lädt asynchron, setzt keine Cookies und braucht keine Consent-Anpassung.

Das Transparenz-Protokoll kommt auf eine Unterseite, verlinkt aus Footer oder Impressum:

<!-- wirklich.ai · KI-Transparenz-Protokoll -->
<div id="wirklich-protokoll"></div>
<script src="https://cdn.wirklich.ai/protokoll.js"
        data-wirklich-site="IHRE-SITE-ID" async></script>

Ein Signet für den Footer gibt es zusätzlich – siehe Das wirklich.ai Signet und den Abschnitt am Ende dieses Kapitels.

Die Site-ID finden Sie in der wirklich.ai App. Dort hinterlegen Sie auch die Domains, auf denen die Scripte laufen dürfen – auf allen anderen bleiben sie stumm. Das ist praktisch, weil neben der Live-Domain meist noch eine Vorschauadresse des Hosters existiert.

Was der Abgleich nicht sieht

Zwei Dinge stehen nicht im HTML und bleiben deshalb unsichtbar: Bilder, die als CSS-Hintergrund gesetzt sind, und Medien, die erst nach einer Interaktion nachgeladen werden. Beides lässt sich von Hand über die Adresse ergänzen; die Kennzeichnung greift danach automatisch.

Die Basisnutzung der wirklich.ai App ist dauerhaft kostenlos – kostenloses Konto erstellen.

Haltung zeigen: der wirklich.ai Transparenz-Pledge

Wer Aufwand in Transparenz steckt, muss das nicht im Hintergrund verstecken. Mit dem wirklich.ai Transparenz-Pledge setzen Sie ein Zeichen für ehrliche Kommunikation im Netz – unabhängig davon, ob Sie KI-Medien einsetzen und offen ausweisen oder vollständig auf echte Fotografie setzen.

Das Signet für Ihren Footer verlinkt direkt auf Ihr öffentliches Transparenz-Protokoll. Es zeigt Kundschaft, Partnern und Behörden auf einen Blick, dass auf Ihrer Website nicht nur behauptet, sondern geprüft wird:

Es behauptet bewusst wenig: keine Zertifizierung, keine Rechtskonformität, sondern nur, dass hier gekennzeichnet und darüber Buch geführt wird – nachprüfbar über das verlinkte Protokoll. Was es genau aussagt und was nicht, steht in Das wirklich.ai Signet.

Andere Systeme

Die Anforderungen sind überall dieselben, die Umsetzung nicht. Betreuen Sie weitere Websites, finden Sie hier die passende Anleitung:

Webflow Live WordPress Live Sanity Live Astro Live Framer Live Lovable Live Shopify Bald Wix Bald Strapi Bald

Dieser Beitrag gibt den Verordnungstext und benannte Quellen wieder. Er ist keine Rechtsberatung und ersetzt im Einzelfall keine anwaltliche Prüfung.

Angaben zur Rechtslage, zu deren Auslegung sowie zu Funktionen, Oberflächen und Schnittstellen fremder Systeme geben den Stand zum oben genannten Datum wieder. Beides kann sich jederzeit und ohne Ankündigung ändern. Für Aktualität, Richtigkeit und Vollständigkeit übernehmen wir keine Gewähr; eine Haftung für Schäden aus der Nutzung dieser Inhalte, der beschriebenen Anleitungen oder der Code-Beispiele ist ausgeschlossen, soweit gesetzlich zulässig. Genannte Produkt- und Firmennamen gehören ihren jeweiligen Inhabern; eine Verbindung zu ihnen besteht nicht.

Dieser Text wurde mit Unterstützung von KI erstellt und redaktionell geprüft.

Link kopieren