: Images within noscript Note: My question is not about JavaScript Note: My question is how to make the HTML accessible to search engines. Note: My question is not about hiding

@Goswami781

Posted in: #Images #Noscript #Seo

Note: My question is not about JavaScript

Note: My question is how to make the HTML accessible to search engines.

Note: My question is not about hiding texts, is on block loading of images in order to use LazyLoad.
Note: Library used in tests: github.com/brcontainer/smooth-images-js

I tested various techniques of blocking the loading of images to use effect LazyLoad (I'm developing in JavaScript), was the only efficient <noscript>:

The HTML structure that would, with LazyLoad loading of images is achieved via the viewport (visible part of web page).

<p>Lorem ipsum dolor sit amet,
<span class="lazyload">
<noscript><img src="foto-m0101.jpg" alt="image description"></noscript>
</span>
consectetur adipiscing elit.
</p>
<p>Lorem ipsum dolor sit amet,
<span class="lazyload">
<noscript><img src="foto-m0201.jpg" alt="image description"></noscript>
</span>
consectetur adipiscing elit.
</p>
<p>Lorem ipsum dolor sit amet,
<span class="lazyload">
<noscript><img src="foto-m0301.jpg" alt="image description"></noscript>
</span>
consectetur adipiscing elit.
</p>


When <noscript> with the image is the view-port (visible part of web page).


The jquery-plugin gets the DOM: $("span.lazyload").
The jquery-plugin checks if the <noscript> <img> is on view-port.
The jquery-plugin to create a new Image with Image.onload = function(){}.
When the image loaded Image.onload will insert <img> outside the <noscript>.


For clarity. Suppose that only the first <noscript> is the view-port (<noscript><img src="foto-m0101.jpg" alt="image description"></noscript>).
After the onload JavaScript will do the HTML:

<p>Lorem ipsum dolor sit amet,
<span class="lazyload">
<img src="foto-m0101.jpg" alt="image description">
<noscript><img src="foto-m0101.jpg" alt="image description"></noscript>
</span>
consectetur adipiscing elit.
</p>
<p>Lorem ipsum dolor sit amet,
<span class="lazyload">
<noscript><img src="foto-m0201.jpg" alt="image description"></noscript>
</span>
consectetur adipiscing elit.
</p>
<p>Lorem ipsum dolor sit amet,
<span class="lazyload">
<noscript><img src="foto-m0301.jpg" alt="image description"></noscript>
</span>
consectetur adipiscing elit.
</p>




[edit]
I believe that Google displays the DOM also modified by JavaScript.
Look I used the tool Fetch as Google.

Look at the results:


Without my jquery-plugin and <noscript> (i.e. pure HTML):







With jquery-plugin and <noscript>:



Note: The JavaScript that showcased images and manipulated the DOM.


Question:


This is a bad practice for search engines (I refer to HTML)?
If it is a bad practice, you could put an example of good practice?
If there is another question talking about <noscript> with "IMAGES", forgive me.
If the JavaScript displays images and Fetch as Google displays the content normally (like the browser) so Google indexes the DOM manipulated by JavaScript?



Note: I did not find any doubts about <noscript> with images.

Vote Up Vote Down

Login to post a comment!