Using Microdata, RDFa, or JSON-LD markup on images in SlideShow?

[JimBinCT]

1) Script Title: Ultimate Fade-in slideshow (v2.6)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I would like to add search engine identifying markup to the images on my website. I'm not sure how or if I can even do this within the slideshow script. Here is the Image Markup details on schema.org http://schema.org/ImageObject Any thoughts?

Thanks.
-Jim

[ddadmin]

Hmm I'm not familiar with the specs on Image Markup, but basically, it seems like you'll need to add additional markup alongside the IMG tag itself. You can't directly inject additional code into each slideshow frame, so that's out. You might consider creating separate IMG and IMG markup elements and adding it to your page, possibly hiding them as well using CSS so only search engine crawlers can access them.

[JimBinCT]

Thanks for responding. In the code, the images are not called using the IMG tag as seen here...

imagearray: [
["http://www.dynamicdrive.com/dynamicindex4/pool.jpg"],
["http://www.dynamicdrive.com/dynamicindex4/cave.jpg"] //<--no trailing comma after very last image element!
],

Do search engine crawlers read and use code hidden with <!-- --> tags? Is there another way to hide it from the viewer without hiding it from the search engines? I guess that's a question for another forum.

I have hundreds of images on the site. I'd like to not have to add sort of duplicate code to the pages unnecessarily.

I'm sure there is a way. somehow. Thanks.

[Beverleyh]

Yes, as ddadmin suggested, you can hide any additional img (or other elements) with CSS - most typically, this would be done using display:none;.

Im not sure what you mean when you say that you have hundreds of images on the site and you wouldn't like to use duplicate markup. Why would you need to use duplicate markup for them all? Just create img elements for the ones appearing in the script array. Search engines can "see" img elements fine even if their display is hidden via CSS.

If you need more help please provide a link to your page.

[ddadmin]

Thanks for responding. In the code, the images are not called using the IMG tag as seen here...

imagearray: [
["http://www.dynamicdrive.com/dynamicindex4/pool.jpg"],
["http://www.dynamicdrive.com/dynamicindex4/cave.jpg"] //<--no trailing comma after very last image element!
],

Do search engine crawlers read and use code hidden with <!-- --> tags? Is there another way to hide it from the viewer without hiding it from the search engines? I guess that's a question for another forum.

I have hundreds of images on the site. I'd like to not have to add sort of duplicate code to the pages unnecessarily.

I'm sure there is a way. somehow. Thanks.

No, search engines do not read and index images stored inside JavaScript image arrays. What you'll need to do is for each image inside the array, create separate IMG tags with all the meta data you want, enclosed in a hidden DIV, something like:

    <div itemscope itemtype="http://schema.org/ImageObject" style="display:none">
      <h2 itemprop="name">Beach in Mexico</h2>
      <img src="http://www.dynamicdrive.com/dynamicindex4/pool.jpg"
      alt="Sunny, sandy beach."
      itemprop="contentUrl" />
      By <span itemprop="author">Jane Doe</span>
      Photographed in
        <span itemprop="contentLocation">Puerto Vallarta, Mexico</span>
      Date uploaded:
        <meta itemprop="datePublished" content="2008-01-25">Jan 25, 2008
      <span itemprop="description">I took this picture while on vacation last year.</span>
    </div>

[JimBinCT]

I see what you are saying now. Thanks for illustrating it for me. I wasn't aware that the search engines didn't index the images in the javascript.

Beverleyh, By duplication, I meant that I guess I was hoping to include the markup on the same line in the javascript array, rather than have it appear once in the array and then again in a hidden div tag.

Thank you both for your help. Much appreciated.