Experiencias de un programador curioso del SEO
Entradas etiquetadas con html
SEO y flash
2 dic
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
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("rutaarchivo.swf", "contenedorflash", "300", "120", "9.0.0");
</script>
</head>
<body>
<div id="contenedorflash>
Contenido alternativo que indexará Google
</div>
Video tutorial 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
<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript" src="swfaddress.js"></script>
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:
Usabilidad y diseño de formularios
21 nov
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
13 oct
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.
| Tag | Descripción |
|---|---|
| <acronym> | Define que la palabra contenida dentro del tag es una acronimo. |
| <blockquote> | El texto es una cita larga. |
| <cite> | El texto es una cita. |
| <address> | 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
17 ago
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
<div about="image.jpg"> <img src="image.jpg"> <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"> Attribution-Share Alike 3.0 Unported</a> </div>
A continuación os dejo el video explicativo del blog oficial de Google al respecto:
Los estandares web como técnica SEO
13 ago
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.
<a title="Inscríbete a nuestro RSS" href="http://dominio/suscripcion-rss.aspx"> <img alt="Icono RSS" src="/imagenes/RSS.png"> </a>
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.
