Grafika Google – sprawdzone metody

Grafika Google umożliwia wizualne wyszukiwanie informacji w internecie. Użytkownicy mogą szybko zgłębiać informacje dzięki szerszemu kontekstowi wokół obrazów, który obejmuje nowe elementy, takie jak podpisy obrazów, uwydatnione plakietki i wyniki AMP. 

Dzięki dodaniu kontekstu wyniki mogą stać się znacznie bardziej przydatne dla użytkownika, czego efektem będzie wyższa jakość ruchu przychodzącego do Twojej witryny. Możesz ułatwić użytkownikom znajdowanie informacji, optymalizując swoje obrazy i strony pod kątem Grafiki Google. Zastosuj nasze wskazówki, by zwiększyć prawdopodobieństwo, że Twoje materiały pojawią się w wynikach wyszukiwania Grafiki Google.

Rezygnacja z wbudowanych linków w wyszukiwarce grafiki

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

Aby zrezygnować z wbudowanych linków:

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

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

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

Zapewnij użytkownikom doskonałe wrażenia

Aby Twoje treści były bardziej widoczne w Grafice Google, zadbaj o wygodę i wrażenia użytkowników: twórz strony z myślą o użytkownikach, a nie wyszukiwarkach. Oto kilka porad:

  • Dostarcz dobry kontekst: treści wizualne powinny być związane z tematem strony. Sugerujemy umieszczanie obrazów tylko tam, gdzie wzbogacają one stronę o coś oryginalnego. Zdecydowanie odradzamy tworzenie stron, na których ani obrazy, ani tekst nie są treściami oryginalnymi.
  • Umieść 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.
  • Nie umieszczaj ważnego tekstu w obrazach: unikaj umieszczania tekstu w obrazach – zwłaszcza ważnych elementów, takich jak nagłówki stron i pozycje menu – ponieważ nie będą one wtedy dostępne dla wszystkich użytkowników (a narzędzia do tłumaczenia stron nie przetwarzają obrazów). Aby zapewnić maksymalną dostępność treści, umieść cały tekst w kodzie HTML i dodaj tekst alternatywny dla obrazów. 
  • Twórz strony z wysokiej jakości informacjami: dla Grafiki Google jakość zawartości strony jest ważna tak samo, jak treść wizualna – dostarcza kontekst i zwiększa przydatność wyniku. Zawartość strony może posłużyć do wygenerowania fragmentu tekstu towarzyszącego zdjęciu, a Google uwzględnia jakość zawartości strony podczas ustalania pozycji obrazu na liście wyników.
  • Twórz strony dostosowane do różnych urządzeń: Grafika Google jest używana częściej na urządzeniach mobilnych niż na komputerach. Dlatego ważne jest zaprojektowanie strony z uwzględnieniem wszystkich typów i rozmiarów urządzeń. Skorzystaj z narzędzia do testowania optymalizacji mobilnej, by sprawdzić, jak strony działają na urządzeniach mobilnych, i dowiedzieć się, co warto poprawić.
  • Utwórz dobrą strukturę adresu URL dla obrazów: do interpretowania obrazu Google używa ścieżki adresu URL i nazwy pliku. Pomyśl o uporządkowaniu treści w taki sposób, by adresy URL obrazów były skonstruowane logicznie.

Sprawdź tytuł i opis strony

Grafika Google automatycznie generuje tytuł 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ć, który wynik kliknąć.

Używamy wielu różnych źródeł takich informacji, łącznie z danymi opisowymi w tagach tytułu i metatagach każdej strony. 

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

Dodaj dane strukturalne

Jeśli dostarczysz dane strukturalne, Grafika Google może wyświetlać Twoje obrazy jako wyniki z elementami rozszerzonymi (w tym z uwydatnioną plakietką), które dostarczają użytkownikom istotne informacje o Twojej stronie i mogą podnieść jakość ruchu przychodzącego do Twojej witryny. Grafika Google obsługuje dane strukturalne dla tych elementów:

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

Zoptymalizuj szybkość działania strony

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

Grafika Google wyświetla logo AMP  wskazujące użytkownikom te strony, które otwierają się szybko i bez problemów. Rozważ przekształcenie strony, na której znajduje się obraz, do formatu AMP, by przyspieszyć jej otwieranie (stroną docelową ma być strona otwierana po kliknięciu wyniku w Grafice Google).

Przeanalizuj swoją witrynę za pomocą narzędzia PageSpeed Insights i wejdź na naszą stronę Podstawy tworzenia witryn, by poznać sprawdzone metody i techniki przyspieszające działanie witryn.

Dodaj dobrej jakości zdjęcia

Zdjęcia o wysokiej jakości robią na użytkownikach lepsze wrażenie niż obrazy rozmyte i niewyraźne. Lepiej wyglądają też ich miniatury, dzięki czemu zwiększa się prawdopodobieństwo, że użytkownik wejdzie na Twoją stronę.

Dołącz do obrazów opisowe tytuły, podpisy, nazwy plików i tekst

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 związanych z tematem obrazu. 

Również nazwa pliku może podpowiedzieć Google temat zdjęcia. Na przykład mój-nowy-czarny-kotek.jpg to lepsza nazwa niż IMG00023.JPG.

Podaj opisowy tekst alternatywny

Tekst alternatywny (tekst opisujący obraz) pomaga osobom, które nie widzą obrazów na stronach – między innymi użytkownikom czytników ekranu i mającym wolne połączenia internetowe.

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

Postaraj się, by 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 (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="szczeniak.jpg"/>
  • Nieprawidłowo (upychanie słów kluczowych): <img src="szczeniak.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="szczeniak.jpg" alt="szczeniak"/>
  • Najlepiej: <img src="szczeniak.jpg" alt="aportujące szczenię dalmatyńczyka"/> 

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

Pomóż nam znaleźć wszystkie Twoje obrazy

Użyj znaczników semantycznych dla obrazów

Google analizuje kod HTML Twoich stron w celu indeksowania obrazów, ale nie obejmuje to obrazów CSS.

  • Prawidłowo: <img src="szczeniak.jpg" alt="Szczenię rasy golden retriever" />
  • Nieprawidłowo: <div style="background-image:url(szczeniak.jpg)">Szczeniak rasy golden retriever</div>

Użyj mapy witryny z obrazami

Obrazy są ważnym źródłem informacji o zawartości strony. Dodając informacje do mapy witryny z obrazami, możesz dostarczyć Google więcej informacji o obrazach i adresy URL obrazów, których moglibyśmy nie znaleźć w inny sposób.

Mapy witryn z obrazami mogą zawierać adresy URL z innych domen – różnią się tym od zwykłych map witryn, dla których obowiązuje ograniczenie do jednej domeny. Dzięki temu webmasterzy mogą hostować obrazy w sieciach dystrybucji treści (CDN). Zachęcamy do zweryfikowania nazwy domeny CDN w Search Console – gdy to zrobisz, będziemy mogli informować Cię o błędach indeksowania, które wykryjemy.

Obsługiwane formaty obrazów

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

Możesz też wstawiać obrazy jako identyfikatory URI danych. Identyfikatory URI danych pozwalają wstawiać pliki (np. obrazy) w treści za pomocą parametru 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 Podstawy tworzenia witryn.

Obrazy elastyczne

Elastyczne strony internetowe zwiększają ogólnie komfort obsługi, ponieważ użytkownicy mogą wygodnie z nich korzystać na wielu różnych urządzeniach. Sprawdzone metody stosowania obrazów w witrynach znajdziesz w sekcji Obrazy na stronie Podstawy tworzenia witryn.

Obrazy elastyczne na stronach internetowych określa się za pomocą atrybutu <img srcset> lub elementu <picture>, jednak niektóre przeglądarki i roboty nie obsługują tych atrybutów. Zalecamy, by przy korzystaniu z atrybutu img src zawsze stosować zastępczy adres URL.

Atrybut srcset umożliwia wskazywanie różnych wersji tego samego obrazu do różnych rozmiarów ekranu.

Przykład: <img srcset>

<img srcset="przykład-320w.jpg 320w,
             przykład-480w.jpg 480w,
             przykład-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="przykład-800w.jpg" alt="witryna elastyczna!!">

Tag <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.

Zalecamy, by przy korzystaniu z tagu picture stosować zawsze atrybut src z elementem zastępczym img zgodnie z tym formatem:

Przykład: <picture>

<picture>
  <source type="image/svg+xml" srcset="piramida.svg">
  <source type="image/webp" srcset="piramida.webp"> 
  <img src="piramida.png" alt="duży obraz PNG...">
</picture>

Zoptymalizuj witrynę pod kątem SafeSearch

SafeSearch to ustawienie na Twoim koncie, które określa, czy obrazy, filmy i witryny dla dorosłych mają być wyświetlane, czy blokowane w wynikach wyszukiwania Google. Pomagaj wyszukiwarce Google w poznaniu charakteru Twoich obrazów, by w razie potrzeby mogła stosować do nich ustawienia SafeSearch.

Umieść wszystkie obrazy tylko dla dorosłych w jednej lokalizacji URL

Jeśli witryna zawiera obrazy tylko dla dorosłych, zdecydowanie zalecamy zebranie ich razem i oddzielenie od reszty obrazów. Na przykład: http//www.example.com/dladorosłych/obraz.jpg. 

Dodaj metadane do stron dla dorosłych

Nasze algorytmy używają wielu sygnałów do podejmowania decyzji, czy odfiltrować z wyników obraz lub całą stronę, gdy użytkownik ma włączony filtr SafeSearch. W przypadku obrazów niektóre z tych sygnałów są generowane przez systemy uczące się, ale algorytmy SafeSearch zwracają uwagę również na prostsze rzeczy, takie jak miejsce i kontekst wcześniejszego użycia obrazu.

Jednym z najsilniejszych sygnałów jest samodzielne oznaczenie stron dla dorosłych. Jeśli publikujesz treści dla dorosłych, zalecamy dodanie do stron jednego z tych metatagów:

<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />

Wielu użytkowników woli, by wyniki wyszukiwania nie zawierały treści dla dorosłych (zwłaszcza wtedy, gdy tego samego urządzenia używają dzieci). Umieszczając jeden z tych metatagów, pomożesz sprawić, że użytkownicy będą bardziej zadowoleni, bo nie zobaczą tego, czego nie chcą widzieć. 

Jeszcze tylko jedno…

Przeczytaj nasz podręcznik SEO dla początkujących, w którym znajdziesz wiele informacji pomagających uzyskać wyższą pozycję w wynikach wyszukiwania. Jeśli masz pytania, zadaj je na Forum pomocy dla webmasterów

Czy to było pomocne?
Jak możemy ją poprawić?