Posicionamiento en buscadores - Inscripcion en directorios de páginas

Cuando google salió, su gran y recolucionario método de indexación se debió a una técnica fundamental, google decidió tomar los vínculos (links) que existían entre las paginas como una recomendación, es decir, si mi blog tiene un enlace hacia tu blog, entonces, quiere decir que yo considero que tu blog es bueno. Otro factor a tomar en cuenta es la importancia que tiene esa página que me está recomendado, no es lo mismo que la página del periódico New York times tenga un vinculo hacia tu pagina a que el bloginternetdeveloping.blogspot.com, por supuesto que la del NY Times es más importante, lamentablemente para mi . Para entender mejor esto pueden revisar la figura 1.

Figura 1

Page Rank : PageRank (PR) es un valor numérico que representa la importancia que una página web tiene en Internet.

Cuando uno quiere subir de posición a una página web que no es muy conocida, es probable que tampoco tenga ningún link o vinculo que apunte hacia esa página, entonces, ¿Cómo podemos empezar a obtener vínculos hacia nuestra web? Es muy sencillo:

Inscríbanla en todos los directorios de páginas que existen en internet (O por lo menos en los más importantes, es decir, aquellos directorios que estén mejor posicionados en google). El directorio web gratuito y software libre más importante del mundo es http://www.dmoz.org/, tiene un Page Rank de 7 y para poder ser incluido en ese directorio debes pasar por unas estrictas normas y validaciones por parte de sus editores.

Mi recomendación es que busquen la mayor cantidad de directorios posibles y se inscriban en todos, es una tarea fastidiosa, pero será muy reconfortante cuando vean su página subir puestos en google rápidamente.


Continuar leyendo...

Posicionamiento en buscadores - Utilizacion de etiquetas h1, h2, Strong, etc.

Durante los inicios del diseño web, las etiquetas h1, h2 era muy utilizadas para representar títulos y subtítulos de las paginas, esto se debía a que le colocaban un formato al texto que estos elementos HTML tienen un comportamiento especifico, ideal para resaltar textos. Por ejemplo, la etiqueta h1 lo que hace es hace muy grande y negrito el texto que esta contenido dentro de ella.

Hoy en día con la utilización de estilos CSS podemos sobre-escribir el comportamiento natural de una h1 y colocarlo del tamaño, color y forma que deseemos, sin embargo, google sigue considerando los textos que se encuentren dentro de las etiquetas h1, h2, h3, etc. Como los textos más importantes de la pagina, los que resumen en cierta manera todo el contenido de la pagina (Los títulos, subtítulos, etc.).

Aprovechandonos de estos conocimientos sobre los buscadores, es muy recomendable mantener esa conducta estandar que la comunidad adopto inicialmente, cada vez que veamos un titulo debemos colocarlo dentro de una etiquera h (h1,h2,h3,h4 o h5), despues si queremos le damos el estilo (color, tamaño, grosor, etc.) que queramos.

La etiqueta <strong> tambien es entendida por google para resaltar una palabra clave dentro de la pagina, solo que en menor medida que las etiquetas h.

Es importante recalcar que no debemos abusar tampoco de estas etiquetas, ya que se puede perder el sentido de la importancia del texto, si colocamos todos nuestros textos dentro de una etiqueta <strong> o <h1> no estamos logrando nada porque google no sabe cuales son los terminos mas importantes, seria como cuando leemos todo un texto en mayuscula, puede aturdirnos y al todo ser importante, en realidad, nada es importante.

Continuar leyendo...

Posicionamiento en buscadores - Tiempo de carga de una pagina web

Esta es un área muy técnica que debe ser atendida con mucha paciencia por parte del desarrollador, pero cada vez vale más la pena tomarla en cuenta porque según el nuevo motor de google llamado Caffeine este es uno de los factores más importantes al momento de posicionar la pagina en el buscador.

Hay miles de factores que perjudican el tiempo de visualización promedio de una página web: Que tan pesadas son las imágenes y recursos, la cantidad de peticiones que hace la pagina, la cantidad de scripts externos que se importan, la velocidad del servidor, la presencia de consultas a la BD muy pesadas, etc.

Podríamos estar todo el día nombrando cosas, pero como hay muchos artículos que hablan sobre optimización de consultas SQL, hosting de servidores, etc. Yo les voy a mencionar solo algunos tips que no parecen tan obvios, pero pueden ayudar bastante a disminuir el tiempo de carga de tu página.

• Bajar el tamaño y calidad de todas tus imágenes de la pagina (Y utilizar la menor cantidad posible).
• Comprimir códigos CSS y Javascript: Comprimir los códigos tiene como inmediata consecuencia lógica que pesen muchísimo menos, y por lo tanto que sean mucho mas rápidos de descargar. Para hacer esto hay un programa muy recomendado llamado YUI Compresor, este programa con un algoritmo logra eliminar todos los espacios en blanco, códigos que sobran, etc. De una página web.
• Unificar tus imágenes en una sola: Una de las metas para hacer más veloz la carga de tu pagina es reducir el número de request que se hacen antes de cargarla o justo al momento de cargarla, si uno tiene 5 imágenes diferentes en una misma página web, es posible unificarlas en una sola imágenes y hacer 5 request a la misma imagen, entonces, como el navegador tiene memoria cache, en realidad solo pide la imagen al servidor la primera vez y de ahí en adelante la carga directamente desde la cache. Para poder poner todo en una sola imagen, deben recorrer la imagen con una propiedad llamada backround-position: 0px 0px; (Primero el movimiento de la posición en X y luego en Y). Por ejemplo ,a siguiente imagen de la figura 1:

Figura 1

Tiene 12 imágenes azules diferentes, donde cada una explica algún punto de la herramienta http://www.tucondominio.com.

Para optimizar esto debemos realizar una sola imagen que vamos recorriendo con el backgroundposition y se le pone el width y height necesario para que la imagen deseada se vea correctamente.

Figura 2

El codigo css para lograr una pagina web como la mostrada en la figura 2 es el siguiente:

.functionTitle{ font-size: 16px;font-weight: bold; padding: 0; margin: 0px;}
#content{ position: relative;display: block;}
#content ul{padding: 0; margin: 0;}
#content li{display: inline-table;width: 350px; margin: 0;margin-left: 50px;padding: 0; font-size: 12px;}
div#calendario{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');
float: left;width: 60px;background-position: 0px 0px;height: 80px; margin-right: 30px;}
div#balances{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 60px 0px;height: 80px; margin-right: 30px;}
div#votaciones{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 182px 0px; height: 80px;margin-right: 30px;}
div#peticiones{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 243px 0px; height: 80px;margin-right: 30px;}
div#servicios{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 60px 90px; height: 80px;margin-right: 30px;}
div#condominio{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');
float: left;width: 60px;background-position: 182px 90px;height: 80px;margin-right: 30px;}
div#reglamentos{position: relative; background: url('../../images/tucondominio/iconos-funciones.png');
float: left;width: 60px;background-position: 243px 90px;height: 80px;margin-right: 30px;}
div#edificio{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');float: left;
width: 60px;background-position: -60px 0px; height: 80px;margin-right: 30px;}
div#espacios
{position: relative;background: url('../../images/tucondominio/iconos-funciones.png');float: left;
width: 60px;background-position: 1px -80px; height: 80px;margin-right: 30px;}
div#cartelera
{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: -60px -80px;height: 80px;margin-right: 30px;}
div#asociacion
{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px; background-position: 121px 88px;height: 80px;margin-right: 30px;}
div#perfil{ position: relative;background: url('../../images/tucondominio/iconos-funciones.png');float: left;
width: 60px;background-position: 121px 0px; height: 80px;margin-right: 30px;}
h2{ color: #F0BC60; font-size: 20px;text-transform: uppercase;
background: url(../../images/tucondominio/imagenes-contacto.png) no-repeat; background-position: 0px 18px;}

• Carga lazy-load de imagenes con JQuery: Jquery es una librería o framework para Javascript que permite programar funcionalidades geniales con unas pocas líneas de código, uno de los “plugins” o componentes que se han desarrollado hasta el momento es llamado laztload. Este plugin permite cargar solo las imágenes de una página web que están siendo visualizadas por el navegador, es decir, si la pagina es muy larga y tiene imágenes por todo el sitio, entonces este plugin no cargará las imágenes si no haz llegado a esa parte de la pagina (haciendo scroll). Esto reduce los tiempos de carga por aunque no haz cargado muchas imágenes, google Jura que ya la pagina termino de visualizarse y lo da por terminado. El mejor ejemplo de lazyload lo consigues en la página web http://www.mashable.com

Para revisar el tiempo de caga de una web les recomiento esta herramienta gratuita.


Continuar leyendo...

Posicionamiento en buscadores - Maquetacion

Una vez que tenemos los URL amigables implementados debemos elaborar nuestras páginas utilizando CSS, debemos EVITAR la utilización de tablas en la gran mayoria de nuestros diseños. CSS es una tecnología utilizada para visualizar (maquetar, dar format, colorear, etc.) de una mejor manera.

Cuando google o cualquier otro buscador entra en tu pagina, no está interesado en saber si es estéticamente agradable, si es usable, ni nada por el estilo, lo único que a un buscador le importa cuando entra a tu pagina es el contenido (de que se trata la pagina, de que habla.). Cuando el robot de un buscador (por ejemplo el googlebot de GOOGLE) entra en tu página, lo primero que hace es limpiar todos los CSS que encuentre para concentrarse únicamente en el contenido de la página. Por esta razón la utilización de tablas te perjudica porque las tablas no son ignoradas por los robots de los buscadores, sino que más bien son consideradas parte del contenido, lo que perjudica el posicionamiento de tu página en los buscadores.

Es importante acotar que si bien las tablas no son amigables a los buscadores, toadvía son una tecnologia importante y útil para ciertas ocaciones, y tienen propiedades tales como

THEAD, TBODY, TFOOT

que pueden resultar muy prácticas.

Para entender más sobre maquetación en css les dejo este tutorial que he realizado hace algún tiempo que explica los conceptos basicos de CSS.

Continuar leyendo...

Posicionamiento en buscadores - URL amigable (Frendly URL)

¿Qué es el paso de variables por URL? Es una tecnica muy utilizada por todos los desarrollares, frameworks y entornos de desarrollo web que existen en la acutalidad. El protocolo HTTP cuenta con una serie de metodos basicos para garantizar el funcionamiento de una pagina web, uno de ellos es el metodo GET, que sirve para obtener valores de variables a partir de un URL, de esta manera si yo tengo una pagina web con una direccion (URL) como la siguiente:

http://www.mipagina.com/intex.php?idioma=es

Puedo obtener el valor de la variable "idioma" en cualquier momento, y cambiar dinamicamente, en funcion del valor de esa variable, para imprimir el valor de la variable "idioma" en el lenguaje de programacion php no hace falta mas que la siguiente linea de codigo:

echo $_GET["idioma"];

Es muy típico de un programador utilizar el paso de variables por url, haciendo que este url se vuelva difícil de leer para un usuario O BUSCADOR.

Por ejemplo: En mi pagina http://www.recetasdecocteles.com/ para ver los detalles de un coctel se puede ir a cualquiera de los siguientes URL’s:

a. http://www.recetasdecocteles.com/coctel.php?id_coctel=6

b. http://www.recetasdecocteles.com/coctel/6/Cosmopolitan

¿Notan la diferencia? ¿Si verdad? El primero de estos URL´s esta hecho a la antigua, es evidente para cualquier programador que el desarrollador hace un $_GET[“id_coctel”] para obtener el id del coctel que se desea mostrar, pero, ¿Qué pasa con el buscador? Ni siquiera sabe que coctel es el que tiene id=6, y el usuario final.. Menos!

Para solucionar eso debemos implementar URL´s como el segundo de estos ejemplos que acabo de dar, de esta manera tanto el buscador como el usuario final sabrán que ese url lleva directo a los detalles del coctel “Cosmopolitan”.

Uno de los principales factores tomados en cuenta por un buscador a la hora de indexar una pagina web, es el contenido de su titulo, si la palabra "Cosmopolitan" esta en el titulo de una de tus paginas, entonces google probablemente te indexe mucho mejor cuando los usuarios coloquen "Cosmopolitan" en google.

Continuar leyendo...

Posicionamiento en buscadores (SEO)

Si eres programador, arquitecto o diseñador web probablemente haz escuchado este término que está muy de moda durante los últimos años. Para una página web que quiere darse a conocer en el mercado esta vía puede ser una de sus mejores armas para publicitarse sin necesidad de un gran presupuesto.

Un buen posicionamiento en la web es una tarea de todos los involucrados en el diseño, desarrollo, e implementación de la pagina web, es necesario tomarlo en cuenta desde el mismo momento en que se empieza.

Para lograr un buen posicionamiento existe una técnica llamada “Optimización en buscadores” o “Search engine optimization (SEO)”, que no es más que la utilización de un mega conjunto de mejores prácticas para lograr que tu sitio web suba posiciones en un buscador (Principalmente google).

Yo no soy gurú en esto, pero en varios emprendimientos que he tenido últimamente me he visto en la necesidad de aprender un poco más sobre esto, y los resultados pueden ser increíbles.

Para no alargarme más en este tema, quisiera dejarles las mejores prácticas que yo he logrado recolectar en mi mente para que las apliquen en sus páginas lo más rápido que puedan, ¡no hay tiempo ni visitas que perder! En este post voy a colocar solo los titulos de cada una de las secciones, y, luego, voy a ampliarlas en diferentes entradas:

1. URL amistosos (Frendly URL’s).
2. Maquetación CSS.
3. Tiempo de carga del sitio.
4. Utilización correcta de las etiquetas h1, h2, h3, Strong, etc.
5. Inscripción en directorios de páginas.
6. Estudio de las palabras claves.
7. Ubicacion de los codigos javascript.
8. Contenido del sitio.
9. Google webmaster toolkit.
10. Otras herramientas muy utiles.

Continuar leyendo...