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 some projects, especially with low traffic values. I moved there one blog that I gave up writing. I have one of my Romanian language blogs there. As such, I have some experience with the platform, both 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 placed 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 where I filled in all the IPTC data, as shown in the previous blog post. 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:
IPTC info ketp by Blogger.com platform
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:
Rich results test: no image data is shown
This test also shows the lack of information regarding the author and the possibility of buying 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 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 starting with <img alt=… is the code that loads the image. We need to enter the structured data in JSON-LD format to add the missing information immediately after this code area. 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 would become:
<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 there: immediately after the code that loads the image, I added the code for the structured data, in JSON-LD format. I have identified the source of the image from the initial code, 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 the same Google tools, we will receive the following report:
Image with structured data added via JSON-LD
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/. You can analyze this article using Google Rich Results Test to test the results. You will notice some warnings. These can be ignored; for now, they have no impact on Google searches.
