Hola
Bien bien, un reto intelectual, je je je
Desafortunadamente, la semántica no afecta al seo.
Escojan una categoría, la que quieran, y revisen quienes están en primeros puestos en los resultados.
Obviamente habrá casos que serán la excepción, pero estamos hablando del grueso de los casos.
Desde hace unos 9 meses, Google está considerando la semántica en su algoritmo, sin embargo, en repetidas ocasiones, desde entonces, se han producido variaciones en las posiciones, la cuales no están representadas por las páginas con mejor semántica.
Pero dejemos la teoría por un momento y vayamos a la lógica y la práctica. Solo un ejemplo sencillo para no aburrir mucho.
Semánticamente, debe haber un h1, puede haber varios h2, h3 y demás, los cuales, deben tener cierta relación jerárquica, por ejemplo, esto es válido
Código HTML:
h1
p
h2
p
h3
p
h3
p
h4
p
h3
p
pero esto no
Código HTML:
h2
h1
h2
h3
h4
h3
h5
Evidente, pero sencillo.
Ahora bien, aplicar estilos a las etiquetas, por ejemplo
Código HTML:
h3 {color: #f00}
está perfecto, sin embargo, nos "amarra" a que los h3 serán en rojo y si no los queremos así en alguna parte, habrá que usar un id o una clase, veamos que pasa si aplicamos un id.
Código HTML:
#subtitulo_uno {color #000;}
...
<h3 id="subtitulo_uno"> No está mal, pero si luego queremos aplicar lo mismo en otra parte de la página, hay que usar otro id y aunque es posible, en principio, asignar id's a elementos que no los requieren, es superfluo, recarga de peso la página y no es accesible.
Pero aun podemos usar una clase, veamos que pasaría:
Código HTML:
#error {color #000;}
...
<h3 class="error"> Ahora parece que tiene sentido, el objeto subtítulo de tercer orden, indica que es un error o el texto de un error viene a continuación, lo cual es semánticamente correcto, y deseable. Aparte, podemos reusar el código en cada caso que haya un error, por ejemplo, en los párrafos que vengan después del título. O en cualquier otro caso que convenga.
Por supuesto, también podemos usar un contenedor, asignar un id al contenedor y herencia, lo cual sería semánticamente perfecto y haría la página ligera, pero tiene inconvenientes como por ejemplo, amarra todos los elementos de ese contenedor a menos que hagamos excepciones en la css y que en algunos navegadores no se verá bien por problemas de herencia, con lo que habrá que empezar a jugar con las reglas o asignar más id's internos.
Ahora, usando el ejemplo válido de arriba, asumamos que es una página con reporte de errores, y así unimos las dos cosas planteadas. Estoy presumiendo que los títulos estarán bien redactados, tendrán sentido y demás, si no, empezamos a tener demasiadas posibilidades para escribir y es mejor hablarlo con un vinito delante y en un bareto.
;)
¿qué alternativas tenemos para mostrar al usuario la información y mantener la semántica?
Veamos
Opción 1:
Código HTML:
#errores {color, fondo, tamaño de letra ...}
<div id="errores">
h1
p
h2
p
h3
p
h3
p
h4
p
h3
p
<div> Este caso fallaría en la representación de los colores en explorer como vimos no hace mucho en otro caso por temas de herencia de propiedades. COn lo que algunos elementos tendrían los colores adecuados y otros nos. ¿Eso afecta a la semántica?, no, pero si la página no es agradable a la vista, tiene pocas visitas y parece poco profesional ¿afecta eso al seo?, si.
Si en el cas oanterior cambiamos id por class, es exactamente lo mismo.
Opción 2:
Código HTML:
.errores {color, fondo, tamaño de letra ...}
<h1 class="errores">
p
<h2 class="errores">
p
<h3 class="errores">
p
<h3 class="errores">
p
<h4 class="errores">
p
<h3 class="errores">
p
Este ejemplo, es como exagerado ¿no?, a fin de cuentas estamos logrando lo mismo que en el caso anterior, pero recargamos más las etiquetas. Cierto, con lo cual aumentamos el tiempo de carga, ligeramente, claro, pero si la página es más grande, lo afectamos más. Eso afecta al seo, desde el punto de visitas, si. Afecta a la semántica, no en cuanto a la estructura de las etiquetas.
Opción 3:
Código HTML:
#errores {color, fondo, tamaño de letra ...}
#errores * {color, fondo, tamaño de letra ...}
<div id="errores">
h1
p
h2
p
h3
p
h3
p
h4
p
h3
p
<div> Es como el caso uno, pero tratamos de que no haya problemas de herencia en los navegadores, claro que eso nos colorea también los párrafos y no solo los títulos. AHora dependería del gusto por si lo queremos así o no, si no lo queremos así, pasamos al ejemplo 4
Opción 4:
Código HTML:
#errores {color, fondo, tamaño de letra ...}
#errores h1, #errores h2, #errores h3, #errores h4, {color, fondo, tamaño de letra ...}
<div id="errores">
h1
p
h2
p
h3
p
h3
p
h4
p
h3
p
<div> Mejor que el anterior, aunque solo hemos combatido un problema de renderizado en algún navegador, sin embargo, eso nos pude aumentar las visitas, y por lo tanto el seo.
...
Seleccioné esta serie de opciones porque son bastante cuadradas y limitadas, lo que limita los posibles ejemplos, pero espero haber logrado mostrar la idea, la cual es, que el seo no tiene que ver con los contenidos en muchos casos, desafortunadamente, y definitivamente no con la semántica.
Si alguien quiere un ejemplo más complejo ¿Han visto el código de forosdelweb? Osea, vbulletin. Forosdelweb tiene una posición excelente en Internet ¿no?, sin embargo, la semántica dentro de las páginas da pena. Y no vale decir que es cosa de vbulletin, lo cual es cierto; pero el sitio web es el sitio web, no importa con que herramienta se construya, no estamos evaluando los conocimientos de quien lo armó, si no de la página en si.
Conste que no me agrada que sea así, dedicándome a esto, y justamente adiseño de interfaces usables, entre otras cosas, me encantaría que las páginas no accesibles y no usables estuvieran más abajo en los rankings, pero no es así.
:)
Felicidad gente