Imagebox: Zasady i przykłady użycia infoboksu graficznego

Imagebox łączy jeden obraz z jednym skoncentrowanym wyjaśnieniem, tak aby czytelnicy odbierali je jako jedną jednostkę redakcyjną. Obraz może dostarczać dowodów interpretowanych przez tekst lub ilustrować ideę, którą tekst w pełni wyjaśnia. Autor musi określić, którą rolę pełni obraz, ponieważ ten wybór decyduje o treści tekstu, tekście alternatywnym, podpisie, danych strukturalnych oraz o tym, czy element działa również bez wzroku.

To jest wariant z obrazem jako treścią: widoczna data i status stanowią dowód, a sąsiedni tekst interpretuje ich związek. Gdyby obraz był jedynie dekoracyjnym kalendarzem, tekst musiałby samodzielnie przedstawić cały argument o aktualności, a obraz używałby pustego tekstu alternatywnego.

Dlaczego ten element jest ważny

Czytelnicy nie traktują automatycznie obrazu i odległego akapitu jako jednej myśli. Gdy obraz pojawia się bez jawnego związku tekstowego, muszą sami zdecydować, co obejrzeć, dlaczego to ma znaczenie i czy wspiera otaczającą tezę. Imagebox redukuje tę niepewność, umieszczając jeden obraz i jedno wyjaśnienie w wyraźnej granicy. Tytuł określa sedno; obraz je pokazuje; tekst mówi czytelnikowi, co zauważyć lub zrozumieć.

Korzyścią psychologiczną jest wspólna uwaga: układ kieruje uwagę na obiekt wizualny, podczas gdy tekst ustala jego znaczenie. Kadr wykresu może sugerować wzrost, zmienność lub granicę daty; sąsiednie wyjaśnienie wybiera właściwe odczytanie.

Możliwość maszynowego wyodrębniania to zdolność oprogramowania do izolowania jednostki treści bez utraty relacji między jej częściami. Semantyczny imagebox udostępnia obraz, dostępny opis, podpis, nagłówek, wyjaśnienie i zadeklarowaną rolę obrazu w jednym kontenerze. Tekst musi jednak zawierać tezę: komputerowe rozpoznawanie obrazu nie może być jedyną drogą do liczby, instrukcji, ograniczenia czy wniosku.

Zasady pisania elementów regulują wspólną składnię dyrektyw, mapowanie treści, ścieżki i pierwszeństwo. Niniejsza strona ma pierwszeństwo w zakresie definiowania specyficznego dla imageboksa rozróżnienia między treścią a ilustracją, dozwolonych pól oraz limitu jednego obrazu.

Kiedy go używać

Użyj imageboksa, gdy jeden obraz i jedno wyjaśnienie mają bezpośredni, konieczny związek, a żadne z nich nie zasługuje na osobną, pełną sekcję. Dobrymi zastosowaniami są: wycinek interfejsu z interpretacją, szczegół produktu z wyjaśnieniem wpływu na dopasowanie, zdjęcie procesu z regułą kontroli jakości lub prosta ilustracja koncepcyjna ze zwięzłym wyjaśnieniem.

Najpierw zdecyduj, czy obraz jest treścią, czy ilustracją:

• Obraz jako treść: czytelnik musi obejrzeć obraz, aby zweryfikować twierdzenie, zidentyfikować funkcję, porównać stan lub zrozumieć fakt wizualny. Tekst nazywa istotny szczegół i wyjaśnia jego znaczenie. Tekst alternatywny jest znaczący, a podpis jest zwykle obecny.
• Obraz jako ilustracja: obraz wzmacnia ton, zapamiętywanie lub zrozumienie, ale sąsiedni tekst zawiera pełną tezę. Usunięcie obrazu czyni blok mniej angażującym, ale nie mniej dokładnym. Tekst alternatywny jest pusty, chyba że ilustracja sama w sobie przekazuje dodatkowe informacje.

Zastosuj test usunięcia. Jeśli nieudane żądanie obrazu usuwa dowód lub czyni wyjaśnienie niekompletnym, zadeklaruj role=content. Jeśli usuwa tylko wzmocnienie wizualne, zadeklaruj role=illustration.

Często zdarzają się przypadki graniczne:

• Użyj samodzielnego obrazu, gdy element wizualny wymaga pełnej szerokości czytania, a tekst tylko go identyfikuje.
• Użyj zrzutu ekranu z adnotacjami , gdy czytelnicy muszą zlokalizować wiele obszarów interfejsu.
• Użyj tabeli dla powtarzalnych kryteriów porównania, diagramu dla systemu lub sekwencji oraz galerii dla równorzędnych obrazów.
• Użyj zwykłej prozy, gdy element wizualny jedynie powtarza zdanie.

Nie używaj imageboksa, aby słaba sekcja wyglądała na zaprojektowaną. Zdjęcie stockowe przedstawiające ludzi wskazujących na laptop nie wyjaśnia „współpracy”, a generyczny robot nie czyni twierdzenia o sztucznej inteligencji bardziej konkretnym. Jeśli obraz można zastąpić niepowiązanym obrazem bez zmiany tekstu, takie połączenie nie ma umowy redakcyjnej.

Gdzie go umieścić

Umieść imagebox bezpośrednio po akapicie wprowadzającym tezę lub koncepcję, którą rozwija. W procedurze umieść go po czynności, a przed sprawdzeniem jej powodzenia, aby dowód wizualny nie przerywał instrukcji.

Może znajdować się bezpośrednio pod nagłówkiem H2 tylko wtedy, gdy jego wewnętrzny tytuł jest bardziej szczegółowy. Zachowaj cytat lub zastrzeżenie obok tezy, której dotyczy; nie wstawiaj imageboksa między nimi.

Nie może znajdować się bezpośrednio obok innego imageboksa, galerii, ilustracji na pełną szerokość, wideo, tabeli ani dwukolumnowego infoboksu. Wstaw interpretację między kontenery wizualne, połącz prawdziwie równorzędne elementy lub utwórz osobne podsekcje.

Nie umieszczaj go wewnątrz wypunktowania, kroku, wyróżnienia, komórki tabeli, akordeonu ani klikalnej karty. Nie umieszczaj wezwania do działania wewnątrz bloku ani między jego obrazem a wyjaśnieniem.

Na komputerze obraz może pojawić się przed tekstem lub po nim. Na urządzeniach mobilnych zachowaj przewidywalną kolejność w kodzie źródłowym, nawigacji klawiaturą i dla czytników ekranu; nie polegaj na sprzecznym przestawianiu za pomocą CSS.

Anatomia

Anatomia jest definiowana przez znaczenie, a nie przez kolor, cień czy szerokość kolumny.

1. Kontener: Grupuje dokładnie jeden rysunek i jedno wyjaśnienie jako jedną jednostkę redakcyjną.
2. Obraz: Pokazuje dowód lub dostarcza ilustrację zgodnie z zadeklarowaną rolą.
3. Tekst alternatywny: Przekazuje istotny cel wizualny dla obrazu jako treści; pozostaje pusty dla zbędnej dekoracyjnej ilustracji.
4. Podpis: Określa, co pokazuje obraz jako treść, i dostarcza niezbędnego kontekstu, takiego jak stan, data lub skala.
5. Tytuł: Formułuje spostrzeżenie lub temat, a nie nazwę pliku ani ogólną etykietę, taką jak „Przykład”.
6. Wyjaśnienie: Mówi czytelnikowi, co zauważyć, dlaczego to ma znaczenie oraz jakie są ograniczenia interpretacji.
7. Źródło/autor: Wskazuje twórcę lub źródło, gdy wymagają tego prawa, pochodzenie lub polityka redakcyjna.
8. Kolejność czytania: Zachowuje spójną relację obrazu i tekstu, gdy dwie kolumny zwijają się do jednej.

Wyjaśnienie musi odwoływać się do tematu bezpośrednio, a nie za pomocą określeń przestrzennych, takich jak „obraz po lewej”. Pozycja zmienia się w zależności od punktu przerwania, tłumaczenia i syndykacji. „Nieaktualny status i data aktualizacji identyfikują cel przeglądu” pozostaje prawdziwe w każdym kontekście.

Przykłady projektowe

System projektowy obsługuje cztery kombinacje roli i pozycji. Żadna nie zmienia wymagań dotyczących treści.

Obraz jako treść, obraz na początku

Użyj tego domyślnego układu, gdy czytelnicy powinni obejrzeć dowód przed jego interpretacją.

Obraz jako treść, obraz na końcu

Użyj tego, gdy wyjaśnienie musi najpierw ustalić punkt widzenia przed przedstawieniem dowodu.

Ilustracja, obraz na początku

Użyj tego, gdy wizualizacja specyficzna dla koncepcji poprawia rozpoznawalność, podczas gdy tekst niesie pełne znaczenie.

Ilustracja, obraz na końcu

Użyj tego, gdy wyjaśnienie jest podstawowe, a ilustracja stanowi wizualne domknięcie.

Zachowanie na wąskim ekranie

Każdy wariant staje się jednokolumnowy bez poziomego przewijania ani przycięcia zmieniającego znaczenie. Podpis pozostaje przypisany do swojego rysunku.

Parametry

Kontrakt treści oddziela znaczenie redakcyjne od prezentacji. Proporcje szerokości, odstępy, obramowania, tła, zaokrąglenia, cienie i punkty przerwania należą do mechanizmu renderującego.

Opublikuj src dopiero po utworzeniu zasobu. Oczekujące przechwycenie używa komentarza ze zrzutem ekranu i screenshotsPending = true. role nie ma wartości domyślnej, ponieważ ciche traktowanie dowodu jako dekoracji stanowi błąd dostępności.

Pierwszy nagłówek w treści staje się title; wszystko po nim to content. Treść dopuszcza akapity, wyróżnienia, kod w tekście i jeden link kontekstowy. Odrzuca listy, zagnieżdżone nagłówki, tabele, multimedia, przyciski, formularze, cytaty, akordeony i komponenty.

Składnia i przykłady kodu

Wszystkie trzy notacje zachowują tę samą rolę, obraz, tytuł, wyjaśnienie, podpis, autora i kolejność czytania. Są to przenośne kontrakty adapterów; nie oznaczają, że zarejestrowany lokalny shortcode lub blok już istnieje.

Przenośna dyrektywa Markdown

:::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."}
## Zobacz, dlaczego strona wymaga przeglądu

Widoczna data aktualizacji wyjaśnia, dlaczego audyt uznał ten adres URL za nieaktualny. Zweryfikuj, czy strona uległa zmianie od tej daty przed zleceniem przepisania.
:::

Przykładowa ścieżka demonstruje jedynie składnię. Walidacja produkcyjna musi ją odrzucić do czasu utworzenia zasobu.

Shortcode 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." >}}
## Zobacz, dlaczego strona wymaga przeglądu

Widoczna data aktualizacji wyjaśnia, dlaczego audyt uznał ten adres URL za nieaktualny. Zweryfikuj, czy strona uległa zmianie od tej daty przed zleceniem przepisania.
{{< /imagebox >}}

Adapter używa tylko nazwanych parametrów. Do czasu rejestracji użyj semantycznego <figure> z prozą. Adapter waliduje zasób i zachowuje mapowanie treści dyrektywy.

Blok 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>Zobacz, dlaczego strona wymaga przeglądu</h2>
  <p>Widoczna data aktualizacji wyjaśnia, dlaczego audyt uznał ten adres URL za nieaktualny. Zweryfikuj, czy strona uległa zmianie od tej daty przed zleceniem przepisania.</p>
</div>
<!-- /wp:amicited/imagebox -->

WordPress powinien udostępniać jedno pole Media i ograniczony obszar tekstowy. Jeśli to niemożliwe, użyj natywnych bloków Image, Heading i Paragraph; zachowaj znaczenie nawet bez układu obok siebie.

Przykłady

Dobry przykład: obraz jest dowodem

To działa, ponieważ obraz dowodzi dwóch fizycznych szczegółów, a tekst wyjaśnia ich znaczenie operacyjne. Tytuł określa spostrzeżenie, podpis identyfikuje widoczny dowód, a wyjaśnienie pozostaje konkretne bez próby inwentaryzacji całego zdjęcia.

Zły przykład: ogólna dekoracja przedstawiana jako dowód

Pracuj mądrzej dzięki przejrzystym danym
Obraz: ogólna osoba uśmiechająca się do laptopa obok kolorowych wykresów.
Nasza innowacyjna platforma przekształca dane w praktyczne wnioski, aby każdy zespół mógł podejmować lepsze decyzje i osiągać więcej.

To jest nieprawidłowe, ponieważ żadna ze stron nie wnosi weryfikowalnych informacji. Obraz mógłby reklamować dowolny produkt programistyczny, a tekst zawiera ogólne rezultaty bez mechanizmu, szczegółu interfejsu, ograniczenia ani przykładu. Połączenie tworzy wizualną wyrazistość, ale nie niesie znaczenia, które czytelnik lub maszyna mogliby wyodrębnić. Zastąp go skupionym stanem produktu i wyjaśnieniem jednej decyzji, którą wspiera, albo usuń imagebox i napisz tezę jako zwykłą prozę z dowodami.

Znaczniki schematu i dostępność

Imagebox nie ma dedykowanego typu Schema.org. Jego tekst pozostaje częścią nadrzędnego bytu strony. Obraz jako treść może być ImageObject, gdy ma stabilny contentUrl, dokładny podpis, wymiary oraz wymagane metadane autora lub licencji. Dekoracyjne ilustracje nie potrzebują osobnego bytu.

Schemat na poziomie strony może odwoływać się do tego samego reprezentatywnego obrazu. Zdjęcie szczegółu produktu może zasilać właściwość image widocznego produktu, ale kadr wykresu nie staje się Dataset, a zrzut ekranu nie staje się SoftwareApplication.

Użyj jednego <figure> i <figcaption> wraz z oznaczonym obszarem wyjaśniającym. Ustaw wrodzone width i height; responsywne wyjście nie może przewijać się poziomo ani przycinać nazwanego szczegółu.

Tekst alternatywny określa istotny temat, stan i decydujący szczegół obrazu jako treści. Nie zaczynaj od „obraz przedstawia”, nie powielaj podpisu ani nie upychaj słów kluczowych. Zbędne ilustracje używają alt=""; pominięcie atrybutu może ujawnić nazwę pliku.

Nie polegaj wyłącznie na pozycji, kolorze ani pikselach. Powtórz w tekście decydujące liczby, etykiety, ostrzeżenia i wnioski. Utrzymuj linky dostępne za pomocą klawiatury, nigdy nie rób z całego bloku jednego linku, zachowaj kolejność źródłową i testuj przy 200% powiększenia.

Zasady pisania

Napisz wyjaśnienie przed wyborem obrazu, a następnie wybierz najwęższe przycięcie zachowujące niezbędny kontekst.

• Napisz tytuł składający się z 3–10 słów, który określa spostrzeżenie, temat lub relację. Unikaj słów „Obraz”, „Przegląd”, „Dowiedz się więcej” i „Zobacz w akcji”.
• Ogranicz tekst wyjaśniający do 40–140 słów w jednym lub dwóch akapitach. Element obsługuje jeden punkt, a nie miniaturowy artykuł.
• Ogranicz podpisy do 5–25 słów. Określ, co jest pokazane i jaki kontekst jest niezbędny do interpretacji; uzasadnienie umieść w treści głównej.
• Użyj 40–180 znaków dla znaczącego tekstu alternatywnego, z maksimum 250 znaków. Przedkładaj dokładność nad wypełnienie zakresu.
• Dołącz dokładnie jeden obraz i nie więcej niż jeden kontekstowy link tekstowy. Linkuj tylko wtedy, gdy docelowa strona znacząco pogłębia wyjaśnienie.
• Używaj jednego głosu i czasu w tytule, podpisie i treści. Przedkładaj konkretne rzeczowniki i czasowniki nad promocyjne przymiotniki.
• Określ ograniczenie obok interpretacji, gdy obraz pokazuje tylko jeden stan, datę, kadr, urządzenie lub przykład.

Nigdy nie umieszczaj wewnątrz listy, tabeli, referencji, ceny, formularza, multimediów, plików do pobrania, przycisku, instrukcji wieloetapowej, zastrzeżenia ani wezwania do działania. Nie używaj dwóch obrazów, nie osadzaj istotnej treści w pikselach, nie ujawniaj danych klientów ani nie publikuj materiałów z nieznanymi prawami.

Unikaj pisania „jak widać”. Czytelnik może nie widzieć obrazu, a nawet osoba widząca musi wiedzieć, które spostrzeżenie ma znaczenie. Podaj je wprost: „Zaczep blokujący jest zrównany z powierzchnią, gdy złącze jest w pełni wsunięte.”

Typy wpisów, które go używają

Poniższe wiersze są sterowane przez postTypes w metadanych. „Użycie” opisuje odpowiednią rolę, a nie wymóg umieszczania imageboksa na każdej stronie.

Lista kontrolna QA

Przed publikacją zweryfikuj cały element:

• Obraz i wyjaśnienie przedstawiają jeden punkt i należą do jednej jednostki redakcyjnej.
• role jest jawnie ustawione na content lub illustration, wybrane za pomocą testu usunięcia.
• Plik źródłowy istnieje, jest zatwierdzony i nie zawiera prywatnych danych, nieznanych praw ani zastępczego zasobu.
• Tytuł określa spostrzeżenie w 3–10 słowach, a treść wyjaśnia je w 40–140 słowach.
• Obraz jako treść ma znaczący tekst alternatywny i zwięzły podpis; zbędna ilustracja używa pustego tekstu alt.
• Tekst podaje każdą decydującą liczbę, etykietę, instrukcję, ostrzeżenie i wniosek, które nie mogą zależeć od wzroku.
• Podpis identyfikuje obraz bez powielania treści głównej ani tekstu alternatywnego.
• Wszelkie wymagane linki do twórcy, źródła, licencji lub autorstwa są dokładne i widoczne.
• Blok zawiera jeden obraz, jedno wyjaśnienie i co najwyżej jeden kontekstowy link tekstowy.
• Nie zawiera zagnieżdżonej listy, tabeli, multimediów, przycisku, formularza, wezwania do działania ani interaktywnej karty.
• Nie zastępuje lepszego zrzutu z adnotacjami, porównania, diagramu, galerii ani ilustracji na pełną szerokość.
• Układy na komputerze i urządzeniach mobilnych zachowują semantyczną kolejność źródłową, przypisanie podpisu i kolejność nawigacji klawiaturą.
• Znaczący kadr przetrwa responsywne skalowanie, 200% powiększenie i niepowodzenie ładowania obrazu.
• Szerokość i wysokość rezerwują miejsce, a leniwe ładowanie nie opóźnia obrazu widocznego bez przewijania.
• Dane strukturalne, jeśli są emitowane, odpowiadają widocznej treści i nie opisują dekoracji jako osobnego bytu.
• Mapowania w przenośnym Markdown, Hugo i WordPress zachowują tę samą rolę, pola i znaczenie.

FAQ

Szablon academy renderuje pięć przeanalizowanych pytań przechowywanych w [[faq]] metadanych tej strony. Obejmują one test treści kontra ilustracji, dekoracyjny tekst alternatywny, zakres opisowy, wezwania do działania i schemat ImageObject.

Imagebox odnosi sukces, gdy czytelnik może natychmiast odpowiedzieć na dwa pytania: „Co wnosi ten obraz?” i „Dlaczego ten wkład ma tutaj znaczenie?”. Jeśli odpowiedź na którekolwiek z nich jest niejasna, wzmocnij relację lub usuń box.