Imagebox: Regler og eksempler for billedinfobokse

En imagebox parrer ét billede med én fokuseret forklaring, så læsere behandler dem som én redaktionel enhed. Billedet kan indeholde dokumentation, som teksten fortolker, eller det kan illustrere en idé, som teksten forklarer fuldstændigt. Forfatteren skal angive, hvilken funktion det udfører, fordi dette valg styrer teksten, alternativteksten, billedteksten, strukturerede data og hvorvidt elementet stadig fungerer uden syn.

Dette er indholdsbillede-varianten: den synlige dato og status er dokumentation, mens den tilstødende tekst fortolker deres forhold. Hvis billedet blot var en dekorativ kalender, ville teksten skulle fremsætte hele friskhedspointen uafhængigt, og billedet skulle bruge tom alternativtekst.

Hvorfor dette element er vigtigt

Læsere opfatter ikke automatisk et billede og en fjern paragraf som én idé. Når et billede vises uden et eksplicit tekstuelt forhold, skal de selv beslutte, hvad de skal inspicere, hvorfor det er vigtigt, og om det understøtter den omkringliggende påstand. En imagebox reducerer denne usikkerhed ved at placere ét visuelt element og én forklaring inden for en tydelig afgrænsning. Titlen navngiver pointen; billedet viser den; teksten fortæller læseren, hvad der skal bemærkes eller forstås.

Den psykologiske fordel er fælles opmærksomhed: designet retter opmærksomheden mod et visuelt objekt, mens teksten fastslår dets relevans. Et diagramudsnit kan antyde en stigning, volatilitet eller en datogrænse; den tilstødende forklaring udvælger den relevante læsning.

Maskinel ekstraherbarhed er softwarens evne til at isolere en indholdsenhed uden at miste forholdet mellem dens dele. En semantisk imagebox eksponerer et billede, tilgængelig beskrivelse, billedtekst, overskrift, forklaring og erklæret billedrolle i én container. Tekst skal stadig indeholde påstanden: computervision må ikke være den eneste vej til et tal, en instruktion, en begrænsning eller en konklusion.

Elementernes skriveregler styrer den fælles direktivsyntaks, kropstilknytning, stier og forrang. Denne side har forrang, hvor den definerer imagebox-specifikke skel mellem indhold og illustration, dens tilladte felter og dens grænse på ét billede.

Hvornår skal det bruges

Brug en imagebox, når ét billede og én forklaring har et direkte, nødvendigt forhold, og ingen af dem fortjener en selvstændig sektion. Stærke anvendelser inkluderer et fokuseret interface-udsnit parret med en fortolkning, en produktdetalje parret med en forklaring af, hvorfor den påvirker pasform, et procesfotografi parret med en kvalitetskontrolregel, eller en simpel konceptuel illustration parret med en kortfattet forklaring.

Afgør først, om billedet er indhold eller illustration:

• Indholdsbillede: læseren skal inspicere billedet for at verificere en påstand, identificere en funktion, sammenligne en tilstand eller forstå et visuelt faktum. Teksten nævner den relevante detalje og forklarer dens betydning. Alt-tekst er meningsfuld, og en billedtekst er normalt til stede.
• Illustrativt billede: billedet forstærker tone, hukommelse eller forståelse, men den tilstødende tekst giver den fulde påstand. Fjernelse af billedet gør blokken mindre engagerende, men ikke mindre præcis. Alt-tekst er tom, medmindre illustrationen selv formidler yderligere information.

Brug fjernelsestesten. Hvis en mislykket billedanmodning fjerner dokumentation eller gør forklaringen ufuldstændig, erklæres role=content. Hvis den kun fjerner visuel forstærkning, erklæres role=illustration.

Tætte tilfælde er almindelige:

• Brug et selvstændigt billede, når det visuelle har brug for den fulde læsebredde, og teksten kun identificerer det.
• Brug et anmærket skærmbillede , når læsere skal finde flere interface-områder.
• Brug en tabel til gentagne sammenligningskriterier, et diagram til et system eller en sekvens, og et galleri til sideordnede billeder.
• Brug almindelig prosa, når det visuelle blot gentager en sætning.

Brug ikke en imagebox til at få en svag sektion til at se designet ud. Et arkivfoto af mennesker, der peger på en bærbar computer, forklarer ikke “samarbejde”, og en generisk robot gør ikke en påstand om kunstig intelligens mere konkret. Hvis billedet kunne byttes til et ikke-relateret billede uden ændring af teksten, har parringen ingen redaktionel kontrakt.

Hvor skal det placeres

Placer imageboxen umiddelbart efter det afsnit, der introducerer den påstand eller det koncept, den udfolder. I en procedure placeres den efter handlingen og før successkontrollen, så visuel dokumentation ikke afbryder instruktionen.

Den kan sidde direkte under en H2 kun, når dens interne titel er mere specifik. Hold en kildehenvisning eller kvalifikation ved siden af den påstand, den begrænser; indsæt aldrig imageboxen imellem dem.

Den må ikke sidde direkte ved siden af en anden imagebox, et galleri, en fuldbreddefigur, en video, en tabel eller en to-søjlet infoboks. Indsæt fortolkning mellem visuelle containere, kombiner sande sideordnede elementer, eller opret separate underafsnit.

Placer den ikke inde i et punktpunkt, et trin, et kald, en tabelcelle, en accordion eller et klikbart kort. Undlad at placere et call to action inde i blokken eller mellem dens billede og forklaring.

På desktop kan billedet vises før eller efter teksten. På mobil skal du bevare en forudsigelig kilde-, tastatur- og skærmlæserrækkefølge; stol ikke på modstridende CSS-omrækkefølge.

Anatomi

Anatomi er defineret af betydning snarere end farve, skygge eller kolonnebredde.

1. Container: Grupperer præcis én figur og én forklaring som én redaktionel enhed.
2. Billede: Viser dokumentation eller leverer illustration i henhold til den erklærede rolle.
3. Alternativtekst: Kommunikerer det relevante visuelle formål for et indholdsbillede; den er tom for en redundant dekorativ illustration.
4. Billedtekst: Identificerer, hvad et indholdsbillede viser, og giver væsentlig kontekst som tilstand, dato eller skala.
5. Titel: Angiver indsigten eller emnet, ikke filnavnet eller en generisk etiket som “Eksempel.”
6. Forklaring: Fortæller læseren, hvad der skal bemærkes, hvorfor det er vigtigt, og eventuelle begrænsninger af fortolkningen.
7. Kredit: Nævner skaberen eller kilden, når rettigheder, oprindelse eller redaktionel politik kræver det.
8. Læserækkefølge: Bevarer et sammenhængende figur-og-tekst-forhold, når to kolonner bliver til én.

Forklaringen skal henvise til emnet direkte frem for at bruge koordinater som “billedet til venstre.” Placering ændrer sig på tværs af breakpoints, oversættelser og syndikering. “Den forældede status og opdateringsdato identificerer revisionsmålet” forbliver sandt overalt.

Designeksempler

Designsystemet understøtter fire rolle-og-placeringskombinationer. Ingen ændrer indholdskravene.

Indholdsbillede, billede først

Brug denne standard, når læsere bør inspicere dokumentation, før den fortolkes.

Indholdsbillede, billede sidst

Brug denne, når forklaringen skal etablere en optik, før dokumentationen præsenteres.

Illustration, billede først

Brug denne, når et konceptspecificeret visuelt element forbedrer genkendelse, mens teksten bærer den fulde betydning.

Illustration, billede sidst

Brug denne, når forklaringen er primær, og illustrationen fungerer som en visuel afslutning.

Opførsel ved små skærmbredder

Alle varianter bliver til én kolonne uden vandret rulning eller betydningsændrende beskæringer. Billedteksten forbliver knyttet til sin figur.

Parametre

Indholdskontrakten adskiller redaktionel betydning fra præsentation. Breddeforhold, mellemrum, kanter, baggrunde, radius, skygger og breakpoints tilhører renderingsmotoren.

Publicér src først, efter at aktivet eksisterer. En afventende optagelse bruger en skærmbilledekommentar og screenshotsPending = true. role har ingen standard, fordi stiltiende behandling af dokumentation som dekoration skaber en tilgængelighedsfejl.

Den første kropsoverskrift bliver title; alt efter den bliver content. Kroppen tillader afsnit, fremhævelse, indlejret kode og ét kontekstuelt link. Den afviser lister, indlejrede overskrifter, tabeller, medier, knapper, formularer, citater, accordions og komponenter.

Syntaks og kodeeksempler

Alle tre notationer bevarer den samme rolle, billede, titel, forklaring, billedtekst, kredit og læserækkefølge. Disse er portable adapterkontrakter; de indebærer ikke, at en uregistreret lokal shortcode eller blok allerede eksisterer.

Portabel Markdown-direktiv

:::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."}
## Se hvorfor siden skal gennemgås

Den synlige opdateringsdato forklarer, hvorfor revisionen klassificerede denne URL som forældet. Bekræft, om siden er ændret siden den dato, før du tildeler en omskrivning.
:::

Eksempelstien demonstrerer kun syntaks. Produktionsvalidering skal afvise den, indtil aktivet eksisterer.

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." >}}
## Se hvorfor siden skal gennemgås

Den synlige opdateringsdato forklarer, hvorfor revisionen klassificerede denne URL som forældet. Bekræft, om siden er ændret siden den dato, før du tildeler en omskrivning.
{{< /imagebox >}}

Adapteren bruger kun navngivne parametre. Indtil den er registreret, bruges en semantisk <figure> efterfulgt af prosa. Adapteren validerer aktivet og bevarer direktivtekst-tilknytningen.

WordPress-blok

<!-- 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>Se hvorfor siden skal gennemgås</h2>
  <p>Den synlige opdateringsdato forklarer, hvorfor revisionen klassificerede denne URL som forældet. Bekræft, om siden er ændret siden den dato, før du tildeler en omskrivning.</p>
</div>
<!-- /wp:amicited/imagebox -->

WordPress bør eksponere ét medie-felt og et begrænset tekstområde. Hvis det ikke er tilgængeligt, brug native Image-, Heading- og Paragraph-blokke; bevar betydning selv uden side-om-side-layout.

Eksempler

Godt eksempel: billedet er dokumentation

Dette virker, fordi billedet beviser to fysiske detaljer, og teksten forklarer deres operationelle konsekvens. Titlen angiver indsigten, billedteksten identificerer den synlige dokumentation, og forklaringen forbliver specifik uden at forsøge at opremse hele fotografiet.

Dårligt eksempel: generisk dekoration præsenteret som bevis

Arbejd smartere med klare data
Billede: en generisk person, der smiler til en bærbar computer ved siden af farverige diagrammer.
Vores innovative platform omdanner data til handlingsorienteret indsigt, så alle teams kan træffe bedre beslutninger og opnå mere.

Dette fejler, fordi ingen af delene bidrager med verificerbar information. Billedet kunne reklamere for ethvert softwareprodukt, mens teksten indeholder brede resultater uden mekanisme, interfacedetalje, begrænsning eller eksempel. Parringen skaber visuel fremtræden, men ingen mening som en læser eller maskine kan udtrække. Erstat det med en fokuseret produkttilstand og en forklaring af én beslutning, den understøtter, eller fjern imageboxen og skriv påstanden som almindelig prosa med dokumentation.

Schema-markup og tilgængelighed

En imagebox har ingen dedikeret Schema.org-type. Dens tekst forbliver en del af den omsluttende sideenhed. Et indholdsbillede kan være et ImageObject, når det har en stabil contentUrl, præcis billedtekst, dimensioner og påkrævede kredit- eller licensmetadata. Dekorative illustrationer har ikke brug for en separat enhed.

Schema på sideniveau kan henvise til det samme repræsentative billede. Et produktdetaljefotografi kan forsyne det viste produkts image-egenskab, men et diagramudsnit bliver ikke til Dataset, og et skærmbillede bliver ikke til SoftwareApplication.

Brug én <figure> og <figcaption> plus et mærket forklarende område. Angiv intrinsisk width og height; responsivt output må ikke rulle vandret eller beskære den nævnte detalje.

Alternativtekst nævner et indholdsbilledes relevante emne, tilstand og afgørende detalje. Begynd ikke med “billede af,” dupliker ikke billedteksten, og stop ikke nøgleord. Redundante illustrationer bruger alt=""; udeladelse af attributten kan eksponere filnavnet.

Stol ikke kun på placering, farve eller pixels. Gentag afgørende tal, etiketter, advarsler og konklusioner i tekst. Hold links tastaturnåbare, gør aldrig hele boksen til ét link, bevar kildeorden, og test ved 200 % zoom.

Skriveregler

Skriv forklaringen før du vælger billedet, og vælg derefter den smalleste beskæring, der bevarer nødvendig kontekst.

• Skriv en titel på 3–10 ord, der angiver indsigten, emnet eller forholdet. Undgå “Billede,” “Oversigt,” “Lær mere” og “Se det i aktion.”
• Hold forklarende tekst på 40–140 ord i ét eller to afsnit. Elementet understøtter ét punkt, ikke en miniatureartikel.
• Hold billedtekster på 5–25 ord. Identificér, hvad der vises, og den nødvendige kontekst for at fortolke det; læg ræsonnement i brødteksten.
• Brug 40–180 tegn til meningsfuld alternativtekst med 250 som en hård maksimumgrænse. Foretræk præcision frem for at udfylde intervallet.
• Inkludér præcis ét billede og højst ét kontekstuelt tekstlink. Link kun, når en destination væsentligt uddyber forklaringen.
• Brug én stemme og tid på tværs af titel, billedtekst og brødtekst. Foretræk konkrete navneord og verber frem for salgsfremmende adjektiver.
• Angiv begrænsningen ved siden af fortolkningen, når billedet kun viser én tilstand, dato, beskæring, enhed eller ét eksempel.

Anbring aldrig en liste, tabel, testimonial, pris, formular, medie, download, knap, flertrinsinstruktion, ansvarsfraskrivelse eller call to action indeni. Brug ikke to billeder, indlejr ikke væsentlig tekst i pixels, eksponér ikke kundedata, og publicér ikke kunstværk med ukendte rettigheder.

Undgå at skrive “som du kan se.” En læser kan muligvis ikke se billedet, og selv en seende læser har brug for at vide, hvilken observation der er vigtig. Angiv det direkte: “Låsetappen sidder i plan, når stikket er helt indsat.”

Indlægstyper, der bruger det

Rækkerne nedenfor er drevet af postTypes frontmatter. “Brug” beskriver en passende rolle, ikke et krav om at tvinge en imagebox ind på hver side.

QA-tjekliste

Før publicering skal hele elementet verificeres:

• Billedet og forklaringen udgør ét punkt og hører til i én redaktionel enhed.
• role er eksplicit content eller illustration, valgt med fjernelsestesten.
• Kildefilen eksisterer, er godkendt og bruger ingen private data, ukendte rettigheder eller pladsholderaktiv.
• Titlen angiver indsigten på 3–10 ord, og brødteksten forklarer den på 40–140 ord.
• Et indholdsbillede har meningsfuld alternativtekst og en kortfattet billedtekst; en redundant illustration bruger tom alt-tekst.
• Teksten angiver alle afgørende tal, etiketter, instruktioner, advarsler og konklusioner, der ikke kan afhænge af syn.
• Billedteksten identificerer billedet uden at duplikere brødteksten eller alternativteksten.
• Eventuelle påkrævede skaber-, kilde-, licens- eller kreditlinks er præcise og synlige.
• Blokken indeholder ét billede, én forklaring og højst ét kontekstuelt tekstlink.
• Den indeholder ingen indlejret liste, tabel, medie, knap, formular, call to action eller interaktivt kort.
• Den erstatter ikke et bedre anmærket skærmbillede, sammenligning, diagram, galleri eller fuldbreddefigur.
• Desktop- og mobil-layouts bevarer semantisk kildeorden, billedteksttilknytning og tastaturrækkefølge.
• Den meningsfulde beskæring overlever responsiv skalering, 200 % zoom og fejl ved indlæsning af billede.
• Bredde og højde reserverer plads, mens lazy loading ikke forsinker et billede over folden.
• Strukturerede data, hvis de udsendes, matcher synligt indhold og beskriver ikke dekoration som en separat enhed.
• Portabel Markdown-, Hugo- og WordPress-tilknytning bevarer samme rolle, felter og betydning.

FAQ

Academy-skabelonen gengiver de fem gennemgåede spørgsmål, der er gemt i denne sides [[faq]] frontmatter. De dækker indhold-kontra-illustration-testen, dekorativ alternativtekst, beskrivende omfang, call to action og ImageObject-schema.

En imagebox lykkes, når læseren straks kan besvare to spørgsmål: “Hvad bidrager dette billede med?” og “Hvorfor er dette bidrag vigtigt her?” Hvis begge svar er uklare, styrk forholdet, eller fjern boksen.