Instrukcja operacyjna dla zespołów redaktorów - dotyczy SEO wypełniania pól alt, opis, podpis oraz tytuł w obrazkach.

Wariant 1 — krótka instrukcja operacyjna dla zespołu

1. Dane wejściowe

Przed wypełnieniem pól obrazka redaktor zbiera:

2. Zasada główna

Nie wpisujemy wszędzie tego samego tekstu. ALT, tytuł, podpis i opis mają różne funkcje.

3. Scenariusz A — główny obraz produktu WooCommerce

Cel

Główny obraz produktu reprezentuje produkt/kurs. Tu ALT powinien mocniej łączyć zdjęcie z ofertą.

Schemat

Przykład

4. Scenariusz B — obraz w galerii produktu WooCommerce

Cel

Galeria pokazuje szczegóły produktu/kursu. Tu nie powtarzamy identycznego ALT-a na każdym zdjęciu.

Schemat

Przykład

5. Scenariusz C — obraz wewnątrz pełnego opisu produktu

Cel

Obraz w opisie produktu ma wspierać konkretną część treści: efekt szkolenia, technikę, program, atmosferę lub prowadzącego.

Schemat

Przykład

6. Scenariusz D — obraz wewnątrz krótkiego opisu produktu

Cel

Krótki opis produktu jest blisko decyzji zakupowej. Obraz, jeśli jest tam użyty, powinien mieć krótki i bardzo konkretny ALT.

Schemat

Przykład

7. Czego nie robić

Nie używać ALT-a w stylu:

Desery na słodki stół Jakub Janiuk Szkoła Artystyczna Wiesław Kucia Lublin kurs cukierniczy tartaletki monoporcje szkolenie desery owoce

To jest sztuczne, przeładowane i wygląda jak upychanie słów kluczowych. Google wprost odradza wypełnianie ALT-ów listą fraz kluczowych. (Google for Developers)

Nie zostawiać tytułu jako technicznej nazwy pliku:

Szkola-Artystyczna-Wieslaw-Kucia-Jakub-Janiuk-tarta-owocowa-z-kremem

Lepiej:

Tartaletki owocowe z kremem – Desery na słodki stół

8. Mini-checklista przed publikacją

Przed kliknięciem Aktualizuj / Opublikuj redaktor sprawdza:

• czy nazwisko trenera jest poprawne: Jakub Janiuk,
• czy nazwa szkoły jest poprawna: Szkoła Artystyczna Wiesław Kucia w Lublinie,
• czy ALT opisuje obraz, a nie jest listą słów kluczowych,
• czy każde zdjęcie w galerii ma inny ALT,
• czy podpis jest potrzebny użytkownikowi,
• czy opis pliku zawiera pełny kontekst,
• czy obraz produktowy nie ma pustego ALT-a,
• czy obraz czysto dekoracyjny może mieć pusty ALT.

Wariant 2 — pełna instrukcja szkoleniowa dla zespołu redakcyjnego

1. Cel instrukcji

Celem tej instrukcji jest ujednolicenie sposobu wypełniania pól obrazów w WordPressie i WooCommerce:

• Tekst alternatywny / ALT
• Tytuł
• Podpis
• Opis

Instrukcja dotyczy szczególnie obrazów używanych przy produktach-kursach w sklepie WooCommerce, ale można ją stosować również do blogów i stron opartych o WordPress.

Najważniejsza zasada: obraz opisujemy zgodnie z jego funkcją na stronie, a nie według jednego sztywnego wzoru SEO. To oznacza, że ten sam obraz może wymagać nieco innego opisu, jeśli jest użyty jako główne zdjęcie produktu, w galerii, wewnątrz opisu albo w krótkim opisie produktu.

2. Źródła zasad

WordPress

WordPress definiuje pola mediów następująco: ALT opisuje obraz i jest używany dla dostępności, Title jest nazwą medium, Caption jest krótkim wyjaśnieniem medium, a Description jest opisem danego pliku. (WordPress.org) W edytorze blokowym WordPress pole ALT jest opisane jako pomocne dla osób, które nie widzą obrazu, a także dla SEO; edytor pozwala też dodać podpis pod obrazem i, w ustawieniach zaawansowanych, atrybut title. (WordPress.org)

WooCommerce

WooCommerce zaleca opisowe ALT-y dla obrazów produktowych i innych wizualnych elementów sklepu. Pusty ALT jest właściwy tylko dla obrazów dekoracyjnych; obrazy produktowe i obrazy linkowane nie powinny być traktowane jako dekoracyjne. (WooCommerce)

Google

Google wykorzystuje ALT wraz z algorytmami rozpoznawania obrazu oraz treścią strony, aby zrozumieć temat obrazu. Google zaleca tworzenie użytecznych, informacyjnych ALT-ów, które naturalnie używają słów kluczowych i są zgodne z kontekstem strony. Jednocześnie Google odradza keyword stuffing. (Google for Developers) Google wskazuje też, że obrazy powinny być osadzane jako standardowe elementy HTML <img> z src i opisowym alt; obrazy użyte wyłącznie jako CSS background nie są indeksowane w ten sam sposób. (Google for Developers)

W3C / WAI

W3C/WAI rozróżnia obrazy informacyjne i dekoracyjne. Obraz informacyjny powinien mieć tekst alternatywny przekazujący znaczenie lub treść wizualną, natomiast obraz czysto dekoracyjny powinien mieć pusty ALT, aby czytniki ekranowe mogły go pominąć. (W3C) (W3C)

3. Dane wejściowe — formularz dla redaktora

Przed wypełnieniem pól obrazka redaktor powinien uzupełnić taki mini-brief:

Nazwa kursu:
Trener:
Szkoła / marka:
Miasto:
Co dokładnie widać na zdjęciu:
Gdzie obraz będzie użyty:
Czy obraz jest głównym obrazem produktu:
Czy obraz jest w galerii:
Czy obraz jest wewnątrz opisu produktu:
Czy obraz jest w krótkim opisie produktu:
Czy obraz jest linkiem:
Czy obraz jest wyłącznie dekoracyjny:

Dla naszego przykładu:

Nazwa kursu: Desery na słodki stół
Trener: Jakub Janiuk
Szkoła / marka: Szkoła Artystyczna Wiesław Kucia w Lublinie
Miasto: Lublin
Co widać: tartaletki owocowe z kremem, truskawką, bananem i jadalnym kwiatem

4. Decyzja przed pisaniem ALT-a

Redaktor powinien zadać sobie cztery pytania:

Pytanie 1: Czy obraz jest produktowy?

Jeżeli tak — ALT nie powinien być pusty. W WooCommerce obraz produktu reprezentuje ofertę, więc musi mieć sensowny opis.

Pytanie 2: Czy obraz jest tylko dekoracyjny?

Jeżeli obraz nie dodaje żadnej informacji, a treść obok już wszystko wyjaśnia, można zastosować pusty ALT:

alt=""

Nie dotyczy to głównego zdjęcia produktu ani typowej galerii produktu.

Pytanie 3: Czy obraz jest linkiem?

Jeżeli obraz jest linkiem lub przyciskiem, ALT powinien opisywać cel albo funkcję linku, nie tylko wygląd obrazu. W3C/WAI zaleca, aby dla obrazów użytych w linkach lub przyciskach ALT komunikował działanie albo miejsce docelowe. (W3C)

Przykład:

Zobacz szczegóły kursu Desery na słodki stół

Pytanie 4: Czy ten sam obraz jest użyty w różnych miejscach?

Jeżeli ten sam plik jest używany w różnych kontekstach, należy dopasować ALT do miejsca użycia, jeżeli edytor, motyw lub blok na to pozwala. W praktyce warto nie zakładać, że jeden ALT z biblioteki mediów będzie idealny dla każdego kontekstu.

5. Zasady dla poszczególnych pól

5.1. Pole ALT

ALT ma opisywać obraz w kontekście strony. Nie jest miejscem na pełną listę fraz SEO.

Dobry ALT zawiera:

• to, co naprawdę widać na zdjęciu,
• krótki kontekst produktu/kursu,
• ewentualnie miasto albo nazwę kursu,
• naturalny język.

ALT zwykle nie musi zawierać wszystkiego naraz:

• nazwy kursu,
• nazwiska trenera,
• pełnej nazwy szkoły,
• miasta,
• kategorii,
• słowa „kurs”,
• wszystkich słów kluczowych.

Dane takie jak trener i szkoła lepiej umieścić w opisie zdjęcia, treści produktu, sekcji o prowadzącym, danych strukturalnych i opisie kursu.

5.2. Pole Tytuł

Tytuł powinien być czytelny dla redaktora i użytkownika. Nie powinien wyglądać jak nazwa pliku z myślnikami.

Zły tytuł

Szkola-Artystyczna-Wieslaw-Kucia-Jakub-Janiuk-tarta-owocowa-z-kremem

Dobry tytuł

Tartaletki owocowe z kremem – Desery na słodki stół

5.3. Pole Podpis

Podpis jest często widoczny dla użytkownika. Dlatego nie powinien być pisany wyłącznie pod SEO.

Podpis dodajemy wtedy, gdy:

• wyjaśnia, co pokazuje zdjęcie,
• wspiera sprzedażowo opis kursu,
• pomaga użytkownikowi zrozumieć efekt szkolenia,
• dobrze wygląda w projekcie strony.

Podpis pomijamy wtedy, gdy:

• motyw źle go wyświetla,
• podpis powtarza sąsiedni tekst,
• obraz znajduje się w galerii, gdzie podpisy zaburzają UX,
• obraz pełni funkcję czysto wizualną.

5.4. Pole Opis

Opis może być najdłuższy. To dobre miejsce na pełny kontekst:

• co widać,
• jaki to kurs,
• kto prowadzi,
• gdzie odbywa się kurs,
• w jakim miejscu strony obraz jest używany.

Przykład:

Zdjęcie przedstawia tartaletki owocowe z kremem, truskawką, bananem i jadalnym kwiatem. Obraz jest używany przy kursie „Desery na słodki stół”, prowadzonym przez Jakuba Janiuka w Szkole Artystycznej Wiesław Kucia w Lublinie.

6. Scenariusz 1 — główny obraz produktu WooCommerce

Charakter obrazu

Główny obraz produktu jest najważniejszym obrazem oferty. Pokazuje użytkownikowi, czego dotyczy produkt/kurs, i może być używany w kartach produktów, listingach, wynikach sklepu, rekomendacjach, social preview albo innych miejscach zależnych od motywu i wtyczek.

Rekomendacja

ALT powinien łączyć:

[co widać] + [nazwa kursu] + [miasto, jeśli naturalne]

Nie wciskałbym tutaj pełnej nazwy szkoły i nazwiska trenera, jeśli ALT robi się zbyt długi.

Wzór

[co_widać] na kursie [nazwa_kursu] w [miasto]

Przykład

Tartaletki owocowe z kremem na kursie Desery na słodki stół w Lublinie

Komplet pól

Asertywna decyzja

Dla głównego obrazu produktu nie zostawiamy pustego ALT-a. Nie używamy też ALT-a przeładowanego frazami typu:

Desery na słodki stół kurs cukierniczy Jakub Janiuk Szkoła Artystyczna Wiesław Kucia Lublin tartaletki owoce krem szkolenie

7. Scenariusz 2 — obraz w galerii produktu WooCommerce

Charakter obrazu

Galeria produktu ma pokazywać szczegóły: efekty kursu, detale deserów, atmosferę zajęć, proces pracy, prowadzącego, salę szkoleniową albo przykłady realizacji.

Rekomendacja

Każde zdjęcie w galerii powinno mieć unikalny ALT. Nie kopiujemy ALT-a głównego obrazu na wszystkie zdjęcia.

Wzór

[konkretny kadr] z kursu [nazwa_kursu]

albo:

[konkretny kadr bez nazwy kursu, jeśli kontekst strony jest oczywisty]

Przykłady ALT-ów dla galerii

Tartaletki owocowe z kremem z kursu Desery na słodki stół

Zbliżenie na tartaletkę z truskawką, bananem i jadalnym kwiatem

Mini desery owocowe przygotowane jako element słodkiego stołu

Gotowe tartaletki prezentowane na blacie podczas kursu cukierniczego

Komplet pól dla przykładowego zdjęcia

Asertywna decyzja

Galeria ma poszerzać semantykę strony. Jeśli pięć zdjęć ma identyczny ALT, to redaktor nie wykonał pracy dobrze.

8. Scenariusz 3 — obraz wewnątrz pełnego opisu produktu

Charakter obrazu

Obraz w pełnym opisie produktu działa jak element narracji. Może pokazywać:

• efekt końcowy,
• technikę,
• składniki,
• pracę uczestników,
• prowadzącego,
• atmosferę,
• poziom estetyczny szkolenia.

Rekomendacja

ALT powinien zależeć od sekcji, przy której znajduje się obraz.

Jeśli obraz znajduje się przy sekcji „Czego się nauczysz”

ALT może brzmieć:

Tartaletki owocowe jako przykład deserów przygotowywanych podczas kursu

Jeśli obraz znajduje się przy sekcji „Efekty szkolenia”

ALT może brzmieć:

Gotowe tartaletki owocowe prezentowane jako element słodkiego stołu

Jeśli obraz znajduje się przy sekcji „Program kursu”

ALT może brzmieć:

Tartaletki z kremem i owocami jako przykład pracy z dekoracją deserów

Komplet pól

Asertywna decyzja

W pełnym opisie produktu ALT powinien być redakcyjny i kontekstowy, nie mechanicznie produktowy. To znaczy: nie każdy obraz w opisie musi mieć nazwę kursu, trenera i szkoły.

9. Scenariusz 4 — obraz wewnątrz krótkiego opisu produktu

Charakter obrazu

Krótki opis produktu w WooCommerce często znajduje się wysoko na stronie, blisko ceny, wariantów, CTA albo przycisku zakupu. To miejsce nie powinno być przeładowane wizualnie ani semantycznie.

Rekomendacja

Jeżeli obraz jest użyty w krótkim opisie, ALT powinien być:

• krótki,
• jasny,
• produktowy,
• bez rozbudowanego kontekstu.

Wzór

[co_widać] z kursu [nazwa_kursu]

Komplet pól

Asertywna decyzja

W krótkim opisie produktu nie stosujemy długich ALT-ów. Nie piszemy:

Tartaletki owocowe z kremem na kursie Desery na słodki stół prowadzonym przez Jakuba Janiuka w Szkole Artystycznej Wiesław Kucia w Lublinie

To jest za ciężkie dla tego miejsca.

10. Rekomendowane standardy długości

To są standardy robocze dla zespołu, nie sztywne limity techniczne.

Najważniejsze: tekst ma być naturalny, precyzyjny i użyteczny.

11. Standard nazewnictwa plików przed uploadem

Google wskazuje, że nazwa pliku może dawać lekkie wskazówki o temacie obrazu i zaleca krótkie, opisowe nazwy zamiast generycznych nazw typu IMG00023.JPG. (Google for Developers)

Dobry format nazwy pliku

desery-na-slodki-stol-tartaletki-owocowe.webp

albo:

tartaletki-owocowe-kurs-cukierniczy-lublin.webp

Nie polecam

IMG_4821.jpg

zdjecie1.png

Szkola-Artystyczna-Wieslaw-Kucia-Jakub-Janiuk-Desery-na-slodki-stol-tartaletki-owocowe-z-kremem-Lublin-final-v3-copy.jpg

Nazwa pliku ma być krótka i opisowa, nie przeładowana.

12. Procedura krok po kroku dla redaktora

Krok 1 — rozpoznaj obraz

Zapisz jednym zdaniem, co widać.

Przykład:

Na zdjęciu widać tartaletki owocowe z kremem, truskawką, bananem i jadalnym kwiatem.

Krok 2 — ustal scenariusz użycia

Wybierz jeden:

A. główny obraz produktu
B. galeria produktu
C. pełny opis produktu
D. krótki opis produktu
E. obraz dekoracyjny
F. obraz jako link

Krok 3 — wybierz schemat ALT

Dla głównego obrazu produktu:

[co_widać] na kursie [nazwa_kursu] w [miasto]

Dla galerii:

[konkretny kadr] z kursu [nazwa_kursu]

Dla opisu produktu:

[co_widać] + [funkcja w treści obok]

Dla krótkiego opisu:

[co_widać] z kursu [nazwa_kursu]

Krok 4 — uzupełnij tytuł

Tytuł powinien być czytelny i redakcyjny:

Tartaletki owocowe z kremem – Desery na słodki stół

Krok 5 — zdecyduj o podpisie

Dodaj podpis tylko wtedy, gdy będzie widoczny i pomocny.

Krok 6 — uzupełnij opis

W opisie można dodać pełne dane:

Zdjęcie przedstawia tartaletki owocowe z kremem, truskawką, bananem i jadalnym kwiatem. Obraz jest używany przy kursie „Desery na słodki stół”, prowadzonym przez Jakuba Janiuka w Szkole Artystycznej Wiesław Kucia w Lublinie.

Krok 7 — kontrola jakości

Sprawdź:

Czy ALT jest naturalny?
Czy opisuje obraz?
Czy nie jest listą słów kluczowych?
Czy tytuł nie wygląda jak nazwa pliku?
Czy podpis nie powtarza bez sensu sąsiedniego tekstu?
Czy opis zawiera pełny kontekst?
Czy dane trenera i szkoły są poprawne?

13. Gotowy szablon do kopiowania

DANE WEJŚCIOWE:
Nazwa kursu: [nazwa_kursu]
Trener: [trener]
Szkoła: [szkoła]
Miasto: [miasto]
Co widać na zdjęciu: [co_widać]
Scenariusz użycia: [główny obraz produktu / galeria produktu / opis produktu / krótki opis produktu]

ALT:
[uzupełnij według scenariusza]

Tytuł:
[co_widać] – [nazwa_kursu]

Podpis:
[krótkie zdanie widoczne dla użytkownika albo zostaw puste]

Opis:
Zdjęcie przedstawia [co_widać]. Obraz jest używany przy kursie „[nazwa_kursu]”, prowadzonym przez [trener] w [szkoła].

14. Gotowy przykład końcowy dla podanych danych

DANE WEJŚCIOWE:
Nazwa kursu: Desery na słodki stół
Trener: Jakub Janiuk
Szkoła: Szkoła Artystyczna Wiesław Kucia w Lublinie
Miasto: Lublin
Co widać na zdjęciu: tartaletki owocowe z kremem, truskawką, bananem i jadalnym kwiatem

Główny obraz produktu

ALT:
Tartaletki owocowe z kremem na kursie Desery na słodki stół w Lublinie

Tytuł:
Desery na słodki stół – tartaletki owocowe z kremem

Podpis:
Przykład deserów przygotowywanych podczas kursu „Desery na słodki stół”.

Opis:
Zdjęcie przedstawia tartaletki owocowe z kremem, truskawką, bananem i jadalnym kwiatem. Obraz jest główną grafiką produktu dla kursu „Desery na słodki stół”, prowadzonego przez Jakuba Janiuka w Szkole Artystycznej Wiesław Kucia w Lublinie.

Galeria produktu

ALT:
Tartaletki owocowe z kremem z kursu Desery na słodki stół

Tytuł:
Tartaletki owocowe z kremem – Desery na słodki stół

Podpis:
Tartaletki owocowe jako przykład deserów na słodki stół.

Opis:
Zdjęcie przedstawia tartaletki owocowe z kremem, owocami i jadalnym kwiatem. Obraz jest używany w galerii produktu kursu „Desery na słodki stół”, prowadzonego przez Jakuba Janiuka w Szkole Artystycznej Wiesław Kucia w Lublinie.

Pełny opis produktu

ALT:
Gotowe tartaletki owocowe prezentowane jako element słodkiego stołu

Tytuł:
Tartaletki owocowe jako element słodkiego stołu

Podpis:
Przykład efektu, jaki uczestnik może poznać podczas kursu „Desery na słodki stół”.

Opis:
Zdjęcie przedstawia gotowe tartaletki owocowe z kremem, pokazane jako przykład deserów możliwych do wykorzystania na nowoczesnym słodkim stole. Obraz wspiera opis kursu „Desery na słodki stół”, prowadzonego przez Jakuba Janiuka w Szkole Artystycznej Wiesław Kucia w Lublinie.

Krótki opis produktu

ALT:
Tartaletki owocowe z kursu Desery na słodki stół

Tytuł:
Tartaletki owocowe – Desery na słodki stół

Podpis:


Opis:
Zdjęcie przedstawia tartaletki owocowe z kremem, użyte w krótkim opisie produktu kursu „Desery na słodki stół”, prowadzonego przez Jakuba Janiuka w Szkole Artystycznej Wiesław Kucia w Lublinie.

15. Najważniejsza konkluzja dla zespołu

Nie ma jednego idealnego ALT-a dla każdego miejsca użycia obrazu.

Dla WooCommerce najlepszy standard jest taki:

To jest najbardziej profesjonalne, zgodne z dostępnością, bezpieczne SEO i najłatwiejsze do wdrożenia przez zespół redakcyjny.