Imagebox: Regler og eksempler for bilderammer

En imagebox kobler ett bilde med én fokusert forklaring slik at lesere behandler dem som én redaksjonell enhet. Bildet kan inneholde bevis som teksten tolker, eller det kan illustrere en idé som teksten forklarer fullstendig. Forfatteren må erklære hvilken jobb det utfører, fordi dette valget styrer kopi, alternativ tekst, bildetekst, strukturerte data og hvorvidt elementet fortsatt fungerer uten syn.

Dette er innholdsbildevarianten: den synlige datoen og statusen er bevis, mens den tilstøtende teksten tolker deres forhold. Hvis bildet bare var en dekorativ kalender, måtte teksten gjøre hele ferskhetspoenget uavhengig, og bildet ville bruke tom alternativ tekst.

Hvorfor dette elementet betyr noe

Lesere behandler ikke et bilde og en fjern paragraf som én idé automatisk. Når et bilde vises uten en eksplisitt tekstlig sammenheng, må de bestemme hva de skal undersøke, hvorfor det betyr noe, og om det støtter den omkringliggende påstanden. En imagebox reduserer denne usikkerheten ved å plassere ett visuelt element og én forklaring innenfor en tydelig avgrensning. Tittelen navngir poenget; bildet viser det; teksten forteller leseren hva de skal legge merke til eller forstå.

Den psykologiske fordelen er felles oppmerksomhet: designet retter oppmerksomheten mot et visuelt objekt mens kopien etablerer dens relevans. Et diagramutdrag kan antyde en økning, volatilitet eller en datogrense; den tilstøtende forklaringen velger den relevante tolkningen.

Maskinutvinnbarhet er evnen programvare har til å isolere en innholdsenhet uten å miste forholdet mellom delene. En semantisk imagebox eksponerer et bilde, tilgjengelig beskrivelse, bildetekst, overskrift, forklaring og erklært bilderolle i én beholder. Tekst må fortsatt inneholde påstanden: datasyn må ikke være den eneste veien til et tall, en instruksjon, begrensning eller konklusjon.

Element skriveregler styrer den delte direktivsyntaksen, kroppskartlegging, stier og forrang. Denne siden har forrang der den definerer imagebox-spesifikke skillet mellom innhold og illustrasjon, dens tillatte felt, og dens bildebegrensning.

Når du skal bruke det

Bruk en imagebox når ett bilde og én forklaring har et direkte, nødvendig forhold og ingen av dem fortjener en hel frittstående seksjon. Gode bruksområder inkluderer et fokusert grensesnittutdrag parert med en tolkning, en produktdetalj parert med en forklaring på hvorfor den påvirker passform, et prosessfotografi parert med en kvalitetskontrollregel, eller en enkel konseptuell illustrasjon parert med en kortfattet forklaring.

Avgjør først om bildet er innhold eller illustrasjon:

• Innholdsbilder: leseren må inspisere bildet for å verifisere en påstand, identifisere en funksjon, sammenligne en tilstand eller forstå et visuelt faktum. Teksten navngir den relevante detaljen og forklarer dens betydning. Alternativ tekst er meningsfull, og en bildetekst er normalt til stede.
• Illustrerende bilde: bildet forsterker tone, hukommelse eller forståelse, men den tilstøtende teksten gir den fullstendige påstanden. Å fjerne bildet gjør blokken mindre engasjerende, ikke mindre nøyaktig. Alternativ tekst er tom med mindre illustrasjonen i seg selv kommuniserer tilleggsinformasjon.

Bruk fjerningstesten. Hvis en mislykket bildeforespørsel fjerner bevis eller gjør forklaringen ufullstendig, erklær role=content. Hvis den bare fjerner visuell forsterkning, erklær role=illustration.

Nærliggende tilfeller er vanlige:

• Bruk et frittstående bilde når det visuelle trenger full lesebredde og teksten bare identifiserer det.
• Bruk en annotert skjermdump når lesere må lokalisere flere grensesnittregioner.
• Bruk en tabell for gjentatte sammenligningskriterier, et diagram for et system eller en sekvens, og et galleri for likeverdige bilder.
• Bruk vanlig prosa når det visuelle bare gjentar en setning.

Ikke bruk en imagebox for å få en svak seksjon til å se designet ut. Et arkivfoto av personer som peker på en bærbar PC forklarer ikke «samarbeid», og en generisk robot gjør ikke en påstand om kunstig intelligens mer konkret. Hvis bildet kunne byttes ut med et urelatert bilde uten endring i kopien, har ikke paringen en redaksjonell kontrakt.

Hvor du skal plassere den

Plasser imageboxen umiddelbart etter avsnittet som introduserer påstanden eller konseptet den utdyper. I en prosedyre plasseres den etter handlingen og før suksessjekken, slik at visuelle bevis ikke avbryter instruksjonen.

Den kan plasseres direkte under en H2 bare når dens interne tittel er mer spesifikk. Hold en henvisning eller kvalifikasjon ved siden av påstanden den begrenser; sett aldri imageboxen mellom dem.

Den må ikke plasseres rett ved siden av en annen imagebox, et galleri, en fullbreddefigur, video, tabell eller to-kolonne infoboks. Sett tolkning mellom visuelle beholdere, kombiner virkelige likeverdige, eller lag separate underseksjoner.

Ikke plasser den inne i et punkt, trinn, utheving, tabellcelle, accordion eller klikkbart kort. Ikke sett en handlingsoppfordring inne i blokken eller mellom bildet og forklaringen.

På datamaskin kan bildet vises før eller etter teksten. På mobil, bevar en forutsigbar kilde-, tastatur- og skjermleserrekkefølge; stol ikke på motstridende CSS-omorganisering.

Anatomi

Anatomien er definert av mening snarere enn farge, skygge eller kolonnebredde.

1. Beholder: Grupperer nøyaktig én figur og én forklaring som én redaksjonell enhet.
2. Bilde: Viser bevis eller leverer illustrasjon i henhold til den erklærte rollen.
3. Alternativ tekst: Kommuniserer det relevante visuelle formålet for et innholdsbildefoto; den er tom for en overflødig dekorativ illustrasjon.
4. Bildetekst: Identifiserer hva et innholdsbildefoto viser og gir essensiell kontekst som tilstand, dato eller skala.
5. Tittel: Angir innsikten eller emnet, ikke filnavnet eller en generisk etikett som «Eksempel».
6. Forklaring: Forteller leseren hva de skal legge merke til, hvorfor det betyr noe, og eventuelle begrensninger på tolkningen.
7. Kreditering: Navngir skaperen eller kilden når rettigheter, opprinnelse eller redaksjonell policy krever det.
8. Leserekkefølge: Bevarer et sammenhengende figur-og-tekst-forhold når to kolonner blir til én.

Forklaringen må referere til emnet direkte i stedet for å bruke koordinater som «bildet til venstre». Posisjon endres på tvers av bruddpunkter, oversettelser og syndikering. «Den utdaterte statusen og oppdateringsdatoen identifiserer revisjonsmålet» forblir sant overalt.

Designeksempler

Designsystemet støtter fire rolle-og-posisjonskombinasjoner. Ingen endrer innholdskravene.

Innholdsbildefoto, bilde først

Bruk denne standarden når lesere bør undersøke bevis før tolkningen.

Innholdsbildefoto, bilde sist

Bruk dette når forklaringen må etablere en linse før beviset.

Illustrasjon, bilde først

Bruk dette når et konseptspesifikt visuelt element forbedrer gjenkjenning mens teksten bærer hele meningen.

Illustrasjon, bilde sist

Bruk dette når forklaringen er primær og illustrasjonen fungerer som en visuell avslutning.

Smal visningsflate-atferd

Hver variant blir én kolonne uten horisontal rulling eller meningsendrende beskjæringer. Bildeteksten forblir knyttet til sin figur.

Parametre

Innholdskontrakten skiller redaksjonell mening fra presentasjon. Breddeforhold, avstander, kanter, bakgrunner, radius, skygger og bruddpunkter tilhører gjengiveren.

Publiser src først etter at aktivumet eksisterer. En ventende fangst bruker en skjermbildekommentar og screenshotsPending = true. role har ingen standard fordi stille behandling av bevis som dekorasjon skaper en tilgjengelighetsfeil.

Den første brødtekstoverskriften blir title; alt etter den blir content. Brødteksten tillater avsnitt, utheving, innebygd kode og én kontekstuell lenke. Den avviser lister, nestede overskrifter, tabeller, medier, knapper, skjemaer, sitater, accordions og komponenter.

Syntaks og kodeeksempler

Alle tre notasjonene bevarer samme rolle, bilde, tittel, forklaring, bildetekst, kreditering og leserekkefølge. Dette er bærbare adapterkontrakter; de innebærer ikke at en uregistrert lokal shortcode eller blokk allerede eksisterer.

Bærbar 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.
:::

Eksempelstien demonstrerer kun syntaks. Produksjonsvalidering må avvise den inntil aktivumet 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." >}}
## 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 >}}

Adapteren bruker kun navngitte parametre. Inntil registrert, bruk en semantisk <figure> etterfulgt av prosa. Adapteren validerer aktivumet og bevarer direktivets kroppskartlegging.

WordPress-blokk

<!-- 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 bør eksponere ett mediefelt og en begrenset tekstregion. Hvis utilgjengelig, bruk opprinnelige Bilde-, Overskrift- og Avsnitt-blokker; bevar mening selv uten side-ved-side-oppsett.

Eksempler

Godt eksempel: bildet er bevis

Dette fungerer fordi bildet beviser to fysiske detaljer og kopien forklarer deres operasjonelle konsekvens. Tittelen angir innsikten, bildeteksten identifiserer de synlige bevisene, og forklaringen forblir spesifikk uten å forsøke å inventere hele fotografiet.

Dårlig eksempel: generisk dekorasjon presentert som bevis

Arbeid smartere med tydelige data
Bilde: en generisk person som smiler til en bærbar PC ved siden av fargerike diagrammer.
Vår innovative plattform transformerer data til handlingsrettet innsikt slik at alle team kan låse opp bedre beslutninger og oppnå mer.

Dette mislykkes fordi ingen av delene bidrar med verifiserbar informasjon. Bildet kunne reklamere for hvilket som helst programvareprodukt, mens kopien inneholder brede resultater uten mekanisme, grensesnittdetalj, begrensning eller eksempel. Parringen skaper visuell fremtreden, men ingen mening som en leser eller maskin kan utvinne. Erstatt det med en fokusert produktilstand og en forklaring på én beslutning den støtter, eller fjern imageboxen og skriv påstanden som vanlig prosa med bevis.

Skjemamarkering og tilgjengelighet

En imagebox har ingen dedikert Schema.org-type. Teksten forblir en del av den omsluttende sidenheten. Et innholdsbildefoto kan være et ImageObject når det har en stabil contentUrl, nøyaktig bildetekst, dimensjoner og påkrevd krediterings- eller lisensmetadata. Dekorative illustrasjoner trenger ikke en separat enhet.

Sideskjema kan referere til det samme representative bildet. Et produktdetaljfotografi kan mate den synlige produktets image-egenskap, men et diagramutdrag blir ikke Dataset og en skjermdump blir ikke SoftwareApplication.

Bruk én <figure> og <figcaption> pluss et merket forklaringsområde. Sett intrinsiske width og height; responsiv utgang må ikke rulle horisontalt eller beskjære den navngitte detaljen.

Alternativ tekst navngir et innholdsbildefotos relevante emne, tilstand og avgjørende detalj. Ikke begynn med «bilde av», ikke dupliser bildeteksten, og ikke stapp inn nøkkelord. Overflødige illustrasjoner bruker alt=""; å utelate attributtet kan eksponere filnavnet.

Ikke stol utelukkende på posisjon, farge eller piksler. Gjenta avgjørende tall, etiketter, advarsler og konklusjoner i tekst. Hold linker tastaturnåbare, gjør aldri hele boksen til én lenke, bevar kilderekkefølgen, og test ved 200 % zoom.

Skriveregler

Skriv forklaringen før du velger bildet, velg deretter den smaleste beskjæringen som bevarer nødvendig kontekst.

• Skriv en tittel på 3–10 ord som angir innsikten, emnet eller forholdet. Unngå «Bilde», «Oversikt», «Lær mer» og «Se det i aksjon».
• Hold forklarende kopi til 40–140 ord i ett eller to avsnitt. Elementet støtter ett poeng, ikke en miniatyrartikkel.
• Hold bildetekster til 5–25 ord. Identifiser hva som vises og konteksten som er nødvendig for å tolke det; legg resonnement i brødteksten.
• Bruk 40–180 tegn for meningsfull alternativ tekst, med 250 som en hard maksimumsgrense. Foretrekk nøyaktighet fremfor å fylle området.
• Inkluder nøyaktig ett bilde og høyst én kontekstuell tekstlenke. Lenk bare når en destinasjon vesentlig utdyper forklaringen.
• Bruk én stemme og tidsform på tvers av tittel, bildetekst og brødtekst. Foretrekk konkrete substantiv og verb fremfor salgsfremmende adjektiver.
• Angi begrensningen ved siden av tolkningen når bildet bare viser én tilstand, dato, beskjæring, enhet eller ett eksempel.

Sett aldri inn en liste, tabell, anbefaling, pris, skjema, media, nedlasting, knapp, flertrinnsinstruksjon, ansvarsfraskrivelse eller handlingsoppfordring. Ikke bruk to bilder, ikke bygg inn essensiell kopi i piksler, ikke eksponer kundedata, og ikke publiser kunstverk med ukjente rettigheter.

Unngå å skrive «som du kan se». En leser ser kanskje ikke bildet, og selv en seende leser trenger å vite hvilken observasjon som betyr noe. Angi det direkte: «Låsefliken sitter i flukt når kontakten er fullstendig innført.»

Innleggstyper som bruker det

Radene nedenfor drives av postTypes frontmatter. «Bruk» beskriver en passende rolle, ikke et krav om å tvinge inn en imagebox på hver side.

QA-sjekkliste

Før publisering, verifiser hele elementet:

• Bildet og forklaringen utgjør ett poeng og hører til i én redaksjonell enhet.
• role er eksplisitt content eller illustration, valgt med fjerningstesten.
• Kildefilen eksisterer, er godkjent, og bruker ingen private data, ukjente rettigheter eller plassholderaktivum.
• Tittelen angir innsikten på 3–10 ord og brødteksten forklarer den på 40–140 ord.
• Et innholdsbildefoto har meningsfull alternativ tekst og en kortfattet bildetekst; en overflødig illustrasjon bruker tom alternativ tekst.
• Teksten angir alle avgjørende tall, etiketter, instruksjoner, advarsler og konklusjoner som ikke kan avhenge av syn.
• Bildeteksten identifiserer bildet uten å duplisere brødteksten eller den alternative teksten.
• Eventuell påkrevd skaper-, kilde-, lisens- eller krediteringslenke er nøyaktig og synlig.
• Blokken inneholder ett bilde, én forklaring og høyst én kontekstuell tekstlenke.
• Den inneholder ingen nestet liste, tabell, media, knapp, skjema, handlingsoppfordring eller interaktivt kort.
• Den erstatter ikke en bedre annotert skjermdump, sammenligning, diagram, galleri eller fullbreddefigur.
• Oppsett på datamaskin og mobil bevarer semantisk kilderekkefølge, bildeteksttilknytning og tastaturrekkefølge.
• Den meningsfulle beskjæringen overlever responsiv skalering, 200 % zoom og bildelastingsfeil.
• Bredde og høyde reserverer plass, mens lat lasting ikke forsinker et bilde over folden.
• Strukturerte data, hvis de sendes ut, matcher synlig innhold og beskriver ikke dekorasjon som en separat enhet.
• Bærbar Markdown-, Hugo- og WordPress-kartlegging beholder samme rolle, felt og mening.

FAQ

Akademimalen gjengir de fem gjennomgåtte spørsmålene som er lagret i denne sidens [[faq]] frontmatter. De dekker innhold-kontra-illustrasjon-testen, dekorativ alternativ tekst, beskrivende omfang, handlingsoppfordringer og ImageObject-skjema.

En imagebox lykkes når leseren kan svare på to spørsmål umiddelbart: «Hva bidrar dette bildet med?» og «Hvorfor betyr dette bidraget noe her?» Hvis et av svarene er vagt, styrk forholdet eller fjern boksen.