seo Question posted in
Some basic information to get you started with this can be found here.

Structured Data with Lazy-Loaded images? – SEO

I want to put in Structured Data tags on Product-Images for SEO reasons.

<img class="img-responsive" src="placeholder URL" data-src="Actual URL"/>

The problem I’m running into is: Google picks up my SRC value which is only a placeholder image – the actual image(data-src) is only loaded when the user scrolls enough to bring the image into view.

Tags:

4

Answers


  1. 0

    Use a <noscript> block and put your image with the structured data tag in there. Google will then use that image rather than the image placeholder. This also means any users without JS enabled (there are a few, but they’re still about!) will also still see the images. Note: You need to then disable the placeholder images if JS isn’t enabled otherwise non-JS users will see two images.

    For example

     <img class="img-responsive js-only" src="placeholder URL" data-src="Actual URL"/>
 <noscript>
 <img src="Actual URL" data-src="Actual URL" itemprop="image"/>
 </noscript>

    Verified this approach using Google’s structured data testing tool – https://developers.google.com/structured-data/testing-tool/.

    Edit: how to show images only with JS:

    You don’t need to hide noscript images – anything inside a noscript block is only used if JavaScript is disabled. You can show the responsive images only when JS is enabled by adding class=”no-js” to the HTML element, the following JavaScript block to the HEAD: 

    <script>
    var headElement = document.getElementsByTagName("html")[0]; 
    var regExp = new RegExp('(\s|^)no-js(\s|$)'); 
    headElement.className = headElement.className.replace(regExp,' js ');  
</script>

    and the following CSS: 

    html.no-js .js-only {
    display:none;
}
html.js .no-js {
    display:none
}
    Login or Signup to reply.
  2. 0

    I think a solution is to use meta content tags, since they don’t render anything like so:

    <meta content="/img-1.jpg" itemprop="image">
<meta content="/img-2.jpg" itemprop="image">
<meta content="/img-3.jpg" itemprop="image">
    Login or Signup to reply.
  3. 0

    It’s very simple add just this:

    Good typo

    <meta  itemprop="image" content="your_image_url" />

    Note the final “/”

    Login or Signup to reply.
  4. 0

    Just add the attribute content to your img tag with the real image url. Google will use this, but the browser will ignore it.

    <img src="placeholder URL" data-src="Actual URL" itemprop="image" content="Actual URL" />

    This is in my opinion better because you won’t need extra meta, noscript or JS code, just one single attribute.

    Tested and tried with Google’s structured testing tool (https://search.google.com/structured-data/testing-tool)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search