iFrame: análisis SEO y de accesibilidad

iFrame (marco flotante) se trata un elemento HTML que permite insertar otro documento HTML dentro una página web. Es una de las maneras más populares de integrar contenido interactivo y multimedia dentro de un site. Por ejemplo, si quieres introducir un contenido de Google Maps o cualquier otro contenido de Google en tu site esta es la manera.

Los iFrames tienen un uso muy popular pero muchas veces no se sabe cómo de SEO-friendly es este elemento HTML. Así que vamos a supervisar el SEO y la accesibilidad de un iframe:

Análisis SEO de un iFrame:

1.       El contenido en un iFrame no se considera parte de la página principal. Así el contenido dentro de un iFrame no se indexará cómo parte de tu site.

2.       La página que se encuentra en un iFrame puede ser rastreada por los bots e indexada pero no traspasa el Page Rank hacia la página origen.

3.       Si quieres pasar Page Rank hacia la página origen (contenido dentro del iFrame) hay que agregar un href=”enlace-pagina-origen” entre las etiquetas <iframe> </iframe>, está técnica no está 100% comprobada pero se cree que de esta forma se traspasa el Page Rank a la página origen. Por lo que si quieres estar seguro de transapasar Page Rank pon un link antes o después del elemento iFrame.

Análisis accesibilidad de un iFrame:

1.       Los links dentro del iFrame serán igual de accesibles que el resto de los enlaces de la página.

2.       Conviene introducir un texto que describa el iFrame, para que en el caso de que el navegador no soporte iFrames o de tener la opción inhabilitada de iFrames, muestre un texto descriptivo y un enlace hacía la página origen en vez de el iFrame:

<iframe src=”http://origen-recurso.html” width=”XX” height=”XX”><p>Texto que describe el contenido del iFrame <a href=”http://sourcesite.com/sourcepage.html”>Visualiza este contenido.</a></p>
</iframe>

Si no se utiliza esta técnica normalmente aparecerá por defecto un link hacia el contenido del iFrame.

Ejemplo de iFrame para revisar el código fuente (y jugar un rato):


 

Análisis de usabilidad:

En los referente a la usabilidad nos centramos en el atributo “scrolling”:

  1. scrolling=”auto”, en este caso sólo se muestra el scroll vertical y horizontal si el contenido con cabe en el iFrame.
  2. scrolling=”yes” se muestra aunque el contenido se muestre perfectamente en el iFrame.
  3. scrolling=”no” en cualquier caso no se muestran los scrolls.

IFrame: análisis SEO y de accesibilidad

IFrame (marco flotante) se trata un elemento HTML que permite insertar otro documento HTML dentro una página web. Es una de las maneras más populares de integrar contenido interactivo y multimedia dentro de un site. Por ejemplo, si quieres introducir un contenido de Google Maps en tu site esta es la manera.

Los iFrames tienen un uso muy popular pero muchas veces no se sabe cómo de SEO-friendly este elemento HTML. Así que vamos a supervisar el SEO y la accesibilidad de un iframe:

Análisis SEO de un iFrame:

1. El contenido en un iFrame no se considera parte de la página principal. Así el contenido dentro de un iFrame no se indexará cómo parte de tu site.

2. La página que se encuentra en un iFrame puede ser rastreada por los bots e indexada pero no traspasa el Page Rank hacia la página origen.

3. Si quieres pasar Page Rank hacia la página origen (contenido dentro del iFrame) hay que agregar un href=“enlace-pagina-origen” entre las etiquetas <iframe> </iframe> ( está técnica no está 100% comprobada pero se cree que de esta forma se traspasa el Page Rank).

 

Análisis accesibilidad de un iFrame:

1. Los links dentro del iFrame serán igual de accesibles que el resto de los enlaces de la página.

2. Conviene introducir un texto que describa el iFrame, para que en el caso de que el navegador no soporte iFrames o de tener la opción inhabilitada de iFrames, muestre un texto descriptivo y un enlace hacía la página origen en vez de el iFrame:

<iframe src=”http://origen-recurso.html” width=”XX” height=”XX”><p>Texto que describe el contenido del iFrame <a href=”http://sourcesite.com/sourcepage.html”>Visualiza este contenido.</a></p>
</iframe>