Seguro que más de una vez has querido meter en tu web un mapa de Google Maps, un vídeo de YouTube o una presentación de Slideshare. Y de repente, te encuentras con un trozo de código que empieza por <iframe>. Te suena a chino, lo copias, lo pegas y… ¡magia! Funciona. Pero, ¿sabes realmente qué has hecho? ¿Y si te dijera que ese simple gesto podría estar fastidiando tu SEO sin que te des cuenta?
Llevo más de 10 años metido en las trincheras del SEO, optimizando desde la web de un cliente en Chamberí hasta e-commerce que facturan millones. Y si algo he aprendido es que los detalles técnicos, como el uso de un simple iframe, pueden marcar la diferencia entre posicionar en primera página o quedarte en el limbo de Google. Por eso, en este artículo te voy a contar, sin rodeos y de forma clara, qué es un iframe, cómo usarlo bien y, sobre todo, cómo evitar que se convierta en un enemigo para tu posicionamiento web.
Lo que aprenderás en este artículo:
- Qué es un iframe explicado para humanos – Entenderás su funcionamiento sin necesidad de ser programador, con ejemplos prácticos que uso con mis clientes.
- El código exacto que necesitas – Te daré la estructura básica y los atributos clave que debes controlar para que el iframe haga lo que tú quieres.
- La verdad sobre si los iframes dañan tu SEO – Analizaremos de forma honesta cómo afectan al rastreo, la indexación y la velocidad de carga (WPO).
- Checklist de buenas prácticas – Una guía paso a paso para usar iframes de forma segura y optimizada, incluyendo el atributo que el 90% de la gente olvida y que es clave para el rendimiento.
¿Qué es un iframe y para qué demonios sirve?
Vamos al grano. Un iframe (la abreviatura de Inline Frame) es, básicamente, una «ventana» que abres en tu página web para mostrar contenido de otra página. Imagina que tu web es una casa. Un iframe es como poner una ventana en una pared que, en lugar de dar a la calle, muestra en tiempo real lo que está pasando en la casa del vecino.
Tú no estás copiando el contenido del vecino, simplemente lo estás mostrando a través de esa ventana. El contenido sigue alojado en su servidor original, con su propia URL y sus propias características. Esto es brutalmente útil para varias cosas:
- Insertar vídeos: Es el uso más común. Cuando insertas un vídeo de YouTube o Vimeo, estás usando un iframe. Esto te ahorra un ancho de banda tremendo, ya que el vídeo se sirve desde sus servidores, no desde el tuyo.
- Mostrar mapas: Incrustar un mapa de Google Maps para indicar la ubicación de tu negocio es otro clásico.
- Integrar contenido de redes sociales: Un post de X (Twitter), una publicación de Instagram, un reproductor de Spotify… todo eso se suele insertar con iframes.
- Visualizar documentos: Puedes mostrar PDFs o presentaciones de Google Slides directamente en tu web sin que el usuario tenga que descargarlos.
widthyheight: Definen el ancho y el alto del iframe en píxeles. Por ejemplo:width="800" height="600". Ojo, esto puede dar problemas en móviles. Más adelante te cuento cómo hacerlo responsive.title: ¡Este es importantísimo y mucha gente se lo salta! Describe el contenido del iframe. Es crucial para la accesibilidad (los lectores de pantalla lo usan) y le da pistas a Google sobre qué hay ahí dentro. Ejemplo:title="Mapa de ubicación de nuestras oficinas en Madrid".loading="lazy": Esta es la joya de la corona para el WPO (Web Performance Optimization). Este atributo le dice al navegador que no cargue el contenido del iframe hasta que el usuario se desplace y esté a punto de verlo. Esto acelera la carga inicial de tu página una barbaridad. ¡Úsalo siempre que puedas!sandbox: Un atributo de seguridad. Permite restringir lo que el contenido del iframe puede hacer (ejecutar scripts, enviar formularios, etc.). Si solo quieres mostrar contenido y nada más, es una buena práctica añadirlo para evitar problemas de seguridad como el Cross-site scripting (XSS).- APIs (Interfaz de Programación de Aplicaciones): Para servicios como Google Maps, usar su API de JavaScript te da un control infinitamente mayor sobre la apariencia y la funcionalidad que un simple iframe. Requiere más conocimientos técnicos, pero el resultado es más profesional y optimizado.
- Etiquetas
<object>o<embed>: Son etiquetas HTML más antiguas que también sirven para incrustar contenido, especialmente PDFs o contenido multimedia. En la práctica, el iframe las ha sustituido en la mayoría de los casos. - AJAX / Fetch API: Si lo que quieres es cargar contenido de tu propio servidor de forma dinámica (por ejemplo, cargar más productos sin recargar la página), AJAX es la tecnología adecuada, no un iframe.
La ventaja principal es la facilidad. Copias, pegas y tienes un contenido externo funcionando en tu web en segundos. La desventaja, como veremos, es que estás cediendo una parte del control, y eso en SEO siempre hay que mirarlo con lupa.
Cómo crear un iframe paso a paso
Aunque plataformas como YouTube te dan el código ya hecho, es fundamental que entiendas su estructura para poder modificarla y optimizarla. No te asustes, que es más fácil de lo que parece.
La estructura básica del código
Un iframe mínimo y funcional tiene este aspecto:
<iframe src="https://www.ejemplodelaotrapagina.com"></iframe>
Aquí, el atributo src (de source o fuente) es el más importante: es la URL de la página que quieres mostrar en la «ventana». Pero con esto no basta, necesitamos darle algo de forma y control.
Atributos clave que debes conocer
Para controlar cómo se ve y se comporta tu iframe, usamos atributos. Estos son los que más vas a necesitar en tu día a día:
El gran debate: ¿son los iframes malos para el SEO?
Aquí es donde me pongo serio. Durante años, en el sector hemos visto los iframes con recelo. La respuesta corta es: no son intrínsecamente malos, pero si los usas mal, pueden ser un desastre.
La verdad es que Google ha mejorado mucho su capacidad para entender el contenido dentro de los iframes, pero siguen existiendo riesgos que debes conocer.
El problema del rastreo y la indexación
Históricamente, Googlebot trataba el contenido de un iframe como si fuera de un tercero (que lo es) y a menudo no lo asociaba con la página principal. Esto significaba que si tenías contenido importante para tu posicionamiento dentro de un iframe, corrías el riesgo de que Google no lo «leyera» o no le diera la misma importancia.
Actualmente, Google es más listo, pero la recomendación sigue siendo la misma: nunca coloques contenido textual crítico para tu SEO (párrafos de texto, palabras clave principales) dentro de un iframe. Úsalos para contenido multimedia o funcional, no para el core de tu página.
Impacto en la velocidad de carga (WPO)
Este es, en mi opinión, el mayor peligro. Cada iframe es una petición HTTP extra a un servidor externo. Si metes varios iframes en una página (un vídeo, un mapa, un post de Facebook…), la carga de tu web se puede ralentizar una barbaridad. Esto afecta directamente a las Core Web Vitals, especialmente al LCP (Largest Contentful Paint), y es una señal negativa para Google.
¿La solución? Lo que te he comentado antes: el atributo loading="lazy". Es tu mejor amigo. Implementarlo puede suponer la diferencia entre una página que carga en 2 segundos y una que tarda 7.
Mi recomendación como consultor SEO
Te lo digo claro: usa iframes cuando no haya una alternativa mejor y sean para contenido secundario. Un vídeo de YouTube o un mapa de Google Maps son casos de uso perfectos. ¿Poner la home de otra web tuya en un iframe? Mala idea. ¿Incrustar tu texto de «Quiénes Somos» desde otro documento? Un error garrafal.
Buenas prácticas para usar iframes sin riesgos
Si has decidido que necesitas usar un iframe, perfecto. Pero hazlo bien. Aquí tienes una tabla resumen con los atributos clave y mis consejos para cada uno. Piensa en esto como un checklist rápido.
| Atributo | Descripción | Mi consejo SEO / WPO |
|---|---|---|
src |
La URL del contenido a mostrar. | Asegúrate de que la URL usa HTTPS. Cargar contenido inseguro (HTTP) en una página segura (HTTPS) da errores de «contenido mixto». |
title |
Describe el contenido del iframe. | ⭐⭐⭐⭐⭐ Obligatorio. Sé descriptivo. Ayuda a la accesibilidad y le da contexto a Google. No pongas «vídeo», pon «Vídeo tutorial sobre SEO para principiantes». |
width / height |
Dimensiones del iframe en píxeles. | No te obsesiones con estos valores. Es mejor controlarlos con CSS para que el iframe sea responsive y se adapte a móviles. |
loading="lazy" |
Retrasa la carga del iframe hasta que sea visible. | ⭐⭐⭐⭐⭐ Imprescindible. La mejora en WPO es brutal. Si solo puedes aplicar un consejo, que sea este. |
sandbox |
Aplica restricciones de seguridad. | Recomendable si incrustas contenido de fuentes que no controlas al 100%. Aporta una capa extra de seguridad contra ataques XSS. |
Además, para hacer un iframe responsive (que se adapte a cualquier pantalla), lo ideal es no usar los atributos `width` y `height` directamente, sino controlarlo con CSS. Un truco muy extendido es envolver el iframe en un `div` contenedor y aplicarle estilos para que mantenga la proporción. Hay muchos generadores online que te dan el código CSS listo para copiar y pegar.
Alternativas a los iframes: ¿cuándo usarlas?
Los iframes no son la única forma de incrustar contenido. Dependiendo de lo que necesites, puede haber opciones mejores:
La regla general es: si el servicio te ofrece una API o un SDK (Kit de Desarrollo de Software), suele ser una alternativa más potente y optimizada que el iframe. Si solo te dan la opción de «embeber» o «incrustar», casi seguro que te darán un iframe.
Mi consejo final: cuándo SÍ y cuándo NO usar un iframe
Después de todo este rollo, quiero que te quedes con una idea clara. Los iframes no son ni buenos ni malos, son una herramienta. Como un martillo, puedes usarlo para construir una silla o para machacarte un dedo. Todo depende de cómo lo uses.
Usa iframes sin miedo para:
✅ Insertar vídeos de plataformas externas (YouTube, Vimeo).
✅ Incrustar mapas interactivos (Google Maps).
✅ Mostrar reproductores de audio (Spotify, SoundCloud).
✅ Insertar posts específicos de redes sociales.
Piénsatelo dos veces (o mejor, no lo hagas) para:
❌ Mostrar contenido textual importante para tu SEO.
❌ Incrustar páginas enteras de otra web.
❌ Cargar contenido que es crítico para la funcionalidad principal de tu página.
La clave es el equilibrio. Un iframe bien optimizado con su `title` y su `loading=»lazy»` es perfectamente válido. Una página llena de iframes sin optimizar es un suicidio para tu velocidad de carga y tu SEO. Úsalos con cabeza y no tendrás ningún problema.
Preguntas frecuentes sobre los iframes
Estas son algunas de las dudas que más me plantean mis clientes cuando hablamos de este tema. Te las respondo de forma directa.
¿Afecta un iframe al «link juice» o autoridad de mi página?
No directamente. Google entiende que el contenido del iframe pertenece a otro dominio. Los enlaces que haya dentro de ese iframe pasarán su autoridad a la URL de origen, no a la tuya. Por lo tanto, un iframe no te va a traspasar autoridad ni te la va a robar de forma significativa.
¿Cómo hago para que un iframe sea responsive?
La mejor técnica es usar CSS. Olvídate de los atributos `width` y `height` en el HTML. Envuelve el iframe en un contenedor `div` y aplica propiedades CSS como `position: relative;`, `padding-bottom` (para mantener la proporción, por ejemplo, 56.25% para un vídeo 16:9) y luego al iframe le das `position: absolute; top: 0; left: 0; width: 100%; height: 100%;`. Busca «responsive iframe generator» en Google y te saldrán herramientas que lo hacen por ti.
¿Google puede penalizarme por usar iframes?
No, Google no penaliza por el simple hecho de usar la etiqueta `