Iframe et le SEO - Méthode en 2021 ?

[thierry-rankinfo]

Bonjour,


L'intégration d'une vidéo Youtube sur une page s'effectue avec une Iframe.

Cette pratique bloque l'affichage de la page, et Google indique : "Problème LCP : dépasse 2,5 s (mobile)"

J'ai désactivé l'intégration de l'iframe et optimise également d'autres points de chargement des différentes ressources. Le problème est levé par Google. Mais je souhaite réactiver l’accès aux vidéos

J’ai bien une idée pour l'iframe - 2 solutions:

1) Affichage d'une photo à la place de l'iframe. Et ajouter un logo au centre pour indiquer que si l'utilisateur clique, la vidéo apparaitra (via JavaScript)

2) Intégration de l'iframe avec comme source une page interne au site (Soit message simple "en cours de chargement". Quand le site est complétement chargé et affiché, remplacer la source de Iframe par le lien youtube. (En gardant les mêmes dimensions)


- Autres solutions ? Quelle est la technique aujourd'hui ?

Par avance, merci.

 

[rick38]

Je fais la 1)

JS

<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; ++n) {
        var p = document.createElement("div");
        p.innerHTML = '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + v[n].dataset.id + '/hqdefault.jpg"><div class="play-button"></div>';
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();

function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube-nocookie.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&wmode=opaque&controls=2&showinfo=0&rel=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    iframe.setAttribute('allowFullScreen', '');
    this.parentNode.replaceChild(iframe, this);
}
</script>

HTML

<div class="youtube-container">
   <div class="youtube-player" data-id="BbKs7UleGzE"></div>
</div>

CSS

.youtube-container { display: block; margin: 12px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("/images/video.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

 

[theunholy]

loading="lazy"
Tout simplement...

 

[thierry-rankinfo]

loading="lazy"
Tout simplement...

Merci theunholu. J'ai découvert tardivement, et appliqué sur les images du site, qui se situe en dessous de la ligne de vision.
Concernant les Iframe, j'ai découvert que l'on peut également appliquer cette propriété. mais quand est t'il, si l'Iframe est visible au 1er plan. Le chargement de la page s'effectue après la construction DOM et l'affiche de la page ?

 

[theunholy]

Ce qui est au-dessus de la ligne de flottaison s'affiche d'office, loading="lazy" ou pas.
Si tu tiens absolument à y caser des trucs lourds, comme une vidéo Youtube, là en effet je rejoins @rick38 sur le javascript.

 

[thierry-rankinfo]

Je fais la 1)
[/code]

Merci rick38 pour ta réponse. au niveau du bot google, tu penses que cette methode permet au bot que l'on partage du contenu média video ?
NB: Depuis que j'ai désactivé l'affichage de l'iframe youtube, et que cette ci est remplacer par une image, j'ai vue dans "Google Shearch console" le nombre de page validée diminué



Elle passe dans les exlues avec le motif : Explorée, actuellement non indexée



coincidence?
Qu'en pensez-vous?

 

[rick38]

Merci rick38 pour ta réponse. au niveau du bot google, tu penses que cette methode permet au bot que l'on partage du contenu média video ?

Je ne pense pas qu'il sache que ce sont des vidéos qui sont partagées, mais même s'il le sait qu'est-ce que ça apporte à la page plutôt qu'une image ? Partager une vidéo youtube ça n'est pas un ajout de contenu de qualité...
J'ai juste dit ce que je fais, non pas pour le SEO pour pour la user experience. Quand on vient sur une page et qu'on scrolle et que à chaque fois il faut 2 secondes pour que l'emplacement de la vidéo s'affiche (l'iframe youtube est vraiment lourde...), je ne trouve pas ça bon pour le visiteur. Alors qu'avec une image c'est instantané.
Concernant le loading="lazy" je ne sais pas, c'est récent, à voir comment c'est supporté par les différents navigateurs, mais ça ne résoudra pas le problème qu'en scrollant on ait cet effet de lourdeur à voir les éléments avoir du mal à s'afficher...

 

[ZImm]

Concernant le loading="lazy" je ne sais pas, c'est récent, à voir comment c'est supporté par les différents navigateurs

https://caniuse.com/loading-lazy-attr