Iframe HTML: ¿para qué sirve y su estructura?

Añadir contenido de páginas externas a un sitio web es una práctica que debe realizarse con especial cuidado para no arruinar la experiencia de usuario o para no infringir reglas de copyright o duplicación de contenido.

Una de las formas habituales de insertar contenido externo en una página web, blog o eCommerce es incrustando un video de YouTube. Para realizarlo es necesario utilizar un iframe HTML. Con estas etiquetas se puede añadir contenido externo dentro del código HTML que forma una página web, mostrándolo así a los usuarios en la propia web.

Qué es un iframe en HTML

Un iframe en el lenguaje HTML es un elemento que permite incrustar un marco dentro de una página web que muestra contenido externo integrado que los usuarios pueden visualizar desde el mismo sitio.

El iframe es una forma interesante de potenciar el contenido de un sitio web añadiendo recursos externos para que el usuario pueda acceder a ellos sin necesidad de que abandone el sitio.

Debido a algunos inconvenientes que presenta el uso de iframe y que abordaremos más adelante, muchos desarrolladores web prefieren implementar este tipo de contenido externo utilizando otros métodos (como CSS o JavaScript).

Cómo funciona y cuáles son sus atributos

Con un iframe se inserta un código dentro del HTML de una página para mostrar contenido externo. Para realizarlo es necesario utilizar una serie de atributos como:

• Dentro de la etiqueta iframe se introduce todo el código HTML y el enlace para incrustar el contenido externo.
• El enlace al contenido externo se añade con la etiqueta “src =”.
• Para establecer el tamaño del marco del iframe se utilizan las etiquetas “width” y “height”.
• Se pueden utilizar otro tipo de etiquetas como allowfullscreen (para poder ampliar el contenido a modo pantalla completa) o scrolling (para controlar el scroll manual o automático por ese contenido externo)

Ejemplo de un iframe

Es habitual que muchos sitios web incluyen contenido de otras páginas web como puede ser el caso de Wikipedia. Para insertar un fragmento de información de Wikipedia en una página web se debe utilizar un código HTML como el siguiente:

Ventajas del iframe

Los iframe parchados ofrecen muchas ventajas si se utilizan de forma correcta en un sitio web. Los principales beneficios de estos elementos para añadir contenido externo son:

Mantener al usuario en la web

Insertar contenido externo con un iframe permite que los usuarios permanezcan en el sitio web y no tengan que salir para acceder a ese contenido. Es una técnica que se utiliza para mantener al usuario navegando por la web en todo momento, incluso cuando se ofrece información externa de valor.

Por ejemplo, si se quiere añadir un valor extra a un artículo sobre un tema determinado, con un video relacionado de YouTube, se puede insertar dentro del propio artículo ese vídeo y así el usuario puede visualizarlo sin necesidad de abandonar la web.

Acelerar la velocidad web

Otro beneficio derivado del uso de iframe en un sitio web es acelerar su tiempo de carga. Al realizar la inserción, se muestra el contenido, pero es el servidor externo que contiene ese contenido el que soporta la carga de su contenido, liberando de ese trabajo al servidor propio. Este proceso acelera la velocidad web, mejorando la experiencia de usuario.

Imaginemos que se quiere subir un vídeo a un eCommerce o página web. Es mucho mejor subirlo a YouTube y añadirlo al sitio con un iframe, que subirlo al servidor web para reproducirlo directamente, pues el servidor de YouTube se encargará de la carga del video, liberando al servidor web.

Inconvenientes del iframe

A pesar de las ventajas que aporta el uso de iframe, existen unos inconvenientes que es necesario conocer antes de tomar la decisión de utilizarlos en un sitio web.

• Los motores de búsqueda no gestionan de forma adecuada el uso de iframe lo que puede terminar penalizando el posicionamiento web.
• También existen riesgos asociados a la seguridad con el uso de iframe (el contenido puede contener elementos maliciosos sin que el usuario sea consciente de ello).
• El uso de iframe insertados en redes sociales accede a datos del usuario sin consentimiento explícito, algo que va en contra de las leyes y normativas de protección de datos vigentes.

Hemos hablado sobre qué es un iframe y por qué debes utilizarlos en tu sitio web. Aunque el uso de iframe no tiene buena fama en general, son una buena oportunidad de mejorar la experiencia de usuario si se utiliza el contenido externo apropiado y se incorpora en la web de una forma integrada y que no altere de forma negativa la usabilidad y experiencia de usuario.