Imagebox: Bild-Infobox – Regeln und Beispiele

Eine Bild-Infobox kombiniert ein Bild mit einer fokussierten Erklärung, sodass Leser beides als eine redaktionelle Einheit wahrnehmen. Das Bild kann Belege liefern, die der Text interpretiert, oder es kann eine Idee veranschaulichen, die der Text vollständig erklärt. Die Autoren müssen festlegen, welche Aufgabe es erfüllt, denn diese Wahl steuert den Text, den Alternativtext, die Bildunterschrift, die strukturierten Daten und die Frage, ob das Element auch ohne Sehvermögen funktioniert.

Dies ist die Variante „Inhaltsbild": Das sichtbare Datum und der Status sind Belege, während der angrenzende Text ihre Beziehung interpretiert. Wenn das Bild lediglich ein dekorativer Kalender wäre, müsste der Text den gesamten Frische-Punkt eigenständig darlegen, und das Bild würde leeren Alternativtext verwenden.

Warum dieses Element wichtig ist

Leser verarbeiten ein Bild und einen entfernten Absatz nicht automatisch als eine Idee. Wenn ein Bild ohne explizite textliche Beziehung erscheint, müssen sie entscheiden, was zu prüfen ist, warum es wichtig ist und ob es die umgebende Aussage stützt. Eine Bild-Infobox verringert diese Unsicherheit, indem sie ein visuelles Element und eine Erklärung in eine klare Grenze setzt. Der Titel benennt den Punkt; das Bild zeigt ihn; der Text sagt dem Leser, was zu beachten oder zu verstehen ist.

Der psychologische Vorteil ist die gemeinsame Aufmerksamkeit: Das Design lenkt die Aufmerksamkeit auf ein visuelles Objekt, während der Text seine Relevanz herstellt. Ein Diagramm-Ausschnitt könnte auf einen Anstieg, eine Volatilität oder eine Datumsgrenze hindeuten; die angrenzende Erklärung wählt die relevante Lesart aus.

Die maschinelle Extraktionsfähigkeit ist die Fähigkeit von Software, eine Inhaltseinheit zu isolieren, ohne die Beziehung ihrer Teile zu verlieren. Eine semantische Bild-Infobox stellt ein Bild, eine zugängliche Beschreibung, eine Bildunterschrift, eine Überschrift, eine Erklärung und eine deklarierte Bildrolle in einem Container bereit. Der Text muss dennoch die Aussage enthalten: Computer Vision darf nicht der einzige Weg zu einer Zahl, Anweisung, Einschränkung oder Schlussfolgerung sein.

Die Element-Schreibregeln regeln die gemeinsame Direktiv-Syntax, Body-Zuordnung, Pfade und Rangfolge. Diese Seite hat Vorrang, wo sie den imagebox-spezifischen Unterschied zwischen Inhalt und Illustration, ihre zulässigen Felder und ihre Ein-Bild-Begrenzung definiert.

Verwendung

Verwenden Sie eine Bild-Infobox, wenn ein Bild und eine Erklärung eine direkte, notwendige Beziehung haben und keines von beiden einen eigenen eigenständigen Abschnitt verdient. Starke Anwendungsfälle sind ein fokussierter Schnittstellenausschnitt mit Interpretation, ein Produktdetail mit Erklärung, warum es die Passform beeinflusst, ein Prozessfoto mit einer Qualitätskontrollregel oder eine einfache konzeptionelle Illustration mit einer prägnanten Erklärung.

Entscheiden Sie zuerst, ob das Bild Inhalt oder Illustration ist:

• Inhaltsbild: Der Leser muss das Bild prüfen, um eine Behauptung zu verifizieren, ein Merkmal zu identifizieren, einen Zustand zu vergleichen oder eine visuelle Tatsache zu verstehen. Der Text benennt das relevante Detail und erklärt seine Bedeutung. Der Alternativtext ist aussagekräftig, und eine Bildunterschrift ist in der Regel vorhanden.
• Illustrationsbild: Das Bild verstärkt Tonfall, Erinnerung oder Verständnis, aber der angrenzende Text liefert die vollständige Aussage. Die Entfernung des Bildes macht den Block weniger ansprechend, nicht weniger genau. Der Alternativtext ist leer, es sei denn, die Illustration selbst übermittelt zusätzliche Informationen.

Verwenden Sie den Entfernungstest. Wenn ein fehlgeschlagener Bildabruf Belege entfernt oder die Erklärung unvollständig macht, deklarieren Sie role=content. Wenn nur die visuelle Verstärkung entfernt wird, deklarieren Sie role=illustration.

Grenzfälle sind häufig:

• Verwenden Sie ein eigenständiges Bild, wenn das Visuelle die volle Lesebreite benötigt und der Text es nur identifiziert.
• Verwenden Sie einen kommentierten Screenshot , wenn Leser mehrere Schnittstellenbereiche lokalisieren müssen.
• Verwenden Sie eine Tabelle für wiederholte Vergleichskriterien, ein Diagramm für ein System oder einen Ablauf und eine Galerie für gleichrangige Bilder.
• Verwenden Sie gewöhnliche Prosa, wenn das Visuelle lediglich einen Satz wiederholt.

Verwenden Sie keine Bild-Infobox, um einen schwachen Abschnitt gestaltet wirken zu lassen. Ein Stock-Foto von Menschen, die auf einen Laptop zeigen, erklärt nicht „Zusammenarbeit", und ein generischer Roboter macht eine Behauptung über künstliche Intelligenz nicht konkreter. Wenn das Bild gegen ein nicht verwandtes Bild ausgetauscht werden könnte, ohne dass sich der Text ändert, hat die Paarung keinen redaktionellen Vertrag.

Platzierung

Platzieren Sie die Bild-Infobox unmittelbar nach dem Absatz, der die Behauptung oder das Konzept einführt, das sie weiterentwickelt. Platzieren Sie sie in einer Anleitung nach der Aktion und vor deren Erfolgsprüfung, damit der visuelle Beleg die Anweisung nicht unterbricht.

Sie darf direkt unter einer H2-Überschrift stehen, wenn ihr interner Titel spezifischer ist. Halten Sie eine Quellenangabe oder Einschränkung neben der Behauptung, die sie begrenzt; fügen Sie die Bild-Infobox niemals zwischen ihnen ein.

Sie darf nicht direkt neben einer anderen Bild-Infobox, einer Galerie, einer vollbreiten Abbildung, einem Video, einer Tabelle oder einer zweispaltigen Infobox stehen. Fügen Sie Interpretation zwischen visuelle Container ein, fassen Sie echte Gleichrangige zusammen oder erstellen Sie separate Unterabschnitte.

Platzieren Sie sie nicht in einem Aufzählungspunkt, Schritt, Hinweis, einer Tabellenzelle, einem Akkordeon oder einer klickbaren Karte. Fügen Sie keinen Call-to-Action innerhalb des Blocks oder zwischen seinem Bild und seiner Erklärung ein.

Auf dem Desktop kann das Bild vor oder nach dem Text erscheinen. Auf Mobilgeräten bewahren Sie eine vorhersagbare Quell-, Tastatur- und Screenreader-Reihenfolge; verlassen Sie sich nicht auf widersprüchliche CSS-Umordnungen.

Anatomie

Die Anatomie wird durch die Bedeutung definiert, nicht durch Farbe, Schatten oder Spaltenbreite.

1. Container: Gruppiert genau eine Abbildung und eine Erklärung als eine redaktionelle Einheit.
2. Bild: Zeigt Belege oder liefert eine Illustration entsprechend der deklarierten Rolle.
3. Alternativtext: Übermittelt den relevanten visuellen Zweck für ein Inhaltsbild; bei einer redundanten dekorativen Illustration ist er leer.
4. Bildunterschrift: Gibt an, was ein Inhaltsbild zeigt, und liefert wesentlichen Kontext wie Zustand, Datum oder Maßstab.
5. Titel: Gibt die Erkenntnis oder das Thema an, nicht den Dateinamen oder eine generische Bezeichnung wie „Beispiel".
6. Erklärung: Sagt dem Leser, was zu beachten ist, warum es wichtig ist und welche Einschränkungen für die Interpretation gelten.
7. Quellenangabe: Nennt den Urheber oder die Quelle, wenn Rechte, Herkunft oder die redaktionelle Richtlinie dies erfordern.
8. Lesereihenfolge: Bewahrt eine kohärente Beziehung zwischen Abbildung und Text, wenn zwei Spalten auf eine reduziert werden.

Die Erklärung muss sich direkt auf das Thema beziehen, anstatt Koordinaten wie „das Bild links" zu verwenden. Die Position ändert sich über Breakpoints, Übersetzungen und Syndikation hinweg. „Der veraltete Status und das Aktualisierungsdatum identifizieren das Überprüfungsziel" bleibt überall gültig.

Gestaltungsbeispiele

Das Designsystem unterstützt vier Rollen-Positions-Kombinationen. Keine ändert die inhaltlichen Anforderungen.

Inhaltsbild, Bild am Anfang

Verwenden Sie diese Voreinstellung, wenn Leser Belege vor deren Interpretation prüfen sollen.

Inhaltsbild, Bild am Ende

Verwenden Sie dies, wenn die Erklärung eine Linse für die Belege schaffen muss.

Illustration, Bild am Anfang

Verwenden Sie dies, wenn ein konzeptspezifisches Visuelle die Erkennung verbessert, während der Text die vollständige Bedeutung trägt.

Illustration, Bild am Ende

Verwenden Sie dies, wenn die Erklärung primär ist und die Illustration als visueller Abschluss dient.

Verhalten bei schmalem Viewport

Jede Variante wird einspaltig, ohne horizontales Scrollen oder sinnverändernde Bildausschnitte. Die Bildunterschrift bleibt ihrer Abbildung zugeordnet.

Parameter

Der Inhaltsvertrag trennt die redaktionelle Bedeutung von der Darstellung. Breitenverhältnisse, Abstände, Rahmen, Hintergründe, Radius, Schatten und Breakpoints gehören zum Renderer.

Veröffentlichen Sie src erst, nachdem das Asset existiert. Eine ausstehende Aufnahme verwendet einen Screenshot-Kommentar und screenshotsPending = true. role hat keinen Standardwert, da das stille Behandeln von Belegen als Dekoration einen Zugänglichkeitsfehler darstellt.

Die erste Überschrift im Rumpf wird title; alles danach wird content. Der Rumpf erlaubt Absätze, Hervorhebungen, Inline-Code und einen kontextuellen Link. Er verbietet Listen, verschachtelte Überschriften, Tabellen, Medien, Buttons, Formulare, Zitate, Akkordeons und Komponenten.

Syntax und Code-Beispiele

Alle drei Notationen bewahren die gleiche Rolle, das gleiche Bild, den gleichen Titel, die gleiche Erklärung, die gleiche Bildunterschrift, die gleiche Quellenangabe und die gleiche Lesereihenfolge. Dies sind portable Adapterverträge; sie implizieren nicht, dass ein registrierter lokaler Shortcode oder Block bereits existiert.

Portable Markdown-Direktive

:::imagebox{src="/cdn-assets/seo-playbook/examples/freshness-status.png" role=content position=image-start alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="The stale status is evaluated against the recorded update date."}
## See why the page needs review

The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.
:::

Der Beispielpfad demonstriert lediglich die Syntax. Die Produktionsvalidierung muss ihn ablehnen, bis das Asset existiert.

Hugo-Shortcode

{{< imagebox src="/cdn-assets/seo-playbook/examples/freshness-status.png" role="content" position="image-start" alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="The stale status is evaluated against the recorded update date." >}}
## See why the page needs review

The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.
{{< /imagebox >}}

Der Adapter verwendet ausschließlich benannte Parameter. Bis zur Registrierung verwenden Sie ein semantisches <figure> gefolgt von Prosa. Der Adapter validiert das Asset und bewahrt die Direktiv-Rumpf-Zuordnung.

WordPress-Block

<!-- wp:amicited/imagebox {"src":"/cdn-assets/seo-playbook/examples/freshness-status.png","role":"content","position":"image-start","alt":"Freshness report row showing a stale status beside an update date of 12 February 2026","caption":"The stale status is evaluated against the recorded update date."} -->
<figure class="wp-block-image">
  <img src="/cdn-assets/seo-playbook/examples/freshness-status.png" alt="Freshness report row showing a stale status beside an update date of 12 February 2026">
  <figcaption>The stale status is evaluated against the recorded update date.</figcaption>
</figure>
<div class="imagebox__content">
  <h2>See why the page needs review</h2>
  <p>The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.</p>
</div>
<!-- /wp:amicited/imagebox -->

WordPress sollte ein Medienfeld und einen eingeschränkten Textbereich bereitstellen. Falls nicht verfügbar, verwenden Sie native Image-, Heading- und Paragraph-Blöcke; bewahren Sie die Bedeutung auch ohne seitliche Anordnung.

Beispiele

Gutes Beispiel: Das Bild ist Beleg

Dies funktioniert, weil das Bild zwei physikalische Details belegt und der Text ihre betriebliche Konsequenz erklärt. Der Titel formuliert die Erkenntnis, die Bildunterschrift identifiziert den sichtbaren Beleg, und die Erklärung bleibt spezifisch, ohne das gesamte Foto inventarisieren zu wollen.

Schlechtes Beispiel: Generische Dekoration als Beweis präsentiert

Arbeiten Sie intelligenter mit klaren Daten Bild: Eine generische Person, die vor bunten Diagrammen auf einen Laptop lächelt. Unsere innovative Plattform verwandelt Daten in umsetzbare Erkenntnisse, damit jedes Team bessere Entscheidungen treffen und mehr erreichen kann.

Dies scheitert, weil keiner der beiden Teile überprüfbare Informationen beisteuert. Das Bild könnte für jedes Softwareprodukt werben, während der Text allgemeine Ergebnisse ohne Mechanismus, Schnittstellendetail, Einschränkung oder Beispiel enthält. Die Paarung erzeugt visuelle Prominenz, aber keine Bedeutung, die ein Leser oder eine Maschine extrahieren kann. Ersetzen Sie es durch einen fokussierten Produktzustand und eine Erklärung einer davon unterstützten Entscheidung, oder entfernen Sie die Bild-Infobox und schreiben Sie die Behauptung als gewöhnliche Prosa mit Belegen.

Schema-Markup und Zugänglichkeit

Eine Bild-Infobox hat keinen eigenen Schema.org-Typ. Ihr Text bleibt Teil der umgebenden Seitenentität. Ein Inhaltsbild kann ein ImageObject sein, wenn es eine stabile contentUrl, eine genaue Bildunterschrift, Abmessungen und erforderliche Quellen- oder Lizenzmetadaten besitzt. Dekorative Illustrationen benötigen keine separate Entität.

Das Schema auf Seitenebene kann auf dasselbe repräsentative Bild verweisen. Ein Produktfoto kann die image-Eigenschaft des sichtbaren Produkts speisen, aber ein Diagrammausschnitt wird nicht zu Dataset und ein Screenshot nicht zu SoftwareApplication.

Verwenden Sie ein <figure> und <figcaption> plus einen beschrifteten Erklärungsbereich. Setzen Sie intrinsische width und height; die reaktionsfähige Ausgabe darf nicht horizontal scrollen oder das benannte Detail abschneiden.

Der Alternativtext benennt das relevante Subjekt, den Zustand und das entscheidende Detail eines Inhaltsbildes. Beginnen Sie nicht mit „Bild von", duplizieren Sie nicht die Bildunterschrift und stopfen Sie keine Keywords. Redundante Illustrationen verwenden alt=""; das Weglassen des Attributs könnte den Dateinamen preisgeben.

Verlassen Sie sich nicht allein auf Position, Farbe oder Pixel. Wiederholen Sie entscheidende Zahlen, Bezeichnungen, Warnungen und Schlussfolgerungen im Text. Halten Sie Links per Tastatur erreichbar, machen Sie nie die gesamte Box zu einem Link, bewahren Sie die Quellreihenfolge und testen Sie bei 200 % Zoom.

Schreibregeln

Schreiben Sie die Erklärung, bevor Sie das Bild auswählen, und wählen Sie dann den engsten Bildausschnitt, der den notwendigen Kontext bewahrt.

• Schreiben Sie einen Titel mit 3–10 Wörtern, der die Erkenntnis, das Thema oder die Beziehung formuliert. Vermeiden Sie „Bild", „Übersicht", „Mehr erfahren" und „In Aktion sehen".
• Halten Sie den erklärenden Text auf 40–140 Wörter in ein oder zwei Absätzen. Das Element unterstützt einen Punkt, keinen Miniaturartikel.
• Halten Sie Bildunterschriften auf 5–25 Wörter. Geben Sie an, was gezeigt wird, und den Kontext, der für die Interpretation notwendig ist; setzen Sie die Begründung in den Fließtext.
• Verwenden Sie 40–180 Zeichen für aussagekräftigen Alternativtext, mit 250 als absoluter Obergrenze. Bevorzugen Sie Genauigkeit gegenüber dem Ausschöpfen des Bereichs.
• Fügen Sie genau ein Bild und höchstens einen kontextuellen Textlink ein. Verlinken Sie nur, wenn ein Ziel die Erklärung wesentlich vertieft.
• Verwenden Sie eine Stimme und Zeitform in Titel, Bildunterschrift und Fließtext. Bevorzugen Sie konkrete Nomen und Verben gegenüber werblichen Adjektiven.
• Nennen Sie die Einschränkung neben der Interpretation, wenn das Bild nur einen Zustand, ein Datum, einen Ausschnitt, ein Gerät oder ein Beispiel zeigt.

Setzen Sie niemals eine Liste, Tabelle, Referenz, Preisangabe, ein Formular, Medien, einen Download, Button, eine mehrschrittige Anweisung, einen Haftungsausschluss oder Call-to-Action hinein. Verwenden Sie keine zwei Bilder, betten Sie keine wesentlichen Texte in Pixel ein, legen Sie keine Kundendaten offen und veröffentlichen Sie keine Grafiken mit unbekannten Rechten.

Vermeiden Sie Formulierungen wie „wie Sie sehen können". Ein Leser sieht das Bild möglicherweise nicht, und selbst ein sehender Leser muss wissen, welche Beobachtung wichtig ist. Formulieren Sie es direkt: „Die Verriegelungsnase sitzt bündig, wenn der Stecker vollständig eingesteckt ist."

Beitragstypen, die es verwenden

Die folgenden Zeilen werden durch die Frontmatter-Variable postTypes gesteuert. „Verwendung" beschreibt eine geeignete Rolle, keine Anforderung, in jede Seite eine Bild-Infobox zu erzwingen.

QA-Checkliste

Überprüfen Sie vor der Veröffentlichung das gesamte Element:

• Das Bild und die Erklärung vermitteln einen Punkt und gehören in eine redaktionelle Einheit.
• role ist explizit content oder illustration, gewählt mittels Entfernungstest.
• Die Quelldatei existiert, ist freigegeben und verwendet keine privaten Daten, unbekannte Rechte oder Platzhalter-Assets.
• Der Titel formuliert die Erkenntnis in 3–10 Wörtern, und der Text erklärt sie in 40–140 Wörtern.
• Ein Inhaltsbild hat aussagekräftigen Alternativtext und eine prägnante Bildunterschrift; eine redundante Illustration verwendet leeren Alt-Text.
• Der Text nennt jede entscheidende Zahl, Bezeichnung, Anweisung, Warnung und Schlussfolgerung, die nicht vom Sehvermögen abhängen darf.
• Die Bildunterschrift identifiziert das Bild, ohne den Fließtext oder den Alternativtext zu duplizieren.
• Jeder erforderliche Urheber-, Quellen-, Lizenz- oder Quellenangaben-Link ist korrekt und sichtbar.
• Der Block enthält ein Bild, eine Erklärung und höchstens einen kontextuellen Textlink.
• Er enthält keine verschachtelte Liste, Tabelle, Medien, Buttons, Formulare, Call-to-Action oder interaktive Karte.
• Er ersetzt keinen besser geeigneten kommentierten Screenshot, Vergleich, kein Diagramm, keine Galerie und keine vollbreite Abbildung.
• Desktop- und Mobil-Layouts bewahren die semantische Quellreihenfolge, die Bildunterschriften-Zuordnung und die Tastatur-Reihenfolge.
• Der aussagekräftige Bildausschnitt übersteht responsives Skalieren, 200 % Zoom und Bildladefehler.
• Breite und Höhe reservieren Platz, während Lazy Loading ein Bild above-the-fold nicht verzögert.
• Strukturierte Daten, falls ausgegeben, stimmen mit dem sichtbaren Inhalt überein und beschreiben Dekoration nicht als separate Entität.
• Portable Markdown-, Hugo- und WordPress-Mappings bewahren die gleiche Rolle, Felder und Bedeutung.

FAQ

Die Academy-Vorlage rendert die fünf geprüften Fragen, die in der [[faq]]-Frontmatter dieser Seite gespeichert sind. Sie behandeln den Inhalts-gegen-Illustration-Test, dekorativen Alternativtext, den Beschreibungsumfang, Calls-to-Action und das ImageObject-Schema.

Eine Bild-Infobox ist erfolgreich, wenn der Leser zwei Fragen sofort beantworten kann: „Welchen Beitrag leistet dieses Bild?" und „Warum ist dieser Beitrag hier wichtig?" Wenn eine der beiden Antworten vage ist, stärken Sie die Beziehung oder entfernen Sie die Box.