Bien que les iFrames puissent être nécessaires pour intégrer facilement du contenu externe, ils peuvent également poser des défis pour l'optimisation des moteurs de recherche.
Le code HTML utilisé pour les iFrames affecte négativement l'expérience de la page sur la page parente. Lorsqu'un iFrame charge du contenu à partir d'une source externe, cela peut créer des retards de chargement, entraînant une mauvaise expérience utilisateur.
Et comme vous le savez, les moteurs de recherche privilégient les conceptions accessibles et les interfaces faciles à utiliser. Une mauvaise mise en œuvre de l'iFrame peut entraîner des restrictions qui peuvent même aboutir à une pénalité de Google.
Apprenons-en davantage sur le SEO des iFrame et comment la balise iFrame interagit avec JavaScript et d'autres éléments pour influencer les classements des moteurs de recherche.
Qu'est-ce qu'un iFrame ?
Un iFrame, ou cadre en ligne, est un élément HTML qui permet aux développeurs ou aux spécialistes du marketing d'intégrer un document externe dans un document HTML actuel.
Lorsque un iFrame est chargé, il contient du code JavaScript pour la livraison de contenu dynamique, tel que des publicités externes ou des fonctionnalités interactives.
Les iFrames peuvent charger divers types de contenu directement sur une page web. Ces contenus peuvent être :
- Vidéos YouTube
- Cartes
- Flux de médias sociaux
- Applications web
Les attributs comme "hauteur" et "largeur" peuvent aider les concepteurs de sites web à contrôler la taille d'affichage de l'iFrame pour améliorer la mise en page visuelle d'un site.
De plus, une bordure CSS peut être appliquée pour personnaliser l'apparence de l'iFrame, se fondant avec le texte environnant.
Exemples de iFrames
Intégration d'une vidéo YouTube
Un cadre en ligne peut efficacement intégrer une vidéo, améliorant l'engagement des utilisateurs. Les développeurs peuvent facilement insérer du contenu multimédia en utilisant la balise <iframe>.
L'attribut height et width contrôlent la taille d'affichage, tandis que la fonctionnalité plein écran permet aux utilisateurs de [voir] la vidéo en mode plein écran.
Ajouter une vidéo YouTube en utilisant des iFrames est vraiment simple. Il suffit de copier le code d'intégration depuis YouTube :
Et puis collez le code à l'endroit où vous souhaitez [intégrer] la [vidéo] sur votre [site web].
Intégration d'une carte Google
Un cadre en ligne peut intégrer des éléments interactifs comme Google Maps, permettant aux utilisateurs d'explorer des lieux directement sur votre site web. Voici comment intégrer une carte Google :
L'exemple ci-dessus utilise trois propriétés différentes :
- allowfullscreen : Active le mode plein écran pour certaines sections de la carte.
- frameborder="0" et style="border:0" : Supprime la bordure par défaut de l'iframe autour de la carte.
- referrerpolicy="no-referrer-when-downgrade" : Envoie l'URL complète dans l'en-tête Referer, permettant des restrictions appropriées de la clé API.
Voici un aperçu d'une agence numérique utilisant Google Maps sur leur site web avec des iFrames :
Intégration d'un document PDF
Un iFrame peut afficher des documents PDF directement dans une page web. Ainsi, il n'est pas nécessaire que les utilisateurs téléchargent le fichier. Voici une capture d'écran sur le code pour intégrer un PDF :
Dans l'exemple ci-dessus, l'attribut src définit l'emplacement du fichier PDF, soit sur le web (en utilisant l'URL) soit sur un serveur local (en utilisant le chemin du fichier).
Intégration de publications sur les réseaux sociaux (comme Twitter)
Vous pouvez également intégrer du contenu de médias sociaux comme un "Tweet" sur une page web en utilisant des iFrames. Cela augmente l'engagement en affichant du contenu dynamique et interactif directement sur votre site web.
Vous pouvez insérer des mises à jour en direct des réseaux sociaux en utilisant une iFrame avec le widget de Twitter.
La balise <blockquote> inclut le Tweet, tandis qu'un fichier JavaScript est nécessaire pour l'afficher correctement. Voici un exemple de ce à quoi ressemble un post Twitter intégré sur un site web :
Le contenu de l'iFrame est-il indexé ?
Oui, le contenu de l'iFrame peut être exploré et indexé.
Les robots de recherche Google peuvent explorer le contenu des iFrames grâce au "DOM Flattening", où le navigateur combine tous les éléments de la page web, y compris les iFrames, en une seule structure.
Cependant, Google ne traite pas tout le contenu iFrame de manière égale.
Lors du chargement des iFrames, Google demande des requêtes HTTP supplémentaires pour récupérer le contenu de l'iFrame. Bien qu'il puisse explorer et potentiellement indexer ce contenu, cela dépend de la manière dont l'iFrame est implémenté.
L'utilisation de la directive intégrée de l'index est cruciale pour les éditeurs qui souhaitent s'assurer que le contenu spécifique de l'iFrame est indexé pour renforcer leur stratégie de référencement iFrame.
La directive index embedded est une balise méta ou un en-tête HTTP qui permet à Google d'indexer le contenu intégré dans une iFrame, même si la page contenant l'iFrame elle-même est marquée avec une balise noindex.
Ceci est utile pour les éditeurs qui souhaitent que le contenu intégré (comme des vidéos ou des widgets) soit indexé par Google lorsqu'il fait partie d'autres sites.
Voici un exemple d'utilisation de la balise meta dans la section <head> :
<head><meta name="robots" content="noindex, indexifembedded"></head>
Dans cet exemple, la page elle-même ne sera pas indexée (noindex), mais si ce contenu est intégré dans l'iFrame d'un autre site, il peut être indexé (indexifembedded).
Comment les iFrames [impactent] le SEO ?
Les iFrames peuvent avoir un impact significatif sur le SEO, à la fois positivement et négativement. Voici comment les cadres en ligne impactent le SEO :
Crédit SEO
Contrairement au contenu direct placé dans le HTML de votre page web, le contenu "intégré" via des iFrames est traité différemment par les moteurs de recherche.
Lorsque les robots d'exploration Web consultent une page Web, ils recherchent du "contenu original" qu'ils peuvent associer à cette page.
Le contenu directement inclus dans le HTML est reconnu comme faisant partie de votre site, contribuant à sa pertinence et à son autorité. Alors que, le contenu affiché via une iFrame provient d'une source différente, ce qui signifie que les moteurs de recherche peuvent ne pas l'associer à votre domaine.
Par conséquent, il est conseillé d'utiliser des iFrames lorsque cela est nécessaire pour garantir que le contenu principal reste visible et accessible aux robots d'exploration.
Robots d'exploration et [indexation]
Les moteurs de recherche envoient des robots d'exploration pour analyser et indexer le contenu de votre site.
Les "crawlers" peuvent rencontrer des difficultés à indexer les iFrames en raison de plusieurs facteurs :
- Accessibilité du contenu : Si le contenu dans l'iFrame est sur un domaine différent (cross-origin), certains robots d'exploration pourraient ne pas y accéder en raison de restrictions de sécurité.
- Balises Noindex : Si le contenu intégré inclut une balise meta noindex ou un en-tête X-Robots-Tag qui empêche l'indexation, les robots d'exploration ne l'incluront pas dans leur index.
- Rendu JavaScript : Certaines iFrames dépendent de JavaScript pour charger le contenu. Si les robots d'exploration ne peuvent pas rendre JavaScript, ils peuvent ne pas voir ou indexer le contenu de l'iFrame.
Pour améliorer l'indexation des iFrames et élever votre SEO iFrame, envisagez d'utiliser les éléments suivants :
- Utilisez un attribut Src valide : Utilisez correctement la balise iFrame avec un attribut src valide pointant vers un contenu accessible.
- Autoriser le partage de ressources entre origines : Si le contenu de l'iFrame provient d'un autre domaine, configurez le serveur pour autoriser le CORS, permettant ainsi aux robots d'y accéder.
- Ne Pas Utiliser de Balises Meta Noindex : Assurez-vous qu'il n'y a pas de directives noindex dans le contenu de l'iFrame qui bloqueraient l'indexation. Données Structurées : Implémentez des données structurées (comme Schema.org) dans le document parent pour fournir du contexte aux moteurs de recherche sur le contenu de l'iFrame.
- Utilisez des balises canoniques : Utilisez <link rel="canonical"> pour indiquer la version principale du contenu si applicable.
Vitesse de page
L'utilisation des iFrames peut réduire PageSpeed parce que le chargement de contenu externe nécessite des requêtes HTTP supplémentaires, ce qui peut ralentir le [temps] de chargement global de la [page].
La raison de la réduction du temps de chargement est que chaque iFrame extrait des données de sources externes, et si ces sources sont lentes ou ont des fichiers volumineux, cela peut affecter négativement les performances de votre site web.
De plus, les iFrames peuvent retarder le rendu d'autres éléments de la page, impactant davantage la vitesse, en particulier sur les connexions plus lentes.
Et comme vous le savez, une faible vitesse de chargement de la page n'affecte pas seulement les scores des Core Web Vitals, mais conduit à une mauvaise expérience utilisateur. En fait, plusieurs sources (y compris Google) ont déclaré l'impact de la lenteur de chargement sur le taux de rebond.
Les résultats sont les suivants : les "taux de rebond" augmentent de 32 % lorsque le "temps de chargement" de la page passe de 1 seconde à 3 secondes.
Et en tant que SEOs, la dernière chose que nous voulons faire est d'impacter négativement notre "expérience de page".
Donc, la question est vraiment, “[Devrais-je] utiliser des iFrames pour intégrer du contenu si cela pourrait potentiellement réduire la [vitesse de la page]?
Problèmes de "contenu dupliqué"
Dans les iFrames, le même contenu est intégré sur plusieurs pages ou sites. Par conséquent, les moteurs de recherche ont du mal à déterminer la version originale.
Il conduit à une dilution du crédit SEO et de l'équité des liens.
Pour [atténuer] ce problème, assurez-vous que le contenu intégré est unique à chaque page ou correctement [canonisé] pour éviter les conflits avec d'autres sites.
L'utilisation de iFrames "optimisés pour le référencement" qui communiquent clairement la source principale peut aider les moteurs de recherche à comprendre la relation entre le "contenu original" et ses instances intégrées.
Quels sont les [avantages] des iFrames ?
Les "cadres" en ligne offrent plusieurs avantages aux développeurs web et aux créateurs de contenu. Cela améliore les performances du site lors de l'intégration de médias externes et du partage de contenu.
Voici les principaux avantages de l'utilisation des iFrames :
Mise à jour plus rapide des pages
Les iFrames permettent une mise à jour plus rapide des pages qui référencent l'iFrame, car les mises à jour de contenu peuvent être effectuées sur la ressource intégrée sans changer la page principale.
Cela réduit le besoin de recharger des pages entières et augmente l'efficacité.
Réutilisation du code
Un avantage majeur des iFrames est la réutilisation du code.
Les développeurs peuvent réutiliser le même iFrame sur plusieurs pages en intégrant la même ressource, ce qui permet de gagner du temps et de l'espace de stockage tout en réduisant le nombre de lignes de code nécessaires pour implémenter du contenu sur l'ensemble du site.
Intégration de contenu et de médias externes
Les iFrames simplifient l'intégration de contenu provenant de sources tierces, telles que des vidéos, des cartes et des "widgets".
En partageant des fichiers multimédias externes et en utilisant des balises iFrame, les développeurs peuvent intégrer des médias riches sans les héberger eux-mêmes, contournant les restrictions CORS et permettant l'accès [inter-domaine].
Facile à utiliser et à entretenir
Les iFrames sont faciles à utiliser, nécessitant une configuration minimale pour être implémentés sur une page.
Ils vous permettent d'intégrer du contenu complexe sans alourdir votre base de code. Les cadres en ligne améliorent la fonctionnalité de votre site web, optimisent la livraison de contenu et maintiennent une image de marque cohérente, tout en réduisant la complexité du code.
Les iFrames sont-ils considérés comme du "cloaking" ?
Non, les iFrames ne sont pas intrinsèquement considérées comme du "cloaking".
Cloaking est une pratique de SEO "black hat" où un site web montre un contenu différent aux moteurs de recherche qu'aux utilisateurs, souvent pour contrôler les classements de recherche.
Les iFrames, lorsqu'ils sont utilisés de manière appropriée, ne relèvent pas de cette définition. Cependant, les aspects techniques doivent être pris en compte pour s'assurer que les iFrames sont utilisés correctement sans induire en erreur les moteurs de recherche ou les utilisateurs.
Conclusion
Bien que HTML5 prenne en charge l'utilisation des iFrames et que Google puisse indexer le code HTML des iFrames, il est préférable de les éviter autant que possible.
Certains navigateurs et robots d'exploration de moteurs de recherche peuvent encore ne pas indexer le contenu dans les iFrames, ce qui entraîne finalement des problèmes de SEO.
Vous pouvez utiliser la balise <embed> comme alternative à iFrame. Elle est utilisée pour "intégrer" du contenu multimédia, tel que des PDF, de l'audio et de la vidéo, plutôt que des pages web complètes.
