Hoy en día, posicionar en buscadores los más arriba posible, es una de las cosas que se debe tener en cuenta, cuando se convierte de PSD a HTML.
¿Pero…que cosas se deben tener en cuenta cuando maquetamos?

En este artículo te explicaré uno de los secretos de maquetación a tener en cuenta para aparecer más arriba en los buscadores.
El secreto principal, para posicionar en buscadores lo más arriba posible, son los textos. Asi de simple.

Debes saber como aplicar correctamente estilo a los textos, o mejor dicho, a las etiquetas de texto, por medio de CSS. Esto es un paso fundamental cuando pasamos de un psd a html, logrando que nuestros textos sean mejor indexados por los buscadores.

Para esto utilizamos lo mismo que en el artículo anterior:
1 archivo CSS y 1 archivo HTML.

En el HTML utilizamos varios textos, alguno con formato de titular, y otro como texto de parrafo normal. Para esto usaremos las etiquetas estándard que se utilizan para maquetacion web: <h1> y <p>

Para los titulares se utilizan las etiquetas <h1> al <h6>, en este ejemplo solo usaremos hasta la <h4> (cuando mas chico es el numero, mas grande será la letra)
Y para los textos de parrafo, la etiqueta <p>.

Entonces el HTML nos quedaría asi:
[sourcecode language=’html’]

Titular 1

Titular 2

Titular 3

Titular 4

Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo.

Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo.

[/sourcecode]

Aqui creamos 4 titulares con las etiquetas <h1> al <h4>, y dos parrafos de texto con la etiqueta <p>. (ademas de linkear el archivos CSS como aprendiste en al articulo anterior)

Y el a archivo CSS, seria:
[sourcecode language=’css’]
body {
background-color: #ff0000;
margin-top: 0px;
margin-left: 0px;
}
h1 {
color: #00ff00;
font-family: Verdana, Geneva, sans-serif;
}

h2 {
color: #0000ff;
font-family: «Courier New», Courier, monospace;
}

h3 {
color: #ffff00;
font-family: Tahoma, Geneva, sans-serif;
}

h4 {
color: #000000;
font-family: «Times New Roman», Times, serif;
}

p {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
[/sourcecode]
Aqui definimos los estilos para el body, para los 4 titulares, y para los textos de parrafo.
Al «body» le indicamos un color de fondo rojo (background-color: #ff0000;), y un margen superior e izquierdo de 0 pixel. (margin-top: 0px; margin-left: 0px;)

Luego definimos el color y la familia tipográfica para cada titular (<h1>, <h2>,<h3>,<h4>).

Y por ultimo, para los textos de parrafo definimos el color, la familia tipografica, el tamaño y un estilo bold.

Como puedes ver, es muy fácil dar formato a los textos mediante el CSS y este es un elemento escencial cuando pasamos de psd a html ya que nos permite separar los textos de los graficos, y esto hace que los mismos sean indexados perfectamente por los buscadores.
De hecho, los buscadores como Google, recorren nuestro documento buscando las etiquetas <h1> al <h6>, y las etiquetas <p>.

Aqui dejo la descarga de los archivos usados. Descargar archivos.

Saludos!
Cristian
—————————————————————————

Me gustaría que me dejaras un comentario sobre este artículo que acabas de leer y también que me contaras un poco cual es tu principal complicación, a la hora de tratar de pasar un psd a html.
Yo personalmente estaré contestando tus preguntas y comentarios para ayudarte.