Un programador más » html

SEO y flash

jmnieves — Wed, 02 Dec 2009 16:02:11 +0000

Hoy os hablare de SEO y flash , como muchos de vosotros ya sabreis adobe flash nunca se ha llevado del todo bien con el SEO.

En los últimos meses google ha intentado subsanar esta problematica en la indexación y lo ha conseguido parcialmente, a dia de hoy google es capaz de indexar las siguiente información de un archivo flash:

Contenido indexado por google de flash

Archivos .swf , no indexa archivos .flv.
Todo el texto que el usuario vea en el flash .
Las URL que contenga el flash.

Incluir contenido flash de forma seo friendly

Una vez hemos visto que contenido es capaz de indexar google de un archivo flash , llega la hora de encontrar la forma más seo friendly de cargar nuestros archivos flash.

Para esta tarea os recomiendo usar swfobject una libreria javascript que ademas de ser seo friendly al permitirnos incluir contenido alternativo nos servira tambien para activar de forma automatica las peliculas flash en los navegadores microsoft.

Ejemplo de uso de swfobject





 
Indexar diferentes páginas flash
Cuando hemos diseñado un site en flash nos ocurre que google solo indexa una única URL,  lo cual dificulta la indexación de diferentes contenidos de nuestro flash. Para resolver esta problematica existe la libreria de javascript SWFAddress que utiliza la funcionalidad ExternalInterface introducida en Flash Player 8.
SWFAddress permite insertar links en aplicaciones y websites hechos en flash y de esta forma utilizar los botones Adelante, Atras y Recargar del navegador. Además se pueden crear URL únicas con títulos de páginas para aplicaciones flash.
Ejemplo de uso de swfobject
En el head del html



Codigo a incluir en nuestra pelicula flash
import flash.external.*;

_global.SWFAddress = function(){

this._check = function() {

if (SWFAddress.onChange) {

clearInterval(this._interval);

ExternalInterface.addCallback('setSWFAddressValue', this, SWFAddress.setValue);

SWFAddress.setValue(SWFAddress.getValue());

}

}

this._interval = setInterval(this, '_check', 10);

this._value = '';

};

_global.SWFAddress = new SWFAddress();

SWFAddress.getTitle = function():String {

var title:String = String(ExternalInterface.call('SWFAddress.getTitle'));

if (title == 'undefined' || title == 'null') title = '';

return title;

}

SWFAddress.setTitle = function(title:String):Void {

ExternalInterface.call('SWFAddress.setTitle', title);

}

SWFAddress.getValue = function():String {

var addr:String = String(ExternalInterface.call('SWFAddress.getValue'));

var id:String = String(ExternalInterface.call('SWFAddress.getId'));

if (id != 'null') {

if (addr == 'undefined' || addr == 'null') addr = '';

} else {

addr = SWFAddress._value;

}

return addr;

}

SWFAddress.setValue = function(addr:String):Void {

if (addr == 'undefined' || addr == 'null') addr = '';

ExternalInterface.call('SWFAddress.setValue', addr);

SWFAddress._value = addr;

if (SWFAddress.onChange) SWFAddress.onChange();

}
SWFAddress.onChange = function() {

var arr = new Array('', '/home', '/blog', '/forum');

var addr = SWFAddress.getValue();

gotoAndStop(getIndex(arr, addr));

SWFAddress.setTitle(formatTitle(addr));

}

En el boton de navegación de nuestra pelicula flash
this.onRelease = function() {

SWFAddress.setValue('/home');

}

Video tutorial de swfaddress

_________________________________________________________________________________
Espero que os haya servido de ayuda este articulo , si quereis seguir investigando acerca del flash y seo os recomiendo la siguiente web:

Adobe Search Engine Optimization Technology Center

Usabilidad y diseño de formularios

jmnieves — Sat, 21 Nov 2009 17:18:57 +0000

Hola en este articulo os hablare de usabilidad y diseño de formularios. Cuando diseñamos un formulario debemos partir de la premisa que el usuario detesta rellenar formularios y que debemos facilitar en la medida de lo posible su compresión , introducción y limitar los posibles errores con el objetivo de obtener:

Menor número de abandonos.
Mayor número de registros obtenidos
Calidad de los registros obtenidos.

Para conseguir esto debemos seguir una serie de normas:

Una presentación visual clara.
Un etiquetado descriptivo e intuitivo.
Eligir los controles adecuados para cada tipo de información solicitada
Mostrar al usuario de forma clara las acciones que va a relizar.

Presentación visual clara

Debemos crear el formulario con una presentación que inspire al usuario facilidad. Para ello debemos diseñar un formulario simple,limpio e ordenado.Con ello conseguiremos un formulario que:

Facilita su lectura
Dirige la atención a los aspectos esenciales
Aumenta la efectividad, ya que favorece que cumplan sus objetivos.
Mejora la eficacia al reducir el esfuerzo y los errores

Técnicas a seguir para lograr un formulario claro, ordernado y simple

Reducir el número de elementos de la página a los necesarios
Eliminar repeticiones innecesarias
Minimizar el uso de cajas, bordes y líneas.
Aumentar los espacios blancos, para favorecer el descanso de los ojos y facilitar la visualización.
Reducir elementos de distracción
Limitar las instrucciones al mínimo necesario.

Ejemplo de un formulario claro

Etiquetado descriptivo e intuitivo

Un correcto etiquetado nos permitira:

Conseguir registros con la información adecuada.
Menor número de errores y por lo tanto mejor número de abandonos.

Técnicas a seguir para lograr un correcto etiquetado

Nombres de etiquetas decriptivas.
Aportar información acerca del contenido.
Mostrar que elementos son obligatorios.

Eligir los controles adecuados

A la hora de elegir el control más adecuado debemos tener en cuenta:

¿Es más natural para los usuarios teclear la respuesta
que seleccionarla?
¿Es fácil escribir mal las respuestas?
¿Necesita el usuario ver antes las opciones para
entender claramente la pregunta?
¿Cuántas opciones hay?
¿Puede el usuario seleccionar más de una opción?
¿Están las opciones visualmente destacadas?
Permitir introducir datos en el formato en que están acostumbrados

Una vez elegido el control debemos seguir unas sencillas normas:

Ajustar el tamaño del campo de texto al dato esperado.
Ofrecer pistas, modelos o ejemplos en las preguntas

Ejemplo de formulario con controles usables

Acciones claras

A llegado la hora de la verdad , nuestro usuario ha rellenado todo el formulario ¿y ahora que?; eso mismo se esta preguntando nuestro usuario. Para resolver esta pregunta y conseguir mayor número de registros debemos:

Mostrar al usuario en que punto del proceso se encuentra
Mostrar claramente que tipo de acción se va a efectuar en el botón de envio, no vale un OK

Para lograr esto podemos usar las siguientes técnicas:

Diferencia la acción principal de las secundarias
Migas de pan que muestren al usuario en que paso se encuentra.
Bloqueo del boton de envio despues de ser pulsado con texto descriptivo . Ej: “Enviando información…”

Ejemplo de buena práctica

Espero que este articulo os haya sido util si estais interesados en este tema os dejo un par de enlaces muy interesante de la gente de usolab acerca del diseño de formulario usables:

SEO y HTML

jmnieves — Tue, 13 Oct 2009 15:48:19 +0000

SEO y HTML , muchas veces nos centramos en las palabras claves, la URL ,el titulo…etc y nos olvidamos que nuestras páginas son indexadas por robots que no dejan de ser aplicaciones complejas que intentan comprender leer el contenido de nuestro sitio web.

Para facilitarles esta labor debemos preocuparnos de que nuestro HTML sea lo más explicativo posible usando tags descriptivos del contenido que albergan.

Algunos tags HTML descritivos
Tag	Descripción
	Define que la palabra contenida dentro del tag es una acronimo.
	El texto es una cita larga.
	El texto es una cita.
	El texto contiene información acerca del autor o dueño del documento

Debemos tener en cuenta que aunque la validación de una página web no influye en la indexación si que se tiene en cuenta que el contenido de nuestra página siga una lógica de estructuración en su contenido. Es por ello que debemos cuidar que nuestro html sea:

Descriptivo.
Estructurado.
Jerárquico.
Coherente.

Licencias de imagenes con RDFa y buscadores

jmnieves — Mon, 17 Aug 2009 15:39:33 +0000

La mayoria de buscadores incorporan entre sus funcionalidades la búsqueda de imagenes. Estos buscadores permiten afinar la búsqueda mediante el uso de filtros ( tamaño , tipo etc..).

Búsqueda avanzada de imagenes en Google

A parte de los conocidos tamaño de imagen , color etc… los buscadores nos permiten filtrar por el tipo de licencia de la imagen .

El uso de licencias de imagenes nos permitira ademas de dar una información extra al buscador tener un control del uso de nuestras imagenes en la Red.

Para definir la licencia de una imagen mediante HTML nos valdremos de las extensiones RDFa mediante el cual mostraremos en nuestro código HTML el tipo de licencia de la imagen de forma transparente para el usuario final .

Ejemplo de la semantica a utilizar




Attribution-Share Alike 3.0 Unported

A continuación os dejo el video explicativo del blog oficial de Google al respecto:

Los estandares web como técnica SEO

jmnieves — Thu, 13 Aug 2009 14:45:57 +0000

En el mundo SEO solemos centrarnos en conceptos como linkbaiting,backlinks etc… y nos olvidamos de la estandarización de nuestro contenido .

El termino estandar web encierra en si mismo un conjunto de técnicas y normalizaciones que tienen como objectivo mejorar la accesibilidad,usabilidad y interoperabilidad de un sitio web.

Los motores de búsqueda usan spiders robots para rastrear e indexar los sitio web. Estos motores de búsqueda usan navegadores basados en texto.Los navegadores basados en texto no son capaces de mostrar imagenes , flash o cualquier otro contenido embebido de nuestro sitio web; solamente interpretan el contenido con formato texto plano.

La importancia pues de crear nuestros sitios webs estandarizados reside en ser capaces de comunicar mediante tags la relevancia y jerarquia de un contenido dentro de nuestra página y dar la mayor información indexable a los motores de búsqueda.

Navegador basado en texto

Para visualizar nuestro sitio web como lo haria un motor de busqueda podemos usar servicios de emulación como el que ofrece Yellowpipe.com o bien descargar Lynx uno de los navegadores basados en texto más extendidos.

Un ejemplo del beneficio del uso de los estandares en nuestras páginas lo encontramos en los atributos alt y title en imagenes y enlaces , dichos atributos ofrecen información extra a los motores de búsqueda acerca de nuestras imagenes o enlaces ayudando a entender el contenido de nuestra web.

Recuerda que los estandares web ademas de ser un técnica SEO nos ayudarán a hacer de nuestra web un sitio web accesible para personas discapacitadas o usuarios que se conecten desde dispositivos moviles o videoconsolas de última generación.

Robots.txt nuestra puerta a los motores de búsqueda

jmnieves — Wed, 12 Aug 2009 13:19:16 +0000

Aunque su extensión no sea tan llamativa como .php o .aspx el archivo robots.txt en lo que a posicionamiento SEO se refiere es nuestra puerta de entrada a los motores de búsqueda y debemos mostrarle por lo tanto la atención que se merece si pretendemos que nuestra web sea indexada de forma efeciente.

Dentro del archivo robots.txt indicaremos que zonas de nuestra web queremos que no sean indexadas por ejemplo por ser directorios de configuración de nuestro CMS.

Esto lo realizaremos con la siguiente directiva:

User-agent: * User-agent: *
Disallow: / cgi-bin / Disallow: / cgi-bin /
Disallow: / admin / Disallow: / admin /
Disallow: / stuff / Disallow: / stuff /
Disallow: / private.html Disallow: / private.html

Una de las posibles funcionalidades más olvidada dentro de archivo robots.txt es la de indicar al motor de búsqueda la localización del archivo Sitemap , del archivo Sitemap os hablare más detenidamente en otro articulo pero os dejare unas pinceladas del mismo comentando que este archivo con estructura XML nos permite mostrar al motor de búsqueda que páginas de nuestra web pueden ser indexadas por el mismo facilitando la indexación de las mismas.

La linea que os pongo a continuación es un ejemplo de como mostrar dentro de nuestro robots.txt la ruta de acceso a nuestro Sitemap

Sitemap: http://www.unprogramadormas.com/sitemap.xml

Para obtener más información acerca de la configuración del fichero robots.txt os recomiendo robotstxt.org

Contenido duplicado y buscadores

jmnieves — Tue, 11 Aug 2009 07:52:12 +0000

Los curiosos del SEO a veces nos encontramos con que tenemos más de una forma de acceder a un mismo contenido desde nuestra web (por ejemplo contamos con multiples dominios para un mismo sitio web). Esta caracteristica trae consigo un problema con nuestros amigos los buscadores ya que los marcan como contenido duplicado penalizandonos en sus resultados de búsqueda. Buscadores como : Google,Bing nos ofrecen desde hace algún tiempo una solución a dicho problema se trata del tag “Canonical”.

Uso del tag canonical

Debemos colocar el tag “Canonical” dentro del head en aquellas páginas duplicadas indicandole en el atributo href la url del documento “original” (en el caso de multiples dominio , el dominio que consideremos el principal).