Iframe et le SEO - Méthode en 2021 ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par thierry-rankinfo, 29 Avril 2021.

  1. thierry-rankinfo
    thierry-rankinfo Nouveau WRInaute
    Inscrit:
    28 Avril 2021
    Messages:
    5
    J'aime reçus:
    0
    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.
     
  2. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 672
    J'aime reçus:
    245
    Je fais la 1)

    JS
    Code:
    <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
    HTML:
    <div class="youtube-container">
       <div class="youtube-player" data-id="BbKs7UleGzE"></div>
    </div>
    
    CSS
    Code:
    .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; }
    
     

    Fichiers attachés:

    • video.png

      video.png

      Taille de fichier:
      2.1 KB
      Affichages:
      21
    thierry-rankinfo apprécie ceci.
  3. theunholy
    theunholy WRInaute impliqué
    Inscrit:
    6 Août 2013
    Messages:
    536
    J'aime reçus:
    72
    loading="lazy"
    Tout simplement...
     
    thierry-rankinfo apprécie ceci.
  4. thierry-rankinfo
    thierry-rankinfo Nouveau WRInaute
    Inscrit:
    28 Avril 2021
    Messages:
    5
    J'aime reçus:
    0
    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 ?
     
  5. theunholy
    theunholy WRInaute impliqué
    Inscrit:
    6 Août 2013
    Messages:
    536
    J'aime reçus:
    72
    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 apprécie ceci.
  6. thierry-rankinfo
    thierry-rankinfo Nouveau WRInaute
    Inscrit:
    28 Avril 2021
    Messages:
    5
    J'aime reçus:
    0
    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é

    upload_2021-4-29_21-0-1.png

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

    upload_2021-4-29_21-4-41.png

    coincidence?
    Qu'en pensez-vous?
     
  7. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 672
    J'aime reçus:
    245
    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...
     
  8. ZImm
    ZImm WRInaute discret
    Inscrit:
    26 Mars 2021
    Messages:
    134
    J'aime reçus:
    15
    https://caniuse.com/loading-lazy-attr
     
Chargement...
Similar Threads - Iframe SEO Méthode Forum Date
iframe affichant le contenu d'un autre site : quel impact SEO pour le mien ? Demandes d'avis et de conseils sur vos sites 29 Juillet 2018
Iframe et SEO Débuter en référencement 13 Juillet 2018
IFrame et SEO Débuter en référencement 15 Novembre 2013
Les iframes sont-elles une solution miracle pour le SEO ? Référencement Google 21 Juillet 2011
SEO et le iframe Débuter en référencement 19 Novembre 2010
iframe dans un <textarea> Développement d'un site Web ou d'une appli mobile Vendredi à 12:48
Une web application Node.JS en iframe Développement d'un site Web ou d'une appli mobile 20 Mai 2020
Alternative à l'iframe Référencement Google 11 Février 2020
Pb iframe et sites référents Google Analytics 1 Août 2019
Publicité non visible dans un iframe Débuter en référencement 12 Octobre 2018