Cómo optimizar Flash para los motores de búsqueda

El tema con Flash es que tiene una mala reputación, por así decirlo, que no se merece, por dañar un poco la visibilidad de los motores de búsqueda. En otras palabras, el principal problema con Flash es que los motores de búsqueda no lo “entienden” todavía y probablemente no lo “entiendan” en un futuro. Flash incluye una lógica y puede recibir solicitudes de un visitante, pero los motores de búsqueda están diseñados para manipular el contenido estático. En realidad Flash es un programa que está continuamente corriendo, así que es mucho más difícil de analizar que un simple código en HTML.

Normalmente, se incluyen Flash en las páginas web con código que impide o no provee buena accesibilidad para los visitantes o los motores de búsqueda que no puede leer Flash. Es porque esto que las páginas que incluyen Flash deben ser codificadas a mano con contenido primordialmente en HTML, y un método de detección automática para verificar el soporte Flash antes de intentar iniciar la película. El contenido primario en HTML puede optimizarse para los buscadores como si el Flash no estuviera allí, mientras el Flash provee una experiencia avanzada para el visitante común que tenga instalado el reproductor Flash player.

El lanzamiento el 11 de abril de 2006 del popular navegador Microsoft Internet Explorer (IE) incluía una actualización (”Eolas”) que impide la ejecución correcta de los controles en Flash basados en ActiveX. Cuando el usuario intenta interactuar con Flash, se despliega un cuadro de mensaje declarando: “Haga clic aquí para activar y usar este control”. Ese clic adicional es una grave molestia. Por suerte, la técnica de programación descripta en este artículo resuelve el problema Eolas de Flash.

Requerimientos para un buen uso de Flash

La animación en Flash es una manera excelente de presentar contenidos complejos porque permite al diseñador poner más contenido en un espacio finito, sin desacomodar el diseño de la página. Para sitios de contenido tecnológico, Flash es una forma ideal de presentar una galería de fotos o una película que describe un producto muy complejo. Por el otro lado del espectro, los sitios del rubro artístico y de entretenimiento tienen una necesidad real por los elementos audiovisuales y Flash es la solución perfecta.

Cuando se usa Flash, estamos satisfaciendo cada uno de estos objetivos:

• Diseño limpio
• Optimización para los motores de búsqueda
• Accesibilidad para una gran variedad de navegadores, incluyendo lectores de pantalla y teléfonos móviles
• Validación de código y cumplimiento de los estándares
• Correcta funcionalidad con IE

Programación del Flash optimizado

Mi recomendado método “SEO Flash” utiliza una capa con contenido primario, accesible para motores de búsqueda, y una función en Javascript llamada SWFObject() para detectar cuando los navegadores son capaces de ver Flash. Cuando una versión apropiada del reproductor Flash player está presente, el Javascript manipula el modelo de objetos del documento (DOM) de la página para reemplazar el contenido primario con la película Flash. La mayoría de los bots de los motores de búsqueda no pueden manipular Flash, de modo que ven sólo el contenido primario. El contenido primario puede contener vínculos, encabezados, texto estilizado, imágenes; cualquier cosa que podamos agregar a una página HTML común y corriente. Con la corrección de textos y la técnica de codificación aplicada a los contenidos primarios, Flash ya no es un problema.

La accesibilidad que se le permite a Flash no es tratar de engañar a nadie, siempre y cuando el contenido primario y la película visible sean esencialmente lo mismo. La Iniciativa de Accesibilidad Web (WAI) del Consorcio World Wide Web (W3C) declara específicamente que los contenidos multimedia deberán tener una representación alternativa a disposición. La programación accesible crea el beneficio de presentar información visual sin perder visitas ni motores de búsqueda que dependan del contenido textual.

En Julio de 2007, discutí este método con Dan Crow de Google. Él me advirtió que este método de programación podría llamar la atención debido a la posibilidad de abuso. Si usas este método, asegúrate de que el contenido alternativo sea una representación fiel del contenido en Flash, y evita combinar este con cualquier otro método de codificación que pueda ser abusado. Aún cuando este método de optimización no es abusivo, es agresivo en tanto presenta un pequeño riesgo de que los motores de búsqueda puedan decidir erróneamente que el contenido primario sea una forma de encubrimiento (cloaking).

SWFObject y UFO

Por favor visita el blog de Geoff Sterns, deconcept, para una explicación completa del SWFObject() y para descargar el archivo SWFObject.js requerido para esta solución. Otra solución de código fuente abierto, UFO (Unobtrusive Flash Objects ó Objetos Flash no Invasivos), puedes encontrarla en el sitio de Bobby van der Sluis. Ambos son conceptualmente similares.

Ejemplo: Hacer que la página Home y los menús en Flash sean accesibles

El código de muestra a continuación muestra parte del encabezado y código del menú del sitio de fotografía de Marc Abrahms. Las páginas del interior de este sitio están catalogadas porque los motores de búsqueda pueden encontrar los vínculos en el contenido primario.

<head>
<!--snip-->
<script type="text/javascript" src="/jscript/SWFObject.js"></script>
</head>
<body>
<!--snip-->
<!--primary content, for non-Flash visitors-->
<div id="flash" align="center">
   <p><a href="/gallery/index.php?category=gallery/1_Prints">prints</a> |
      <a href="/gallery/index.php?category=gallery/2_Posters">posters</a> |
      <a href="/gallery/index.php?category=gallery/3_Books">books</a> |
      <a href="/gallery/index.php?pageId=115&start=0">my account</a>
      <!--snip, for brevity-->
   </p>
</div>
<!-- Flash player detection and Flash insertion -->
<script type="text/javascript">
	 var fo = new SWFObject("homepage_v1.swf",
           "flash", "680", "390", "5", "#3a403c");
  fo.write("flash");
</script>

La programación accesible de Flash no va a causar mágicamente que un sitio suba a los primeros resultados, pero este método de optimización para Flash eliminará cualquier desventaja de lugar en los resultados que se asocia con Flash.

Ejemplo: Hacer que el contenido de una galería de fotos sea visible para los motores de búsqueda

Un segundo ejemplo, del sitio web Virtutech, nos muestra cómo insertar un largo contenido en un espacio fijo. Usaremos un DIV y ajustaremos “overflow:auto” a sus propiedades en CSS para crear una zona de texto con barra de desplazamiento. Esto evita que el diseño de la página se desacomode cuando se despliegue el contenido alternativo. Para ver el contenido alternativo, carga la página principal de Virtutech en un navegador con Javascript deshabilitado.

<div id="movieAlt"><div id="movieAltInner">
     <h2><a href="/products/index.html">Simics</a> is
     used to develop the embedded
     software that runs electronic devices such as:</h2>

     <li>Aerospace hardware</li>
     <li>Automobile control systems</li>
     <li>Telecommunications infrastructure</li>
     <li> High-end servers</li>
     </ul>

     <p><em>Hardware:</em> <strong>Satellite Control
     System</strong></p>
     <p><em>Challenge:</em> Unable to test software with satellites
     on orbit.  How
     to verify new software?</p>
     <p><em>Resolution:</em> Using Simics, the developers
     can run software
     quality tests on the ground, to ensure that the software works correctly
     before it's installed.</p>
     <h2>Industry: Automotive</h2>
     <p><em>Hardware:</em> <strong>Electronic Control
     Unit</strong></p>
     <p><em>Challenge:</em> Need to develop software now, but
     the ECU won't
     be available for months</p>
     <p><em>Resolution:</em> Simics enables programmers to
     develop and test
     the software before the hardware is available, reducing time to market.</p>
     <h2><em>Industry:</em> Telecommunications</h2>
     <p><em>Hardware:</em><strong> Wireless Network Equipment</strong></p>
     <p><em>Challenge: </em> You have twenty programmers. Each
     needs a complete
     system for testing. They cost MILLIONS.</p>
     <p><em>Resolution:</em> Using Simics to create a model
     of the target hardware,
     each programmer can have his or her own virtual device for software testing
     and debugging, without breaking your budget.</p>
     <h2>Industry: Internet</h2>
     <p><em>Hardware:</em> <strong>Network servers</strong></p>
     <p><em>Challenge:</em> Software bugs keep popping up.
     Some take weeks to
     reproduce and fix. You are running out of time.</p>
     <p><em>Resolution:</em> With Simics, programmers can
     run the program forwards
     and backwards to quickly identify, recreate and repair bugs.</p>
</div></div>
<script type="text/javascript">
  var fo = new
  SWFObject("flash/virtutech_intro.swf", "mymovie", "497", "287", "7", "#ffffff");
  fo.write("movieAlt");
</script>

El código en CSS:

#movieAlt {
	height: 287px;
	width: 497px;
	overflow: auto; /*Scroll bar on HTML content div*/
	}
#movieAltInner {    /*For IE's faulty box model*/
	padding: 10px 20px;
	}

Además de estos sitios, hemos usado este método de optimización Flash en muchos otros sitios de alto tráfico. El código ha sido ejecutado miles de veces prácticamente sin quejas. Los sitios que usan este método de optimización Flash han alcanzado resultados muy altos para palabras clave encontradas sólo en el contenido en Flash.

Sitios completamente hechos en Flash

Un sitio construido enteramente con Flash sufre una gran desventaja debido a que carece de una estructura de página para organizar el contenido, enlaces internos y títulos de página únicos. Una solución es crear distintas páginas en HTML para representar cada “página” en Flash, e instalar la película en Flash en cada una de ellas. Cuando un visitante solicite la página, verán el Flash si lo tienen instalado. De otro modo, un visitante sin posibilidad de “entender” Flash, tal como los motores de búsqueda, serán capaces de recorrer el sitio. Si un usuario sigue un resultado de búsqueda hasta una de las páginas internas, tendrán la misma experiencia en Flash porque la película está disponible en todas las páginas. Otra solución es dividir el Flash en varias partes y poner cada una en cada página.

Dividir el Flash puede resultar en que las transiciones entre páginas no proporcionen el mismo efecto fluido que uno quiso crear desde el principio. Para tener lo mejor de los dos mundos, envia un parámetro a la película Flash usando FlashVars. La misma película puede aparecer en cada página HTML pero, dependiendo del valor del parámetro, la película puede comenzar en un punto determinado para desplegar el contenido en Flash que se corresponda a esa página. Para librarte de todas las páginas adicionales, pero aún ser capaz de referirte a las diferentes partes del Flash, agrega un # y una etiqueta al final de cada URL, y pasa esa etiqueta al Flash. Este enfoque puede permitir que los botones de Atrás y Adelante funcionen apropiadamente, y permite que la gente pueda agregar a sus Favoritos partes específicas del sitio en Flash.

También es posible usar pequeños scripts en PHP para obtener el contenido primario en HTML y el contenido Flash desde una base de datos MySQL. Este acercamiento simplificaría enormemente el mantenimiento de un sitio en Flash accesible al guardar sólo una representación del contenido.

Autor original: Jonathan Hochman
Fuente: http://www.jehochman.com/articles/seo-friendly-flash.shtml

NOTA: Algunos vínculos y textos de la traducción fueron modificados del original.