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

Un iframe (del inglés inline frame) es un elemento HTML que permite incrustar dentro de una página web un marco con contenido procedente de otra página o servidor. Sirve para mostrar recursos externos —como un vídeo de YouTube, un mapa o un documento— sin que el usuario tenga que abandonar tu web, integrándolos directamente dentro de tu contenido.

Qué es un iframe en HTML

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 ni infringir reglas de copyright o duplicación de contenido. Una de las formas más habituales de insertar contenido externo en una página web, un blog o un comercio electrónico es incrustando un vídeo de YouTube, y para ello se utiliza un iframe HTML. Con esta etiqueta se puede añadir contenido externo dentro del código HTML que forma la página, mostrándolo a los usuarios en la propia web.

Un iframe es, por tanto, un elemento del lenguaje HTML que permite incrustar un marco dentro de una página para mostrar contenido externo integrado, que los usuarios pueden visualizar desde el mismo sitio. Es una forma interesante de potenciar el contenido de una web añadiendo recursos externos para que el usuario acceda a ellos sin abandonar la página. No obstante, debido a algunos inconvenientes que veremos más adelante, muchos desarrolladores prefieren mostrar este tipo de contenido con otros métodos, como CSS o JavaScript.

Cómo funciona un iframe y cuáles son sus atributos

Con un iframe se inserta un fragmento de código dentro del HTML de una página para mostrar contenido externo. Dentro de la etiqueta iframe se introduce el código necesario y el enlace para incrustar ese contenido. Estos son los atributos principales que conviene conocer:

• src: indica el enlace al contenido externo que quieres incrustar. Es el atributo imprescindible.
• width y height: establecen el ancho y el alto del marco del iframe.
• allowfullscreen: permite ampliar el contenido a pantalla completa.
• scrolling: controla el desplazamiento, manual o automático, por el contenido externo.

La estructura básica de un iframe tiene este aspecto:

<iframe src="URL-del-contenido-externo" width="600" height="400" allowfullscreen></iframe>

Por ejemplo, es habitual que muchos sitios incluyan contenido de otras webs, como Wikipedia o un reproductor de YouTube. Basta con copiar el código de inserción que ofrece la plataforma de origen y pegarlo donde quieras que aparezca dentro de tu página.

Ventajas de usar iframes

Los iframes ofrecen varias ventajas si se utilizan de forma correcta dentro de un sitio web. Estos son sus principales beneficios:

Mantener al usuario en tu web

Insertar contenido externo con un iframe permite que los usuarios permanezcan en tu sitio sin tener que salir para acceder a ese contenido. Es una técnica que ayuda a mantener al visitante navegando por la web en todo momento, incluso cuando le ofreces información externa de valor. Por ejemplo, si quieres aportar un valor extra a un artículo sobre un tema concreto, puedes añadir un vídeo relacionado que el usuario verá sin abandonar la página.

Aligerar la carga de tu servidor

Otro beneficio del uso de iframes es que ayudan a acelerar el tiempo de carga. Al realizar la inserción se muestra el contenido, pero es el servidor externo que lo aloja el que soporta su carga, liberando de ese trabajo a tu propio servidor. Imagina que quieres mostrar un vídeo en tu tienda online o en tu web: es mucho mejor subirlo a YouTube e incrustarlo con un iframe que alojarlo en tu servidor para reproducirlo directamente, ya que así el servidor de YouTube se encarga de la carga del vídeo y libera al tuyo.

Inconvenientes del iframe

A pesar de sus ventajas, los iframes presentan algunos inconvenientes que conviene conocer antes de decidir usarlos. En primer lugar, los motores de búsqueda no gestionan adecuadamente el contenido incrustado mediante iframe, lo que puede terminar penalizando tu posicionamiento web, ya que ese contenido no se interpreta como propio. En segundo lugar, existen riesgos de seguridad: el contenido externo puede incluir elementos maliciosos sin que el usuario sea consciente de ello, por lo que conviene incrustar solo fuentes de confianza. Por último, ciertos iframes —como los de redes sociales— pueden acceder a datos del usuario sin su consentimiento explícito, algo contrario a las leyes y normativas de protección de datos vigentes. Para mitigar parte de estos riesgos, el atributo sandbox permite limitar lo que el contenido incrustado puede hacer.

Iframes, rendimiento y tu hosting

Aunque los iframes descargan parte del trabajo en servidores externos, la velocidad general de tu página sigue dependiendo del servidor donde la alojas. Contar con un alojamiento web con discos NVMe y tecnología LiteSpeed ayuda a que el resto de tu contenido se sirva con rapidez, de modo que la combinación de un buen hosting y un uso moderado de iframes ofrezca una experiencia fluida. Recuerda incrustar siempre contenido bajo HTTPS para mantener la seguridad de tu sitio, algo que el certificado SSL incluido en tu plan facilita.

Cómo insertar un iframe en tu web paso a paso

Incrustar un iframe es sencillo y no requiere conocimientos avanzados de programación. En la mayoría de casos, la propia plataforma de origen (YouTube, Google Maps, Vimeo o similares) te ofrece el código de inserción ya preparado, de modo que solo tienes que copiarlo y pegarlo. Estos son los pasos básicos para hacerlo correctamente:

• Localiza la opción de compartir o insertar en la plataforma que aloja el contenido y copia el código del iframe que te proporciona.
• Accede al editor de tu página o entrada y sitúate en el punto exacto donde quieres mostrar el contenido.
• Pega el código en el editor de HTML; si usas WordPress, puedes hacerlo en un bloque de HTML personalizado para que no se altere el código.
• Ajusta los atributos width y height si necesitas adaptar el tamaño del marco al diseño de tu web, procurando que sea responsivo en móviles.
• Guarda los cambios y comprueba en una vista previa que el contenido se muestra correctamente y se carga bajo HTTPS.

Si trabajas con WordPress, ten en cuenta que algunos servicios populares permiten incrustar contenido simplemente pegando la URL, gracias a la función de inserción automática, sin necesidad de escribir el iframe a mano. Aun así, conocer la estructura de la etiqueta te dará un control total sobre cómo y dónde aparece el contenido.

Preguntas frecuentes

¿Para qué sirve un iframe?

Un iframe sirve para incrustar contenido de otra página o servidor dentro de tu web, como vídeos, mapas, formularios o documentos. Permite que el usuario vea ese contenido sin salir de tu sitio y, además, traslada la carga de ese recurso al servidor externo que lo aloja.

¿Los iframes afectan al SEO?

Sí, pueden afectarlo. Los motores de búsqueda no siempre interpretan bien el contenido incrustado mediante iframe, que no se considera contenido propio de la página. Por eso conviene no abusar de ellos y acompañarlos siempre de texto propio relevante alrededor del recurso incrustado.

¿Es seguro usar iframes en mi web?

Los iframes son seguros si incrustas únicamente fuentes de confianza y sirves el contenido bajo HTTPS. Como el contenido externo puede incluir elementos maliciosos, conviene revisar el origen y, cuando sea posible, utilizar el atributo sandbox para limitar las acciones del contenido incrustado.