Sprawdzone metody dotyczące SEO w Grafice Google

Google oferuje kilka funkcji wyszukiwania i usług, które ułatwiają użytkownikom wizualne odkrywanie informacji w internecie. Są to na przykład obrazy w wynikach tekstowych, Google Discover i Grafika Google. Chociaż każda funkcja i usługa wygląda inaczej, ogólne wskazówki dotyczące wyświetlania w nich obrazów są takie same.

Ilustracja przedstawiająca obrazy w wynikach wyszukiwania Google, na karcie Obrazy i na kartach Discover

Możesz zoptymalizować wyświetlanie obrazów w wynikach wyszukiwania Google, stosując te sprawdzone metody:

  1. Pomóż nam znaleźć i zindeksować Twoje obrazy
  2. Optymalizacja stron docelowych obrazów

Pomóż nam znaleźć i zindeksować Twoje obrazy

Wymagania techniczne związane z umieszczaniem treści w wynikach wyszukiwania Google dotyczą również obrazów. Obrazy mają zupełnie inny format niż HTML, co oznacza, że obowiązują dodatkowe wymagania dotyczące ich indeksowania. Na przykład znajdowanie obrazów w witrynie działa inaczej. Od sposobu ich prezentowania zależy też, czy dany obraz w ogóle zostanie zindeksowany i czy zostaną użyte właściwe słowa kluczowe.

Używaj elementów graficznych HTML do umieszczania obrazów

Użycie standardowych elementów graficznych HTML pomaga 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.

Przykład dobrego tekstu:

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

Źle:

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

Użyj mapy witryny z obrazami

Możesz podać adres URL obrazów, których moglibyśmy nie znaleźć w inny sposób, przesyłając mapę witryny z obrazami.

Inaczej niż w zwykłych mapach witryn, w elementach <image:loc> map witryn z obrazami możesz uwzględnić adresy URL z innych domen. Pozwala to hostować obrazy w sieciach dostarczania treści (CDN). Jeśli korzystasz z sieci CDN, zachęcamy do zweryfikowania własności jej nazwy domeny w Search Console. Dzięki temu będziemy mogli informować Cię o wykrytych błędach indeksowania.

Obrazy elastyczne

Elastyczne strony internetowe zwiększają ogólny komfort obsługi, ponieważ użytkownicy mogą wygodnie z nich korzystać na wielu różnych urządzeniach. Zajrzyj do naszego przewodnika dotyczącego obrazów elastycznych, aby poznać sprawdzone metody obsługi obrazów w witrynie.

Obrazy elastyczne na stronach internetowych określa się za pomocą elementu <picture> lub atrybutu srcset elementu img, jednak niektóre przeglądarki i roboty nie obsługują tych atrybutów. Zalecamy więc podawanie też zastępczego adresu URL w atrybucie src.

Atrybut srcset umożliwia wskazywanie różnych wersji tego samego obrazu na różne rozmiary ekranu. Na przykład: 

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

Element <picture> to kontener, który służy do grupowania różnych wersji atrybutu <source> tego samego obrazu. Umożliwia on przeglądarce dobór odpowiedniego obrazu zależnie od możliwości danego urządzenia, np. gęstości pikseli i rozmiaru ekranu. Tag picture przydaje się też do używania nowych formatów obrazu z wbudowaną łagodną degradacją jakości na potrzeby klientów, które na razie nie obsługują nowych formatów.

Zgodnie z sekcją 4.8.1 standardu HTML w przypadku użycia elementu picture podaj element img z atrybutem src jako element zastępczy w następującym formacie: 

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>

Używaj obsługiwanych formatów obrazu

Wyszukiwarka Google obsługuje obrazy w tych formatach: BMP, GIF, JPEG, PNG, WebP i SVG . Dobrym pomysłem jest dodanie rozszerzenia zgodnego z typem pliku do jego nazwy.

Możesz też wstawiać obrazy jako identyfikatory URI danych. Identyfikatory URI danych pozwalają wstawiać pliki (np. obrazy) w treści za pomocą atrybutu src elementu img w postaci ciągu z kodowaniem Base64 zgodnie z tym formatem: 

<img src="data:image/svg+xml;base64,[data]">

Chociaż obrazy w treści mogą zmniejszyć liczbę żądań HTTP, używaj ich ostrożnie, bo mogą one znacznie zwiększyć rozmiar strony. Więcej informacji znajdziesz w sekcji z opisem wad i zalet obrazów w treści na naszej stronie web.dev.

Optymalizacja pod kątem szybkości i jakości

Zdjęcia o wysokiej jakości robią na użytkownikach lepsze wrażenie niż obrazy rozmyte i niewyraźne. Lepiej wyglądają też miniatury wyraźnych obrazów, dzięki czemu zwiększa się prawdopodobieństwo, że użytkownik wejdzie na Twoją stronę. 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.

Przeanalizuj swoją witrynę za pomocą narzędzia PageSpeed Insights i przeczytaj artykuł Dlaczego szybkość jest tak ważna?. aby poznać sprawdzone metody i techniki przyspieszające działanie witryn.

Optymalizacja stron docelowych obrazów

Chociaż nie jest to oczywiste, zawartość i metadane stron, na których znajduje się obraz, mogą mieć duży wpływ na sposób i miejsce pojawiania się go w wynikach wyszukiwania Google.

Sprawdź tytuł i opis strony

Wyszukiwarka Google automatycznie generuje link z tytułem i fragment tekstu, które mają jak najlepiej opisać każdy wynik i wyjaśnić jego związek z zapytaniem użytkownika. Pomaga to użytkownikowi zdecydować, czy kliknąć wynik. Oto 2 przykłady tego, jak linki z tytułem i krótkie opisy mogą wyglądać na stronie wyników wyszukiwania Google:

Ilustracja przedstawiająca tytuły i opisy w wynikach wyszukiwania obrazów

Używamy wielu różnych źródeł takich informacji, w tym informacji w tagach title i meta każdej strony.

Możesz nam pomóc poprawić jakość linku z tytułem i opisu wyświetlanych dla Twoich stron, stosując się do wytycznych Google dotyczących tytułów i krótkich opisów.

Dodaj uporządkowane dane

Jeśli dodasz uporządkowane dane, Google może wyświetlać Twoje obrazy w określonych wynikach z elementami rozszerzonymi, w tym w widocznych plakietkach w Grafice Google, które podają użytkownikom odpowiednie informacje o Twojej stronie i mogą kierować więcej ruchu do Twojej witryny.

Postępuj zgodnie z ogólnymi wytycznymi dotyczącymi uporządkowanych danych oraz z wszelkimi wskazówkami dotyczącymi konkretnego typu danych – w przeciwnym razie Twoja zawartość może nie pojawić się jako wynik z elementami rozszerzonymi w Grafice Google. W przypadku tych wszystkich typów uporządkowanych danych polem wymaganym jest atrybut obrazu – bez niego nie uzyskasz plakietki ani wyniku z elementami rozszerzonymi w Grafice Google. Oto 2 przykłady wyników z elementami rozszerzonymi w Grafice Google:

Ilustracja pokazująca, jak wyniki z elementami rozszerzonymi mogą być wyświetlane w Grafice Google

Używaj opisowych nazw plików, tytułów i tekstu alternatywnego

Google wydobywa informacje o temacie obrazu z zawartości strony, w tym z podpisów i tytułów obrazów. O ile to możliwe, umieszczaj obrazy obok związanego z nimi tekstu i na stronach odpowiadających tematowi obrazu.

Również nazwa pliku może wyraźnie podpowiedzieć Google temat obrazu. Jeśli to możliwe, używaj krótkich, ale opisowych nazw plików. Na przykład nazwa my-new-black-kitten.jpg jest lepsza niż IMG00023.JPG. W miarę możliwości unikaj używania ogólnych nazw plików, takich jak image1.jpg, pic.gif, 1.jpg. Jeśli Twoja witryna ma tysiące obrazów, warto rozważyć automatyzację nadawania im nazw. Jeśli dostosowujesz obrazy do innego języka, pamiętaj o przetłumaczeniu również nazw plików. Przestrzegaj wytycznych dotyczących kodowania adresów URL, jeśli używasz znaków innych niż łacińskie lub znaków specjalnych.

Najważniejszym atrybutem dostarczającym więcej metadanych dla obrazu jest tekst alternatywny (tekst opisujący obraz), który również usprawnia dostęp dla osób, które nie widzą obrazów na stronach internetowych. Dotyczy to również użytkowników. korzystają z czytników ekranu lub połączeń o niskiej przepustowości.

Google używa tekstu alternatywnego w połączeniu z algorytmami rozpoznawania obrazów i zawartością strony, aby rozpoznać temat obrazu. Tekst alternatywny może też posłużyć jako tekst kotwicy, gdy chcesz użyć obrazu jako linku.

Postaraj się, aby tekst alternatywny był przydatny, dostarczał dużo informacji, zawierał odpowiednie słowa kluczowe oraz pasował do zawartości strony. Nie wypełniaj atrybutów alt słowami kluczowymi (to tzw. upychanie słów kluczowych), ponieważ jest to źle odbierane przez użytkowników i może spowodować, że Twoja witryna zostanie uznana za spam.

Nieprawidłowo (brak tekstu alternatywnego):

<img src="puppy.jpg"/>

Nieprawidłowo (upychanie słów kluczowych):

<img src="puppy.jpg" alt="szczeniak pies piesek szczeniaczek szczeniaczki szczeniaki psy pieski miot retriever labrador wilczur seter pointer szczenię jack russell terrier psia karma tania karma dla psów karma dla szczeniaków"/>

Lepiej:

<img src="puppy.jpg" alt="szczeniak"/>

Najlepiej:

<img src="puppy.jpg" alt="Szczeniak dalmatyńczyka bawi się w aportowanie"/>

Weź pod uwagę również dostępność tekstu alternatywnego zgodnie ze wskazówkami W3. W przypadku elementu <img> możesz dodać atrybut alt elementu, a w przypadku wbudowanych elementów <svg> możesz użyć elementu <title>. Na przykład: 

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>

Zalecamy przetestowanie zawartości przez sprawdzenie ułatwień dostępu i użycie emulatora wolnego połączenia sieciowego.

Rezygnacja z wbudowanych linków w Grafice Google

Jeśli chcesz, możesz zrezygnować z wbudowanych linków w wynikach wyszukiwania Grafiki Google, aby na stronie z takimi wynikami nie wyświetlać obrazów w pełnym rozmiarze. Aby zrezygnować z wbudowanych linków:

  1. Gdy otrzymasz żądanie dotyczące obrazu, sprawdź w nim nagłówek HTTP strony odsyłającej.
  2. Jeśli żądanie pochodzi z domeny Google, w odpowiedzi prześlij kod stanu HTTP 200 lub kod stanu HTTP 204 bez podawania treści.

Google będzie nadal indeksować Twoją stronę i widzieć obraz, ale w wynikach wyszukiwania będzie wyświetlać miniaturę wygenerowaną podczas indeksowania. Tę rezygnację możesz zastosować w dowolnym momencie. Nie wiąże się to z koniecznością ponownego przetwarzania obrazów w witrynie. Takie zachowanie nie jest uznawane za maskowanie obrazów ani nie powoduje zastosowania ręcznych działań.

Możesz też całkowicie uniemożliwić wyświetlanie obrazu w wynikach wyszukiwania.

SafeSearch to ustawienie na kontach użytkowników Google, które określa, czy obrazy, filmy i witryny dla dorosłych mają być wyświetlane, zamazywane czy blokowane w wynikach wyszukiwania Google. Upewnij się, że Google rozumie charakter Twojej witryny, aby w razie potrzeby stosować do niej filtr SafeSearch. Więcej informacji o oznaczaniu stron na potrzeby filtra SafeSearch