Imagebox: Regels en voorbeelden voor afbeeldingsinfoboxen

Een imagebox combineert één afbeelding met één gerichte uitleg, zodat lezers deze als één redactionele eenheid verwerken. De afbeelding kan bewijs bevatten dat de tekst interpreteert, of ze kan een idee illustreren dat de tekst volledig uitlegt. De auteur moet aangeven welke functie ze vervult, omdat die keuze de copy, alternatieve tekst, het bijschrift, gestructureerde gegevens en de vraag of het element ook zonder zicht werkt, bepaalt.

Dit is de content-afbeeldingsvariant: de zichtbare datum en status vormen bewijs, terwijl de aangrenzende tekst hun relatie interpreteert. Als de afbeelding slechts een decoratieve kalender was, zou de tekst het hele versheidspunt onafhankelijk moeten maken en zou de afbeelding lege alternatieve tekst gebruiken.

Waarom dit element belangrijk is

Lezers verwerken een afbeelding en een verre alinea niet automatisch als één idee. Wanneer een afbeelding zonder expliciete tekstuele relatie verschijnt, moeten ze beslissen wat ze moeten bekijken, waarom het belangrijk is en of het de omringende bewering ondersteunt. Een imagebox vermindert die onzekerheid door één visueel element en één uitleg binnen een duidelijke grens te plaatsen. De titel benoemt het punt; de afbeelding toont het; de tekst vertelt de lezer wat hij moet opmerken of begrijpen.

Het psychologische voordeel is gedeelde aandacht: het ontwerp richt de aandacht op een visueel object terwijl de copy de relevantie ervan vaststelt. Een uitsnede van een grafiek kan een stijging, volatiliteit of een datumgrens suggereren; de aangrenzende uitleg selecteert de relevante interpretatie.

Machine-extractie is het vermogen van software om een contenteenheid te isoleren zonder de relatie tussen de onderdelen te verliezen. Een semantische imagebox toont een afbeelding, toegankelijke beschrijving, bijschrift, kop, uitleg en de aangegeven rol van de afbeelding in één container. Tekst moet nog steeds de bewering bevatten: computervisie mag niet de enige route zijn naar een getal, instructie, beperking of conclusie.

De schrijfregels voor elementen bepalen de gedeelde directieve syntaxis, body-mapping, paden en voorrang. Deze pagina prevaleert waar zij het imagebox-specifieke onderscheid tussen content en illustratie, de toegestane velden en de limiet van één afbeelding definieert.

Wanneer gebruiken

Gebruik een imagebox wanneer één afbeelding en één uitleg een directe, noodzakelijke relatie hebben en geen van beide een volledige eigen sectie verdient. Sterke toepassingen zijn onder meer een gerichte interface-uitsnede gecombineerd met een interpretatie, een productdetail gecombineerd met een uitleg waarom het de pasvorm beïnvloedt, een procesfoto gecombineerd met een kwaliteitscontroleregel, of een eenvoudige conceptuele illustratie gecombineerd met een beknopte uitleg.

Bepaal eerst of de afbeelding content of illustratie is:

• Contentafbeelding: de lezer moet de afbeelding bekijken om een bewering te verifiëren, een functie te identificeren, een toestand te vergelijken of een visueel feit te begrijpen. De tekst benoemt het relevante detail en legt de betekenis ervan uit. Alt-tekst is betekenisvol en er is meestal een bijschrift aanwezig.
• Illustratieve afbeelding: de afbeelding versterkt de toon, het geheugen of het begrip, maar de aangrenzende tekst bevat de volledige bewering. Het verwijderen van de afbeelding maakt het blok minder boeiend, niet minder accuraat. Alt-tekst is leeg, tenzij de illustratie zelf aanvullende informatie communiceert.

Gebruik de verwijderingstest. Als een mislukt verzoek om een afbeelding bewijs wegneemt of de uitleg onvolledig maakt, declareer dan role=content. Als het alleen visuele versterking wegneemt, declareer dan role=illustration.

Grensgevallen komen vaak voor:

• Gebruik een zelfstandige afbeelding wanneer het visuele element de volledige leesbreedte nodig heeft en de tekst het alleen identificeert.
• Gebruik een geannoteerde screenshot wanneer lezers meerdere interfacegebieden moeten lokaliseren.
• Gebruik een tabel voor herhaalde vergelijkingscriteria, een diagram voor een systeem of reeks, en een galerij voor gelijkwaardige afbeeldingen.
• Gebruik gewoon proza wanneer het visuele element slechts een zin herhaalt.

Gebruik geen imagebox om een zwakke sectie er ontworpen uit te laten zien. Een stockfoto van mensen die naar een laptop wijzen, verklaart geen ‘samenwerking’, en een generieke robot maakt een bewering over kunstmatige intelligentie niet concreter. Als de afbeelding kan worden vervangen door een niet-gerelateerde afbeelding zonder dat de copy verandert, heeft de combinatie geen redactioneel contract.

Waar plaatsen

Plaats de imagebox direct na de alinea die de bewering of het concept introduceert dat hij uitwerkt. Plaats hem in een procedure na de handeling en vóór de succescontrole, zodat visueel bewijs de instructie niet onderbreekt.

Hij mag alleen direct onder een H2 staan wanneer de interne titel specifieker is. Houd een citaat of kwalificatie naast de bewering die het beperkt; plaats de imagebox nooit ertussen.

Hij mag niet direct naast een andere imagebox, galerij, full-width figuur, video, tabel of tweekoloms infobox staan. Plaats interpretatie tussen visuele containers, combineer echte gelijkwaardige elementen of maak aparte subsecties.

Plaats hem niet in een opsommingsteken, stap, callout, tabelcel, accordeon of aanklikbare kaart. Plaats geen call-to-action in het blok of tussen de afbeelding en de uitleg.

Op desktop kan de afbeelding voor of na de tekst verschijnen. Op mobiel moet een voorspelbare bron-, toetsenbord- en schermlezer-volgorde behouden blijven; vertrouw niet op conflicterende CSS-herschikking.

Anatomie

De anatomie wordt bepaald door betekenis, niet door kleur, schaduw of kolombreedte.

1. Container: Groepeert precies één figuur en één uitleg als één redactionele eenheid.
2. Afbeelding: Toont bewijs of levert illustratie volgens de aangegeven rol.
3. Alternatieve tekst: Communiceert het relevante visuele doel voor een contentafbeelding; is leeg voor een overbodige decoratieve illustratie.
4. Bijschrift: Identificeert wat een contentafbeelding toont en verschaft essentiële context zoals toestand, datum of schaal.
5. Titel: Benoemt het inzicht of onderwerp, niet de bestandsnaam of een generiek label zoals ‘Voorbeeld’.
6. Uitleg: Vertelt de lezer wat hij moet opmerken, waarom het belangrijk is en eventuele beperkingen van de interpretatie.
7. Naamsvermelding: Noemt de maker of bron wanneer rechten, herkomst of redactioneel beleid dit vereist.
8. Leesvolgorde: Behoudt een coherente figuur-en-tekst-relatie wanneer twee kolommen naar één worden samengevouwen.

De uitleg moet direct naar het onderwerp verwijzen in plaats van coördinaten te gebruiken zoals ‘de afbeelding links’. De positie verandert per breekpunt, vertaling en syndicatie. ‘De verouderde status en updatedatum identificeren het beoordelingsdoel’ blijft overal waar.

Ontwerpvoorbeelden

Het designsysteem ondersteunt vier rol-en-positie-combinaties. Geen enkele verandert de contentvereisten.

Contentafbeelding, afbeelding vooraan

Gebruik deze standaardinstelling wanneer lezers bewijs moeten bekijken vóór interpretatie.

Contentafbeelding, afbeelding achteraan

Gebruik dit wanneer de uitleg een lens moet bieden voordat het bewijs wordt getoond.

Illustratie, afbeelding vooraan

Gebruik dit wanneer een conceptspecifiek visueel element de herkenning verbetert terwijl de tekst de volledige betekenis draagt.

Illustratie, afbeelding achteraan

Gebruik dit wanneer de uitleg primair is en de illustratie fungeert als visuele afsluiting.

Gedrag bij smal scherm

Elke variant wordt één kolom zonder horizontaal scrollen of betekenisveranderende uitsneden. Het bijschrift blijft verbonden aan de figuur.

Parameters

Het contentcontract scheidt redactionele betekenis van presentatie. Breedteverhoudingen, tussenruimtes, randen, achtergronden, hoekradius, schaduwen en breekpunten behoren tot de renderer.

Publiceer src pas nadat de asset bestaat. Een openstaande vastlegging gebruikt een screenshot-commentaar en screenshotsPending = true. role heeft geen standaardwaarde omdat het stilzwijgend behandelen van bewijs als decoratie een toegankelijkheidsfout oplevert.

De eerste body-kop wordt title; alles daarna wordt content. De body staat alinea’s, nadruk, inline code en één contextuele link toe. Het wijst lijsten, geneste koppen, tabellen, media, knoppen, formulieren, citaten, accordeons en componenten af.

Syntax en codevoorbeelden

Alle drie notaties behouden dezelfde rol, afbeelding, titel, uitleg, bijschrift, naamsvermelding en leesvolgorde. Dit zijn draagbare adaptercontracten; ze impliceren niet dat een ongeregistreerde lokale shortcode of block al bestaat.

Draagbare Markdown-directive

:::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.
:::

Het voorbeeldpad demonstreert alleen syntax. Productievalidatie moet het afwijzen totdat die asset bestaat.

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

De adapter gebruikt alleen benoemde parameters. Gebruik tot registratie een semantisch <figure> gevolgd door proza. De adapter valideert de asset en behoudt de directive-body-mapping.

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 moet één Media-veld en een beperkt tekstgebied tonen. Als dit niet beschikbaar is, gebruik dan native Image-, Heading- en Paragraph-blokken; behoud de betekenis, zelfs zonder naast-elkaar-lay-out.

Voorbeelden

Goed voorbeeld: de afbeelding is bewijs

Dit werkt omdat de afbeelding twee fysieke details bewijst en de copy hun operationele consequentie uitlegt. De titel benoemt het inzicht, het bijschrift identificeert het zichtbare bewijs en de uitleg blijft specifiek zonder de hele foto te willen inventariseren.

Slecht voorbeeld: generieke decoratie gepresenteerd als bewijs

Werk slimmer met duidelijke data Afbeelding: een generiek persoon die lacht naar een laptop naast kleurrijke grafieken. Ons innovatieve platform transformeert data in bruikbare inzichten, zodat elk team betere beslissingen kan nemen en meer kan bereiken.

Dit faalt omdat geen van beide helften verifieerbare informatie bijdraagt. De afbeelding zou elk softwareproduct kunnen adverteren, terwijl de copy brede uitkomsten bevat zonder mechanisme, interfacedetail, beperking of voorbeeld. De combinatie creëert visuele prominentie maar geen betekenis die een lezer of machine kan extraheren. Vervang het door een gerichte producttoestand met een uitleg van één beslissing die het ondersteunt, of verwijder de imagebox en schrijf de bewering als gewoon proza met bewijs.

Schema-markup en toegankelijkheid

Een imagebox heeft geen eigen Schema.org-type. De tekst blijft deel van de omringende pagina-entiteit. Een contentafbeelding kan een ImageObject zijn wanneer deze een stabiele contentUrl, accuraat bijschrift, afmetingen en vereiste naamsvermelding of licentie-metadata heeft. Decoratieve illustraties hebben geen aparte entiteit nodig.

Schema op paginaniveau kan naar dezelfde representatieve afbeelding verwijzen. Een productdetailfoto kan de image-eigenschap van het zichtbare product voeden, maar een grafiekuitsnede wordt geen Dataset en een screenshot wordt geen SoftwareApplication.

Gebruik één <figure> en <figcaption> plus een gelabeld uitleggend gebied. Stel intrinsieke width en height in; responsieve uitvoer mag niet horizontaal scrollen of het genoemde detail wegsnijden.

Alternatieve tekst benoemt het relevante onderwerp, de toestand en het beslissende detail van een contentafbeelding. Begin niet met ‘afbeelding van’, herhaal het bijschrift niet en prop geen trefwoorden. Overbodige illustraties gebruiken alt=""; het weglaten van het attribuut kan de bestandsnaam onthullen.

Vertrouw niet alleen op positie, kleur of pixels. Herhaal beslissende getallen, labels, waarschuwingen en conclusies in tekst. Houd links bereikbaar via toetsenbord, maak nooit van de hele box één link, behoud de bronvolgorde en test bij 200% zoom.

Schrijfregels

Schrijf de uitleg voordat je de afbeelding selecteert en kies vervolgens de kleinste uitsnede die de noodzakelijke context behoudt.

• Schrijf een titel van 3–10 woorden die het inzicht, onderwerp of de relatie benoemt. Vermijd ‘Afbeelding’, ‘Overzicht’, ‘Meer informatie’ en ‘Zie het in actie’.
• Houd de uitleggende copy op 40–140 woorden in één of twee alinea’s. Het element ondersteunt één punt, geen mini-artikel.
• Houd bijschriften op 5–25 woorden. Identificeer wat wordt getoond en de context die nodig is om het te interpreteren; plaats de redenering in de body.
• Gebruik 40–180 tekens voor betekenisvolle alternatieve tekst, met 250 als hard maximum. Geef de voorkeur aan nauwkeurigheid boven het vullen van de range.
• Neem precies één afbeelding en maximaal één contextuele tekstlink op. Link alleen wanneer een bestemming de uitleg wezenlijk verdiept.
• Gebruik één stem en tijd in titel, bijschrift en body. Geef de voorkeur aan concrete zelfstandige naamwoorden en werkwoorden boven promotionele bijvoeglijke naamwoorden.
• Vermeld de beperking naast de interpretatie wanneer de afbeelding slechts één toestand, datum, uitsnede, apparaat of voorbeeld toont.

Plaats nooit een lijst, tabel, getuigenis, prijs, formulier, media, download, knop, meerstapsinstructie, disclaimer of call-to-action binnenin. Gebruik geen twee afbeeldingen, verweef essentiële copy niet in pixels, stel geen klantgegevens bloot en publiceer geen artwork met onbekende rechten.

Vermijd het schrijven van ‘zoals je kunt zien’. Een lezer kan de afbeelding mogelijk niet zien, en zelfs een ziende lezer moet weten welke waarneming ertoe doet. Vermeld het direct: ‘Het vergrendelingslipje zit gelijkmatig wanneer de connector volledig is ingestoken.’

Posttypes die het gebruiken

De onderstaande rijen worden aangestuurd door de postTypes frontmatter. ‘Gebruik’ beschrijft een geschikte rol, geen vereiste om een imagebox in elke pagina te forceren.

QA-checklist

Controleer vóór publicatie het volledige element:

• De afbeelding en uitleg maken één punt en horen bij één redactionele eenheid.
• role is expliciet content of illustration, gekozen met de verwijderingstest.
• Het bronbestand bestaat, is goedgekeurd en bevat geen privégegevens, onbekende rechten of placeholder-asset.
• De titel benoemt het inzicht in 3–10 woorden en de body legt het uit in 40–140 woorden.
• Een contentafbeelding heeft betekenisvolle alternatieve tekst en een beknopt bijschrift; een overbodige illustratie gebruikt lege alt-tekst.
• De tekst vermeldt elk beslissend getal, label, instructie, waarschuwing en conclusie die niet van zicht mogen afhangen.
• Het bijschrift identificeert de afbeelding zonder de body of alternatieve tekst te dupliceren.
• Eventuele vereiste maker-, bron-, licentie- of naamsverwijzingslink is accuraat en zichtbaar.
• Het blok bevat één afbeelding, één uitleg en maximaal één contextuele tekstlink.
• Het bevat geen geneste lijst, tabel, media, knop, formulier, call-to-action of interactieve kaart.
• Het vervangt geen betere geannoteerde screenshot, vergelijking, diagram, galerij of full-width figuur.
• Desktop- en mobiele lay-outs behouden semantische bronvolgorde, bijschriftkoppeling en toetsenbordvolgorde.
• De betekenisvolle uitsnede overleeft responsieve herschaling, 200% zoom en het niet laden van afbeeldingen.
• Breedte en hoogte reserveren ruimte, terwijl lazy loading een boven-de-vouw-afbeelding niet vertraagt.
• Gestructureerde gegevens komen, indien uitgezonden, overeen met zichtbare content en beschrijven decoratie niet als aparte entiteit.
• Draagbare Markdown-, Hugo- en WordPress-mapping behouden dezelfde rol, velden en betekenis.

FAQ

De academy-template geeft de vijf beoordeelde vragen weer die zijn opgeslagen in de [[faq]] frontmatter van deze pagina. Ze behandelen de content-versus-illustratie-test, decoratieve alternatieve tekst, beschrijvende reikwijdte, calls-to-action en ImageObject-schema.

Een imagebox slaagt wanneer de lezer twee vragen direct kan beantwoorden: ‘Wat draagt deze afbeelding bij?’ en ‘Waarom is die bijdrage hier belangrijk?’ Als een van beide antwoorden vaag is, versterk dan de relatie of verwijder de box.