Handbuch · Kapitel 3.2

KI-Kennzeichnung in Astro

Stand: 6. August 2026

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 Transparenzprotokoll dieser Website.

Die Anforderungen an eine Kennzeichnung sind plattformunabhängig und stehen in Kapitel 3: 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 anders 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. Das Werkzeug 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.

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.

Zwei Eigenheiten von Astro

Bilder mit Build-Hash

Astro unterscheidet zwei Ablageorte, und das wirkt sich aus:

Dateien in public/ werden unverändert übernommen — aus public/hero.avif wird /hero.avif. Bilder dagegen, die Sie importieren oder über die <Image />-Komponente einbinden, verarbeitet Astro beim Build und legt sie unter /_astro/ mit einem Prüfsummen-Zusatz ab, etwa /_astro/hero.C4fR9z2q.avif.

Dieser Zusatz ändert sich, sobald sich das Bild ändert. Würde das Werkzeug die Adresse als Kennung verwenden, wäre jedes Bild nach jedem Deployment ein neues, unbekanntes Bild — und Ihre Prüfentscheidungen wären wertlos. Der Abgleich rechnet den Zusatz 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/…astro, direkt vor dem schließenden </body>.

Script 1: Kennzeichnung. Läuft auf allen Seiten und kennzeichnet die Medien, die Sie im Werkzeug als kennzeichnungspflichtig eingestuft haben, mit dem EU-Piktogramm und dem hinterlegten Hinweis. Rund 5 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: Transparenzprotokoll. 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-Transparenzprotokoll -->
<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 Kapitel 5.

Die Site-ID finden Sie im Werkzeug. 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

Zwei 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 im Werkzeug 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.

Der Ablauf in Kürze

Sitemap sicherstellen (astro add sitemap, site in der Konfiguration)
Projekt im Werkzeug anlegen, System Astro / Statische Site, Adresse der Live-Seite eintragen
Abgleich starten — die Medien erscheinen im Inventar
Medien prüfen und einstufen; die Entscheidung trifft ein Mensch, das Werkzeug schlägt nur vor
Script ins Layout einbauen, deployen

Nach jedem Deployment mit neuen Medien noch einmal abgleichen. Ein täglicher automatischer Abgleich läuft ohnehin mit.

Dieser Beitrag gibt den Verordnungstext und die Angaben der EU-Kommission wieder. Er ist keine Rechtsberatung.

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

Quellen

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