Optymalizacja zdjęć i plików graficznych na stronie pod kątem Google

Ruch, jakie na stronie generują grafiki, w większości przypadków nie jest duży – możesz to łatwo sprawdzić w Search Console. Jakiś czas temu spotkałem się ze stroną, gdzie odsetek ten kształtował się na poziomie około 20%. Ktoś powie, że to i tak nie jest dużo – w porządku, ale są branże, gdzie użytkownicy szukają przede wszystkim realizacji, np. na etapie urządzania obejścia domu (ogrodzenia) czy jego otoczenia (ogrody) i w takich przypadkach ładna, pojawiająca się wysoko w wynikach wyszukiwania jest w stanie generować całkiem niezły ruch na stronie.

Aby się tak jednak stało należy dostosować się do paru zaleceń.

Nazwa pliku

Większość grafik, umieszczanych na stronach przez webmasterów, nazywa się „systemowo”, tak, jak nam to generują np. aparaty czy telefony komórkowe, np. „image020.jpg” – zamiast opisywać już w nazwie to, co przedstawia dane zdjęcie –  „robertkubica-podium-grand-prix-monaco.jpg”.

Tymczasem nazwa pliku może stanowić dla Google wskazówkę dotyczącą tematyki obrazu. Postaraj się, aby nazwa pliku stanowiła dobry opis tematyki obrazu. Na przykład nazwa moj-nowy-czarny-kot.jpg zawiera znacznie więcej informacji niż nazwa IMG00023.JPG.

Opisowe nazwy plików mogą być również przydatne dla użytkowników. Jeśli na stronie, na której znajduje się obraz, nie można znaleźć odpowiedniego tekstu, nazwa pliku zostanie użyta jako fragment opisu obrazu w wynikach wyszukiwania.

Jeśli strona występuje w więcej niż jedna wersji językowej, należy zadbać o dostosowanie obrazów do innego języka, pamiętając o przetłumaczeniu również nazw plików. W tym miejscu ważna uwaga – przestrzegaj wytycznych dotyczących kodowania adresów URL, jeśli używasz znaków innych niż łacińskie lub znaków specjalnych.

Rozszerzenia

Grafika Google obsługuje obrazy w tych formatach: BMP, GIF, JPEG, PNG, WebP i SVG .

Używaj semantycznych elementów graficznych HTML

Semantyczne znaczniki HTML pomagają robotom w znajdowaniu i przetwarzaniu obrazów. Google analizuje elementy HTML <img> (nawet jeśli znajdują się one w innych elementach, takich jak elementy <picture>) na stronach, aby indeksować obrazy, ale nie indeksuje obrazów CSS.

Dobrze:

<img src=”puppy.jpg” alt=”Szczenię golden retrievera” />

Źle:

<div style=”background-image:url(puppy.jpg)”>Szczenię golden retrievera</div>

Opisowy tekst alternatywny – atrybut ALT

Grafika musi być opisana za pomocą atrybutu ALT – za pomocą którego informujemy roboty odwiedzające stronę, co ona przedstawia,

np.

alt=”młody szczeniak labradora pływający w rzece”.

Należy w tym miejscu mieć na uwadze, aby nie przesadzać z opisem.

alt=”szczeniak pies młody pies szczenię szczeniaki szczeniaczki pieski szczenięta legowisko piesek retriever labrador wilczur seter pointer szczeniak jack russell terier szczeniaki psia karma tania psia karma karma dla szczeniąt”

ponieważ umieszczanie słów kluczowych w atrybucie alt („upychanie słów kluczowych”) łamie regulamin wyszukiwarki, co wpłynąć może na obniżenie jej widoczności w wynikach wyszukiwania.

Wielkość grafiki

Elementy graficzne powinny być odpowiednio dobrane do strony, tak, aby wyświetlały się poprawnie na wszystkich urządzeniach – komputery stacjonarne, laptopy, tablety czy komórki.

Grafiki odpowiadają za najczęściej pojawiające się problemy związane z szybkością działania stron, ponieważ jako ciężkie elementy stanowić mogą większość „ciężaru strony”. Dlatego tak ważne jest, aby optymalizując stronę zadbać o ich optymalny rozmiar.

Pomocne są tutaj narzędzia GTmetrix oraz PageSpeed Insights, które wskazują elementy wymagające poprawy, a także narzędzia offline czy online oraz odpowiednie wtyczki (WordPress, Presta), które zmniejszą rozmiar pliku do optymalnej dla strony internetowej wielkości.

Google zwraca uwagę też na inne kwestie, które warto wziąć pod uwagę

Obrazy często stanowią największą część rozmiaru strony i mogą sprawiać, że otwieranie stron jest powolne i kosztowne. Stosuj najnowsze techniki optymalizacji obrazów i techniki tworzenia elastycznych obrazów, aby zapewnić wysoką jakość i szybkie otwieranie stron.

Otoczenie grafiki / zdjęcia

Zadbaj o to, aby obok grafiki znalazł się tekst, który w jakiś sposób do niej nawiązuje. Taki tekst jest wskazówką dla robota odnośnie tego, co dany obraz przedstawia, zwiększa też prawdopodobieństwo wyświetlania się grafik pod frazy, na których nam zależy.

Do tekstu, jaki znajduje się w okolicy grafiki, należy się przyłożyć, aby uniknąć sytuacji, gdzie np. strona, na której znajduje się obraz, i treść wokół niego (w tym wszelkie podpisy i tytuły obrazów) mogą dostarczyć Google sprzecznych informacji o tematyce obrazu. Jeżeli np. na stronie o motoryzacji umieścimy zdjęcie basenu, to wyszukiwarka może „przyjąć mylne założenia co do tego, co przedstawia obraz basen.jpg”.

Umieszczaj obrazy w optymalnym miejscu: o ile to możliwe, zawsze umieszczaj obrazy obok związanego z nimi tekstu. Czasem dobrym pomysłem może być umieszczenie najważniejszego obrazu na górze strony.

Oryginalność grafik

Google kładzie duży nacisk nie tylko na oryginalność tekstu, ale i zdjęć. Zdecydowanie odradzam tworzenie stron, na których obrazy nie są oryginalne.

Mapa witryny

Dodając informację o grafikach do mapy witryny (co zdarza się stosunkowo rzadko), dostarczamy Google więcej informacji o stronie.

Dane uporządkowane

Jeżeli chodzi o grafiki to Google nie obsługuje uporządkowanych dane wszystkich typów. Jeżeli chcemy, aby grafiki zostały wyróżnione w wyszukiwarce, należy zastosować się do zasad, jakie obowiązują w tym zakresie.

Na chwilę obecną (kwiecień 2023) Google potrafi interpretować uporządkowane dane następujących typów:

• Produkt
• Film
• Przepis
• Metadane obrazu

Dostosowanie mobilne

Grafika Google jest używana zdecydowanie częściej na urządzeniach mobilnych niż na komputerach. Dlatego tak ważne jest, aby zaprojektować stronę z uwzględnieniem wszystkich typów i rozmiarów urządzeń.

Nie zapomnij też o tym, aby przeprowadzić test optymalizacji mobilnej, celem sprawdzenia, jak strony działają na urządzeniach mobilnych. Jeżeli okaże się, że robot Google ma problem z dotarciem do plików graficznych (dowiesz się o tym analizując sekcję „Zablokowane zasoby” w teście mobilnym), to usuwając problem sprawisz, że grafika stanie się dla niego w pełni dostępna.

Cierpliwość

Na koniec należy pamiętać, aby uzbroić się w cierpliwość. Jak możemy przeczytać w materiałach pomocy Google proces indeksowania grafik zajmuje „some time” – nie oczekujmy więc, jak nasze nasze np. wpisy z bloga indeksują się w kilka godzin czy czasem i minut, że podobnie będzie i w przypadku grafik.

FAQ

W 2012 roku na blogu Google opublikowano ciekawy artykuł odnośnie indeksowania grafiki. Chciałem zwrócić uwagę na kilka kwestii, które nie straciły na znaczeniu mimo, że od ich publikacji minęła już prawie dekada. Pytania i odpowiedzi, jakie zostały w nim umieszczone, nadal często się pojawiają w dyskusjach na blogach i forach poświęconych pozycjonowaniu.

Czy oryginalny obraz może wyświetlać się niżej w SERPach niż ten sam, znajdujący się na stronie, która go później opublikowała?

Q: We sometimes see the original source of an image ranked lower than other sources; why is this?
A: Keep in mind that we use the textual content of a page when determining the context of an image. For example, if the original source is a page from an image gallery that has very little text, it can happen that a page with more textual context is chosen to be shown in search.

Odpowiedź – TAK. Jeżeli inna strona bardziej zoptymalizuje swój content poprzez dodanie (dobrej jakości) tekstu na stronie.

To samo zdjęcie na wielu stronach a ich indeksowanie

Q: Is it a problem if my images can be found on multiple domains or subdomains I own — for example, CDNs or related sites?
A: Generally, the best practice is to have only one copy of any type of content. If you’re duplicating your images across multiple hostnames, our algorithms may pick one copy as the canonical copy of the image, which may not be your preferred version. This can also lead to slower crawling and indexing of your images.

Odpowiedź – TAK. Jeżeli system znajdzie tę samą grafikę na kilku witrynach algorytm wybierze sobie sam wersję kanoniczą

Konkluzja

Grafika jest nadal niedoceniana przez webmasterów właścicieli stron czy nawet firmy SEO. Nazwy zdjęć nie mają odpowiednich nazw, nie używamy altów, niektóre branże, jak fotograficzna, „rękami i nogami” bronią się przed wstawieniem na stronie jakiegokolwiek tekstu.

Informacje zawarte w artykule tymczasem jasno pokazują, że jest to złe podejście, ponieważ wpływa negatywnie na widoczność naszych grafik w wynikach wyszukiwania.