Prepara tu web para Google Instant Preview

Escrito el 23 diciembre, 2010 por Nacho Plaza

Google lanzó recientemente Instant Preview, una nueva funcionalidad del buscador que nos permite ver en los resultados de búsqueda capturas de pantalla de las páginas listadas. En principio, Instant Preview no afecta en el posicionamiento de la página en los SERPs (Search Engine Result Pages), pero sí que puede hacer que los usuarios decidan o no acceder a tu página simplemente mirando la captura de pantalla.

Así que ahora además de preocuparnos del SEO de nuestras páginas, deberíamos prestar atención a las capturas de pantalla que genere Google para evitar que nuestra página aparezca deslucida. ¿Cómo debemos preparar nuestra web para Google Instant Preview?

Contenido Flash

Instant Preview no interpreta contenido en Flash. Sólo hay que buscar un vídeo de Youtube en el buscador y ver la captura de pantalla. Vemos que aparece el mensaje de aviso de que es necesario instalar el pulgin de Flash para visualizar el vídeo.

Para los navegadores que no tienen Flash instalado, lo que deberíamos hacer siempre es mostrar un contenido alternativo en HTML. Por ejemplo, la página principal de la web de Renfe lo hace en su sección central si accedemos desde un navegador. Sin embargo, la previsualización de Google no es capaz de mostrar ese contenido, generando una captura con un espacio en blanco.

Revisa el contenido Flash de la web y asegúrate de que el contenido alternativo se previsualiza correctamente.

JavaScript

Parece que el robot de indexación que genera las capturas de pantalla de Instant Preview no soporta código JavaScript. Por ejemplo, Amazon ofrece dos visualizaciones distintas dependiendo de si el navegador del usuario tiene JavaScript habilitado o no. Según podemos ver en la imagen inferior, la previsualización de la web de Amazon muestra el diseño preparado para navegadores que tienen JavaScript desactivado.

Comprueba que tu web con JavaScript deshabilitado se muestra correctamente, y haz uso de la etiqueta <noscript> para mostrar contenido alternativo.

Lazy Loading

Si utilizas técnicas de Lazy Loading para cargar recursos en una página, puede que Instant Preview no recoja esos cambios. Por ejemplo, el blog Mashable utiliza Lazy Loading para cargar las imágenes a medida que el usuario hace scroll y estas imágenes no aparecen en la previsualización de Google.

Uso de @import para cargar CSS

Una forma de cargar achivos CSS en nuestro código es utilizar @import url('estilos.css') en el código de otras CSS o en el HTML dentro de la etiqueta <style>. Si ya había desventajas al usar @import para cargar hojas de estilos, ahora tienes una más.

La sección de libros de El Corte Inglés lo hace así para la cabecera, y los estilos no aparecen en la previsualización.

Tipografías: Cufon, sIFR, Google Fonts, @font-face

Dos técnicas habituales para cargar tipografías poco comunes y que no se encuentran disponibles en todos los navegadores son Cufon y sIFR. He encontrado una demo de uso de Cufon y otra demo sobre sIFR, y en ninguna de las dos la previsualización de Google es capaz de mostrar la tipografía correcta.

Os dejo unas capturas de la demo de sIFR con y sin Flash habilitado y su previsualización.

Si utilizas tipografías no estándar, o haces uso de @font-face o Google Font Api deberías comprobar si la previsualización de Instant Peview carga realmente el tipo de fuente que te interesa. Si no lo hace, comprueba que con la tipografía alternativa la visualización es correcta.

Por las pruebas que he podido hacer, con estos métodos para utilizar tipografías no estándar, la previsualización no es capaz de reconocer los tipos de fuentes.

Otras pruebas

Por último, en algunas pruebas más que he hecho veo que los frames, iframes y publicidad de AdWords se previsualizan correctamente. A los contenidos con Silverlight o QuickTime les pasa lo mismo que con Flash: no aparecen en las previsualizaciones. Seguro que me dejo muchas cosas por probar que pueden dar problemas con Google Instant Peview. ¿Se te ocurre algo más por lo que puedan fallar?

Puedes consultar más información técnica sobre Google Instant Peview en The official Google Code blog.