¿Qué es iframe y cómo lo usas en tu sitio web?

¿Alguna vez te has preguntado si existe una manera fácil de agregar un video o un mapa a tus páginas web desde otra fuente? La respuesta es sí, y se llama iframe. Le permite incrustar páginas web en un documento HTML sin necesidad de codificación.

En este artículo, aprenderá qué es un iframe, cómo funciona, sus aplicaciones prácticas y cómo agregarlo a sus páginas web.

Los marcos en línea facilitan un contexto de navegación anidado donde un navegador muestra múltiples áreas interactivas integradas entre sí en una sola página web. Este tipo de configuración permite el efecto de una página dentro de una página y muchos más. A continuación se muestra un ejemplo de iframe que visualiza un vídeo de YouTube.

¿Para qué se utilizan los iframes?

Los marcos en línea tienen muchas aplicaciones prácticas que amplían el diseño y la funcionalidad estándar de una página web. Los casos de uso más comunes incluyen:

• Incrustar contenido multimedia: Los elementos Iframe se utilizan comúnmente para incrustar contenido multimedia como vídeos, archivos de audio y animaciones de plataformas como YouTube, Vimeo y SoundCloud. Esto permite a los usuarios interactuar con el contenido directamente en el sitio web visitado sin tener que salir de la página.
• Integración de aplicaciones de terceros: Los desarrolladores web utilizan iframes para integrar aplicaciones de terceros sin problemas en sus sitios web. Por ejemplo, una empresa puede incorporar un widget de Google Maps para mostrar su ubicación, o un sitio de comercio electrónico puede incluir una pasarela de pago para las transacciones.
• Mostrar anuncios: Los iframes son una opción popular para mostrar anuncios en páginas web. Pueden separar el contenido publicitario del contenido de la página principal, lo que ayuda a gestionar los guiones publicitarios y realizar un seguimiento de las vistas o los clics de forma independiente.
• Cargar contenido externo: Los iframes pueden cargar contenido de fuentes externas, como fuentes de noticias, actualizaciones del clima o publicaciones en redes sociales. Por lo tanto, enriquecen el sitio web anfitrión con contenido dinámico sin una compleja integración de backend.
• Creación de un sitio dentro de un sitio: Los iframes pueden crear una experiencia de “sitio dentro de un sitio”, donde los visitantes pueden navegar por otro sitio web sin abandonar la página original. Esto es particularmente útil para alojar micrositios o catálogos de productos.
• Aislar contenido específico del navegador: Los desarrolladores pueden utilizar iframes para aislar contenido que se comporta de manera diferente en todos los navegadores, asegurándose de que no afecte al resto de la página. Esto puede ser una solución temporal mientras se desarrolla una solución permanente.
• Mejora del diseño y la disposición: Los iframes pueden ayudar a crear diseños de páginas web más complejos. Los diseñadores pueden usarlos para incrustar elementos interactivos o fijos dentro de una página, como un elemento persistente. reproductor de música o un cuadro de chat.
• Simplificación de las actualizaciones de contenido: Cuando el mismo contenido debe aparecer en varias páginas, se puede utilizar un iframe para centralizar el contenido en una ubicación. De esta manera, las actualizaciones de el contenido solo debe realizarse una vez y los cambios se reflejarán automáticamente dondequiera que esté incrustado el iframe.

Ejemplos de iframe

Los iframes tienen muchas aplicaciones prácticas más allá de un simple vídeo o una imagen dentro de una página web. A continuación se muestran algunos ejemplos comunes del uso de un iframe.

Vídeo incrustado

Esta es posiblemente la aplicación de iframes más popular. En lugar de sobrecargar la reproducción de vídeos en su servidor web, puede incrustar vídeos alojados en un servicio dedicado como YouTube o Vimeo.

Mapa incrustado

Google Maps facilita que sus clientes encuentren la ubicación de su empresa. Puede incrustar fácilmente Google Maps con su ubicación fijada mediante iframes.

Página dentro de una página

Si desea incorporar una funcionalidad específica de otro sitio web en sus propias páginas web, puede incrustar una parte seleccionada o una página completa de este sitio web con un iframe.

Cómo insertar un elemento iframe en un sitio web

La forma estándar de agregar un elemento iframe es insertando la etiqueta iframe en el código HTML de una página web. Sin embargo, dependiendo de la aplicación de su sitio web o de las opciones proporcionadas por la fuente, puede haber otros métodos más simples y convenientes. A continuación, examinaremos las formas más comunes.

Agregar una etiqueta iframe a un documento HTML

Esta es la forma universal de agregar un iframe a una página web. Debes editar el código HTML de la página e insertar la etiqueta <iframe> que crea el área donde se visualizará el contenido externo.

A continuación se muestra un ejemplo de una etiqueta HTML iframe.

<iframe src="https://www.youtube.com/embed/mij0fmZ7lGw?si=g5ghgoRcoUou5e9R" width="560" height="315" title=" Reproductor de vídeo de YouTube"></iframe>

Analicemos los elementos que componen la etiqueta iframe.

• La etiqueta de apertura <iframe> identifica el elemento como un iFrame.
• El atributo iframe src define la dirección URL del origen del iframe. El recurso externo que se encuentra en esta dirección se visualizará en la sección iframe de la página web.
• El atributo de height define el tamaño vertical del elemento iframe. Puedes utilizar un tamaño fijo (píxeles) o uno automático (establecido como un porcentaje del tamaño de la pantalla).
• Los atributos de width definen el ancho del iframe. Al igual que la altura, el ancho puede tomar valores fijos o automáticos.
• El atributo de title ofrece una descripción del iframe, que pueden utilizar los motores de búsqueda y los visitantes que utilizan tecnologías de asistencia.
• La etiqueta </iframe> incluye el código del iframe.

El ejemplo contiene sólo una pequeña parte del conjunto completo de atributos de iframe. Hay varios otros atributos que modifican las propiedades del iframe de varias maneras, como el atributo sandbox, el atributo name, el atributo srcdoc, el atributo allow, el atributo target, el atributo loading y muchos más.

Algunos atributos como frameborder y seamless están obsoletos en HTML5 y deben manejarse con la propiedad de CSS border en su lugar. Siempre es una buena práctica consultar la documentación o especificaciones HTML más recientes para la información más actualizada sobre los atributos de iFrame y su uso.

También puedes utilizar atributos que no sean específicos de iframes, como el atributo de estilo. Asigna estilos CSS en línea para un elemento dentro del contenido del iframe. Sin embargo, se recomienda definir estilos en hojas de estilos CSS separadas para una mejor organización y reutilización.

Copiando el código iframe de la fuente

Algunos sitios web como YouTube facilitan la integración de contenido en iframes. Por lo general, proporcionan un código iframe para copiar y pegar en su página web.

Si desea insertar videos de YouTube, siga los siguientes pasos.

1. En la página del vídeo, haga clic en el botón Compartir.
   

   

2. En la siguiente ventana emergente, seleccione la opción Insertar.
   

   

3. Aparecerá una nueva ventana que muestra la etiqueta iframe completa que contiene la URL para insertar de YouTube. Puede resaltar y copiar el código o hacer clic en el botón Copiar en la esquina inferior derecha.
   

   

4. Finalmente, abra su página web en un editor HTML y pegue el código donde desea que aparezca el contenido del iframe.
   

   

Usar plugins de WordPress

Los métodos anteriores funcionan para cualquier tipo de aplicación de sitio web. Sin embargo, si su sitio web está creado con WordPress, puede agregar contenido incrustado a través de iframes usando un plugin. Uno de ellos es Advanced iFrame.

Una vez instalado, el complemento creará una sección en su menú de WordPress donde podrá controlar su configuración. Inicie sesión en su panel de WordPress y seleccione Advanced iFrame en el menú de la izquierda.

Dentro del panel del complemento, abra la sección Basic Settings. En el campo URL, ingrese la dirección de la fuente externa que se mostrará en el elemento iframe HTML.

Si su tema no está basado en bloques, puede agregar el elemento iframe insertando su código corto en la página web. Para generar el código corto, haga clic en el botón Generate a shortcode for the current settings. Debajo del botón, verá el código corto generado que puede copiar.

A continuación, edita la página o publícala con tu editor preferido. Elija la posición donde desea incrustar contenido y pegue el código corto.

Si su tema está basado en bloques como Gutenberg, insertar un elemento iframe es aún más fácil. No es necesario generar un código corto. Simplemente cree un bloque para mostrar contenido con el iframe. Luego, elija el widget Advanced iFrame y el contenido HTML definido en la configuración del complemento se insertará automáticamente.

¿Cuáles son los beneficios de usar iframes?

Los iframes ofrecen varias ventajas que los convierten en una herramienta valiosa para desarrolladores web y creadores de contenido. Éstos son algunos de los beneficios clave:

Enriquecimiento de contenido

Los iFrames proporcionan una forma sencilla de enriquecer su sitio web con contenido adicional sin alojarlo en su servidor. Al incorporar contenido como vídeos, mapas o feeds de redes sociales, puede ofrecer a sus usuarios una experiencia más atractiva e informativa. Esto agrega valor a su sitio y mantiene a los usuarios en su página por más tiempo mientras interactúan con el contenido incrustado.

Experiencia de usuario

Los marcos en línea pueden mejorar significativamente la experiencia del usuario en su sitio web. Utilizándolos, puedes incorporar diversas funcionalidades, como formularios, calculadoras o incluso juegos, sin que los usuarios tengan que abandonar tu sitio. Esta integración perfecta garantiza que los usuarios tengan un viaje fluido e ininterrumpido mientras navegan por su sitio web.

Flexibilidad

Los iFrames son increíblemente flexibles y se pueden utilizar de muchas maneras. Se les puede cambiar el tamaño para que se ajusten a cualquier parte de una página web y se les puede hacer responsivos para que funcionen en diferentes dispositivos. Esta adaptabilidad convierte a iFrames en una opción versátil para los diseñadores web que buscan crear un diseño de sitio web dinámico y responsivo.

Gestión eficaz de los recursos del servidor

Al incorporar contenido de otras fuentes, puede ahorrar recursos del servidor y ancho de banda. Dado que el contenido incorporado está alojado en servidores externos, su sitio web no soporta la carga de alojar ese contenido. Esto puede conducir a un mejor rendimiento de la página y a una reducción de los costos de alojamiento.

Desventajas y riesgos del uso de iframes

A pesar de sus beneficios, los iFrames también conllevan ciertas desventajas y riesgos que deben considerarse cuidadosamente:

Riesgos de explotación de seguridad

Una de las mayores preocupaciones con los iframes es la seguridad. Los iframes pueden utilizarse de forma maliciosa para ejecutar ataques de secuestro de clics, en los que los clics de un usuario son secuestrados para realizar acciones no deseadas en otro sitio. Además, si el contenido de un iFrame no proviene de una fuente confiable, puede introducir vulnerabilidades en su sitio web.

Riesgos de infracción de derechos de autor

Al insertar contenido de fuentes externas, existe el riesgo de infracción de derechos de autor si no se obtienen los permisos adecuados. Es importante asegurarse de que se permita compartir el contenido que está incrustando y de que cumpla con los requisitos de licencia.

Efectos negativos en las puntuaciones de SEO

Los iframes pueden dañar el SEO de su sitio web si no se usan correctamente. Los motores de búsqueda pueden tener dificultades para indexar el contenido dentro de un iframe, por lo que es posible que no contribuya a la clasificación de búsqueda de su sitio. Además, el uso excesivo de iframes puede saturar su página web. Esto puede provocar una mala experiencia de usuario y afectar indirectamente su rendimiento de SEO.

Resumen

Los iframes son una forma práctica de mejorar su sitio web. permiten incrustar vídeos, mapas o páginas web completas en un sitio web para mejorar su funcionalidad y diseño. Sin embargo, debe utilizar los iframes con precaución, ya que pueden generar posibles riesgos y complicaciones de seguridad, como la incrustación de páginas web que pueden infectar las computadoras de los visitantes o contenido que infringe los derechos de autor.

Después de leer esta guía, debería comprender mejor qué son los iframes, para qué se utilizan y cuáles son sus ventajas y desventajas. Esto le permitirá aprovechar al máximo los iframes y evitar posibles daños.