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

Un iframe HTML es una etiqueta (<iframe>) que sirve para incrustar contenido externo —como un video de YouTube, un mapa o una página de Wikipedia— dentro de tu sitio web, sin que el usuario tenga que abandonarlo. Su estructura básica utiliza el atributo src con la dirección del recurso, junto a atributos como width, height y allowfullscreen.

Añadir contenido de páginas externas a un sitio web es una práctica que debe hacerse con 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 ese contenido en una página, blog o eCommerce es a través de un iframe HTML, y en esta guía con voz peruana te explicamos para qué sirve, cómo se estructura y cuándo conviene usarlo.

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 para mostrar contenido externo integrado, que los usuarios pueden visualizar desde el mismo sitio. Dicho de forma sencilla, es como abrir una “ventana” dentro de tu página que carga otro recurso —un video, un formulario, un documento o un mapa— sin redirigir a nadie a otra dirección.

El iframe es una forma interesante de potenciar el contenido de un sitio web, ya que añade recursos externos para que el usuario acceda a ellos sin salir de tu web. Eso sí, debido a algunos inconvenientes que veremos más adelante, muchos desarrolladores prefieren implementar este contenido con otros métodos, como CSS o JavaScript, según el caso.

Cómo funciona 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. Para que funcione correctamente se utilizan varios atributos. Los más importantes son:

• src: es el atributo principal; contiene el enlace del recurso externo que quieres mostrar.
• width y height: definen el ancho y el alto del marco, en píxeles o porcentaje.
• frameborder: controla si se muestra o no el borde del marco.
• allowfullscreen: permite que el contenido, por ejemplo un video, se vea a pantalla completa.
• scrolling: controla el desplazamiento manual o automático dentro de ese contenido externo.

Es importante recordar que la etiqueta iframe siempre debe cerrarse con </iframe>. Además, conviene definir un ancho y un alto adecuados para que el contenido se vea bien tanto en computadoras como en celulares, ya que en el Perú la mayor parte del tráfico web proviene de dispositivos móviles. Un iframe que no se adapta puede romper el diseño de tu página y perjudicar la navegación.

Ejemplo de un iframe

Es habitual que muchos sitios incluyan contenido de otras páginas, como Wikipedia o YouTube. La estructura de un iframe se vería así:

<iframe src="https://www.ejemplo.com/recurso" width="600" height="400" frameborder="0" allowfullscreen></iframe>

Solo necesitas reemplazar la dirección del atributo src por la del recurso que deseas mostrar y ajustar el ancho y el alto según el diseño de tu página.

Ventajas del iframe

Los iframe ofrecen varios beneficios cuando se utilizan de forma correcta dentro de un sitio web. Estos son los principales:

Mantener al usuario en la web

Insertar contenido externo con un iframe permite que los usuarios permanezcan en tu sitio y no tengan que salir para acceder a ese contenido. Es una técnica muy usada para mantener al visitante navegando en todo momento, incluso cuando le ofreces información externa de valor. Por ejemplo, si quieres enriquecer un artículo con un video relacionado, puedes incrustarlo dentro del propio artículo y el usuario lo verá sin abandonar la web. Esto aumenta el tiempo de permanencia en tu sitio, una señal que los buscadores valoran positivamente.

Acelerar la velocidad de carga

Otro beneficio es que el iframe puede acelerar el tiempo de carga de tu web. Al insertar el contenido, es el servidor externo —el que aloja ese recurso— el que soporta la carga, liberando de ese trabajo a tu propio servidor. Imagina que quieres mostrar un video en tu eCommerce: es mucho mejor subirlo a YouTube e incrustarlo con un iframe que alojarlo en tu servidor, pues así YouTube se encarga de la reproducción y tu hosting queda libre para lo importante. Aun así, contar con un servidor veloz sigue siendo clave, y por eso conviene apoyarse en infraestructura con discos NVMe y tecnología LiteSpeed.

Inconvenientes del iframe

A pesar de sus ventajas, el iframe tiene desventajas que debes conocer antes de usarlo en tu sitio web:

• SEO: los motores de búsqueda no siempre gestionan bien el contenido en iframe, lo que puede terminar afectando tu posicionamiento web.
• Seguridad: existe el riesgo de que el contenido externo incluya elementos maliciosos sin que el usuario sea consciente de ello.
• Privacidad: algunos iframe, sobre todo de redes sociales, acceden a datos del usuario sin consentimiento explícito, algo que va en contra de las leyes y normativas de protección de datos vigentes.

Por eso conviene usar iframe solo con fuentes confiables y de forma integrada, cuidando siempre la usabilidad y la experiencia de usuario.

Iframe, rendimiento y un buen hosting

Un iframe bien implementado mejora la experiencia, pero la base de un sitio rápido y seguro siempre es la infraestructura. En HostingPlus, el hosting N°1 del Perú, operamos desde 2004 con discos SSD/NVMe, tecnología LiteSpeed, certificado SSL incluido, migración gratuita y soporte 24/7 desde un datacenter de primer nivel. Si tu web carga recursos externos y necesitas que todo lo demás vuele, conoce nuestros planes de hosting y dale a tu proyecto la velocidad que merece.

Preguntas frecuentes

¿Para qué sirve un iframe en HTML?

Sirve para incrustar contenido externo —videos, mapas, formularios o páginas— dentro de tu sitio, de modo que el usuario pueda verlo sin salir de tu web. Es muy útil para enriquecer artículos y fichas de producto.

¿El iframe afecta el SEO?

Puede hacerlo. Los buscadores no siempre indexan bien el contenido cargado en un iframe, así que no conviene colocar dentro de él información clave para tu posicionamiento. Úsalo para complementar, no para tu contenido principal.

¿Es seguro usar iframes?

Lo es siempre que incrustes contenido de fuentes confiables. Evita orígenes desconocidos, ya que un iframe puede cargar elementos maliciosos o acceder a datos del usuario sin su consentimiento. Si trabajas con un hosting que incluye SSL y buenas prácticas de seguridad, reduces aún más cualquier riesgo.