Metadane obrazu w Grafice Google

Gdy określisz metadane obrazu, w Grafice Google będą mogły się wyświetlać dodatkowe informacje, np. o twórcy i dozwolonych sposobach wykorzystania obrazu. Na przykład podanie informacji o licencji może sprawić, że obraz będzie kwalifikować się do wyświetlania plakietki Na licencji. Zawiera ona link do licencji i dodatkowych informacji o tym, jak można korzystać z obrazu.

Metadane obrazu 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 o metadanych obrazu, dodaj uporządkowane dane lub metadane zdjęć IPTC do wszystkich obrazów w witrynie. 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.

Metadane zdjęcia możesz dodać do obrazu na 2 sposoby. Aby móc skorzystać z rozszerzeń, np. uzyskać plakietkę Na licencji, musisz dostarczyć Google 1 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 o metadanych obrazu 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. Postępuj zgodnie z Ogólnymi wytycznymi dotyczącymi uporządkowanych danych.
  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 1 obrazem.

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",
      "creditText": "Labrador PhotoLab",
      "creator": {
        "@type": "Person",
        "name": "Brixton Brownstone"
       },
      "copyrightNotice": "Clara Kent"
    }
    </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>
    <p><b>Photographer</b>: Brixton Brownstone</p>
    <p><b>Copyright</b>: Clara Kent</p>
    <p><b>Credit</b>: Labrador PhotoLab</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>
    <span rel="schema:creator">
      <span typeof="schema:Person">
        <span property="schema:name" content="Brixton Brownstone"></span>
      </span>
    </span>
    <span property="copyrightNotice">Clara Kent</span><br />
    <span property="creditText">Labrador PhotoLab</span><br />
  </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" />
      <span itemprop="license"> https://example.com/license</span><br />
      <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
      <span itemprop="creator" itemtype="https://schema.org/Person" itemscope>
        <meta itemprop="name" content="Brixton Brownstone" />
      </span>
      <span itemprop="copyrightNotice">Clara Kent</span>
      <span itemprop="creditText">Labrador PhotoLab</span>
    </div>
  </body>
</html>
Pojedynczy obraz w tagu srcset

Oto przykład strony z 1 obrazem 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",
      "creditText": "Labrador PhotoLab",
      "creator": {
        "@type": "Person",
        "name": "Brixton Brownstone"
       },
      "copyrightNotice": "Clara Kent"
    }
    </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>
    <p><b>Photographer</b>: Brixton Brownstone</p>
    <p><b>Copyright</b>: Clara Kent</p>
    <p><b>Credit</b>: Labrador PhotoLab</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">
      <span property="license">https://example.com/license</span>
      <span property="acquireLicensePage">https://example.com/how-to-use-my-images</span>
      <span rel="schema:creator">
        <span typeof="schema:Person">
          <span property="schema:name" content="Brixton Brownstone"></span>
        </span>
      </span>
      <span property="copyrightNotice">Clara Kent</span>
      <span property="creditText">Labrador PhotoLab</span>
   </div>
  </body>
</html>

Mikrodane


<html>
  <head>
    <title>Black labrador puppy</title>
  </head>
  <body>
    <div itemscope itemtype="https://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">
      <span itemprop="license">https://example.com/license</span>
      <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
      <span itemprop="creator" itemtype="https://schema.org/Person" itemscope>
        <meta itemprop="name" content="Brixton Brownstone" />
      </span>
      <span itemprop="copyrightNotice">Clara Kent</span>
      <span itemprop="creditText">Labrador PhotoLab</span>
   </div>
  </body>
</html>
Wiele obrazów na stronie

Oto przykład strony z wieloma obrazami.

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",
      "creditText": "Labrador PhotoLab",
      "creator": {
        "@type": "Person",
        "name": "Brixton Brownstone"
       },
      "copyrightNotice": "Clara Kent"
    },
   {
      "@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",
      "creditText": "Labrador PhotoLab",
      "creator": {
        "@type": "Person",
        "name": "Brixton Brownstone"
       },
      "copyrightNotice": "Clara Kent"
    }]
    </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>
    <p><b>Photographer</b>: Brixton Brownstone</p>
    <p><b>Copyright</b>: Clara Kent</p>
    <p><b>Credit</b>: Labrador PhotoLab</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>
    <p><b>Photographer</b>: Brixton Brownstone</p>
    <p><b>Copyright</b>: Clara Kent</p>
    <p><b>Credit</b>: Labrador PhotoLab</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>
      <span property="acquireLicensePage">https://example.com/how-to-use-my-images</span>
      <span rel="schema:creator">
        <span typeof="schema:Person">
          <span property="schema:name" content="Brixton Brownstone"></span>
        </span>
      </span>
      <span property="copyrightNotice">Clara Kent</span>
      <span property="creditText">Labrador PhotoLab</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" />
      <span property="license"> https://example.com/license</span>
      <span property="acquireLicensePage">https://example.com/how-to-use-my-images</span>
      <span rel="schema:creator">
        <span typeof="schema:Person">
          <span property="schema:name" content="Brixton Brownstone"></span>
        </span>
      </span>
      <span property="copyrightNotice">Clara Kent</span>
      <span property="creditText">Labrador PhotoLab</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" />
      <span itemprop="license"> https://example.com/license</span>
      <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
      <span itemprop="creator" itemtype="https://schema.org/Person" itemscope>
        <meta itemprop="name" content="Brixton Brownstone" />
      </span>
      <span itemprop="copyrightNotice">Clara Kent</span><br />
      <span itemprop="creditText">Labrador PhotoLab</span><br />
    </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" />
      <span itemprop="license"> https://example.com/license</span>
      <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
      <span itemprop="creator" itemtype="https://schema.org/Person" itemscope>
        <meta itemprop="name" content="Brixton Brownstone" />
      </span>
      <span itemprop="copyrightNotice">Clara Kent</span>
      <span itemprop="creditText">Labrador PhotoLab</span>
    </div>
  </body>
</html>

Definicje typów uporządkowanych danych

Pełną definicję typu ImageObject znajdziesz na schema.org/ImageObject. Właściwości obsługiwane przez Google:

Właściwości wymagane
contentUrl

URL

Adres URL rzeczywistej zawartości graficznej. Aby określić, do którego obrazu odnoszą się metadane zdjęcia, Google używa właściwości contentUrl.

Może to być creator, creditText, copyrightNotice lub license.

Oprócz właściwości contentUrl musisz też uwzględnić jedną z tych właściwości:

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ć
creator

Organization lub Person

Twórca obrazu. Zazwyczaj jest to fotograf, ale może to być firma lub organizacja (w stosownych przypadkach).

creator.name

Text

Imię i nazwisko twórcy.

creditText

Text

Imię i nazwisko osoby lub nazwa organizacji przypisywane do obrazu, gdy zostaje opublikowany.

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

Jeśli do wskazania obrazu 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ę).

Metadane zdjęć w standardzie IPTC

Możesz także umieścić metadane zdjęć w standardzie IPTC bezpośrednio w obrazie. Zalecamy używanie odpowiedniego oprogramowania do zarządzania metadanymi obrazu. Poniższa tabela zawiera właściwości wyodrębniane przez Google:

Właściwości zalecane
Powiadomienie o prawach autorskich

Powiadomienie o prawach autorskich dotyczące zgłaszania praw własności intelektualnej do tego zdjęcia. Wskazuje obecnego właściciela praw autorskich do zdjęcia.

Twórca

Twórca obrazu. Zwykle jest to imię i nazwisko fotografa, ale może to być nazwa firmy lub organizacji (w stosownych przypadkach).

Informacje o autorze/źródle obrazu

Imię i nazwisko osoby lub nazwa organizacji przypisywane do obrazu, gdy zostaje opublikowany.

Typ źródła cyfrowego

Typ źródła cyfrowego użytego do utworzenia obrazu. Użyj jednych z tych metadanych IPTC NewsCodes:

  • trainedAlgorithmicMedia: obraz został utworzony przy użyciu modelu pobranego z próbkowanych treści.
  • compositeSynthetic: obraz składa się z elementów syntetycznych.
  • algorithmicMedia: obraz został utworzony wyłącznie za pomocą algorytmu, bez oparcia na próbkach danych treningowych (na przykład obraz utworzony przez oprogramowanie za pomocą wzoru matematycznego)
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ć
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).

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ę).

Rozwiązywanie problemów

Jeśli masz problemy z implementacją metadanych obrazu w Grafice Google, skorzystaj z tych zasobów.

Czy można usunąć metadane obrazu?

Usunięcie metadanych obrazu może zmniejszyć rozmiar pliku obrazu, dzięki czemu strony internetowe wczytują się szybciej. Należy jednak robić to z rozwagą, ponieważ w niektórych jurysdykcjach usunięcie metadanych może być nielegalne. Metadane obrazów są w internecie źródłem informacji o prawach autorskich i licencjach. Google zaleca zachowanie przynajmniej najważniejszych metadanych związanych z informacjami o prawach do obrazu i identyfikacją. W miarę możliwości postaraj się więc zachować przynajmniej te pola: creator (twórca), credit line (informacja o autorze) oraz copyright notice (informacja o prawach autorskich).