¿Quieres mostrar una página web externa dentro de tu propio sitio web? Descubre cómo puedes hacer esta sencilla tarea con un simple código HTML usando iframes. Aprende paso a paso y sin complicaciones.

Cómo insertar página web externa con iframe HTML

¡Hola SEO Nauta! En este artículo, te voy a enseñar cómo puedes insertar o embeber un sitio web externo dentro de tu propia página web. Esta técnica se conoce como incrustar una página web usando iframes y es muy útil para mostrar contenido de otros sitios sin que tus visitantes tengan que abandonar el tuyo.

Esta función es muy utilizada en portales de juegos online, mapas interactivos, vídeos, presentaciones y mucho más. ¡Sigue leyendo y domina esta herramienta esencial del desarrollo web!

¿Qué es un iframe y para qué sirve?

Un iframe (abreviatura de "inline frame" o marco en línea) es una etiqueta HTML que te permite incrustar contenido de otra página web dentro de la tuya. Imagínalo como una ventana que muestra otra página web dentro de tu sitio, como si fuera un cuadro dentro de otro cuadro.

Con los iframes puedes mostrar:

  • Otras páginas web completas
  • Vídeos de YouTube o Vimeo
  • Mapas de Google Maps
  • Documentos PDF
  • Presentaciones
  • Formularios externos
  • Contenido multimedia diverso

Cómo insertar una página web con HTML usando la etiqueta <iframe>

Para mostrar un sitio web dentro de otro, utilizamos la etiqueta HTML <iframe>. Esta es la forma más sencilla y universal de incrustar contenido externo.

Código básico de iframe

Copia y pega este código en la versión HTML de tu editor:

<iframe src="https://seodefinicion.com/" width="800" height="600"></iframe>

Explicación del código

  • src: Es la dirección URL de la página que quieres mostrar (va entre comillas)
  • width: Define el ancho del iframe en píxeles
  • height: Define la altura del iframe en píxeles

Solo tienes que cambiar la URL que está dentro de las comillas por la dirección web que deseas incrustar. Si quieres ajustar el tamaño, modifica los valores de width (ancho) y height (alto).

Atributos útiles para personalizar tu iframe

Además del ancho y alto, existen otros atributos que puedes usar para mejorar la experiencia:

frameborder: eliminar el borde

Para quitar el borde que aparece por defecto alrededor del iframe:

<iframe src="https://seodefinicion.com/" width="800" height="600" frameborder="0"></iframe>

scrolling: controlar la barra de desplazamiento

Para activar o desactivar las barras de scroll:

<iframe src="https://seodefinicion.com/" width="800" height="600" scrolling="no"></iframe>

Usa scrolling="yes" para activarlo o scrolling="no" para desactivarlo.

title: accesibilidad web

Es importante añadir un título descriptivo para mejorar la accesibilidad:

<iframe src="https://seodefinicion.com/" width="800" height="600" title="Descripción del contenido"></iframe>

Cómo hacer un iframe responsivo (adaptable a móviles)

Un problema común es que los iframes con tamaño fijo no se ven bien en dispositivos móviles. Para solucionarlo, puedes hacer un iframe responsivo que se adapte automáticamente al tamaño de la pantalla.

Método con CSS

Añade este código CSS a tu hoja de estilos:

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Proporción 16:9 */
  height: 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Y luego usa este HTML:

<div class="iframe-container">
  <iframe src="https://seodefinicion.com/" frameborder="0"></iframe>
</div>

Insertar iframe en WordPress con Elementor

Si utilizas WordPress con Elementor u otro constructor visual, el proceso es muy sencillo:

  1. Abre tu página en el editor de Elementor
  2. Busca el widget llamado "HTML" en el panel lateral
  3. Arrástralo a la sección donde quieras insertar el iframe
  4. Pega el siguiente código en el cuadro de HTML:
<iframe src="https://seodefinicion.com/" width="800" height="600" frameborder="0"></iframe>
  1. Cambia la URL por la página que quieras mostrar
  2. Ajusta el ancho y alto según necesites
  3. Haz clic en "Actualizar" o "Publicar"

¡Listo! Ya tienes tu página externa integrada en tu sitio WordPress.

Insertar iframe en WordPress sin plugins

Si no usas Elementor, también puedes añadir iframes directamente en el editor de WordPress:

  1. Crea o edita una entrada/página
  2. Haz clic en el botón "+" para añadir un bloque
  3. Busca y selecciona el bloque "HTML personalizado"
  4. Pega tu código iframe
  5. Actualiza o publica la página

Problemas comunes y soluciones

La página no se muestra en el iframe

Algunas páginas web no permiten ser incrustadas en iframes por razones de seguridad. Esto se debe a configuraciones del servidor llamadas X-Frame-Options o Content Security Policy (CSP).

El iframe es demasiado pequeño o grande

Solución: Ajusta los valores de width y height hasta encontrar el tamaño perfecto. Para móviles, usa el método responsivo que explicamos antes.

Aparecen barras de desplazamiento no deseadas

Solución: Añade scrolling="no" al iframe o ajusta mejor las dimensiones para que el contenido quepa completamente.

Consideraciones de SEO y seguridad

Impacto en el SEO

Los iframes no afectan negativamente al SEO de tu página si se usan correctamente. Sin embargo, ten en cuenta que:

  • El contenido del iframe no se considera parte de tu página para los buscadores
  • Puede ralentizar la carga de tu web si el contenido externo es pesado
  • Añade siempre el atributo title para mejorar la accesibilidad

Seguridad

Solo incrusta contenido de fuentes confiables. Un iframe de un sitio malicioso podría:

  • Mostrar contenido no deseado a tus visitantes
  • Ralentizar tu sitio web
  • Comprometer la experiencia del usuario

Resultado Final

Así es como se vería un iframe básico en tu página web:

Preguntas frecuentes sobre iframes

¿Puedo incrustar cualquier página web en un iframe?

No. Muchas páginas web bloquean esta función por seguridad. Solo podrás incrustar sitios que lo permitan en su configuración.

¿Los iframes afectan la velocidad de mi web?

Sí, pueden ralentizar la carga si el contenido externo es pesado. Intenta usar iframes solo cuando sea necesario y optimiza el contenido que cargas.

¿Es mejor usar un iframe o un enlace normal?

Depende de tu objetivo. Usa un iframe si quieres que los usuarios vean el contenido sin salir de tu web. Usa un enlace si prefieres que visiten la página externa directamente.

¿Puedo hacer scroll dentro de un iframe?

Sí, por defecto los iframes permiten scroll si el contenido es más grande que el marco. Puedes controlarlo con el atributo scrolling.

Conclusión

Ahora ya sabes cómo insertar una página web externa usando iframes en HTML y WordPress. Esta herramienta es muy potente y te permitirá enriquecer tu sitio web con contenido externo de forma sencilla.

Recuerda usar iframes de forma responsable, solo con contenido confiable, y siempre pensando en la experiencia de tus usuarios. ¡Pon en práctica lo aprendido y mejora tu web hoy mismo!