Optymalizacja pod kątem wyszukiwarek internetowych obejmuje liczne działania skupiające się na treściach pisanych. Okazuje się jednak, że bardzo ważną rolę odgrywa również optymalizowanie grafik w SEO. Warto zapoznać się bliżej z tymi działaniami.
Czym jest optymalizacja grafik pod SEO?
SEO związane z grafikami oznacza optymalizację obrazu po to, aby uzyskać większy ruch z wyszukiwarek.
Przykładowo, optymalizacja grafik pod SEO może pomóc stronie uzyskać wyższą pozycję w rankingu Google Images.
Optymalizacja zdjęć pod SEO może również poprawić przystępność strony. Jest to istotnym wymogiem prawnym w wielu krajach.
Poniżej przedstawione zostały informacje na temat tego jak dodać tekst alt, zmniejszyć rozmiar pliku z obrazu w celu optymalizacji czasu ładowania oraz jak wykorzystać ustrukturyzowane dane obrazu, itp.
Dlaczego grafiki są tak ważne?
Według danych Google, wyszukiwanie w Google Image stanowi około 22,6% wszystkich wyszukań. To dlatego istotne jest zwrócenie uwagi na optymalizację grafik w SEO. Dzięki temu można uniknąć utraty sporego ruchu. A należy zaznaczyć, że ta liczba cały czas rośnie – choćby na bazie wprowadzonych aktualizacji Google, które propagują kampanie produktowe.
Optymalizacja ilustracji pod kątem SEO może wygenerować znaczący ruch na stronie na dwa różne sposoby:
- wykorzystanie zoptymalizowanych ilustracji zwiększa szansę uzyskania wysokiej pozycji w rankingu Google Images,
- ilustracje stanowią istotną część działań SEO na stronie.
Google kładzie coraz większy nacisk na pokazywanie ilustracji w rezultatach normalnego wyszukiwania. Często pojawiają się one nad zwyczajnymi rezultatami organicznymi.
Ponadto obrazy mogą pomóc użytkownikom w zrozumieniu treści pisanej i w zaangażowaniu się w nią. Są one przydatne również pod względem rozbijania dużych bloków tekstu, które są negatywnie odbierane przez użytkowników.
Czym jest tekst alt?
Tekst alt (lub tekst alternatywny) to pisemny opis ilustracji.
Fachowcy z branży SEO często określają tekst alt mianem „atrybutów alt” lub „tagów alt”.
Zoptymalizowany tekst alt jest kluczowy, jeśli chodzi o wypracowywanie wysokiej pozycji dla ilustracji w rankingu Google Images. Jest to możliwe dzięki temu, że tekst alt pozwala na poinformowanie Google o tym co dana ilustracja przedstawia.
Ponadto taki tekst ma wpływ na przystępność strony dla użytkowników. Wyjaśnia on również to co powinno znajdować się na ilustracji, jeśli nie wczytała się prawidłowo.
Tekst alt może poprawić skuteczność działań SEO zapewniając stronie dodatkowe sygnały potwierdzające jej znaczenie. To z kolei pozwala Google lepiej zrozumieć kontekst ilustracji i określić jak dana strona ma być pozycjonowana w rankingu.
Tekst alt jest używany w kodzie HTML, aby opisać określone ilustracje znajdujące się na stronie.
Wygląda to na przykład tak:
<img src=”słodki-kotek-bawiacy-sie-pilka.png” alt=”słodki kotek bawiący się piłką” />.
Dobrą wiadomością jest to, że znajomość HTML nie jest potrzebna, aby optymalizować tagi alt.
Jak zoptymalizować tekst alt obrazu?
Dodając tekst alt, należy zadbać o to, aby był on opisowy, ale bez przesady.
Dobrym pomysłem jest wyobrażenie sobie rozmowy telefonicznej, podczas której należy wyjaśnić komuś jak wygląda dany obraz.
Przy pisaniu tekstu alt dobrze jest trzymać się maksymalnego limitu 125 znaków. Po prostu większość czytników ekranu (technologie pomocnicze pomagające osobom z wadami wzroku) przestaje czytać tekst alt po 125 znakach.
Pomocne jest również uwzględnienie stosownych słów kluczowych w tekście alt. Linia pomiędzy byciem konkretnym, a spamieniem, jest jednak bardzo cienka.
Poniżej znajduje się przykład opisowego oraz spamowego tekstu dla pary butów L.L. Bean:
- opisowy: brązowe skórzane buty L.L. Bean,
- spam: brązowe skórzane spacerowe zimowe buty L.L. Bean.
Przykład opisowy wiąże się z opisaniem ilustracji w sposób szczegółowy. Uwzględnia on jedno lub dwa słowa kluczowe (np. „buty L.L. Bean” oraz „skórzane buty L.L. Bean). Nadal taki opis wygląda naturalnie.
Przykład spamu obejmuje próbę upchania zbyt wielu powiązanych słów kluczowych, które nie wnoszą zbyt wiele do opisu ilustracji.
Zoptymalizowany tekst alt pomaga Google w zrozumieniu kontekstu ilustracji, ale „upychanie słów kluczowych” może wpłynąć negatywnie na doświadczenia użytkowników. Jest to również sygnał dla Google, że dana strona zawiera spam.
Przykłady tekstów alt
Jak w praktyce wygląda dobrze zoptymalizowany tekst alt? Poniżej można znaleźć kilka przykładów złych, dobrych, lepszych i najlepszych opcji.
Zacznijmy od ilustracji przedstawiającej koty:
- zły tekst alt: alt=”koty”,
- dobry tekst alt: alt=”śpiące koty z włóczką”,
- lepszy tekst alt: alt=”rude kotki śpiące z włóczką”,
- najlepszy tekst alt: alt=”dwa rude kotki śpiące z różową i fioletową włóczką”.
Innym przykładem może być zrzut ekranu z linkami:
- zły tekst alt: alt=”linki zwrotne”,
- dobry tekst alt: alt=”linki zwrotne Adidas”,
- lepszy tekst alt: alt=”ogólny przegląd linków zwrotnych Adidas”,
- najlepszy tekst alt: alt=”ogólny przegląd linków zwrotnych Adidas w Semrush Backlink Analytics”
W tym przykładzie mamy zdjęcie frytkownicy beztłuszczowej:
- zły tekst alt: alt=”frytkownica beztłuszczowa”,
- dobry tekst alt: alt=”srebrna frytkownica beztłuszczowa”,
- lepszy tekst alt: alt=”srebrna frytkownica beztłuszczowa Cuisinart”,
- najlepszy tekst alt: alt=”srebrna frytkownica beztłuszczowa Cuisinart przygotowująca frytki”.
Jak można zauważyć, w każdym przypadku najlepszy jest najbardziej opisowy tekst alt, który nie brzmi nienaturalnie.
Dodawanie tekstu alt w WordPress
Istnieje również możliwość dodania zoptymalizowanego tekstu alt do strony WordPress bez posiadania jakiejkolwiek wiedzy na temat HTML.
Po przesłaniu obrazu do biblioteki, można wpisać jej szczegóły, wliczając w to tekst alt.
Po ustawieniu tekstu alt, dana obraz będzie posiadała tekst alt przy każdym jej użyciu na stronie (później taki tekst można edytować).
Dodawanie tekstu alt obrazu jest również łatwe w innych systemach zarządzania treścią, takich jak Wix, Shopify czy też Squarespace.
10 porad usprawniających optymalizację grafik pod SEO
Oczywiście tagi alt są ważne, ale istnieje wiele innych kwestii związanych z optymalizacją grafik pod SEO, o których należy pamiętać. Istnieje wiele czynności, które można wykonać, aby poprawić ogólną skuteczność organiczną strony oraz osiągać wyższe pozycje w Google Images.
Poniżej znajduje się dziesięć porad dotyczących usprawniania optymalizacji grafik pod SEO.
Dopasowanie rozmiarów do wymiarów wyświetlacza
Jeśli chodzi o doświadczenia użytkowników, kluczowa jest prędkość ładowania strony. Można łatwo spowolnić jej działanie nie zwracając uwagi na rozmiar pliku.
Przykładem może być zdjęcie wykonane przy pomocy telefonu. Wiele najpopularniejszych smartfonów robi zdjęcia o rozmiarze przynajmniej na poziomie 4032 x 3024 piksele.
Jeśli maksymalna szerokość grafiki na stronie to 600 pikseli, wówczas ilustracja będzie dużo większa niż powinna. To może spowolnić działanie strony.
Aby uniknąć tego problemu, należy zmienić rozmiar ilustracji do maksymalnych wymaganych rozmiarów wyświetlania, przed przesłaniem zdjęcia.
Zmiany rozmiaru ilustracji można dokonać ręcznie w Photoshopie lub prostszym narzędziu, takim jak Canva.
W przypadku korzystania z WordPress, można użyć wtyczki, takiej jak Resize Image After Upload (zmiana rozmiaru ilustracji po przesłaniu).
Wystarczy tylko aktywować funkcję „enable re-sizing” (aktywacja zmiany rozmiaru), a następnie wybrać wymagane rozmiary.
Warto również upewnić się, że ilustracje są skalowane responsywnie w CSS.
Tworzenie prawidłowych nazw obrazów
Zgodnie z wytycznymi Google dotyczącymi optymalizacji ilustracji pod SEO, ważne jest stosowanie opisowych nazw plików.
Przykładem może być zdjęcie buta Nike Air Force 1.
Komputer może wygenerować nazwę pliku, taką jak na przykład IMG00353.JPG, w czasie jej zapisywania. Taka nazwa nie mówi Google nic na temat tego co znajduje się na zdjęciu.
Lepszą nazwą pliku będzie białe-air-force-1-pastelowe-paski.jpg. Należy nadawać opisowe nazwy wszystkim ilustracjom przed ich przesłaniem na stronę. Dodatkowo Google zaleca stosowanie myślników, a nie podkreśleń, aby oddzielać słowa.
Planując przetłumaczenie lub lokalizację strony internetowej, należy odpowiednio zmienić nazwy plików.
Kompresja obrazów
Zmiana rozmiaru obrazu nie jest jedynym sposobem zmniejszenia wielkości pliku. Można również skompresować zdjęcie. Pomaga to w skróceniu czasu ładowania strony.
Kompresja ilustracji oznacza, że zmniejszana jest wielkość pliku bez negatywnego wpływu na jakość obrazu.
Celem jest zmniejszenie przerostu danych obrazów. To wpływa korzystnie na efektywność strony i szybkie ładowanie, gdy dana ilustracja zostanie wykorzystana.
W celu zmniejszenia wielkości plików i ich kompresji, można skorzystać z wielu łatwych w użyciu narzędzi, takich jak TinyPNG, Optimizilla lub Image Optim.
W przypadku korzystania z WordPress, warto skorzystać z wtyczki Smush.
Ponadto można skorzystać z jednego z trzech narzędzi open-source od Google:
Stworzenie sitemapy obrazów
Stworzenie sitemapy ilustracji zwiększa szansę na pojawienie się grafiki w rezultatach wyszukiwania.
Sitemapa ilustracji jest w znaczącym stopniu podobna do normalnej mapy strony XML, z wyjątkiem tego, że sitemapa grafik zawiera wyłącznie adresy URL ilustracji.
Stworzenie dedykowanej sitemapy obejmującej adresy URL wszystkich ilustracji na stronie, może pomóc Google w odkryciu tych grafik i uwzględnieniu ich w rezultatach wyszukiwania obrazów.
Istnieje jedna kluczowa różnica pomiędzy tworzeniu sitemapy ilustracji oraz mapy strony.
Sitemapy ilustracji mogą zawierać adresy URL z innych domen. Oznacza to, że mogą one być przechowywane w Content Delivery Network (sieć dostarczania treści).
Jak stworzyć sitemapę grafik?
Sitemapę ilustracji można stworzyć manualnie lub przy pomocy generatora sitemap.
Aby stworzyć taki element manualnie, można przestrzegać instrukcji i przykładów podanych przez Google.
W przypadku sitemapy ilustracji, można uwzględnić do 1000 grafik dla każdej strony.
Google dostarcza również listę tagów ilustracji.
Należy skorzystać z tych, które są oznaczone jako „Required” (wymagane). Z drugiej strony, tagi opcjonalne mają na celu zapewnienie wyszukiwarkom dalszego kontekstu oraz pozytywne wpłynięcie na doświadczenia użytkowników.
Istnieją pewne wtyczki generatorów sitemap, ale firma Google ogłosiła, że niedługo pojawią się rozszerzenia powiązane z tymi elementami.
W przypadku zarządzania własną sitemapą, nie są potrzebne żadne dalsze działania. Trzeba być jednak ostrożnym korzystając w przyszłości z rozszerzeń, jeśli nie będą aktualizowane. Dzięki temu właściciel strony będzie na bieżąco z nowymi najlepszymi praktykami.
Wybór prawidłowego formatu
Bardzo ważną sprawą jest nie tylko kompresja ilustracji, ale również właściwy format obrazu.
Nie istnieje jeden idealny format. Wszystko zależy od ilustracji, która zostanie użyta oraz od tego jak ma ona zostać wykorzystana.
Tak prezentują się podstawowe formaty dostępne do wyboru:
- JPEG: najpopularniejszy format ilustracji. Używa się go w przypadku internetowych zdjęć lub prac artystycznych. Przydaje się również do wysyłania wiadomości e-mail z podglądem ilustracji, ponieważ format ten można kompresować nawet do bardzo małego rozmiaru pliku,
- PNG: format ten stosuje się, aby zapewnić przezroczystość w tle ilustracji,
- WebP: ten format należy stosować, gdy potrzebna jest większa kompresja w porównaniu z JPEG lub PNG. Format ten wspiera ilustracje oraz animowane ilustracje bez poświęcenia głębi koloru, animowanych nakładek, itp. Format ten jednak nie współpracuje ze starszymi przeglądarkami,
- SVG: format ten wykorzystuje się w przypadku ikon lub logotypów.
Stosowanie Content Delivery Network (Sieć dostarczania treści – CDN)
Sieć dostarczania treści (CDN) sprawia, że obrazy oraz inne treści ładują się szybciej. CDN to grupa serwerów znajdujących się w różnych lokalizacjach na świecie. Pozwala to na szybszą dystrybucję treści do różnych, osobnych lokalizacji.
Przykładowo w przypadku osób z USA, szybsze będzie ładowanie treści z serwerów znajdujących się w USA niż z serwerów azjatyckich.
Działanie Content Delivery Network polega na tym, że użytkownicy pozyskują treść z serwerów, które znajdują się najbliżej ich lokalizacji.
Można łatwo skonfigurować CDN w WordPress przy pomocy wtyczek, takich jak W3 Total Cache. Aby uzyskać dalsze wytyczne, można poszukać informacji dotyczących integracji u wybranego dostawcy, takiego jak na przykład Cloudflare.
Wdrożenie „Lazy load”
Jeśli chodzi o wolne ładowanie strony, ilustracje są zwykle najczęstszymi winowajcami.
Rozwiązaniem tego problemu jest wykorzystanie „leniwego ładowania”. Jest to informacja dla przeglądarek nakazująca im poczekanie na załadowanie się ilustracji, jeśli jest potrzebna.
Oznacza to, że strona ładuje się znacznie szybciej, gdy użytkownik pojawi się na niej po raz pierwszy. Rozwiązanie to jest stosowane nie tylko w przypadku grafik. Zasoby, takie jak JavaScript mogą być również ładowane w ten sposób.
W przypadku tego rozwiązania, jeśli użytkownik nigdy nie przewinie strony do jej dolnej części, jej zasoby nigdy nie zostaną załadowane. To z kolei zapewnia widoczną poprawę działania.
Zgodnie z informacjami Google, należy unikać leniwego ładowania w przypadku ilustracji w górnej części strony (ATF). Wpływa to bowiem negatywnie na doświadczenia użytkowników.
Dodanie ustrukturyzowanych danych obrazu
Ustrukturyzowane dane to słownictwo pomagające wyszukiwarkom jaśniej zrozumieć informacje zawarte na stronie. Wykorzystanie ustrukturyzowanych danych zwiększa również szanse na pojawienie się ilustracji w tzw. „Rich Results”.
Ustrukturyzowane dane niekoniecznie muszą wpłynąć korzystnie na poprawę rankingu strony. Wpływają jednak na poprawę wyświetlania ilustracji w rezultatach wyszukiwania.
Przykładowo, w przypadku publikowania wpisu blogowego z przepisem na stronie, można wykorzystać ustrukturyzowane dane ilustracji, aby wykazać, że konkretna ilustracja jest częścią przepisu.
Google Images wspiera obecnie następujące typy ustrukturyzowanych danych:
- produkt,
- wideo,
- przepis.
Aby uzyskać więcej informacji na temat wdrażania ustrukturyzowanych danych ilustracji, należy sprawdzić wytyczne Google.
Ponadto, warto zwrócić uwagę na poniższe kluczowe kwestie:
1. Planując wykorzystanie ustrukturyzowanych danych z ilustracją, należy upewnić się, że obraz jest właściwy dla strony, na której będzie się pojawiał. Przykładowo, w przypadku korzystania z ustrukturyzowanych danych przepisu, wybrana ilustracja powinna przedstawiać efekt końcowy wykorzystania przepisu.
2. Adres URL musi być możliwy do crawlingu oraz indeksowania. W przeciwnym wypadku Google nie będzie w stanie odnaleźć adresów ani pokazać ich na stronach z rezultatami.
Optymalizacja pod kątem Open Graph i Twitter Cards
Użytkowanie ilustracji stanowi również istotny element strategii social media. W tym przypadku mamy do czynienia z Open Graph. Jest to protokół internetowy (lub zestaw zasad) wprowadzony przez Facebook.
Tagi Open Graph pozwalają wybrać jak pojawia się podgląd wpisu w social mediach. Oznacza to, że można wybrać tytuł, ilustrację i inne elementy postów.
Przykładowo, aby upewnić się, że wybrana ilustracja pojawi się przy udostępnianiu strony, należy uwzględnić poniższy tag ilustracji w sekcji <head> kodu HTML, aby wyglądało to tak jak poniżej:
<meta property=”og:image” content=”http://site.com/image-link.jpg” />
Open Graph znajduje zastosowanie w serwisach Facebook oraz Pinerest, podczas gdy Twitter wykorzystuje Twitter Cards.
W przypadku Twittera, kod jaki należy dodać w sekcji <head> prezentuje się następująco:
<meta name=”twitter:card” content=”summary”></meta>
Można korzystać z wtyczek, takich jak Yoast lub RankMath, aby zobaczyć takie tagi ilustracji i podejrzeć swoje posty.
