Introducción a SEO para Flash con SWFAddres.
Escrito por Gerardo Sepúlveda Miércoles, 19 de Enero de 2011 12:12
Como ya veníamos comentando anteriormente, es importante que cuando diseñemos o desarrollemos stios en Flash, tengamos en cuenta cuestiones como el SEO.
El SEO (Search Engine Optimization) es un tema muy amplio y todavía más cuando lo relacionamos con la plataforma Flash. En este artículo hablaremos específicamente de "Flash y deep linking" o enlaces profundos, que no son mas que ligas o hipervinculos que nos llevan hasta una página en particular, permitiendo establecer un enlace a cualquier parte de nuestro sitio y no necesariamente al homepage. Si hablamos de sitios basados en HTML no tendremos tanto problema ya que las ligas y las páginas se irán creando automáticamente. Pero en Flash, suele ocurrir que un solo HTML contenga el .swf (archivo Flash) y a la vez este Flash contenga el sitio entero, por lo cual, independientemente de que el sitio tenga 5, 6, o 10 secciones, el URL en el navegador nunca cambia, por lo cual los motores de búsqueda siempre apuntarán hacia el home del sitio.
Esto en la actualidad esto lo podemos controlar con varias técnicas y herramientas. Una de ellas es mediante SWFADDRESS, una librería abierta que agrega código Javascript dentro de nuestro HTML, y que junto con el Actionscript de nuestro Flash crea registros en la historia de los navegadores y genera páginas únicas para cada sección del sitio. La ventaja de esto es que los buscadores indexan cada una de las páginas dependiendo del contenido de cada sección y los usuarios las pueden marcar en sus favoritos (bookmarks), e incluso utilizar los botones de "atras" o "adelante" del navegador como si fuera cualquier página hecha en HTML. Ve el ejemplo final aquí.
SWFAddress en pocos pasos: Descarga los archivos para el tutorial aquí.
Antes que nada iremos al sitio www.asual.com y descargaremos SWFAddress. Seguido de esto haremos un archivo de Flash muy sencillo, en el cual tendremos 3 botones simulando las secciones que tendría un sitio web.
Creamos los 3 botones para nuestro "sitio", a cada uno le asignaremos un nombre de instancia que llamaremos "boton1" "boton2" y "boton3".
Dentro de un MovieClip crearemos 3 frames, cada frame corresponderá a una sección del sitio y contendrá por ende información diferente en cada frame, a cada frame le pondremos un stop(); en el paner de Actionscript. A este moviclip le pondremos el nombre de instancia de "secciones".
Nos vamos al primer frame de la línea de tiempo principal, en el panel de Actions crearemos eventos con addEventListener para cada uno de los botones e inmediatamente crearemos las funciones que serán llamadas por los eventos, de la siguiente forma:
//Importamos las clases que previamente descargamos: SWFAddress y SWFAddressEvent
import SWFAddress;
import SWFAddressEvent;
//Creamos los EventListeners para cada boton
boton1.addEventListener(MouseEvent.CLICK, clickBoton1);
boton2.addEventListener(MouseEvent.CLICK, clickBoton2);
boton3.addEventListener(MouseEvent.CLICK, clickBoton3);
/*Agregamos un EventListener a la clase SWFAddress para que efectue la acción llamarSWFAddress cada que haya un cambio en SWFAddress*/
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, llamarSWFAddress);
//Creamos las funciones con base en los EventListener que acabamos de crear
function clickBoton1(e:MouseEvent):void {
//Llamamos al método setValue de la clase SWFAddress
SWFAddress.setValue("/inicio");//cuando se de click en boton1 la terminación del URL o la ruta cambiará a "inicio"
}
function clickBoton2(e:MouseEvent):void {
SWFAddress.setValue("/empleos");//cuando se de click en boton2 la terminación del URL o la ruta cambiará a "empleos"
}
function clickBoton3(e:MouseEvent):void {
SWFAddress.setValue("/contacto");//cuando se de click en boton3 la terminación del URL o la ruta cambiará a "entrevistas"
}
/*Creamos la función llamarSWFAddress que definimos previamente en el EventListener, y que mediante "value" pasará el valor de las funciones que definimos arriba. Mediante "switch" condicionaremos la acción que se ejecutará dependiendo del valor que se pase, ya sea en este caso "Inicio", "Empleso" o "Contacto"*/
function llamarSWFAddress(e:SWFAddressEvent):void {
switch(e.value) {
case "/inicio": //Iniciamos la condición (case)
secciones.gotoAndStop(1); //En caso de que se de click en Inicio se irá al frame #1
SWFAddress.setTitle("Inicio"); //El título de la página cambiará a Inicio
break; //Cerramos la condición (case)
case "/empleos":
secciones.gotoAndStop(2); //En caso de que se de click en Empleos se irá al frame #2
SWFAddress.setTitle("Quienes Somos"); //El título de la página cambiará a Quienes Somos
break;
case "/contacto":
secciones.gotoAndStop(3); //En caso de que se de click en Contacto se irá al frame #3
SWFAddress.setTitle("Contacto"); //El título de la página cambiará a Contacto
break;
}
}
Una vez terminado lo anterior iremos al HTML, para insertar nuestro archivo .swf por medio de swfobject. SWFObject es una librería de código abierto JavaScript que nos sirve para insertar archivos Flash dentro de documentos HTML, puedes descargarlo desde aquí: http://code.google.com/p/swfobject/
Primeramente deberemos tener nuestra carpeta swfobject (que descargamos previamente) en el mismo directorio que nuestros demás archivos. Importamos el archivo javascript swfobject, crearemos un div que lo llamaremos "swfaddress" y con swfobject.embedSWF haremos el llamado al .swf. Los parámetros que pondremos serán el nombre del archivo (TutorialSWFaddress.swf), el id del "div" que hemos creado (swfaddress), el tamaño que tendrá nuestro Flash (468x300px ) así como la versión del player de Flash (9.0 en este caso).
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF('TutorialSWFaddress.swf', 'swfaddress', '468', '300', '9.0.45',
'swfobject/expressinstall.swf', {}, {bgcolor: '#fff', menu: 'false'}, {id: 'swfaddress'});
</script>
<body>
<div id="swfaddress">
<p>In order to view this page you need Flash Player 9+ support!</p>
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</p>
</div>
</body>
SWFAddress:
Básicamente lo que necesitaremos del SWFAddress que descargamos (del sitio www.asual.com) son las clases de Actionscrip contenidas en la carpeta dist>as>3>com>asual>swfaddress y los dos archivos que encontremos ahí (SWFAddress.as y SWFAddressEvent.as), tendremos que agregarlos a nuestra carpeta de global.
Por otro lado, en la carpeta dist>js copiaremos el archivo swfaddress.js y lo pegaremos en la carpeta donde tenemos nuestro archivo Flash.
Una vez hecho esto importaremos nuestro archivo swfaddress.js dentro de nuestro HTML tecleando lo siguiente:
<script type="text/javascript" src="swfaddress/swfaddress.js"></script>
Código final HMTL:
Sube tus archivos a un servidor y prueba que funcionen correctamente.
Hasta aquí una introducción al uso de SWFAddress y Flash para un buen SEO, viendo así que no es imposible que Google lea y reconozca a los sitios creados en Flash. Si tienes alguna duda o comentario puedes enviarnos un mail a contacto(at)neopixel.com.mx o postear tus dudas aquí mismo.
Descarga los archivos para el tutorial aquí.
RSS feed Comments
escrito por Tooomas821, octubre 24, 2011
1-.Gener como aplicacion como contenido web. voy ala carpeta en cuestion y agrego un index con iframe sin scroll asi XDDDDD:
se dieron cuelta que llamo a main, pues main contiene al flash
2-. Ahora nos queda agregar frases, para eso abrir el main que te crea catalyst y despues de la imagen flash
colocar descripcion:
esto esta al final del objeto flash:
y aqui van las descripciones
ahora porque no se va a ver lo que escribimos en main por el iframe que no se auto ajusta sino que tu le das el ancho, alto... entonces el seo queda bajo el iframe, dentro de main.html o sea en la pag flash
Ahora tengo una cuestión: ¿Para hacer esto mismo pero con un listado de vídeos embebidos con swfobject?
Un saludo.