SEO (Posicionamiento Web)

Si su objetivo es que su sitio encabece la lista de resultados, cuando un usuario realiza una consulta en alguno de los motores de búsqueda más populares ya sea Google, Yahoo o MSN, entre otros, SEO puede serle de gran utilidad.
SEO o Search Engine Optimization consiste en aplicar una serie de técnicas con el objetivo de que nuestro sitio web sea mejor visto por los buscadores, de esa manera, es posible mejorar la posición del mismo en el ranking de resultados. A continuación vamos a ver algunas de estas técnicas.

1. Dar de alta el sitio en los buscadores: Los buscadores por lo general tienen páginas para permitir al webmaster del sitio web darlo de alta en el buscador. De esta manera, el motor de búsqueda se entera de la existencia de nuestro sitio.
2. Backlinks: Uno de las formas en las que el buscador infiere la importancia de nuestro sitio es a partir de la cantidad de links externos que apunten a nuestro sitio. Cuantos más links, más importante debería ser el sitio. Existen diferentes formas de obtener backlinks, una de ellas es dando de alta el sitio en directorios de sitios (dmoz), otra es dejando nuestro link en comentarios de blogs o intercambiar links con otros sitios. En lo posible la frase del link debería contener palabras clave de nuestro sitio. Además, debemos seleccionar cuidadosamente en que sitios incluimos backlinks. Los buscadores nos daran más puntaje si los backlinks provienen de páginas cuyas palabras clave son parecidas a las nuestras y si tienen un alto ranking en la lista de resultados.
   
3. Nombres de dominio y archivos: Estos deben incluir en lo posible las palabras clave del sitio. Los nombres de archivo van separados de la siguiente forma: /keyword-keyword-keyword.html.
4. Palabras clave: Usar palabras que realmente estén siendo buscadas en motores de búsqueda. Existen diversas herramientas y sitios que nos brindan esta información, por ejemplo Google AdWords Keyword Suggestions. Agregar sinónimos de las palabras clave de nuestro sitio al contenido del mismo. Las palabras clave también deberían aparecer en el <title>palabras clave</title>, al principio de la página, entre h1, h2, h3, etc.
5. Densidad de las palabras clave: Esta es una parte importante de la optimización. La densidad es el porcentaje que corresponde a la cantidad de veces que aparece una palabra clave en el contenido del sitio, sobre todo el contenido del sitio en sí. Una alta densidad podría ser considerado spam por los buscadores.
6. Malas prácticas: Algunas técnicas podrían perjudicar el ranking del sitio como por ejemplo texto invisible, páginas idénticas, link farms, llenar el tag de comentario de palabras clave solamente. Estas técnicas pueden ser efectivas en el corto plazo pero seguramente a la larga solo nos perjudiquen.
7. Meta tags: El meta tag con nombre "description" puede tener frases con algunas de las palabras clave del sitio. El meta tag con nombre "author" sirve para obtener los primeros rankings para el nombre del creador del sitio, ya sea una persona o empresa.
8. Mucho contenido de calidad: No está de más decir que cuanto más y mejor contenido tenga el sitio más backlinks obtendremos, de gente que haya encontrado de utilidad el sitio.
   
9. Frames: Muchos buscadores no pueden seguir frames, por lo que deben evitarse, o hacerle saber al buscador la existencia del enlace de otra manera.
10. Mapa del sitio: Proveer mapas de sitio o links de forma tal que el crawler del buscador pueda acceder a todas las páginas del sitio.

Para concluir, es necesario aclarar que SEO es un proceso que puede tardar algunos meses hasta que los motores de búsqueda conozcan nuestro sitio y lo posicione en el ranking tan alto como queramos. Así que a armarse de paciencia y comenzar!

Columnas Faux (Columnas de igual altura)

Cuando se utilizan <div>s para construir columnas, la altura de las mismas dependerá de su ancho y contenido. Si la altura de 2 columnas es distinta, éstas se verán como en alguno de los dos casos que se observan en la siguiente figura.



Si lo que se desea en realidad es que ambas columnas tengan la misma altura, esto puede lograrse mediante el uso de "Columnas Faux". Esta técnica consiste básicamente en wrappear ambas columnas utilizando un <div> externo con un background especial.

<div id="wrapper">
  <div id="col1"></div>
  <div id="col2"></div>
</div>

A este <div> externo se le debe asignar un background que contenga una imagen de fondo. Esa imagen en realidad es una linea que debe abarcar todo el espacio horizontal de ambas columnas. Debe tener a su derecha el color del background de la columna derecha, y a su izquierda el background de la columna izquierda, tal como se puede ver en la siguiente figura.



La forma de agregar esa imagen como background del <div> externo es asignándole el siguiente estilo css al mismo:

#wrapper {
  background: url(../images/background.gif) repeat-y;
}

Esto quiere decir que el background anterior se repetirá una y otra vez verticalmente, uno debajo del otro (por eso el repeat-y), hasta llenar la superficie del <div> externo. Como este último <div> se expandirá verticalmente tanto como la columna más alta, se obtiene la impresión de que las columnas tuvieran la misma altura, cada una con su propio background, como se ve a continuación.



Cabe destacar que este ejemplo sirve sólo para layouts con tamaño fijo en pixeles. La siguiente sección muestra cómo lograr el mismo efecto para otro tipo de layouts.


Columnas Faux & Liquid layouts:

Cuando nuestra página web posee un layout utilizando porcentajes para definir el ancho de los paneles (Liquid layouts), el ejemplo anterior no sirve. Esto se debe a que el background tiene un tamaño fijo en pixeles que se vería mal al cambiar el tamaño de la ventana. Para solucionar esto se debe introducir otra propiedad más al estilo del ejemplo anterior, denominada "background-position".
La propiedad "background-position" controla dónde situar la imagen del background en relacion a la ventana. Si utilizamos porcentajes para especificar esta propiedad por ejemplo con los valores 20% 10%, significa que la recta correspondiente al 20% del ancho de la imagen (comenzando por la izquierda) coincide con el 20% del ancho de la ventana. Además, la recta que divide el 10% del alto de la imagen (comenzando desde arriba) coincide con el 10% de la ventana, como se puede ver en la siguiente figura.



Utilizando esto, si queremos hacer que la columna de la izquierda tenga un ancho del 20%, creamos una imagen de background horizontal grande x ejemplo 2000 pixeles de ancho (para que no quede chica en nungun monitor), con el 20% de la imagen hacia la izquierda con el color de fondo que queremos para nuestra columna izquierda y seteamos la propiedad "background" para el <div> "wrapper" de la siguiente manera:

#wrapper {
  background: url(../images/background.gif) repeat-y 20% 0%;
}

Una vez que comprendemos cómo funcionan estas propiedades, tenemos una buena base para comenzar a crear columnas que parezcan tener la misma altura.

Table vs Div

Existen distintas maneras de definir el layout para una página web. Una de ellas es hacerlo a través de tablas cuyas celdas muestren los distintos paneles que posee la página. Sin embargo, la forma recomendada de hacerlo es a través de elementos <div>. Esta última técnica posee una serie de ventajas:

• Código mucho más reducido (tiempo de carga de la página menor)
• Webs compatibles con todos los navegadores (wap, pocket pc, pamls , celulares, etc.)
• Separación del contenido por un lado, y el look and feel por el otro
• Más fácil de cambiar el look and feel, simplemente modificando el css

Para definir un panel de esta forma, el mismo debe estar contenido entre los tags <div> y </div>, de esta manera podríamos definir 4 paneles (header, 2 columnas y footer) para una página simple, mediante el siguiente código:

<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>

Una vez que tenemos los paneles delimitados mediante <div>s , debemos definir su look and feel, esto se hace a través de estilos css. A continuación podemos ver los estilos para el ejemplo anterior.

#header {
  background-color: #003366;
  height: 150px;
}

#content {
  width: 80%;
  float: left;
  background-color: #FFFFFF;
  height: 150px;
}

#sidebar {
  width: 20%;
  float: right;
  background-color: #99FF99;
  height: 150px;
}

#footer {
  clear: both;
  background-color: #999999;
  height: 30px;
}

Los paneles definidos con <div>s normalmente se van apilando uno a uno en forma vertical, es decir uno debajo del otro. Cuando se desea que se apilen en forma horizontal, deben declararse como flotantes utilizando el estilo css "float". Si el valor para el atributo float es "left", el bloque se alineará a la izquierda del espacio disponible, si es "right" lo hará a la derecha. Cuando se desea terminar de mostrar bloques horizontalmente, por ejemplo, en el caso del panel "footer", simplemente basta con asignar el estilo "clear: both" a este último <div>, para que los <div>s que siguen, comiencen a apilarce otra vez verticalmente.
Cabe señalar que no es recomendable el uso del atributo "height", como se hizo en este ejemplo para dar altura a los paneles. En realidad este atributo se ajusta automaticamente dependiendo del contenido del panel. En este ejemplo se lo utilizó ya que los paneles no tienen contenido alguno.
He mencionado que utilizar <div>s y css en el diseño de layouts tiene algunas ventajas, sin embargo, también presenta algunas desventajas. La más importante de ellas complica conseguir que dos columnas (una al lado de la otra), creadas a partir de <div>s flotantes, tengan la misma altura ya que ésta dependera del contenido que cada columna posea. De todas formas, existe una solución elegante a este problema conocida con el nombre de "Columnas Faux".

Creación del Blog

Mi nombre es Hernán González Buteler. Soy Ingeniero Informático, con más de 5 años de experiencia en el desarrollo de aplicaciones web (Java y PHP). He trabajado para empresas como Google y Ernst & Young. Para más información visitar mi perfil público en Linked-in.
Este blog tiene como objetivo compartir consejos u opiniones sobre diversas áreas relacionadas con el desarrollo de sistemas informáticos y páginas web.