Zdjęcia a SEO – nazwy plików, opisy alternatywne i rozmiar

Zdjęcia na stronie małej firmy pracują dla trzech odbiorców. Dla klienta, który chce zobaczyć gabinet, zespół albo efekty pracy. Dla osób niewidomych i słabowidzących, którym czytnik ekranu odczytuje opis obrazu. I dla wyszukiwarki, która, żeby zrozumieć, co przedstawia zdjęcie i jak wiąże się z treścią, korzysta m.in. z opisów i otaczającego tekstu.

Przygotowanie zdjęć tak, żeby służyły wszystkim trzem, nie wymaga specjalistycznych narzędzi. To kwestia kilku nawyków przy dodawaniu plików na stronę.

Nazwa pliku

Plik o nazwie „IMG_4521.jpg” nic nie mówi. „gabinet-fizjoterapii-sala-cwiczen.jpg” – całkiem sporo. Google w swoich wskazówkach dotyczących obrazów zaleca nazwy krótkie, ale opisowe, i podaje przykład, że nazwa w rodzaju „my-new-black-kitten.jpg” jest lepsza niż „IMG00023.JPG”.

Kilka praktycznych zasad:

• małe litery, słowa oddzielone myślnikami,
• bez spacji i – dla bezpieczeństwa technicznego – bez polskich znaków,
• bez powtarzania tych samych haseł w każdym pliku („fizjoterapia-poznan-fizjoterapeuta-poznan-1.jpg”),
• rozszerzenie zgodne z typem pliku.

Nazwę nadaj przed wgraniem pliku na stronę. Zmiana nazwy już opublikowanego zdjęcia oznacza zmianę jego adresu, więc nie warto robić tego masowo na istniejącej stronie.

Opis alternatywny, czyli atrybut alt

Opis alternatywny to krótki tekst przypisany do zdjęcia. Zwykle nie widać go na stronie, ale odczytuje go czytnik ekranu, pojawia się w miejscu obrazu, który się nie załadował, i pomaga wyszukiwarce zrozumieć, co przedstawia zdjęcie i jak wiąże się z treścią. W większości systemów do zarządzania stroną wpisuje się go w polu „Tekst alternatywny” przy dodawaniu obrazu.

Dobry opis alternatywny mówi, co widać, w kontekście danej strony. Google ostrzega przed upychaniem w nim słów kluczowych – to pogarsza wrażenia użytkowników i może sprawić, że strona zostanie uznana za spam. Przykłady:

• Słabo: „zdjęcie”. Przesadnie: „fizjoterapeuta Poznań, rehabilitacja Poznań, masaż Poznań”. Dobrze: „Fizjoterapeutka prowadzi z pacjentem ćwiczenia stabilizacji kolana”.
• Słabo: „łazienka”. Dobrze: „Łazienka po remoncie: prysznic bez brodzika, płytki w kolorze piasku, podwieszana toaleta”.
• Logo: nazwa firmy, a jeśli logo prowadzi do strony głównej – np. „[nazwa firmy] – strona główna”.

Zdjęcia czysto dekoracyjne, które nic nie wnoszą do treści – tło, ozdobnik – mogą mieć pusty opis alternatywny. Dzięki temu czytnik ekranu je pominie i nie będzie zajmował słuchacza opisem „ozdobna linia”. O tym, dlaczego dostępność ma znaczenie także z punktu widzenia przepisów, piszemy we wpisie o dostępności cyfrowej strony.

Tekst wokół zdjęcia

Google zaleca umieszczanie zdjęć w pobliżu tekstu, którego dotyczą, i na stronach związanych z ich tematem. Zdjęcie realizacji łazienki najlepiej sprawdza się na podstronie o remontach łazienek, z krótkim opisem: co było do zrobienia, jakie materiały wybrano, ile trwały prace. Krótki podpis pod zdjęciem to dobre miejsce na konkret, który klient od razu zauważy.

Nie umieszczaj ważnych informacji wyłącznie na grafice. Cennik, godziny otwarcia czy numer telefonu wpisane w obrazek są trudne do odczytania na telefonie, niedostępne dla czytników ekranu, a dla wyszukiwarki mniej czytelne niż zwykły tekst. Plakat z promocją możesz pokazać jako grafikę, ale jego treść powtórz obok w zwykłym akapicie.

Rozmiar i format

To część, która najbardziej wpływa na szybkość strony. Zdjęcie z aparatu czy telefonu ma często kilka tysięcy pikseli szerokości i waży kilka megabajtów, a na stronie wyświetla się w prostokącie szerokim na kilkaset pikseli. Przeglądarka i tak musi pobrać cały plik.

• Zmniejsz wymiary do takich, w jakich zdjęcie będzie wyświetlane – z zapasem na ekrany o wysokiej rozdzielczości. Zdjęcie na całą szerokość ekranu potrzebuje większego pliku niż miniatura w galerii.
• Skompresuj plik. Darmowe narzędzia do kompresji zmniejszają wagę zdjęcia, zwykle bez różnicy widocznej gołym okiem.
• Wybierz nowoczesny format. Google obsługuje w wyszukiwarce m.in. formaty JPEG, PNG, WebP i AVIF. WebP i AVIF zwykle pozwalają uzyskać mniejsze pliki przy podobnej jakości.
• Pozwól przeglądarce wybrać rozmiar. Dobrze zbudowana strona przygotowuje kilka wersji zdjęcia i podaje telefonowi mniejszą niż dużemu monitorowi. To tzw. obrazy responsywne – Google zaleca je w swoich wskazówkach dotyczących obrazów.
• Podawaj wymiary zdjęć w kodzie. Dzięki temu przeglądarka rezerwuje miejsce na obraz i tekst nie „skacze” podczas ładowania.
• Ładuj z opóźnieniem to, co niżej. Zdjęcia poniżej pierwszego ekranu mogą wczytywać się dopiero przy przewijaniu. Wyjątkiem jest główne zdjęcie na górze strony – ono powinno ładować się od razu.

Część tych rzeczy robi za Ciebie system, na którym działa strona, część wymaga pracy wykonawcy. O tym, jak rozmiar zdjęć przekłada się na podstawowe wskaźniki internetowe Google, piszemy w tekście o szybkości strony.

Własne zdjęcia zamiast powtarzalnych

Zdjęcie z banku zdjęć, które widnieje na setkach innych stron, nie powie nic o Twojej firmie – ani klientowi, ani wyszukiwarce. Własne zdjęcia gabinetu, zespołu i realizacji są jedyne w swoim rodzaju i mogą pojawiać się w wynikach wyszukiwania grafiki jako Twoje. Więcej o wyborze zdjęć piszemy we wpisie o zdjęciach własnych i stockowych.

Własne zdjęcia też wymagają chwili uwagi przed publikacją. Jeśli widać na nich klientów, pacjentów lub pracowników, potrzebujesz ich zgody na publikację wizerunku. Przy zdjęciach realizacji sprawdź, czy w kadrze nie ma rzeczy, których klient nie chciałby pokazywać: numeru mieszkania, dokumentów na biurku, rodzinnych zdjęć na ścianie. A jeśli zdjęcia robił fotograf, upewnij się, że umowa pozwala na ich użycie na stronie.

Lista przed wgraniem zdjęcia

1. Czy zdjęcie pokazuje coś, co pomaga klientowi podjąć decyzję?
2. Czy plik ma krótką, opisową nazwę, małymi literami, z myślnikami?
3. Czy wymiary pasują do miejsca na stronie, a plik jest skompresowany?
4. Czy opis alternatywny mówi, co widać – bez wyliczanki haseł?
5. Czy masz prawo do publikacji zdjęcia i zgodę osób, które na nim widać?