web-dev-qa-db-fra.com

Images dans noscript

Remarque: Ma question ne concerne pas JavaScript

Remarque: Ma question est de savoir comment rendre le code HTML accessible aux moteurs de recherche.

Remarque: Ma question ne concerne pas le masquage de texte, mais le chargement d'images en bloc pour pouvoir utiliser LazyLoad. Remarque: Bibliothèque utilisée dans les tests: https://github.com/brcontainer/smooth-images-js

J'ai testé diverses techniques de blocage du chargement d'images à utiliser effect LazyLoad (je développe en JavaScript), était le seul efficace <noscript>:

Le HTML structure qui, avec LazyLoad loading d'images, est obtenu via la viewport (partie visible de la page Web).

<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>

Lorsque <noscript> avec l'image est le view-port (partie visible de la page Web).

  • Le plugin jquery obtient le DOM: $("span.lazyload").
  • Le plug-in jquery vérifie si le <noscript> <img> est sur le port de visualisation.
  • Le plugin jQuery pour créer un new Image avec Image.onload = function(){}.
  • Lorsque l'image chargée Image.onload insérera <img> en dehors de <noscript>.

Pour plus de clarté. Supposons que seul le premier <noscript> soit le port de vue (<noscript><img src="foto-m0101.jpg" alt="image description"></noscript>). Après le chargement JavaScript fera le 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] Je pense que Google affiche le DOM également modifié par JavaScript. Regardez j'ai utilisé l'outil Récupérer comme Google .

Regardez les résultats:

Sans mon jquery-plugin et <noscript> (c'est-à-dire du HTML pur):

http://img845.imageshack.us/img845/2632/webpagethumbnail1.jpg

Avec jquery-plugin et <noscript>:

http://img138.imageshack.us/img138/3485/webpagethumbnail.jpg

Remarque: JavaScript qui présentait les images et manipulait le DOM.

Question:

  • Ceci est une mauvaise pratique pour les moteurs de recherche (je me réfère à HTML)?
  • Si c'est une mauvaise pratique, vous pourriez donner un exemple de bonne pratique?

  • S'il y a une autre question qui parle de <noscript> avec "IMAGES", pardonnez-moi.

  • Si JavaScript affiche des images et Récupérer comme Google affiche le contenu normalement (comme le navigateur), de sorte que Google indexe le DOM manipulé par JavaScript?

Remarque: Je n'ai trouvé aucun doute sur <noscript> avec des images.

seoimagesnoscript
3
Guilherme Nascimento

Je voudrais jeter un oeil à cette question sur SO https://stackoverflow.com/questions/6165643/load-html-then-load-images-using-ajax-in-jquery il a un AJAX réponse de chargement paresseux et jsfiddle. J'essayerais d'éviter d'utiliser <noscript>

1
Anagio