How To Markup License Information On Images

When you specify license information for the images on your website’s structured data, the image can display with a Licensable badge on image thumbnails in Google Images. This tells people that license information is available for the image, and provides a link to the license in the Image Viewer, which offers more detail on how someone can use the image.

Add structured data or IPTC photo metadata

To tell Google which images are licensable, add structured data or IPTC photo metadata to each licensable image on your site. If you have the same image on multiple pages, add structured data or IPTC photo metadata to each image on each page that it appears.

There are two ways that you can add license information to your image. You only need to provide Google with one form of information to be eligible for the Licensable badge, and any of the following methods is sufficient:

json+ld Source Code

  {
  "@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"
}

IPTC photo metadata

PTC photo metadata is embedded into the image itself, and the image and metadata can move from page to page while still staying intact. You only need to embed IPTC photo metadata once per image.

Note: If you choose to use both IPTC photo metadata and structured data, and if any information conflicts between the two, Google will use the structured data information.

HTML5 Makrup

<figure>
  <picture loading="lazy" class="image featured u-photo">
    <source srcset="/assets/images/posts/content/sm/image-license-markup.png.webp
480w",/assets/images/posts/content/image-license-markup.png.webp 1080w,
" type="image/webp" sizes="50vw">
    <img src="image-license-markup.png.jpg" alt="How To Markup License Information On Images" />
    <meta property="acquireLicensePage" content="https://canva.com" />
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
  </picture>
  <figcaption class="p-summary" style="font-style: italic;">
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
  </figcaption>
</figure>

You can markup your figures like I have done and should work the same way.

Rich Snippet Results

1. A URL to a page that describes the license governing an image’s use. Specify this information with the Schema.org license property or the IPTC Web Statement of Rights field.

2. A URL to a page that describes where the user can find information on how to license that image. Specify this information with the Schema.org acquireLicensePage property or the IPTC Licensor URL field.