How can I use Schema.org structured data for dynamically loaded images?

Question

I have a webpage with a lot of images that I load dynamically onto the page dynamically using Javascript/JSON data.

The images' rendered output is:

<li itemscope itemtype="http://schema.org/ImageObject"> 
<img src="${data.file}" alt="${data.alt}" itemprop='contentURL'>
<div class="imageInfo"> 
<h2 itemprop="name">${data.name}</h2> 
</div> 
</li>

The schema structured data values I get from the JSON file are data.file for the itemprop="contentURL" and data.name for the itemprop="name".

I have read that Google doesn't use dynamically loaded schema markup unless you use JSON-LD. Currently when I test with Google's structured data testing tool I see that the test shows there's no structured data for my dynamically loaded content.

What are the steps I need to take to make sure that Google uses/sees my dynamically loaded structured data?

Answer 1

Googlebot does render and process both JSON-LD and Microdata. It will most likely see what you are adding.

The Structured Data Testing Tool only has a basic ability to detect content added by JavaScript. That is why it does not see this dynamic Microdata.

Try using the Rich Results Tool. That far more closely represents how Googlebot works. However, it only shows a subset of structured data based on rich results, so may not confirm what you want.