Handbuch · Kapitel 4.4

KI-Kennzeichnung in Astro: Komponente, Content Collections oder automatisch

Was Astro ist: Ein Web-Framework, das Seiten beim Bauen zu fertigem HTML macht und JavaScript nur dort mitliefert, wo es wirklich gebraucht wird. Genau das macht die Anbindung einfach: Was ausgeliefert wird, steht in der Datei. Dieses Kapitel beschreibt die Einrichtung an einem Projekt, das wir selbst betreiben: wirklich.ai läuft mit Astro und ist im eigenen Werkzeug angebunden. Das Ergebnis ist öffentlich einsehbar – im Transparenz-Protokoll dieser Website.

Die Anforderungen an eine Kennzeichnung sind plattformunabhängig und stehen in KI-Kennzeichnung auf Websites & im CMS: sichtbar spätestens bei der ersten Exposition, nicht von anderen Elementen überlagert, für assistive Technologien lesbar. Hier geht es darum, was in Astro anders ist als in einem CMS.

Was bei einer statischen Seite besonders ist

Ein CMS führt eine Datenbank mit Medien, die sich abfragen lässt. Ein Astro-Projekt hat das nicht: Die Medien stehen im Repository, werden beim Build verarbeitet und landen als Dateien im ausgelieferten HTML. Es gibt keine Medien-API, die man nach dem Bestand fragen könnte.

Deshalb geht die Anbindung den umgekehrten Weg: Sie lesen die fertige Website, nicht das Projekt. Die wirklich.ai App ruft die Sitemap der Live-Adresse ab, holt jede darin genannte Seite einmal und sammelt alle Bilder und Videos ein, die im ausgelieferten HTML tatsächlich vorkommen – genau das, was Besucher zu sehen bekommen.

Das hat zwei angenehme Folgen: Es braucht keinen Zugang und keinen Token, und es kann nichts an Ihrem Projekt verändern. Der Abgleich ist ein Lesevorgang von außen.

Und eine, die man kennen muss: Der Abgleich sieht nur, was live steht. Ein Bild, das im Repository liegt, aber noch nicht deployt ist, taucht nicht auf. Der sinnvolle Zeitpunkt für den Abgleich ist deshalb nach dem Deployment.

Astro legt Bilder an zwei Orten ab. Was in public/ liegt, wird unverändert übernommen – aus public/hero.avif wird /hero.avif. Bilder, die Sie importieren oder über die <Image />-Komponente einbinden, verarbeitet Astro beim Build und legt sie unter /_astro/ mit einer Prüfsumme im Dateinamen ab, etwa /_astro/hero.C4fR9z2q.avif. Diese Prüfsumme wechselt, sobald sich das Bild ändert.

<Image /> und <Picture /> erzeugen unterschiedliches Markup. <Image /> gibt ein einzelnes <img> aus, bei mehreren Breiten mit srcset. <Picture /> erzeugt dagegen ein <picture> mit mehreren <source>-Elementen – je Format eines, etwa AVIF und WebP – und einem <img> als Rückfall. Was der Besucher tatsächlich sieht, kommt dann aus einem <source>, nicht aus dem <img>.

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. Wer pauschal alles markiert, produziert Arbeit ohne Nutzen und entwertet die Kennzeichnung dort, wo sie zählt.

Für eine erste Einordnung genügen ein paar Fragen im Kennzeichnungs-Check.

Was die Kennzeichnung leisten muss

In Astro schreiben Sie das Markup selbst. Das heißt: Kein System setzt Ihnen Grenzen – es nimmt Ihnen aber auch nichts ab. Die Vorgaben stehen in Artikel 50 Absatz 5: Die Information muss spätestens dann bereitstehen, wenn jemand den Inhalt zum ersten Mal sieht, sie muss klar und eindeutig sein und den Barrierefreiheitsanforderungen genügen. Der Verhaltenskodex der EU-Kommission wird deutlicher und verlangt, dass nichts über dem Hinweis liegt, dass er im Inhalt selbst sitzt statt daneben und dass er beim Teilen oder Herunterladen erhalten bleibt. Der Kodex ist freiwillig, Artikel 50 nicht.

Für ein Astro-Projekt folgt daraus:

• Der Hinweis gehört ins Markup, nicht in die Datei. Bilder, die Astro beim Build verarbeitet, werden neu geschrieben – auf Angaben, die in der Ursprungsdatei standen, können Sie sich nicht verlassen. Sichtbar wären sie ohnehin nie gewesen.
• Sehen Sie nach, was über dem Bild liegt. Verläufe am unteren Bildrand, Hover-Zustände und Lightbox-Bedienelemente sind schnell gebaut und decken den Hinweis genauso schnell zu.
• Beim Alt-Text hilft Astro nur zur Hälfte. Fehlt bei <Image /> das alt, weist Astro Sie mit einer Fehlermeldung darauf hin. Setzen Sie das EU-Symbol als zweites <img> daneben, erinnert Sie daran niemand.

Weg A: von Hand, direkt in der Komponente

Sinnvoll bei überschaubaren Projekten oder wenn nur einzelne Bilder betroffen sind.

In Astro ist das unaufwendiger als in einem Baukasten, weil Sie ohnehin im Markup arbeiten. Eine kleine Komponente, einmal geschrieben, überall eingesetzt:

---
// src/components/KiHinweis.astro
const { text = 'Mit KI erstellt' } = Astro.props;
---
<figcaption class="ki-hinweis">
  <img src="/eu-icons/ai_generated_black.svg" alt="EU-Symbol: KI-generiert" width="20" height="20" />
  {text}
</figcaption>

Und am Bild:

<figure>
  <img src={bild} alt="…" />
  <KiHinweis />
</figure>

Das erfüllt die Anforderungen sauber: sichtbar am Inhalt, als Text lesbar, mit Alt-Text am Symbol. Die drei offiziellen EU-Symbole dürfen Sie frei verwenden – alle Fassungen zum Herunterladen stehen in Die offiziellen EU-Icons.

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.

Der Haken ist die Pflege: Sie müssen wissen, welches Bild betroffen ist, und daran denken, wenn jemand ein Bild austauscht. Bei zwanzig Bildern geht das, bei zweihundert nicht mehr.

Weg B: über das Frontmatter der Inhalte

Der bessere Weg, sobald Inhalte aus einer Content Collection kommen – also bei Blogs, Projektlisten, Dokumentation.

Legen Sie das Wissen dorthin, wo der Inhalt gepflegt wird:

---
title: "Beitrag"
bild: "./hero.avif"
bildKiGeneriert: true
---

Im Schema ergänzen Sie das Feld, damit es geprüft wird:

const blog = defineCollection({
  schema: ({ image }) => z.object({
    title: z.string(),
    bild: image(),
    bildKiGeneriert: z.boolean().default(false),
  }),
});

Und im Layout hängt die Kennzeichnung daran:

{entry.data.bildKiGeneriert && <KiHinweis />}

Was dieser Weg leistet: Er wächst mit. Wer einen Beitrag anlegt, trifft die Entscheidung sofort, und das Schema erzwingt, dass das Feld existiert.

Was er nicht leistet: Bilder außerhalb der Collections – in Layouts, auf statischen Seiten, in Komponenten – erreicht er nicht. Die meisten Projekte haben beides.

Weg C: automatisiert mit wirklich.ai

Ab ein paar hundert Medien wird Handarbeit unwirtschaftlich, spätestens beim zweiten Durchgang.

Voraussetzung: eine Sitemap

Ohne Sitemap findet der Abgleich nur die Startseite und die von dort verlinkten Seiten. Mit Sitemap findet er alles. Astro bringt dafür eine offizielle Integration mit:

npx astro add sitemap

Wichtig ist, dass in astro.config.mjs die Option site gesetzt ist – andernfalls erzeugt Astro keine absoluten Adressen und die Sitemap bleibt leer:

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://ihre-domain.de',
  integrations: [sitemap()],
});

Ein Blick in robots.txt schadet nicht: Steht dort ein Verweis auf die Sitemap, findet der Abgleich sie auch, wenn sie an einer ungewöhnlichen Stelle liegt.

Dass die Prüfsumme nichts kaputt macht

Würde der Abgleich die Adresse als Kennung verwenden, wäre jedes Bild unter /_astro/ nach jedem Deployment ein neues, unbekanntes Bild – und Ihre Prüfentscheidungen wären wertlos. Der Abgleich rechnet die Prüfsumme deshalb heraus und erkennt das Bild wieder. Sie müssen dafür nichts tun; es ist der Grund, warum Ihre Einstufungen ein Deployment überleben.

Scripte brauchen is:inline

Astro verarbeitet <script>-Elemente standardmäßig: Es bündelt sie, verschiebt sie und behandelt sie als Module. Für die Einbindung eines fremden Scripts ist das nicht gewünscht – die data-Attribute müssen erhalten bleiben und das Script muss so geladen werden, wie es dasteht.

Die Direktive is:inline schaltet diese Verarbeitung ab. Ohne sie funktioniert die Einbindung nicht zuverlässig.

Einbau

Am besten in das Layout, das alle Seiten verwenden – üblicherweise src/layouts/Layout.astro, direkt vor dem schließenden </body>.

Script 1: Kennzeichnung. Läuft auf allen Seiten und kennzeichnet die Medien, die Sie in der wirklich.ai App als kennzeichnungspflichtig eingestuft haben, mit dem EU-Piktogramm und dem hinterlegten Hinweis. Unter 10 kB, lädt asynchron, setzt keine Cookies.

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

Script 2: Transparenz-Protokoll. Kommt auf eine Unterseite, etwa src/pages/protokoll.astro, verlinkt aus Footer oder Impressum. Es zeigt Prüfstand, Ergebnisse und das KI-Inventar und hält sich selbst aktuell.

<!-- 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 is:inline></script>

Script 3: Trust-Badge. Optional, siehe Das wirklich.ai Signet.

Die Site-ID finden Sie in der wirklich.ai App. Zusätzlich hinterlegen Sie dort die Domains, auf denen die Scripte laufen dürfen – auf allen anderen bleiben sie stumm. Praktisch, weil neben der eigenen Domain meist noch Vorschau-Adressen des Hosters existieren.

Wenn Sie eine Content-Security-Policy einsetzen

Statische Seiten werden oft mit strengen Sicherheitskopfzeilen ausgeliefert. Ist eine Content-Security-Policy gesetzt, muss sie das Auslieferungsnetz kennen, sonst blockiert der Browser die Scripte:

script-src  'self' https://cdn.wirklich.ai;
connect-src 'self' https://cdn.wirklich.ai;
img-src     'self' data: https://cdn.wirklich.ai;

Die Scripte laden ausschließlich von dieser einen Adresse und sprechen mit keinem weiteren Host.

Was der Abgleich nicht sieht

Drei ehrliche Grenzen, damit Sie sie nicht selbst suchen müssen:

Erst clientseitig geladene Bilder. Was eine React- oder Vue-Komponente mit client:load erst im Browser nachlädt, steht nicht im ausgelieferten HTML. Der Abgleich findet es nicht. Solche Medien lassen sich in der wirklich.ai App von Hand hinzufügen; die Kennzeichnung selbst greift danach trotzdem automatisch, weil das Script auch nachträglich eingefügte Bilder erkennt – es beobachtet das Dokument fortlaufend. Aus demselben Grund funktioniert die Kennzeichnung auch mit Astros View Transitions.

Sehr große Websites. Ein Abgleich liest bis zu 200 Seiten. Bei größeren Projekten sprechen Sie uns an, bevor Sie sich über fehlende Medien wundern.

Hintergrundbilder in CSS erkennt das Script, sofern die Adresse im Register steht; sie tragen allerdings keinen Alt-Text und sind damit für die Barrierefreiheitsempfehlung des Verhaltenskodex der schwächere Weg.

Nach jedem Deployment mit neuen Medien noch einmal abgleichen. Ein automatischer Abgleich läuft ohnehin regelmäßig mit.

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 Statische Sites 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