(ilość głosów: 16, średnia: 4,69 na 5)
Ładowanie...Pozycjonowanie zdjęć - jakie ma znaczenie?
Piękne, przyciągające wzrok grafiki nie tylko mogą zwiększyć zainteresowanie użytkowników i podnieść ich pozytywne wrażenie na temat całej strony czy danego artykułu, ale - dobrze zoptymalizowane - mogą przyczynić się również do lepszego działania witryny. Oto kluczowe powody, dla których pozycjonowanie zdjęć jest istotne:1. Optymalizacja zdjęć skraca czas ładowania strony
Odpowiednio zoptymalizowane obrazy mogą w znacznym stopniu przyczynić się do poprawy szybkości ładowania strony. Prędkość ładowania witryny stanowi jeden z czynników rankingowych Google, dlatego tak ważne jest, by strona ładowała się szybko, zarówno na komputerach, jak i urządzeniach mobilnych.2. Optymalizacja zdjęć wpływa na zaangażowanie użytkowników
Optymalizacja zdjęć przyczynia się do poprawy stanu wizualnego treści, co z kolei przyciąga użytkowników i zwiększa ich zaangażowanie. Według badań posty na Facebook’u, które posiadają grafiki zwiększają zaangażowanie użytkowników o 2,3 razy, natomiast tweety ze zdjęciami są udostępniane dalej 150% razy więcej niż w przypadku postów nie zawierających żadnych fotografii. Zoptymalizowanie zdjęć, które umieszczasz na stronie z pewnością pomoże Ci przyciągnąć uwagę większej ilości użytkowników oraz zwiększyć ich zaangażowanie, co z kolei przełoży się na wzrost liczby potencjalnych klientów. [caption id="attachment_13659" align="aligncenter" width="682"]
Źródło: https://buzzsumo.com/blog/how-to-massively-boost-your-blog-traffic-with-these-5-awesome-image-stats/[/caption]
3. Zoptymalizowane zdjęcia mogą pojawić się w wyszukiwarce obrazów
Zdjęcia, które są właściwie zoptymalizowane mają większą szansę na pojawienie się w wyszukiwarce grafiki. To z kolei sprawia, że mogą one dotrzeć do większego grona odbiorców, a tym samym przyczynią się do zwiększenia ruchu na stronie oraz wzrostu rozpoznawalności Twojej witryny.
Odpowiednie zdjęcie, czyli jakie ?
Wiemy już, że zdjęcia mogą podnieść wartość Twojej strony, a pozycjonowanie zdjęć zwiększy na niej ruch. Na co należy zatem zwrócić uwagę przy umieszczaniu zdjęć na stronie, by osiągnąć taki efekt? Pierwszym krokiem, który przybliży Cię do sukcesu jest dobór odpowiednich fotografii. Najważniejszą i kluczową radą jest: “użyj zdjęć jak najlepiej dopasowanych do tematyki i treści na stronie”. Oczywiste, prawda? Nic bardziej mylnego! Wystarczy prześledzić losowo wybrane strony, by dostrzec jak wiele z nich umieszcza w witrynie przypadkowe, nie wnoszące żadnej wartości zdjęcia. Co więcej, dzięki badaniom przy użyciu eye-trackera wiemy, iż użytkownicy zupełnie ignorują takie obrazy, a ich wzrok śledzi jedynie nagłówki w tekście. W takim przypadku zdjęcia nie wnoszą nic poza dodatkowym i niepotrzebnym chaosem.
Optymalizacja zdjęć na stronę - od czego zacząć?
Pozycjonowanie zdjęć rozpocznij od kilku prostych działań poprzedzających jego publikację. Poniżej prześledzimy najważniejsze kroki.1. Wysoka jakość obrazów
Oczywistym jest to, że zdjęcia zamieszczone na stronie, powinny odznaczać się jak najwyższą jakością. Warto również zwrócić uwagę na to, by były one unikalne. Grafiki zrobione samodzielnie, zdecydowanie bardziej przyciągną wzrok użytkowników, niż obrazy stockowe, które możemy znaleźć w wielu witrynach.2. Odpowiednia nazwa pliku ze zdjęciem
Ta prosta czynność, którą jesteś w stanie wykonać w mniej niż 10 sekund to kluczowy zabieg, umożliwiający robotom Google znalezienie i wyświetlenie Twojego zdjęcia w wyszukiwarce. Na co warto zwrócić uwagę wpisując nazwę? Skup się na jak najbardziej zwięzłym opisie, używając w tym celu fraz kluczowych. Pamiętaj, by zacząć od najważniejszego słowa oraz używaj znaku “-” (minus, myślnik, ang. hyphen), aby rozdzielić wyrazy. Dzięki temu nazwy zdjęć, jak i linki do nich są czytelne dla botów i użytkowników. Unikaj stosowania “_” (podkreślenia, ang. underscore), gdyż w takim przypadku boty nie oddzielą wyrazów, czytając ciąg wyrazów jako całość. Należy również pamiętać, by nie oddzielać poszczególnych słów kluczowych w nazwie za pomocą spacji, a także nie stosować w niej polskich znaków oraz nie korzystać z systemu kodowania znaków ASCII. I tak zamiast pliku o nazwie: hjdsiufds23n.jpg stwórz przykładowo taki: fryzjer-krakow-pasemka-rude.jpg .
3. Format JPG czy PNG?
Czy zwracasz uwagę w jakim formacie zapisujesz obrazy? Większość zdjęć w Internecie to te z rozszerzeniem .jpg. Niemniej, coraz częściej wybiera się format .png ze względu na to, iż kompresując zdjęcie w tym formacie nie tracimy na jego jakości (tak, jak się dzieje w przypadku .jpg). Warto jednak pamiętać, że format .jpg lepiej sprawdzi się do wszelkiego rodzaju zdjęć, z kolei .png będzie idealny do zapisu wykresów, diagramów, ilustracji, logo itp.4. Optymalny rozmiar zdjęcia
Czy komuś z tu obecnych nie przeszkadza długo ładująca się strona? Pozwolę sobie nie odpowiadać na to retorycznie zadane pytanie. Wiemy już, że Google zwraca uwagę na czas ładowania się strony, co wpływa z kolei na jej pozycje w wyszukiwarce. Skalowanie, czyli zmniejszanie zdjęć w znaczący sposób przyspieszy ładowanie się strony. Musimy jednak pamiętać o tym, by nie odbywało się to kosztem ich jakości. Najważniejsza rada to taka, by skalować zdjęcie do takiego rozmiaru, jakie chcemy by pojawiło się na stronie. Narzędzia, które mogą nam w tym pomóc to Photoshop lub strona zmniejszacz.pl.
5. Rozmiar pliku
Zasada jest prosta – im mniejszy rozmiar zdjęcia tym lepszy, nie zapominając o maksymalnie dobrej jakości zdjęcia. Łączy się to także z czasem ładowania strony. Zalecane jest, by waga przesyłanych obrazów nie była większa niż 150-200 KB. Przykładowe narzędzia do zmiany rozmiaru pliku ze zdjęciem to jpegmini.com lub imageoptim.com.
6. Sitemapa dla zdjęć
Na stronach, gdzie znajduje się duża ilość zdjęć zalecane jest stworzenie osobnej sitemapy, zawierającej adresy URL wszystkich plików graficznych. Takie rozwiązanie sprawia, że obrazy mogą być łatwiej znajdowane przez roboty wyszukiwarki, a także wspiera proces ich indeksowania.Komentarz specjalisty
W celu utworzenia osobnej sitemapy, zawierającej jedynie pliki graficzne, możesz wykorzystać narzędzie Screaming Frog. Kliknij w zakładkę "Sitemaps" a następnie wybierz "Create Image Sitemap". Na koniec zaczytaj sitemapę do Google Search Console.
Mateusz Calik
Head of SEO & SEM
Chcesz dowiedzieć się więcej o WordPressie? Przeczytaj lub pobierz za darmo nasz raport WordPress w 2021 roku.
7. Dane strukturalne dla zdjęcia
W celu wzmocnienia pozycjonowania zdjęć w Google możemy zastosować dla nich dane strukturalne, inaczej zwane mikrodanymi. Jeśli dodamy je do konkretnego obrazu, wyświetli się on jako rich snippet, czyli w formie rozszerzonego opisu. Przykładowo, jeśli dotyczy to produktów to użytkownik, oprócz standardowego opisu, dostanie również informację na temat ceny produktu czy opinie klientów. W celu poprawnego zaimplementowania mikrodanych, warto skorzystać z przewodnika Google na temat danych strukturalnych.Czas na publikację!
Jeśli przygotowałeś zdjęcie zgodnie z powyższymi wskazówkami czas na jego publikację. Na tym etapie również mamy dla Ciebie kilka sugestii, których zastosowanie podniesie pozycję Twojego zdjęcia.1. Opisy alternatywne
Skąd roboty Google wiedzą co jest na obrazku? Wiedzę tę „czerpią” z opisów alternatywnych. Ich niezwykle ważnym zastosowaniem jest także określenie zawartości zdjęcia dla osób niewidomych oraz w sytuacjach, gdy zdjęcie nie ładuje się poprawnie (wtedy zamiast obrazu wyświetla się opis alternatywny). Tekst w nim zawarty powinien zatem jak najlepiej wyrażać, to co widzimy na zdjęciu. Długość atrybutu ALT kształtuje się w przedziale od 5 do 15 słów. W przypadku notki na bloga ALT pierwszego zdjęcia może być taki sam jak tytuł posta. W opisie alternatywnym należy zastosować słowo kluczowe, gdyż zwiększa to szansę na pojawienie się obrazu w wyszukiwarce grafiki. Pamiętajmy jednak, aby nie przesadzać z ilością fraz kluczowych, gdyż opis ten przede wszystkim musi być zrozumiały i jasno opisywać zdjęcie. W treści atrybutu ALT możemy stosować polskie znaki. Jeśli chcemy sprawdzić treść opisu alternatywnego w kodzie strony wystarczy, że skorzystamy z funkcji “Zbadaj”. Większość CMSów, między innymi Wordpress czy Shoper, umożliwia proste dodawanie opisu alternatywnego do zdjęcia. [caption id="attachment_13663" align="aligncenter" width="750"]
Przykład dodawania opisu alternatywnego w CMS’ie Shoper[/caption]
[caption id="attachment_13665" align="aligncenter" width="750"]
Przykład dodawania tekstu alternatywnego w Wordpress’ie[/caption]
[caption id="attachment_13667" align="aligncenter" width="750"]
Sprawdzanie treści opisu alternatywnego w kodzie strony[/caption]
2. Tytuł zdjęcia (title tag)
Tytuł zdjęcia pełni funkcję tekstu pomocniczego. Dla niektórych, ten etap optymalizacji zdjęć na stronę zupełnie nie jest konieczny, z uwagi na to, że nie posiada on istotnego znaczenia w procesie pozycjonowania. Niemniej jednak warto go stosować, gdyż dzięki niemu możemy lepiej opisać obraz. Jeśli zdecydujemy się wprowadzić tytuł zdjęcia, musimy pamiętać o tym, by nie powielać opisu alternatywnego.3. Podpisy pod zdjęciami
Jeśli to możliwe warto dodać podpis pod zdjęciem. Okazuje się bowiem, iż użytkownicy bardzo często czytają same opisy zdjęć, pomijając główny tekst na stronie. Jeśli zależy nam na tym, by dłużej zatrzymać użytkowników na stronie, a tym samym zwiększyć jej pozycję, to warto umieszczać podpisy pod grafikami.4. Rozmieszczenie zdjęć
Wiesz już jak ważna jest prawidłowa nazwa zdjęcia, uwzględniająca wybrane słowo kluczowe. Masz również świadomość tego, że fotografia powinna być jak najlepiej dopasowana tematycznie do strony. Niemniej istotne jest, by słowo kluczowe użyte w nazwie zdjęcia pojawiło się także w tekście na stronie (najlepiej w nagłówku). Co więcej, dobrze, jeśli sam obraz znajduje się w pobliżu tej frazy kluczowej.
Sprawdź również nasz poradnik pozycjonowanie stron.
Dopytam o interesujące mnie szczegóły: Co z ekranami o podwyższonej rozdzielczości i stronami „retina ready”, jak proponujesz przygotowywać zdjęcia na takie strony? Niestety, czasy gdy standardem i w sumie jedyną słuszną opcja było 72ppi minęły. Jak przygotować szybko ładujące się obrazki w wysokiej rozdzielczości? Jakieś sugestie, porady? Będę wdzięczny za każdy dobry pomysł.
Bardzo dobrze ujęte najpotrzebniejsze informacje dotyczące pozycjonowania zdjęć. Super artykuł, pozdrawiam.
OK to ja mam jeszcze pytanie. To wszystko co napisałeś tyczy się do . Co jeśli trzeba użyć fotki w background – czy to też się da pozycjonować
Jest mnóstwo skryptów np. w php które skalują obrazy w locie
Dla mnie wszystko zależy od tego gdzie te obrazki są.
Jeśli na podstronach / galeriach – to wykorzystuje skrypty i wtyczki, które tworzą osobny plik z miniaturą, a osobny z dużą grafiką. Dodatkowo często można skorzystać z ładowania zdjęć w tle (doładowują się zdjęcia gdy przesuwamy ekran) – kiedyś korzystałem z tego pluginu do WP: https://wordpress.org/plugins/advanced-lazy-load/
Jeśli to główna strona to trzeba popracować nad wielkością zdjęć (maksymalna kompresja, przy stratach jak najmniej widocznych), odpowiednim formatem (jpg do zdjęć, png do grafik), dobieraniem odpowiedniej rozdzielczości do ekranu (skalowaniem) – na pewno pomoże jeśli włączysz też cachowanie: https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
Pokaż stronę to podpowiem Ci jak można było by podkręcić ładowanie zdjęć 😉
Może być na: m.calik@delante.pl
Dzięki 😉
Jako background nie możesz dać opisów alternatywnych (alt) – screen readery nie czytają zdjęć w tle (bo to w końcu tylko zdjęcie w tle) – możesz spróbować nadać tytuł dla div, który obejmuje ten img background. A jeśli to duży i znaczący element strony to ja bym nie robił go jako background tylko wyeksponował jako normalny (zoptymalizowany pod seo) obrazek.
witajcie czy opisując zdjęcia mogę zrobić tak :
fotograf_ślubny-fotografia-fashion-fotografia_reklamowa-zdjęcia_weselne-modelka-fotograf-AndrzejJarekStudio
dotychczas stosowałem tylko _ (ukosnik dolny)
tak jak na stronie http://www.andrzejjarek.pl
Najlepiej stosować „‐” (hyphen) do rozdzielenia wyrazów w nazwach plików.
Podkreślnik dolny „_” (underscore) dla botów będzie oznaczać znak zerowy, czyli wyrazy z takiego adresu się połączą.
To samo tyczy się budowy linkowania wewnętrznego: lepiej stosować „-” niż „_”.
dzięki za informacje 🙂
a czy np. dodawać lind do zdjęcia? bo wtedy jak najeżdżam na zdjęcie to już nie wyświetla mi się nazwa zdjęcia
ja mam tak dodane jak tu http://www.adriangudewicz.pl czy tak będzie dobrze?
Bardzo ciekawy i praktyczny artykuł. Okazuje się, że nawet rodzaj znaków interpunkcyjnych ma wpływ na pozycjonowanie strony – duże zaskoczenie.
To są rzeczywiście fajne sprawy i wiem, że nasze koleżanki z działu zajmującego się social media korzystają z tego typu trików, ale na stronę internetową chcemy już profesjonalne, oryginalne projekty tylko dla nas. Chodzi przecież o wizerunek olbrzymiej marki, na tym nie można oszczędzać. Korzystamy z usług Orchidea Group. Ich studio graficzne ma już naprawdę dobrą opinię i my się możemy do tego dołożyć. Dla sporej, ambitnej firmy wysoka jakość jest najważniejszą wartością.