Optimización de Iframes en el SEO

Un iframe es un marco flotante que permite insertar un documento HTML dentro de otro. Aunque antiguamente, en las páginas primigenias se utilizaba para incluir distinto contenido de una página diferenciada en marcos.

No obstante a día de hoy el iframe es muy útil cuando se necesita insertar contenido alojado externamente. Por ejemplo cuando queremos insertar contenido de otras aplicaciones de una forma rápida sin necesidad de APIS. Como vídeos de Youtube o contenido de Google maps:

Los iframes, al igual que todo contenido Multimedia en una web, se pueden optimizar de cara al WPO, a la Usabilidad y al entendimiento del propio Google.

el funcionamiento de un IFRAME

Gracias a la etiqueta iframe, puedes cargar contenido de otras páginas o documentos incluso aunque sean de otros dominios (si estos lo permiten). Permite hacer el contenido mucho más variado y enriquecido. Además tiene una gran cantidad de atributos con los que jugar dependiendo del objetivo.

Sin embargo esto tiene una contra importante. Si bien es una ventana hacia otros contenidos de forma directa, también cargas todos los recursos de esa otra página que estés "embediendo" con ese iframe. Lo cual puede afectar muy negativamente en la velocidad de navegación de la web.

Afortunadamente hay varios formas de utilizar este recurso sin sacrificar la experiencia del usuario ni la velocidad.

"Load on Click" en Iframes

Esta práctica consiste en no hacer la llamada del iframe hasta que el usuario haga clic. El principio es similar al del lazy loading, pero en vez de cargar el iframe cuando el usuario ve el elemento, lo que se hace es que no carga el iframe hasta que el usuario hace clic. Pero ¿Hasta que punto funciona?

Si creamos una página en la que solo esté funcionando el iframe (sin ningún elemento que altere la prueba), nos encontramos que ha tenido que cargar todo el contenido de Google Maps.

En total esto se traduce en:

51 solicitudes a servidor

Transferencia de red de 290kB

1.4MB de recursos en total

Mientras que si hacemos la práctica del On Load, nos encontramos con estos resultados hasta que el usuario decida interactuar, si es que decide hacerlo:

Como podemos observar, los resultados denotan una amplia diferencia:

4 Solicitudes al servidor frente a 51.

Transferencia de red de 10.3KB frente a 290kB.

13.1 kB de recursos a descargar frente a 1.4MB.

Más del doble de velocidad de carga.

Teniendo en cuenta que normalmente los iframes suelen cargar recursos pesados ya que están cargando otra web con todos sus recursos incluidos, por lo general suele ser una práctica óptima de cara al WPO.

Como evitar la carga de un iframe hasta que el usuario haga clic

Hay muchos métodos de conseguir este efecto, no es el único. Por ejemplo, yo lo explicaré con un background de CSS, no obstante se puede utilizar el atributo srcdoc por encima y eliminarlo por medio de Javascript cuando se hace clic. Lo cual tampoco sería una mala práctica.

Para poder entender como hacerlo hay que tener unos conocimientos mínimos básicos de HTML, CSS y Javascript. Conocimientos que se imparten a todos los alumnos del Master de SEO de mi empresa Asdrubal. En cualquier caso, he dejado todo el código documentado en Codepen y prácticamente se puede hacer un copia y pega, no hay problema en utilizar todo el código que publico aquí.

HTML para el IFRAME

Para esta práctica como la hago yo, se necesita un elemento div que contenga el iframe, ya que un elemento por encima con un z-index no funcionará con el iframe.

Tanto el div como el iframe tendrán un ID único. Y el iframe tendrá un ancho y un alto definido, además de una clase específica para ocultar la visibilidad de un elemento.
<div id="iframeboxing">
<iframe id="iframeonclick" class="hidden" src="" width="600" height="450"></iframe>
</div>
Y al elemento padre, el div, le añadimos un elemento onclick con el nombre de la función que vayamos a crear (también se puede hacer con add event listener, utilizando el mismo principio que empleo en el artículo de ofuscación de enlaces) y también añadimos un background con la imagen que quedamos que vea el usuario para que haga clic en el iframe si se plantea utilizarlo. Es conveniente a nivel de UX que llame la atención y que  se entienda su funcionalidad. El background en lugar de inline también se puede añadir con el resto del CSS sin problema.
<div id="iframeboxing" onclick="load_on_iframe()" style="background: url('https://carlos.sanchezdonate.com/wp-content/uploads/onload-iframe.jpg');">
<iframe id="iframeonclick" class="hidden" src="" width="600" height="450">
</iframe>
</div>

CSS para el IFRAME

En este caso llamaremos a los dos ID creados y la clase hidden que hemos explicado previamente. Es importante que sea un visibility:hidden.

Al elemento padre, el Iframeboxing, tenemos que asignarle el mismo tamaño que hayamos asignado para nuestro div. Es importante también añadir un cursor pointer, para que el usuario pueda intuir fácilmente que es un elemento clicable. También debemos utilizar un position relative y un overflow hidden para que funcione correctamente.

Respecto al iframe, le añadiremos un position absolute para que case en posición con el elemento padre, y el hack de css de pegarlo por los cuatro costados.
#iframeboxing {
width: 600px;
padding-top: 450px;
cursor: pointer;
background-size: cover!important;
position: relative;
overflow: hidden;
}
#iframeonclick{
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%; height: 100%;
border: none;
}
.hidden {
visibility: hidden;
}

JS del iframe

Ahora es turno de hacer magia con Javascript y que todo esto sea funcional:

Seleccionamos el elemento padre y eliminamos el elemento onclick para no estar ejecutando la función cada vez que el usuario haga clic (aunque en teoría no podrá porque se pondrá el iframe por encima).

Eliminamos la clase que oculta el iframe del elemento iframe.

Añadimos en el src el elemento que se va a insertar en el iframe.

function load_on_iframe() {
document.getElementById("iframeboxing").setAttribute("onClick", "");

document.getElementById("iframeonclick").className = document.getElementById("iframeonclick").className.replace(/(?:^|\s)hidden(?!\S)/g, "");

document.getElementById("iframeonclick").src =
"https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12640.309781091826!2d-0.9916284999999999!3d37.62386605!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1659971988650!5m2!1ses!2ses";
}
Si unimos todo eso, tendremos el efecto que muestro en este codepen (puedes editarlo e ir haciendo comprobaciones a tu gusto).

Por otro lado dejo el código para vagos, por si alguien se ha perdido y quiere una forma rápida y sencilla de insertar un iframe con esta técnica. Simplemente copiando este código, insertandolo en cualquier lugar que pueda añadir HTML y cambiando las partes en verde.
<div id="iframeboxing" onclick="load_on_iframe()" style="background: url('AQUÍ LA URL DE LA IMAGEN ANTES DE HACER CLIC');">
<iframe id="iframeonclick" class="hidden" style="border: 0;" src="" width="600" height="450" allowfullscreen="allowfullscreen"></iframe></div>
<style>#iframeboxing{width:600px;padding-top:450px;margin:auto;cursor:pointer;background-size:cover!important;position:relative;overflow:hidden}#iframeonclick{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none}.hidden{visibility:hidden}</style><script>function load_on_iframe(){document.getElementById("iframeonclick").setAttribute("onClick",""),document.getElementById("iframeonclick").className=document.getElementById("iframeonclick").className.replace(/(?:^|\s)hidden(?!\S)/g,""),document.getElementById("iframeonclick").src="AQUÍ LA URL DEL ELEMENTO EMBED, ES DECIR LA URL DEL IFRAME"}</script>
En caso de aun así tener dudas o problemas con esta implementación, me puedes contactar por LinkedIn o preguntarme rápidamente por Discord.

Advertencia: Debido a un mal uso que hacían los usuarios con vídeos que se reproducían automáticamente en webs con sonido, generando una muy mala experiencia para el usuario, no se puede hacer que un video de YouTube se reproduzca automáticamente con sonido una vez se añada la URL de Youtube en el SRC, por lo que el usuario tendría que volver a hacer clic para ver el vídeo o reproducirlo sin sonido.

Lazy Loading en Iframes

Siempre que el iframe no esté "above the fold", es decir a primera vista del usuario cuando cargue la página, merece la pena hacer una carga diferida del iframe y que este no cargue hasta que el usuario llegue.

Hay numerosas formas de hacer esta práctica por medio de Javascript, pero debido a que se puede hacer de forma nativa con HTML para los principales navegadores, a día de hoy no merece la pena cargar complejas librerías para la realización de esta práctica.

La forma de hacerlo es tan sencilla como implementar el atributo loading con el valor lazy.
<iframe src="https://example.com" width="600″ height="400″
loading="lazy"
></iframe>
Escribí un artículo más extenso de este tema que puedes ver en: lazy loading en iframes.

Metaetiqueta indexifembedded

Es una metaetiqueta que acepta Google desde 2022 que permite que el contenido sea indexado por medio de iframes en otras páginas.

Esta metaetiqueta funciona si la página a indexar tiene un noindex y un indexifembedded. Esto hará que el contenido no sea indexable en la página original, pero si en la página desde la que se inserta el contenido por medio de un iframe. Lo cual tiene ciertos usos bastante interesantes que les dedicaré un artículo.

Ejemplo de iframe con una metaetiqueta indexifembedded: