Blogger: adding licensable information to images using structured data

In the previous blog post, I wrote about adding information to images through IPTC metadata. This article will show you how to add information using structured data on the blogger.com platform.I use blogger.com for my blogs. I moved there one blog that I gave up writing. I have my Romanian language blog there. As such, I have a little experience with the platform, with good and bad. Among the good things, I would mention that it is free and allows you to use your own domain. The downsides are mainly related to the limitations of the service, the lack of a wide variety of themes, and the need to know a little HTML to do more special things.

For the demonstrations in this article, I have created a small blog named https://structuredimagedata.blogspot.com. There I have some examples of how to use structured data and the results that can be obtained.

That blog uses a standard theme, Essential Light. Comments have been disabled because I do not want to spend time moderating comments.

The first article uses an image in which I filled in all the IPTC data, as shown in the previous article. The original image contains all the necessary information in the IPTC.

Although part of the large Google family, the free blogger.com platform does not take all the information from IPTC data. Only copyright, credit, and copyright data are kept. An analysis of this article using Get IPTC Photo Metadata data shows us the following:

We notice that the information about the possibility of buying the image is lost. An analysis of this article using https://search.google.com/test/rich-results will show us the following:

This test also shows the lack of any information regarding the author and the possibility to buy the image.

Adding the necessary information to the „licensed” label using structured data

Let’s return to the example above and the report generated by Get IPC Metadata. We can see that the site also generates the structured data corresponding to the information contained in IPTC:

{
"@context": "https://schema.org",
"@type": "ImageObject",
"url": "local",
"creator": "[1] Teodor Costachioiu ",
"copyrightNotice": "© Teodor Costachioiu | https://costachioiu.com",
"creditText": "Teodor Costachioiu | Adobe Stock",
"license": "https://stock.adobe.com/license-terms",
"acquireLicensePage": "https://stock.adobe.com/images/the-red-ravine/129412972"
}

In order to use this structured data in Blogger, we will have to add it to the site in JSON-LD format. Thus, our code becomes:

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ImageObject",
"url": "local",
"creator": "[1] Teodor Costachioiu ",
"copyrightNotice": "© Teodor Costachioiu | https://costachioiu.com",
"creditText": "Teodor Costachioiu | Adobe Stock",
"license": "https://stock.adobe.com/license-terms",
"acquireLicensePage": "https://stock.adobe.com/images/the-red-ravine/129412972"
}
</script>

In the above code, in the URL field instead of local we will pass the URL of our image, and we will fill in the data in the other fields as appropriate.

Then this code must be added to our articles. We can do this even for older articles, but it will take until Google indexes them again. The less beautiful part is that this structured data is added directly to the HTML code of the article, so it is necessary to have at least a minimum knowledge of this language. Remember to back up your article before making any changes.

Let’s take a look at the HTML code of this article:

<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-N_WfCqzU7ZM/YHP_6txGQmI/AAAAAAAACDI/py81kqekexQRXW8S9j_HC1JccI2cSu7swCLcBGAsYHQ/s2400/red-ravine-sebes-romania.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Red Ravine in Romania" border="0" data-original-height="1800" data-original-width="2400" height="480" src="https://1.bp.blogspot.com/-N_WfCqzU7ZM/YHP_6txGQmI/AAAAAAAACDI/py81kqekexQRXW8S9j_HC1JccI2cSu7swCLcBGAsYHQ/w640-h480/red-ravine-sebes-romania.jpg" title="Red Ravine" width="640" /></a></div><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi et nunc lacinia ultrices at at lectus. Curabitur accumsan egestas lacinia. Maecenas laoreet, tellus quis vestibulum ultricies, turpis arcu elementum felis, nec fermentum nisl arcu ut arcu. Aenean vulputate cursus ligula, nec facilisis erat faucibus ac. Pellentesque dignissim lacinia lectus, tempor elementum mi egestas tincidunt. Lorem ipsum dolorsit amet, consectetur adipiscing elit. Nulla in libero mauris. Nam diamturpis, rhoncus sed aliquet eu, aliquet in sapien. Morbi non lorem sodales magna convallis consectetur. Aliquam rutrum, diam ac mattis laoreet, est lorem condimentum dui, nec efficitur nisl nibh eu enim. Duis augue augue, lobortis at ipsum eget, maximus dapibus libero. Vivamus vel sagittis sem, sit amet iaculis lectus. Praesent euismod placerat neque sed maximus. Maecenas sed ornare justo. Aenean ultricies ligula in accumsan aliquam.<p></p><br /><br />

The code highlighted with a yellow background is the code that loads the image. To add the missing information immediately after this code area, we need to enter the structured data in JSON-LD format. To do this, we need to edit the article in Blogger, switch to HTML view mode, and edit the code directly.

The HTML code in which we added the structured data will be:

<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-N_WfCqzU7ZM/YHP_6txGQmI/AAAAAAAACDM/siGa01phTbUBpYtiNF449HAegCAwP1J2ACPcBGAYYCw/s2400/red-ravine-sebes-romania.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Red Ravine in Romania" border="0" data-original-height="1800" data-original-width="2400" height="480" src="https://1.bp.blogspot.com/-N_WfCqzU7ZM/YHP_6txGQmI/AAAAAAAACDM/siGa01phTbUBpYtiNF449HAegCAwP1J2ACPcBGAYYCw/w640-h480/red-ravine-sebes-romania.jpg" title="Red Ravine" width="640" /></a></div /><script type="application/ld+json">{ "@context": "https://schema.org", "@type": "ImageObject", "url": "https://1.bp.blogspot.com/-N_WfCqzU7ZM/YHP_6txGQmI/AAAAAAAACDM/siGa01phTbUBpYtiNF449HAegCAwP1J2ACPcBGAYYCw/w640-h480/red-ravine-sebes-romania.jpg", "creator": "Teodor Costachioiu ", "copyrightNotice": "© Teodor Costachioiu | https://teodorcostachioiu.com", "creditText": "Teodor Costachioiu | Adobe Stock", "license": "https://stock.adobe.com/license-terms", "acquireLicensePage": "https://stock.adobe.com/images/the-red-ravine/129412972"}</script>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi et nunc lacinia ultrices at at lectus. Curabitur accumsan egestas lacinia. Maecenas laoreet, tellus quis vestibulum ultricies, turpis arcu elementum felis, nec fermentum nisl arcu ut arcu. Aenean vulputate cursus ligula, nec facilisis erat faucibus ac. Pellentesque dignissim lacinia lectus, tempor elementum mi egestas tincidunt. Lorem ipsum dolorsit amet, consectetur adipiscing elit. Nulla in libero mauris. Nam diamturpis, rhoncus sed aliquet eu, aliquet in sapien. Morbi non lorem sodales magna convallis consectetur. Aliquam rutrum, diam ac mattis laoreet, est lorem condimentum dui, nec efficitur nisl nibh eu enim. Duis augue augue, lobortis at ipsum eget, maximus dapibus libero. Vivamus vel sagittis sem, sit amet iaculis lectus. Praesent euismod placerat neque sed maximus. Maecenas sed ornare justo. Aenean ultricies ligula in accumsan aliquam.

What I did here: immediately after the code to load the image I added the code for the structured data, in JSON-LD format. I have identified from the initial code the source of the image, highlighted in yellow. This must be copied to the URL field in the structured data. I then filled in the rest of the information — author, credit, license, etc.

The result can be seen in this article. If we analyze it with Google tools, we will receive the following report:

And so we see that we have managed to add back the information needed to display the „licensed” label.

Structured data for products

There are situations when instead of wanting to display the „licensed” label, we want to show the „product” label on our images. This can be useful for photographers promoting their own business — workshops, event photography, etc. In this case, we want to have a „product” tag and a direct link to our services when searching for images on Google. For this, we will have to add the following structured data:

<script type="application/ld+json">{"@context": "https://schema.org/", "@type": "Product", "name": "Name of the product","image": "https://1.bp.blogspot.com/-N_WfCqzU7ZM/YHP_6txGQmI/AAAAAAAACDM/siGa01phTbUBpYtiNF449HAegCAwP1J2ACPcBGAYYCw/w640-h480/red-ravine-sebes-romania.jpg","description": "Description","brand": "Brand","offers": {"@type": "Offer","url": "https://link-to-product-page.com","priceCurrency": "EUR","price": "999"}}</script>

I have generated the above script using https://technicalseo.com/tools/schema-markup-generator/. To test the results, you can analyze this article using Google Rich Results Test. You will notice some warnings. These can be ignored; for the time being, they have no impact on Google searches.

Originally published at https://www.teodorcostachioiu.com.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store