Licencja obrazu w Grafice Google

Gdy określisz informacje o licencji na obrazy w swojej witrynie, ich miniatury mogą być wyświetlane w Grafice Google z plakietką Na licencji. Informuje ona użytkowników, że do tego obrazu są dostępne informacje o licencji, i zawiera link do licencji w przeglądarce obrazów, gdzie można znaleźć szczegółowe informacje na temat dozwolonego korzystania z obrazu.

Plakietka Na licencji w Grafice Google

Dostępność funkcji

Ta funkcja jest dostępna na urządzeniach mobilnych i komputerach oraz we wszystkich regionach i językach, w których działa wyszukiwarka Google.

Przygotowanie stron internetowych i obrazów

Aby mieć pewność, że Google może wykrywać i indeksować Twoje obrazy:

Dodawanie uporządkowanych danych lub metadanych zdjęć IPTC

Aby poinformować Google, które obrazy są objęte licencją, dodaj do każdego z nich uporządkowane dane lub metadane zdjęć IPTC. Jeśli masz ten sam obraz na wielu stronach, dodaj uporządkowane dane lub metadane zdjęć IPTC do każdego obrazu na każdej stronie, na której się pojawia.

Informacje o licencji możesz dodać do obrazu na dwa sposoby. Aby móc uzyskać plakietkę Na licencji, musisz dostarczyć Google jedną wersję informacji, wykorzystując dowolną z tych metod:

  • Uporządkowane dane – tworzą powiązanie między obrazem a stroną, na której pojawia się on ze znacznikiem. Musisz dodać uporządkowane dane dotyczące każdego wystąpienia obrazu, nawet jeśli jest to ten sam obraz.
  • Metadane zdjęć w standardzie IPTC – są umieszczane w samym obrazie, więc obraz i metadane można bezpiecznie przenosić z jednej strony na inną. Metadane zdjęć w standardzie IPTC wystarczy umieścić w danym obrazie tylko raz.

Oto przykład, w jaki sposób informacje o licencji mogą pojawiać się w Grafice Google:

Objaśnienia pokazujące, które części metadanych licencji mogą być wyświetlane w Grafice Google
  1. Adres URL strony opisującej licencję, która reguluje użycie obrazu. Określ te informacje za pomocą właściwości Schema.org license lub podaj je w polu IPTC Web Statement of Rights.
  2. Adres URL strony, na której użytkownik może dowiedzieć się, gdzie znajdzie informacje na temat licencjonowania tego obrazu. Określ te informacje za pomocą właściwości Schema.org acquireLicensePage lub w polu IPTC Licensor URL (w sekcji Licensor).

Uporządkowane dane

Jednym ze sposobów poinformowania Google, że dany obraz jest objęty licencją, jest dodanie pól uporządkowanych danych. Uporządkowane dane to standardowy format udostępniania informacji o stronie i klasyfikowania jej zawartości. Jeśli dopiero zaczynasz, dowiedz się, jak działają uporządkowane dane.

Poniżej omawiamy sposób tworzenia, testowania i udostępniania uporządkowanych danych. Szczegółowe instrukcje dodawania uporządkowanych danych do strony internetowej znajdziesz w ćwiczeniach z programowania poświęconych uporządkowanym danym.

  1. Dodaj wymagane właściwości. Dowiedz się, w którym miejscu na stronie umieścić uporządkowane dane w zależności od używanego formatu.
  2. Przestrzegaj wskazówek.
  3. Zweryfikuj kod za pomocą testu wyników z elementami rozszerzonymi.
  4. Możesz wdrożyć kilka stron z uporządkowanymi danymi i dzięki narzędziu do sprawdzania adresów URL zobaczyć, jak Google je odczytuje. Upewnij się, że Twoja strona jest dostępna dla Google i nie jest blokowana przez plik robots.txt lub tag noindex ani nie wymaga logowania. Jeśli strona wygląda dobrze, możesz poprosić Google o ponowne zindeksowanie adresów URL.
  5. Aby na bieżąco informować Google o przyszłych zmianach, prześlij mapę witryny. Możesz zautomatyzować ten proces za pomocą interfejsu Search Console Sitemap API.

Przykłady

Pojedynczy obraz

Oto przykład strony z jednym obrazem na licencji.

JSON-LD


<html>
  <head>
    <title>Black labrador puppy</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "ImageObject",
      "contentUrl": "https://example.com/photos/1x1/black-labrador-puppy.jpg",
      "license": "https://example.com/license",
      "acquireLicensePage": "https://example.com/how-to-use-my-images"
    }
    </script>
  </head>
  <body>
    <img alt="Black labrador puppy" src="https://example.com/photos/1x1/black-labrador-puppy.jpg">
    <p><a href="https://example.com/license">License</a></p>
    <p><a href="https://example.com/how-to-use-my-images">How to use my images</a></p>
  </body>
</html>

RDFa


<html>
  <head>
    <title>Black labrador puppy</title>
  </head>
  <body>
  <div vocab="https://schema.org/" typeof="ImageObject">
    <img alt="Black labrador puppy" property="contentUrl" src="https://example.com/photos/1x1/black-labrador-puppy.jpg" /><br />
    <span property="license"> https://example.com/license</span><br />
    <span property="acquireLicensePage">https://example.com/how-to-use-my-images</span>
  </div>
  </body>
</html>

Mikrodane


<html>
  <head>
    <title>Black labrador puppy</title>
  </head>
  <body>
    <div itemscope itemtype="https://schema.org/ImageObject">
    <img alt="Black labrador puppy" itemprop="contentUrl" src="https://example.com/photos/1x1/black-labrador-puppy.jpg" /><br />
    <span itemprop="license"> https://example.com/license</span><br />
    <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
    </div>
  </body>
</html>
Pojedynczy obraz w tagu srcset

Oto przykład strony z 1 obrazem na licencji w tagu srcset.

JSON-LD


<html>
  <head>
    <title>Black labrador puppy</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "ImageObject",
      "contentUrl": "https://example.com/photos/320/black-labrador-puppy-800w.jpg",
      "license": "https://example.com/license",
      "acquireLicensePage": "https://example.com/how-to-use-my-images"
    }
    </script>
  </head>
  <body>
    <img srcset="https://example.com/photos/320/black-labrador-puppy-320w.jpg 320w,
                   https://example.com/photos/480/black-labrador-puppy-480w.jpg 480w,
                   https://example.com/photos/800/black-labrador-puppy-800w.jpg 800w"
           sizes="(max-width: 320px) 280px,
                  (max-width: 480px) 440px,
                  800px"
           src="https://example.com/photos/320/black-labrador-puppy-800w.jpg"
           alt="Black labrador puppy"><br />
    <p><a href="https://example.com/license">License</a></p>
    <p><a href="https://example.com/how-to-use-my-images">How to use my images</a></p>
  </body>
</html>

RDFa


<html>
  <head>
    <title>Black labrador puppy</title>
  </head>
  <body>
    <div vocab="https://schema.org/" typeof="ImageObject">
      <img property="contentUrl"
           srcset="https://example.com/photos/320/black-labrador-puppy-320w.jpg 320w,
                   https://example.com/photos/480/black-labrador-puppy-480w.jpg 480w,
                   https://example.com/photos/800/black-labrador-puppy-800w.jpg 800w"
           sizes="(max-width: 320px) 280px,
                  (max-width: 480px) 440px,
                  800px"
           src="https://example.com/photos/320/black-labrador-puppy-800w.jpg"
           alt="Black labrador puppy"><br />
      <span property="license"> https://example.com/license</span><br />
      <span property="acquireLicensePage">https://example.com/how-to-use-my-images</span>
   </div>
  </body>
</html>

Mikrodane


<html>
  <head>
    <title>Black labrador puppy</title>
  </head>
  <body>
    <div itemscope itemtype="http://schema.org/ImageObject">
      <img itemprop="contentUrl"
           srcset="https://example.com/photos/320/black-labrador-puppy-320w.jpg 320w,
                   https://example.com/photos/480/black-labrador-puppy-480w.jpg 480w,
                   https://example.com/photos/800/black-labrador-puppy-800w.jpg 800w"
           sizes="(max-width: 320px) 280px,
                  (max-width: 480px) 440px,
                  800px"
           src="https://example.com/photos/320/black-labrador-puppy-800w.jpg"
           alt="Black labrador puppy"><br />
     <span itemprop="license"> https://example.com/license</span><br />
     <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
   </div>
  </body>
</html>
Wiele obrazów na stronie

Oto przykład strony z wieloma obrazami na licencji.

JSON-LD


<html>
  <head>
    <title>Photos of black labradors</title>
    <script type="application/ld+json">
    [{
      "@context": "https://schema.org/",
      "@type": "ImageObject",
      "contentUrl": "https://example.com/photos/1x1/black-labrador-puppy.jpg",
      "license": "https://example.com/license",
      "acquireLicensePage": "https://example.com/how-to-use-my-images"
    },
   {
      "@context": "https://schema.org/",
      "@type": "ImageObject",
      "contentUrl": "https://example.com/photos/1x1/adult-black-labrador.jpg",
      "license": "https://example.com/license",
      "acquireLicensePage": "https://example.com/how-to-use-my-images"
    }]
    </script>
  </head>
  <body>
    <h2>Black labrador puppy</h2>
    <img alt="Black labrador puppy" src="https://example.com/photos/1x1/black-labrador-puppy.jpg">
    <p><a href="https://example.com/license">License</a></p>
    <p><a href="https://example.com/how-to-use-my-images">How to use my images</a></p>
    <h2>Adult black labrador</h2>
    <img alt="Adult black labrador" src="https://example.com/photos/1x1/adult-black-labrador.jpg">
    <p><a href="https://example.com/license">License</a></p>
    <p><a href="https://example.com/how-to-use-my-images">How to use my images</a></p>
  </body>
</html>

RDFa


<html>
  <head>
    <title>Photos of black labradors</title>
  </head>
  <body>
  <div vocab="https://schema.org/" typeof="ImageObject">
    <h2 property="name">Black labrador puppy</h2>
    <img alt="Black labrador puppy" property="contentUrl" src="https://example.com/photos/1x1/black-labrador-puppy.jpg" /><br />
    <span property="license"> https://example.com/license</span><br />
    <span property="acquireLicensePage">https://example.com/how-to-use-my-images</span>
  </div>
  <br />
  <div vocab="https://schema.org/" typeof="ImageObject">
  <h2 property="name">Adult black labrador</h2>
  <img alt="Adult black labrador" property="contentUrl" src="https://example.com/photos/1x1/adult-black-labrador.jpg" /><br />
  <span property="license"> https://example.com/license</span><br />
  <span property="acquireLicensePage">https://example.com/how-to-use-my-images</span>
  </div>
  </body>
</html>

Mikrodane


<html>
  <head>
    <title>Photos of black labradors</title>
  </head>
  <body>
    <div itemscope itemtype="https://schema.org/ImageObject">
    <h2 itemprop="name">Black labrador puppy</h2>
    <img alt="Black labrador puppy" itemprop="contentUrl" src="https://example.com/photos/1x1/black-labrador-puppy.jpg" /><br />
    <span itemprop="license"> https://example.com/license</span><br />
    <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
    </div>
    <br />
    <h2 itemprop="name">Adult black labrador</h2>
    <div itemscope itemtype="https://schema.org/ImageObject">
    <img alt="Adult black labrador" itemprop="contentUrl" src="https://example.com/photos/1x1/adult-black-labrador.jpg" /><br />
    <span itemprop="license"> https://example.com/license</span><br />
    <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
    </div>
  </body>
</html>

Definicje typów uporządkowanych danych

Pełną definicję typu ImageObject znajdziesz na schema.org/ImageObject.

Jeśli do wskazania obrazu na licencji używasz uporządkowanych danych, musisz dołączyć do obrazu właściwość license, aby mógł być wyświetlany z plakietką Na licencji. Zalecamy również dodanie właściwości acquireLicensePage (jeśli masz tę informację).

Właściwości wymagane
contentUrl URL

Adres URL rzeczywistej zawartości graficznej. Aby określić, którego obrazu dotyczy licencja, Google używa właściwości contentUrl.

license URL

Adres URL strony opisującej licencję, która reguluje użycie obrazu. Mogą to być na przykład zamieszczone w witrynie warunki korzystania z usługi. W stosownych przypadkach może to być również licencja Creative Commons (na przykład BY-NC 4.0).

Właściwości zalecane
acquireLicensePage URL

Adres URL strony, na której użytkownik może znaleźć informacje na temat licencjonowania tego obrazu. Oto kilka przykładów:

  • Strona pobierania obrazu, na której użytkownik może wybrać określone rozdzielczości lub prawa do użytkowania
  • Ogólna strona informująca, jak można się z Tobą skontaktować

Metadane zdjęć w standardzie IPTC

Możesz także umieścić metadane zdjęć w standardzie IPTC bezpośrednio w obrazie. Aby obraz mógł być wyświetlany z plakietką Na licencji, musisz dodać pole Web Statement of Rights. Zalecamy też dodanie pola Licensor URL (jeśli masz tę informację).

Właściwości wymagane
Web Statement of Rights

Adres URL strony opisującej licencję, która reguluje użycie obrazu, i opcjonalnie informacje o innych prawach. Mogą to być na przykład zamieszczone w witrynie warunki korzystania z usługi. W stosownych przypadkach może to być również licencja Creative Commons (na przykład BY-NC 4.0).

Właściwości zalecane
Licensor URL

Adres URL strony, na której użytkownik może znaleźć informacje na temat licencjonowania tego obrazu. Licensor URL musi być właściwością obiektu Licensor, a nie obiektu graficznego. Oto kilka przykładów:

  • Strona pobierania obrazu, na której użytkownik może wybrać określone rozdzielczości
  • Ogólna strona informująca, jak można się z Tobą skontaktować

Monitorowanie wyników z elementami rozszerzonymi w Search Console

Search Console to narzędzie, które pomaga monitorować skuteczność stron w wyszukiwarce Google. Aby Twoja witryna mogła pojawiać się w wynikach wyszukiwania Google, nie musisz rejestrować jej w Search Console. Jeśli jednak to zrobisz, lepiej zrozumiesz, jak robot Google widzi Twoją witrynę i jak możesz mu ułatwić jej skanowanie. Zalecamy sprawdzenie danych w Search Console w tych przypadkach:

  1. po pierwszym wdrożeniu uporządkowanych danych,
  2. po opublikowaniu nowych szablonów lub zaktualizowaniu kodu,
  3. podczas okresowego analizowania ruchu.

Po pierwszym wdrożeniu uporządkowanych danych

Gdy Google zindeksuje Twoje strony, poszukaj problemów w odpowiednim raporcie o stanie wyników z elementami rozszerzonymi. W idealnej sytuacji powinno się pojawić więcej prawidłowych stron, a liczba błędów i ostrzeżeń nie powinna się zwiększyć. Jeśli zauważysz problemy w uporządkowanych danych:

  1. Popraw błędy.
  2. Sprawdź opublikowany adres URL, by zobaczyć, czy problem nadal występuje.
  3. Poproś o weryfikację, korzystając z raportu o stanie.

Po opublikowaniu nowych szablonów lub zaktualizowaniu kodu

Po wprowadzeniu istotnych zmian w witrynie monitoruj liczbę błędów i ostrzeżeń dotyczących uporządkowanych danych.
  • Możesz zauważyć większą liczbę błędów, jeśli wprowadzisz nowy szablon, który nie działa, lub jeśli Twoja witryna wykorzystuje istniejący szablon w nowy i nieprawidłowy sposób.
  • Jeśli okaże się, że jest mniej prawidłowych elementów (ale liczba błędów się nie zwiększyła), być może na swoich stronach nie umieszczasz już uporządkowanych danych. Aby dowiedzieć się, co jest przyczyną problemu, użyj narzędzia do sprawdzania adresów URL.

Okresowe analizowanie ruchu

Analizuj ruch w wyszukiwarce Google za pomocą raportu skuteczności. Zawarte w nim dane pokazują, jak często Twoja strona wyświetla się w wyszukiwarce jako wynik z elementami rozszerzonymi, jak często użytkownicy ją klikają i jaka jest jej średnia pozycja w wynikach wyszukiwania. Możesz też pobrać te wyniki automatycznie za pomocą interfejsu Search Console API.

Rozwiązywanie problemów

Jeśli masz problemy z implementacją licencji na obrazy w Grafice Google, skorzystaj z tych zasobów.