Iframe est un raccourci utilisé pour faire référence à « inline Frame » et qui signifie « cadre en ligne ».
L’Iframe est une balise utilisée pour l’insertion d’une page HTML dans une autre page HTML. Cette balise HTML est, par exemple, utilisée pour afficher des éléments comme les onglets de localisation ou les tags publicitaires. L’idée est de pouvoir intégrer sur une page Web des éléments provenant d’une autre page Web et de permettre leur visibilité sur la page où ils sont intégrés. L’utilisation de cette balise est indispensable en deux points.
- Elle permet principalement d’insérer la page tout en gardant la structure de celle-ci.
- Cette balise donne également la possibilité d’éviter les pénalisations de duplicate content même en intégrant les contenus d’une page sur une autre.
En somme, une Iframe permet d’inclure dans une même page Web différents contenus provenant d’autres pages. Ces contenus sont tous présentés sur la page tout en gardant chacun leur indépendance par rapport au contenu principal de la page où ils sont intégrés.
Exemple d’Iframe
Voici un exemple d’iframe en HTML :
Dans cet exemple, la balise <iframe> permet d’afficher une page web externe (ici https://www.exemple.com) à l’intérieur de la page où on insère de code.
Explication des attributs de l’iframe:
- src= »https://exemple.com » → Ici on défini l’URL du site ou de la ressource que l’on souhaite afficher à l’intérieur de la page.
- width= »600″ → Cette donnée sert à définir la largeur de l’Iframe, dans notre exemple 600 pixels.
- height= »400″ → Et ici on défini la hauteur, 400 pixels dans notre exemple.
Ce qu’il faut retenir est que l’Iframe permet d’effectuer une requête HTTP pour récupérer le contenu de la page https://www.exemple.com. Aussi, il l’affiche à l’intérieur d’un cadre défini. L’utilisateur peut ainsi naviguer à l’intérieur du cadre sans affecter le reste de la page.
Vous pouvez remplacer le lien d’exemple par une vidéo YouTube, un formulaire, une carte google, etc. Ainsi vous intégrez le service, sans l’héberger vous-même.
Limites et précautions
Si les Iframe sont très répandus et qu’on en trouve sur presque tous les sites, il y a tout de même quelques précautions à prendre.
D’abord, assurez-vous que votre balise soit compatible sur mobile. Nous vous recommandons d’utiliser des styles max-width: 100%. Ainsi, votre contenu restera « responsive »
Attention aussi aux éventuels problèmes de sécurité. Certains sites en effet peuvent bloquer l’affichage des Iframe pour éviter les attaques.
Enfin, n’espérez pas améliorer votre référencement SEO avec l’affichage de contenus tierces. Ils ne seront pas indexé par Google.
