Imagebox: Reguli și exemple pentru infobox-ul cu imagini

Un imagebox asociază o imagine cu o explicație concentrată, astfel încât cititorii să le proceseze ca o singură unitate editorială. Imaginea poate prezenta dovezi pe care textul le interpretează sau poate ilustra o idee pe care textul o explică în întregime. Autorul trebuie să declare ce rol îndeplinește, deoarece această alegere controlează textul, textul alternativ, legenda, datele structurate și dacă elementul funcționează și fără vedere.

Aceasta este varianta cu imagine de conținut: data și statusul vizibile sunt dovezi, iar textul adiacent interpretează relația dintre ele. Dacă imaginea ar fi fost doar un calendar decorativ, textul ar fi trebuit să susțină întregul argument despre prospețime în mod independent, iar imaginea ar fi folosit text alternativ gol.

De ce contează acest element

Cititorii nu procesează automat o imagine și un paragraf îndepărtat ca pe o singură idee. Atunci când o imagine apare fără o relație textuală explicită, ei trebuie să decidă ce să inspecteze, de ce contează și dacă susține afirmația din jur. Un imagebox reduce această incertitudine plasând un element vizual și o explicație într-o graniță clară. Titlul denumește ideea; imaginea o arată; textul îi spune cititorului ce să observe sau să înțeleagă.

Beneficiul psihologic este atenția comună: designul direcționează atenția către un obiect vizual, în timp ce textul stabilește relevanța acestuia. Un decupaj al unui grafic poate sugera o creștere, volatilitate sau o limită de dată; explicația adiacentă selectează lectura relevantă.

Extragerea automată este capacitatea software-ului de a izola o unitate de conținut fără a pierde relația dintre părțile sale. Un imagebox semantic expune o imagine, o descriere accesibilă, o legendă, un titlu, o explicație și un rol declarat al imaginii într-un singur container. Textul trebuie să conțină totuși afirmația: viziunea computerizată nu trebuie să fie singura cale către un număr, o instrucțiune, o limitare sau o concluzie.

Regulile de redactare a elementelor guvernează sintaxa partajată a directivelor, maparea corpului, căile și precedența. Această pagină are prioritate acolo unde definește distincția specifică imagebox între conținut și ilustrație, câmpurile permise și limita de o singură imagine.

Când se folosește

Folosește un imagebox atunci când o imagine și o explicație au o relație directă și necesară și niciuna nu merită o secțiune separată de sine stătătoare. Utilizări potrivite includ un decupaj concentrat al interfeței asociat cu o interpretare, un detaliu de produs asociat cu o explicație a motivului pentru care afectează compatibilitatea, o fotografie de proces asociată cu o regulă de control al calității sau o ilustrație conceptuală simplă asociată cu o explicație concisă.

Mai întâi decide dacă imaginea este conținut sau ilustrație:

• Imagine de conținut: cititorul trebuie să inspecteze imaginea pentru a verifica o afirmație, a identifica o caracteristică, a compara o stare sau a înțelege un fapt vizual. Textul denumește detaliul relevant și explică semnificația acestuia. Textul alternativ este semnificativ, iar o legendă este de obicei prezentă.
• Imagine ilustrativă: imaginea întărește tonul, memoria sau înțelegerea, dar textul adiacent oferă afirmația completă. Eliminarea imaginii face blocul mai puțin captivant, nu mai puțin corect. Textul alternativ este gol, cu excepția cazului în care ilustrația în sine comunică informații suplimentare.

Folosește testul eliminării. Dacă o solicitare eșuată a imaginii elimină dovezi sau face explicația incompletă, declară role=content. Dacă elimină doar întărirea vizuală, declară role=illustration.

Cazurile limită sunt frecvente:

• Folosește o imagine independentă atunci când elementul vizual necesită lățimea completă de lectură, iar textul doar o identifică.
• Folosește o captură de ecran adnotată atunci când cititorii trebuie să localizeze mai multe regiuni ale interfeței.
• Folosește un tabel pentru criterii repetate de comparație, o diagramă pentru un sistem sau un proces și o galerie pentru imagini similare.
• Folosește proză obișnuită atunci când elementul vizual doar repetă o propoziție.

Nu folosi un imagebox pentru a face o secțiune slabă să pară bine proiectată. O fotografie de stoc cu oameni care arată spre un laptop nu explică „colaborare”, iar un robot generic nu face o afirmație despre inteligența artificială mai concretă. Dacă imaginea poate fi înlocuită cu o imagine fără legătură, fără nicio schimbare în text, asocierea nu are un contract editorial.

Unde se plasează

Plasează imagebox-ul imediat după paragraful care introduce afirmația sau conceptul pe care îl dezvoltă. Într-o procedură, plasează-l după acțiune și înainte de verificarea succesului, astfel încât dovada vizuală să nu întrerupă instrucțiunea.

Poate fi plasat direct sub un H2 numai atunci când titlul său intern este mai specific. Păstrează o citare sau o calificare lângă afirmația pe care o limitează; nu insera niciodată imagebox-ul între ele.

Nu trebuie plasat direct lângă un alt imagebox, o galerie, o imagine pe lățime completă, un videoclip, un tabel sau un infobox pe două coloane. Inserează interpretare între containerele vizuale, combină elemente cu adevărat echivalente sau creează subsecțiuni separate.

Nu îl plasa în interiorul unui bullet, pas, callout, celulă de tabel, acordeon sau card pe care se poate face clic. Nu pune un îndemn la acțiune în interiorul blocului sau între imaginea și explicația acestuia.

Pe desktop, imaginea poate apărea înainte sau după text. Pe mobil, păstrează o ordine predictibilă a sursei, a tastaturii și a cititorului de ecran; nu te baza pe reordonarea conflictuală prin CSS.

Anatomie

Anatomia este definită prin sens, nu prin culoare, umbră sau lățimea coloanei.

1. Container: Grupează exact o figură și o explicație ca o singură unitate editorială.
2. Imagine: Prezintă dovezi sau furnizează ilustrația conform rolului declarat.
3. Text alternativ: Comunică scopul vizual relevant pentru o imagine de conținut; este gol pentru o ilustrație decorativă redundantă.
4. Legendă: Identifică ceea ce arată o imagine de conținut și oferă context esențial, cum ar fi starea, data sau scara.
5. Titlu: Enunță ideea sau subiectul, nu numele fișierului sau o etichetă generică precum „Exemplu.”
6. Explicație: Îi spune cititorului ce să observe, de ce contează și orice limitare a interpretării.
7. Credit: Numește creatorul sau sursa atunci când drepturile, proveniența sau politica editorială o impune.
8. Ordinea de citire: Păstrează o relație coerentă între figură și text atunci când două coloane se reduc la una.

Explicația trebuie să se refere direct la subiect, nu să folosească coordenative precum „imaginea din stânga.” Poziția se schimbă între puncte de întrerupere, traduceri și sindicalizare. „Statusul învechit și data actualizării identifică ținta revizuirii” rămâne adevărat pretutindeni.

Exemple de design

Sistemul de design suportă patru combinații de rol și poziție. Niciuna nu modifică cerințele de conținut.

Imagine de conținut, imagine la început

Folosește această variantă implicită atunci când cititorii ar trebui să inspecteze dovezile înainte de interpretare.

Imagine de conținut, imagine la sfârșit

Folosește această variantă atunci când explicația trebuie să stabilească o perspectivă înaintea dovezilor.

Ilustrație, imagine la început

Folosește această variantă atunci când un vizual specific conceptului îmbunătățește recunoașterea, iar textul poartă sensul complet.

Ilustrație, imagine la sfârșit

Folosește această variantă atunci când explicația este principală, iar ilustrația acționează ca o încheiere vizuală.

Comportament pe ecran îngust

Fiecare variantă devine o singură coloană, fără derulare orizontală sau decupaje care schimbă sensul. Legenda rămâne atașată figurii sale.

Parametri

Contractul de conținut separă sensul editorial de prezentare. Rapoartele de lățime, spațiile, bordurile, fundalurile, raza colțurilor, umbrele și punctele de întrerupere aparțin renderizatorului.

Publică src numai după ce assetul există. O captură în așteptare folosește un comentariu de captură de ecran și screenshotsPending = true. role nu are o valoare implicită, deoarece tratarea în tăcere a dovezilor ca decorație creează o problemă de accesibilitate.

Primul titlu din corp devine title; tot ce urmează după el devine content. Corpul permite paragrafe, accentuări, cod inline și un link contextual. Respinge liste, titluri imbricate, tabele, media, butoane, formulare, citate, acordeoane și componente.

Sintaxă și exemple de cod

Toate cele trei notații păstrează același rol, imagine, titlu, explicație, legendă, credit și ordine de citire. Acestea sunt contracte de adaptare portabile; nu implică faptul că un scurtcod sau un bloc local înregistrat există deja.

Directivă Markdown portabilă

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

Calea din exemplu demonstrează doar sintaxa. Validarea în producție trebuie să o respingă până când acel asset există.

Scurtcod Hugo

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

Adaptorul folosește doar parametri denumiți. Până la înregistrare, folosește un <figure> semantic urmat de proză. Adaptorul validează assetul și păstrează maparea corpului directivei.

Bloc WordPress

<!-- 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 ar trebui să expună un câmp Media și o regiune de text restrânsă. Dacă nu este disponibil, folosește blocurile native Image, Heading și Paragraph; păstrează sensul chiar și fără aranjamentul side-by-side.

Exemple

Exemplu corect: imaginea este dovadă

Acest exemplu funcționează deoarece imaginea dovedește două detalii fizice, iar textul explică consecința lor operațională. Titlul enunță ideea, legenda identifică dovada vizibilă, iar explicația rămâne specifică fără a încerca să inventarieze întreaga fotografie.

Exemplu greșit: decorație generică prezentată ca dovadă

Lucrează mai inteligent cu date clare Imagine: o persoană generică care zâmbește la un laptop lângă grafice colorate. Platforma noastră inovatoare transformă datele în informații acționabile, astfel încât fiecare echipă să poată debloca decizii mai bune și să obțină mai mult.

Acest exemplu eșuează deoarece niciuna dintre părți nu contribuie cu informații verificabile. Imaginea ar putea face reclamă oricărui produs software, în timp ce textul conține rezultate generale fără un mecanism, un detaliu de interfață, o constrângere sau un exemplu. Asocierea creează proeminență vizuală, dar niciun sens pe care un cititor sau un algoritm să-l poată extrage. Înlocuiește-l cu o stare concentrată a produsului și o explicație a unei decizii pe care o susține sau elimină imagebox-ul și scrie afirmația ca proză obișnuită cu dovezi.

Marcarea schema și accesibilitatea

Un imagebox nu are un tip Schema.org dedicat. Textul său rămâne parte a entității paginii înconjurătoare. O imagine de conținut poate fi un ImageObject atunci când are un contentUrl stabil, o legendă exactă, dimensiuni și metadate de credit sau licență necesare. Ilustrațiile decorative nu au nevoie de o entitate separată.

Schema la nivel de pagină poate face referire la aceeași imagine reprezentativă. O fotografie de detaliu a produsului poate alimenta proprietatea image a produsului vizibil, dar un decupaj de grafic nu devine Dataset, iar o captură de ecran nu devine SoftwareApplication.

Folosește un <figure> și <figcaption> plus o regiune explicativă etichetată. Setează width și height intrinseci; ieșirea responsive nu trebuie să deruleze orizontal sau să decupeze detaliul denumit.

Textul alternativ numește subiectul relevant, starea și detaliul decisiv al unei imagini de conținut. Nu începe cu „imagine cu,” nu duplica legenda și nu înghesui cuvinte-cheie. Ilustrațiile redundante folosesc alt=""; omiterea atributului poate expune numele fișierului.

Nu te baza doar pe poziție, culoare sau pixeli. Repetă în text numerele, etichetele, avertismentele și concluziile decisive. Păstrează linkurile accesibile de la tastatură, nu face niciodată întregul cutie un singur link, păstrează ordinea sursei și testează la 200% zoom.

Reguli de redactare

Scrie explicația înainte de a selecta imaginea, apoi alege cel mai îngust decupaj care păstrează contextul necesar.

• Scrie un titlu de 3–10 cuvinte care enunță ideea, subiectul sau relația. Evită „Imagine,” „Prezentare generală,” „Află mai multe” și „Vezi în acțiune.”
• Păstrează textul explicativ la 40–140 de cuvinte, în unul sau două paragrafe. Elementul susține o singură idee, nu un mini-articol.
• Păstrează legendele la 5–25 de cuvinte. Identifică ceea ce este arătat și contextul necesar pentru interpretare; plasează raționamentul în corp.
• Folosește 40–180 de caractere pentru textul alternativ semnificativ, cu 250 ca maxim absolut. Preferă exactitatea în detrimentul umplerii intervalului.
• Include exact o imagine și nu mai mult de un link contextual. Leagă doar atunci când o destinație aprofundează substanțial explicația.
• Folosește o singură voce și un singur timp în titlu, legendă și corp. Preferă substantive și verbe concrete în locul adjectivelor promoționale.
• Enunță limitarea lângă interpretare atunci când imaginea arată o singură stare, dată, decupaj, dispozitiv sau exemplu.

Nu pune niciodată în interior o listă, tabel, testimonial, preț, formular, media, descărcare, buton, instrucțiune cu mai mulți pași, clauză de declinare sau îndemn la acțiune. Nu folosi două imagini, nu încorpora text esențial în pixeli, nu expune date ale clienților și nu publica materiale artistice cu drepturi necunoscute.

Evită să scrii „după cum poți vedea.” Un cititor poate să nu vadă imaginea, iar chiar și un cititor văzător trebuie să știe ce observație contează. Enunță direct: „Clapeta de blocare este la nivel atunci când conectorul este complet introdus.”

Tipuri de postări care îl folosesc

Rândurile de mai jos sunt generate de câmpul postTypes din front matter. „Utilizare” descrie un rol potrivit, nu o cerință de a forța un imagebox în fiecare pagină.

Lista de verificare QA

Înainte de publicare, verifică întregul element:

• Imaginea și explicația transmit o singură idee și aparțin unei singure unități editoriale.
• role este în mod explicit content sau illustration, ales cu ajutorul testului eliminării.
• Fișierul sursă există, este aprobat și nu folosește date private, drepturi necunoscute sau asseturi de tip placeholder.
• Titlul enunță ideea în 3–10 cuvinte, iar corpul o explică în 40–140 de cuvinte.
• O imagine de conținut are text alternativ semnificativ și o legendă concisă; o ilustrație redundantă folosește text alternativ gol.
• Textul enunță fiecare număr, etichetă, instrucțiune, avertisment și concluzie decisivă care nu poate depinde de vedere.
• Legenda identifică imaginea fără a duplica corpul sau textul alternativ.
• Orice link necesar către creator, sursă, licență sau credit este exact și vizibil.
• Blocul conține o imagine, o explicație și cel mult un link contextual.
• Nu conține liste imbricate, tabele, media, butoane, formulare, îndemnuri la acțiune sau carduri interactive.
• Nu înlocuiește o captură de ecran adnotată, o comparație, o diagramă, o galerie sau o imagine pe lățime completă mai potrivită.
• Aspectul desktop și mobil păstrează ordinea semantică a sursei, atașarea legendei și ordinea tastaturii.
• Decupajul semnificativ supraviețuiește redimensionării responsive, zoom-ului de 200% și eșecului încărcării imaginii.
• Lățimea și înălțimea rezervă spațiu, iar încărcarea leneșă nu întârzie o imagine de deasupra pliului.
• Datele structurate, dacă sunt emise, corespund conținutului vizibil și nu descriu decorația ca o entitate separată.
• Mapările în Markdown portabil, Hugo și WordPress păstrează același rol, câmpuri și sens.

Întrebări frecvente

Șablonul academiei redă cele cinci întrebări analizate stocate în câmpul [[faq]] al front matter-ului acestei pagini. Acestea acoperă testul conținut versus ilustrație, textul alternativ decorativ, domeniul de aplicare a descrierii, îndemnurile la acțiune și schema ImageObject.

Un imagebox reușește atunci când cititorul poate răspunde imediat la două întrebări: „Ce contribuie această imagine?” și „De ce contează această contribuție aici?” Dacă oricare dintre răspunsuri este vag, întărește relația sau elimină cutia.