Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Lisensi Gambar di Google Gambar

Jika Anda menentukan informasi lisensi untuk gambar di situs Anda, gambar dapat ditampilkan dengan badge Lisensi pada thumbnail gambar di Google Gambar. Hal ini memberi tahu pengguna bahwa gambar tersebut memiliki informasi lisensi, dan memberikan link ke lisensinya di Penampil Gambar yang menyediakan detail lebih lengkap tentang cara penggunaan gambar tersebut.

Badge Lisensi di Google Gambar

Ketersediaan fitur

Fitur ini tersedia di perangkat seluler dan desktop, serta dalam semua bahasa dan di semua wilayah tempat Google Penelusuran tersedia.

Menyiapkan halaman web dan gambar

Untuk memastikan Google dapat menemukan dan mengindeks gambar:

Menambahkan data terstruktur atau metadata foto IPTC

Untuk memberi tahu Google gambar berlisensi, tambahkan data terstruktur atau metadata foto IPTC ke setiap gambar yang berlisensi di situs Anda. Jika Anda memiliki gambar yang sama di beberapa halaman, tambahkan data terstruktur atau metadata foto IPTC ke setiap gambar pada setiap halaman tersebut.

Ada dua cara untuk menambahkan informasi lisensi ke gambar. Anda hanya harus memberikan satu bentuk informasi kepada Google agar memenuhi syarat untuk mendapatkan badge Lisensi, dan cukup menggunakan salah satu metode berikut:

  • Data terstruktur: Data terstruktur merupakan keterkaitan antara gambar dan halaman yang menampilkannya dengan markup. Anda harus menambahkan data terstruktur untuk setiap kali gambar digunakan, meskipun gambarnya sama.
  • Metadata foto IPTC: Metadata foto IPTC disematkan ke dalam gambar itu sendiri. Gambar dan metadatanya tetap utuh meskipun berpindah dari satu halaman ke halaman lain. Anda hanya perlu menyematkan metadata foto IPTC sekali per gambar.

Diagram berikut menunjukkan bagaimana informasi lisensi dapat dimunculkan di Google Gambar:

Keterangan yang menunjukkan bagian metadata lisensi yang mungkin ditampilkan di Google Gambar
  1. URL ke halaman yang menjelaskan lisensi yang mengatur penggunaan gambar. Tentukan informasi ini dengan properti license Schema.org atau kolom IPTC Web Statement of Rights.
  2. URL ke halaman yang menjelaskan tempat pengguna bisa menemukan informasi tentang cara mendapatkan lisensi untuk menggunakan gambar tersebut. Tentukan informasi ini dengan properti acquireLicensePage Schema.org atau kolom Licensor URL IPTC (milik Licensor).

Data terstruktur

Salah satu cara memberi tahu Google bahwa suatu gambar berlisensi adalah dengan menambahkan kolom data terstruktur. Data terstruktur adalah format terstandarisasi untuk memberikan informasi tentang suatu halaman dan mengelompokkan kontennya. Jika Anda baru mengenal data terstruktur, Anda dapat mempelajari lebih lanjut cara kerja data terstruktur.

Berikut adalah ringkasan tentang cara membuat, menguji, dan merilis data terstruktur. Untuk panduan langkah demi langkah tentang cara menambahkan data terstruktur ke halaman web, lihat codelab data terstruktur.

  1. Tambahkan properti wajib. Berdasarkan format yang Anda gunakan, pelajari tempat menyisipkan data terstruktur di halaman.
  2. Ikuti panduan.
  3. Validasi kode Anda menggunakan Alat Pengujian Hasil Kaya.
  4. Deploy beberapa halaman yang menyertakan data terstruktur dan gunakan Alat Inspeksi URL untuk menguji cara Google melihat halaman tersebut. Pastikan halaman Anda dapat diakses oleh Google dan tidak diblokir oleh file robots.txt, tag noindex, atau persyaratan login. Jika halaman tidak bermasalah, Anda dapat meminta Google meng-crawl ulang URL Anda.
  5. Agar Google tetap mengetahui setiap perubahan pada masa mendatang, sebaiknya Anda mengirimkan peta situs. Anda dapat mengotomatiskan proses ini dengan Search Console Sitemap API.

Contoh

Satu gambar

Berikut contoh halaman dengan satu gambar berlisensi.

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>

Microdata


<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>
Satu gambar dalam tag srcset

Berikut adalah contoh halaman dengan satu gambar berlisensi dalam tag 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>

Microdata


<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>
Beberapa gambar pada satu halaman

Berikut adalah contoh halaman dengan beberapa gambar berlisensi.

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>

Microdata


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

Definisi jenis data terstruktur

Definisi lengkap ImageObject tersedia di schema.org/ImageObject.

Jika menggunakan data terstruktur untuk menentukan gambar berlisensi, Anda harus menyertakan properti license agar gambar Anda memenuhi syarat untuk ditampilkan dengan badge Lisensi. Sebaiknya tambahkan juga properti acquireLicensePage jika Anda memiliki informasi tersebut.

Properti wajib
contentUrl

URL

URL ke konten gambar yang sebenarnya. Google menggunakan contentUrl untuk menentukan gambar mana yang terkait dengan lisensi tertentu.

license

URL

URL ke halaman yang menjelaskan lisensi yang mengatur penggunaan gambar. Misalnya, halaman dapat berupa halaman persyaratan dan ketentuan yang Anda miliki di situs Anda. Jika ada, halaman ini juga dapat berupa halaman Lisensi Creative Commons (misalnya, BY-NC 4.0).

Properti yang direkomendasikan
acquireLicensePage

URL

URL ke halaman tempat pengguna bisa menemukan informasi tentang cara mendapatkan lisensi untuk menggunakan gambar tersebut. Berikut ini beberapa contohnya:

  • Halaman penyelesaian izin pemakaian gambar tempat pengguna dapat memilih resolusi atau hak penggunaan yang diinginkan
  • Halaman umum yang menjelaskan cara menghubungi Anda

Metadata foto IPTC

Atau, Anda dapat menyematkan metadata foto IPTC langsung dalam gambar. Anda harus menyertakan kolom Web Statement of Rights agar gambar Anda memenuhi syarat untuk ditampilkan dengan badge lisensi. Sebaiknya tambahkan juga kolom Licensor URL jika Anda memiliki informasi tersebut.

Properti wajib
Web Statement of Rights

URL ke halaman yang menjelaskan lisensi yang mengatur penggunaan gambar, dan informasi hak lainnya (opsional). Misalnya, halaman dapat berupa halaman persyaratan dan ketentuan yang Anda miliki di situs Anda. Jika ada, halaman ini juga dapat berupa halaman Lisensi Creative Commons (misalnya, BY-NC 4.0).

Properti yang direkomendasikan
Licensor URL

URL ke halaman tempat pengguna bisa menemukan informasi tentang cara mendapatkan lisensi untuk menggunakan gambar tersebut. Licensor URL harus berupa properti objek Licensor, bukan properti objek gambar. Berikut beberapa contohnya:

  • Halaman penyelesaian izin pemakaian gambar tempat pengguna dapat memilih resolusi tertentu
  • Halaman umum yang menjelaskan cara menghubungi Anda

Memantau hasil kaya dengan Search Console

Search Console adalah alat yang dapat membantu Anda memantau performa halaman Anda di Google Penelusuran. Anda tidak perlu mendaftar ke Search Console agar halaman Anda dapat disertakan dalam hasil Google Penelusuran. Tetapi dengan mendaftar, Anda dapat memahami dan meningkatkan cara Google melihat situs Anda dengan mudah. Sebaiknya Anda memeriksa Search Console dalam kasus berikut:

  1. Setelah men-deploy data terstruktur untuk pertama kalinya
  2. Setelah merilis template baru atau memperbarui kode
  3. Menganalisis traffic secara berkala

Setelah men-deploy data terstruktur untuk pertama kalinya

Setelah Google mengindeks halaman Anda, temukan masalah menggunakan laporan status Hasil kaya yang relevan. Idealnya, akan ada peningkatan jumlah halaman yang valid, sedangkan jumlah error dan peringatan tidak berubah. Jika Anda menemukan masalah pada data terstruktur Anda:

  1. Perbaiki error.
  2. Periksa URL aktif untuk memeriksa apakah masalah terus berlanjut.
  3. Minta validasi menggunakan laporan status.

Setelah merilis template baru atau memperbarui kode Anda

Jika Anda membuat perubahan yang signifikan pada situs, pantau peningkatan error dan peringatan data terstruktur.
  • Jika terjadi peningkatan error, mungkin Anda meluncurkan template baru yang tidak berfungsi, atau situs Anda berinteraksi dengan template yang ada dengan cara baru yang salah.
  • Jika terjadi penurunan item yang valid (tidak cocok dengan peningkatan error), mungkin Anda tidak lagi menyematkan data terstruktur di halaman Anda. Gunakan Alat Inspeksi URL untuk mempelajari penyebab masalah tersebut.

Menganalisis traffic secara berkala

Analisis traffic Google Penelusuran Anda menggunakan Laporan Performa. Data akan menunjukkan seberapa sering halaman Anda muncul sebagai hasil kaya di Penelusuran, seberapa sering pengguna mengkliknya, dan posisi rata-rata halaman Anda saat muncul di hasil penelusuran. Anda juga dapat otomatis menarik hasil ini dengan Search Console API.

Pemecahan masalah

Jika Anda mengalami masalah dalam mengimplementasikan lisensi gambar di Google Gambar, berikut beberapa referensi yang dapat membantu Anda.