Handbuch · Kapitel 4.3

KI-Kennzeichnung in Sanity: im Schema entscheiden, im Frontend zeigen

Was Sanity ist: Ein Headless-CMS. Es hält Inhalte strukturiert vor und liefert sie über eine Schnittstelle aus, baut aber selbst keine Seiten – das übernimmt ein eigenes Frontend. Redigiert wird im Studio, abgefragt mit der Abfragesprache GROQ.

Sanity unterscheidet sich von allen anderen Systemen in diesem Kapitel durch einen Punkt, der die ganze Umsetzung bestimmt: Sanity rendert keine Website. Es hält Inhalte vor und liefert sie über eine Schnittstelle aus. Was der Besucher sieht, baut ein eigenes Frontend – Next.js, Astro, Nuxt, was auch immer.

Für die Kennzeichnung heißt das: Im Studio wird entschieden, im Frontend wird dargestellt. Beides muss zusammenpassen, sonst steht die Angabe in der Datenbank und niemand sieht sie.

Was bei Sanity besonders ist

Ein Asset liegt einmal, wird aber beliebig oft referenziert. Lädt jemand ein Bild hoch, entsteht ein eigenes Dokument vom Typ sanity.imageAsset. Jeder Beitrag, jede Seite verweist nur darauf. Das ist die wichtigste Eigenschaft für unser Thema – mehr dazu gleich.

Es gibt keine Ordner. Die naheliegende Ordnung ist stattdessen der Dokumenttyp, in dem ein Bild verwendet wird. „Alle Bilder in Wissensartikeln” ist eine Aussage, die ein Redakteur treffen kann. Wer das Media-Plugin einsetzt, hat mit dessen Tags eine zweite Ebene.

Alt-Texte liegen unterschiedlich. Sanity kennt am Asset ein Feld altText, viele Projekte pflegen den Alt-Text aber am Bildfeld im Dokument, weil er je nach Verwendung anders lauten soll. Beides ist verbreitet, und es lohnt sich zu wissen, welchen Weg Ihr Projekt geht.

Was vorher geklärt sein muss

Bevor Sie das Schema anfassen, 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

Der Inhalt liegt bei Sanity, zu sehen bekommt ihn jemand woanders – und dort gelten die Anforderungen. Artikel 50 Absatz 5 verlangt, dass die Information spätestens beim ersten Ansehen bereitsteht, klar und eindeutig ist und den Barrierefreiheitsanforderungen entspricht. Der Verhaltenskodex der EU-Kommission wird bei der Platzierung konkreter: deutlich wahrnehmbar, ohne Elemente darüber, in den Inhalt eingebettet, möglichst auch beim Teilen oder Herunterladen noch sichtbar. Der Kodex ist eine freiwillige Selbstverpflichtung – die Pflicht selbst steht in der Verordnung.

Für Sanity folgt daraus:

• Sichtbar, nicht nur gesetzt. Ein Häkchen im Studio erfüllt für sich genommen nichts. Gezählt wird, was das Frontend daraus macht.
• Nicht überlagert. Bildkomponenten in Headless-Frontends bringen häufig Lightbox, Zoom oder einen Verlauf am unteren Rand mit – oft aus einer Bibliothek, die niemand im Team selbst geschrieben hat.
• Zugänglich ausgezeichnet. Ein <figcaption> wird vorgelesen, ein Symbol braucht einen eigenen Alt-Text. Verwechseln Sie das nicht mit dem altText am Asset – der beschreibt das Bild, nicht seine Herkunft. Beides steht nebeneinander.

Weg A: von Hand im Frontend

Sinnvoll bei überschaubaren Projekten oder wenn nur einzelne Bilder betroffen sind: Der Hinweis steht direkt in der Komponente, die das Bild rendert.

<figure>
  <img src={urlFor(bild).url()} alt={bild.alt} />
  <figcaption className="ki-hinweis">
    <img src="/eu-icons/ai_generated_black.svg" alt="EU-Symbol: KI-generiert"
         width={20} height={20} />
    Mit KI erstellt
  </figcaption>
</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 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: Die Information steht im Code, nicht im Inhalt. Redakteure können nichts daran ändern, und bei jedem neuen Bild muss jemand ins Repository.

Weg B: ein Feld im Schema

Der übliche Weg – und der einzige, bei dem die Redaktion die Frage selbst beantworten kann, ohne dass jemand ins Repository muss.

Wie oben beschrieben landet die Angabe dabei am Bildfeld, nicht am Asset. Was Sie tun können: einen eigenen Bildtyp definieren und den überall verwenden, statt image direkt. Dann steht das Feld wenigstens an einer Stelle im Schema und sieht in jedem Dokument gleich aus:

// schemas/objects/bild.ts
import { defineType, defineField } from 'sanity';

export const bild = defineType({
  name: 'bild',
  title: 'Bild',
  type: 'image',
  options: { hotspot: true },
  fields: [
    defineField({
      name: 'alt',
      type: 'string',
      title: 'Alt-Text',
    }),
    defineField({
      name: 'kiErzeugt',
      type: 'boolean',
      title: 'Mit KI erstellt oder verändert',
      description:
        'Nur setzen, wenn der Inhalt reale Personen, Orte oder Ereignisse zeigt – siehe Handbuch: Deepfake, KI-generiert, KI-bearbeitet.',
      initialValue: false,
    }),
  ],
});

Im Frontend hängt der Hinweis dann an einer Stelle:

export function Bild({ wert }: { wert: BildTyp }) {
  return (
    <figure>
      <img src={urlFor(wert).url()} alt={wert.alt ?? ''} />
      {wert.kiErzeugt && (
        <figcaption className="ki-hinweis">Mit KI erstellt</figcaption>
      )}
    </figure>
  );
}

Was dieser Weg leistet: Die Entscheidung fällt dort, wo der Inhalt gepflegt wird, und neue Beiträge sind von Anfang an richtig ausgezeichnet.

Was er nicht leistet: Wird dasselbe Bild an anderer Stelle neu eingesetzt, ist es dort wieder unmarkiert – jemand muss das Häkchen erneut setzen. Bei einem kleinen, gepflegten Projekt fällt das nicht ins Gewicht; bei mehreren hundert Assets und mehreren Redakteuren wird daraus die Lücke, die man erst bemerkt, wenn jemand nachfragt.

Weg C: automatisiert mit wirklich.ai

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

Anbindung einrichten

In der wirklich.ai App wählen Sie Sanity CMS und tragen zwei Angaben ein:

• Projekt-ID – steht in Ihrer sanity.config.ts oder im Studio unter den Projekteinstellungen
• Dataset – meist production

Ist das Dataset privat, kommt ein Lese-Token dazu: in sanity.io/manage Ihr Projekt öffnen, dann Settings → API → Tokens → Add new token, Rolle Viewer. Leserechte genügen – der Abgleich schreibt nichts nach Sanity zurück.

Neue Datasets legt Sanity standardmäßig öffentlich an; dann ist der Token nicht nötig. Ob Ihres öffentlich oder privat ist, steht in derselben Ansicht unter Datasets.

Was gelesen wird

Der Abgleich fragt den Asset-Bestand ab, nicht die Dokumente. Das ist eine bewusste Entscheidung mit zwei Folgen:

Der Bestand ist vollständig. Auch hochgeladene, aber noch nicht eingebundene Dateien tauchen auf. Für ein Register ist das der ehrlichere Stand – und es fällt auf, wenn jemand etwas hochlädt und erst Wochen später verwendet.

Jedes Bild erscheint einmal. Nicht einmal pro Verwendung. Genau das Problem aus der Merke-Box oben löst sich damit von selbst: eine Entscheidung je Bild, gültig überall.

Zusätzlich holt der Abgleich den Dokumenttyp, in dem ein Asset verwendet wird, und – falls vorhanden – die Tags des Media-Plugins. Beides steht danach als Bezugsgröße für Regeln zur Verfügung.

Regeln statt Einzelentscheidungen

Damit lassen sich Aussagen treffen wie „alle Bilder in Wissensartikeln sind echte Fotos ohne KI-Einsatz” oder „alles mit dem Tag Illustration ist erkennbar gezeichnet”. Beim Prüfen bleibt dann pro Medium höchstens eine Frage übrig – und mit „Alle auswählen” haken Sie einen ganzen Dokumenttyp in einem Zug ab.

Einbau der Scripte

Die Scripte kommen ins Frontend, nicht ins Studio – dort sieht sie kein Besucher. Am besten in das Layout, das alle Seiten verwenden, vor dem schließenden </body>:

<!-- 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. Bei Next.js verwenden Sie dafür die Script-Komponente mit strategy="afterInteractive", bei Astro ein <script> mit is:inline.

Transparenz-Protokoll 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>

Trust-Badge, optional, 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. Bei einem Headless-Setup ist das besonders praktisch, weil neben der Live-Domain meist noch Vorschau-Adressen des Hosters existieren.

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

Sanity-spezifische Fallstricke

Alle drei folgen aus derselben Eigenschaft: Sanity hält den Inhalt, ein anderes System zeigt ihn.

Eine Änderung am Frontend kann die Kennzeichnung stillschweigend entfernen. Ein Redesign, eine überarbeitete Bildkomponente, ein neues Template – das Feld im Dokument bleibt gesetzt, der Hinweis auf der Seite verschwindet. Sanity merkt davon nichts, weil es die Seite nicht rendert. Anders als bei einem CMS, das Inhalt und Darstellung zusammen ausliefert, gibt es hier keine Stelle, die den Verlust melden würde. Nehmen Sie eine Seite mit einem gekennzeichneten Bild in die Abnahme nach jedem größeren Frontend-Deploy auf.

Ein Feld reicht nur, wenn jedes Frontend es kennt. Headless heißt oft mehr als eine Website – eine Kampagnenseite aus einem zweiten Repository, eine zweite Sprache mit eigenem Aufbau. Das Feld liegt einmal im Datenmodell, ausgewertet werden muss es überall einzeln. Und wo es fehlt, fällt es niemandem auf, weil das Studio überall gleich aussieht.

Nicht jedes Bild auf der Seite kommt aus Sanity. Ein Headless-Frontend bringt eigene Medien mit: Logo, Hintergrundgrafiken, Illustrationen im Layout, das Hero-Bild einer handgebauten Landingpage. Die liegen im Repository und tauchen im Studio nie auf – der Abgleich liest den Asset-Bestand und kennt sie deshalb nicht. Für die Pflicht zählt aber, was der Besucher sieht.

Was davon bei Weg C entfällt

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 Astro 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