Elias Sierra » CSS http://www.eliassierra.com El blog oficial de Elías Sierra, Consultor web Wed, 24 Feb 2010 20:49:34 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Tip de SEO: ¿Crees que sabes HTML? http://www.eliassierra.com/tip-de-seo-crees-que-sabes-html/ http://www.eliassierra.com/tip-de-seo-crees-que-sabes-html/#comments Thu, 01 Oct 2009 17:06:13 +0000 Elias Sierra http://www.eliassierra.com/?p=102 Uno de los errores más graves de las páginas web que intentan ocupar un puesto competitivo en las SERPs (Páginas de resultados de los motores de búsqueda) de Google, es que al momento del desarrollo, se trabaja cada cosa independientemente: diseño, segmentos inútiles en flash, “desarrollo” e inserción del contenido. Y luego de tener “todo listo”, pretenden posicionar el sitio cuando el equipo de desarrolladores no tiene idea ni siquiera de la versión de HTML en la que trabajaron… O bien, pensarán que les estás insultando cuando les preguntas si conocen al menos lo que significa que el sitio pase una validación ante la W3C… Já!

SEO TIP HTML

SEO TIP HTML

Pues bien… Es hora de citar una frase célebre:

“You’re doing all wrong baby…”

Siempre recalco que debemos ver un sitio web, a la hora de desarrollarlo, desde 2 puntos de vista simultaneamente y darle prioridad equitativa a ambos… Por un lado tenemos el del usuario final, debe lucir agradable e intuitivo, nada confuso; por otro lado tenemos los motores de búsqueda y navegadores:  debe ser usable, limpio y claro en el contenido. Hoy listaré algunas de las cosas que NUNCA puedes ignorar en el desarrollo html básico de un sitio web:

Los menús son listas de links… Dáles el trato que se merecen

Bueno digamos que se ve bonito tener separadores entre los enlaces en un menú, pero ésta definitivamente NO es la manera que debe lucir en el código, vamos un ejemplo de qué NO hacer y cómo debería ser:

:( Bad Way:

1
2
<a href="http://link/enlace">Inicio</a> - <a href="http://link/enlace">Quiénes Somos</a>
<a href="http://link/enlace">Productos</a> - <a href="http://link/enlace">Contacto</a>

:) Good Way :

1
2
3
4
5
6
<ul>
    <li><a href="http://link/enlace">Inicio</a></li>
    <li><a href="http://link/enlace">Quiénes Somos</a></li>
    <li><a href="http://link/enlace">Productos</a></li>
    <li><a href="http://link/enlace">Contacto</a></li>
</ul>

Los enlaces llevan títulos

No olvides implementar los títulos a cada enlace, proporcionando información adicional acerca del mismo. Volvamos a los ejemplos:

:( Bad Way:

1
2
3
4
5
6
<ul>
    <li><a href="http://link/enlace">Inicio</a></li>
    <li><a href="http://link/enlace">Quiénes Somos</a></li>
    <li><a href="http://link/enlace">Productos</a></li>
    <li><a href="http://link/enlace">Contacto</a></li>
</ul>

:) Good Way :

1
2
3
4
5
6
<ul>
    <li><a title="Pagina Principal" href="http://link/enlace">Inicio</a></li>
    <li><a title="Sobre nuestra empresa" href="http://link/enlace">Quiénes Somos</a></li>
    <li><a title="Conozca nuestros productos" href="http://link/enlace">Productos</a></li>
    <li><a title="Contacte con nosotros!" href="http://link/enlace">Contacto</a></li>
</ul>

Las imágenes llevan textos alternos

Siempre manteniendo el hilo de relevancia, llegamos a los textos alternos, que en términos de usabilidad, deben describir el contenido de la imagen. Ej:

:( Bad way:

1
<img src="images/aksdja.jpg" alt="" />

:) Good way:

1
&lt;img src="images/iphone-3g.jpg" alt="iPhone 3g - nueva generación de teléfonos!" /&gt;

Los títulos SON Títulos (Y los subtítulos… subtítulos)

Los títulos también tienen sus etiquetas en el mundo del html, no es como en los editores de texto (Word, Open Office Writer, etc) en los que el texto más grande reina… NO cometas ese error en HTML. Tenemos una variedad de etiquetas para escoger la que más encaje con tu título según la prioridad que tenga dentro de tu contenido; y van desde el H1 hasta el H6.

:( Bad way:

1
<div style="font-size:32px; color:red;">Papá, papá... Mira! Sé html!</div>

:) Good way:

1
<h1>Papá, papá... Mira! Sé html!</h1>

Las tablas son para listar información… No para maquetar websites (Sí, aún lo hacen…)

Y bueno. éste se gana el título de error legendario. Y durante una época era exageradamente popular gracias a los interesantes servicios de páginas web que desarrollaban los diseñadores gráficos mayormente.

El problema de las tablas es que si miras el código fuente de tu página no verás mas que código basura, y bueno… Eso será lo que Google intentará indexar, no cometas el mismo error una vez mas:

:( Bad way:

1
2
3
4
5
6
7
<table border="0">
<tbody>
<tr>
<td><img src="header.jpg" alt="" /></td>
<td>Bienvenido a mi página Web</td>
</tr>
</tbody></table>

:) Good way:

1
2
3
<div id="header">
<h1>Bienvenido a mi página Web</h1>
</div>

Los meta tags no son un adorno

Este punto es muy cierto, Google en ocasiones utiliza como referencia la etiqueta title y el meta-tag description para armar el párrafo descriptivo y título con el que aparecerán las páginas de tu sitio, en sus SERPs. Cuando no tienes  bien definidos los Meta-Tags, suele suceder que buscas en Google y, si apareces, aparece como texto descriptivo “Todos los derechos reservados | Diseñado por idesignwebsites-mom.com“. Dudo que quieras que esto suceda contigo!

:( Bad way:

1
2
3
<head>
<title>Pagina de muestra</title>
</head>

:) Good way:

1
2
3
4
5
<head>
<title>Pagina de muestra</title>
<meta name="description" content="Esta pagina es un ejemplo de como deberian hacerse las cosas, y esto es una breve y SINCERA descripcion de lo que se encontrará aquí." />
<meta name="keywords" content"prueba, test, pagina de prueba, demo, demostracion, ejemplo" />
</head>

Pagina de muestra

Escribe con buena ortografía

Está bien que el internet haya masificado la comunicación y excelente la expansión de la libertad de expresión a nivel mundial… Pero sé consciente que es un medio masivo! Y bueno… Ser cuidadoso con la ortografía te traerá beneficios  por el lado de la indexación, y bien, será más agradable la lectura para tus usuarios.

Las negritas, cursivas y subrayas… Se inventaron para algo, ¿no?

Sí, tampoco son de adorno y bueno, según el caso debes saber cuándo incluirlo en el html y cuándo en el css. Recuerda algo, éstos elementos existen en la caligrafía para destacar palabras clave o frases y a la hora de interpretarlo en html, podemos utilizarlo a nuestro favor.

La mejor forma de mantenerse claro  saber que están haciendo un buen trabajo, es, durante el desarrollo, ver ambos puntos de vista… Mirar el código fuente y pedirle a alguien que navegue el sitio, recuerden, la prioridad es paralela.

Artículos Relacionados:

]]> http://www.eliassierra.com/tip-de-seo-crees-que-sabes-html/feed/ 4