Beneficios SEO del uso de estilos CSS
En este artículo no sólo te muestro los beneficios SEO de los estilos CSS, sino que también te enseño algunas herramientas y páginas web para que empieces ya a maquetar tus páginas en CSS rápido.
Cuando empecé a programar páginas web empecé realizando la maquetación con tablas. Pero pronto descubrí los divs y me pasé a ellos inmediatamente. ¿Por qué? Básicamente porqué se obtiene un código limpio, claro y se separa del todo lo que es el diseño con el contenido. Esto es muy importante desde muchos puntos de vista, pero desde el punto de vista del posicionamiento web (SEO) también.
¿Qué son los divs?
Un div es una etiqueta HTML que contiene información. Esta etiqueta puede tener múltiples atributos y se le puede atribuir una clase o un identificador:
<div id="content"></div>
<div class="menu"></div>
¿Qué hacemos con el CSS?
Una hoja de estilos CSS es un fichero con extensión .css que se vincula a las páginas HTML con el siguiente código en el head.
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"/>
Con el CSS podemos manejar los divs: situarlos en cualquier parte de la página, darle color de fondo, ponerle una imagen de fondo, darle el tamaño que queramos, etc. Pero no sólo los divs, sino absolutamente a todas las etiquetas HTML de nuestra página web que se encuentren dentro del body.
Separación HTML y diseño
En la siguiente imagen vemos un ejemplo de como una buena programación de estilos CSS puede dividir del todo lo que es el contenido de la página (HTML) con el diseño de la misma. En la imagen izquierda vemos la página sin estilos CSS y en la imagen de la derecha con el estilo.
Exacto, la imagen de la izquierda es casi lo mismo que ve Google cuando entra en la página. La página se indexa rápido y encuentra el contenido relevante de manera rápida y clara sin tener que ir descartando cantidades de código en HTML. Gracias a los estilos CSS puedes estructurar la información poniendo lo que son títulos en las etiquetas h1, h2,… También que los menús sean listas <ul><li>, lo que sea un párrafo indicarlo correctamente con su etiqueta correspondiente <p>, etc. Luego con el CSS le das a cada una de las etiquetas el formato y estilo que quieras.
Aprende a maquetar con divs
Si no estás familiarizado con los layouts CSS presento a continuación una serie de enlaces para que aprendas. Ya verás que es muy fácil y cuando empieces a usarlo no podrás volver a las tablas:
- Guía CSS para principiantes [inglés]: con esta guía aprendí a programar en divs y CSS en vez de en tablas. Aunque está en inglés es muy sencilla.
- Layouts CSS [inglés]: en esta página puedes ir al grano, puedes cojer el layout que necesites y bajarte el código.
- Más layouts [inglés]: si no has encontrado el layout que queires en la página anterior, busca en esta.
Crear menús con CSS
Ya hemos comentado en artículos anteriores que realizar menús con javascript no era una buena idea, ya que Google no valora tan bien un enlace en javascript que en HTML. Pero a lo mejor no sabéis la cantidad de cosas que se puede hacer con CSS. La página que presento a continuación es uno de los mejores descubrimientos que he hecho. Puedes hacer todo tipo de menús: desplegables horizontales, desplegables verticales, desplegables multinivel, pestañas, etc. y Google sólo verá listas <ul><li>.
Beneficios SEO del CSS
Con HTML y CSS puedes escribir tus contenidos ordenados por importancia, tener un código limpio y organizado y tener páginas HTML ligeras de tal manera que sean leídas e indexadas fácilmente por las arañas de los buscadores. Por otra parte, con los estilos CSS puedes dar a tu página un diseño atractivo, dinámico, agradable, usable y claro para los usuarios de tu página y que invite a quedarse. Con una buena maquetación HTML / CSS el diseño y la optimización de código para buscadores no es algo incompatible.
Los beneficios SEO de usar una hoja de estilos CSS son:
- Puedes colocar el texto que te interesa que Google le de más valor al inicio de la página. Con un código sucio y pesado normalmente Google tiene que leer mucho antes de llegar al contenido que ve el usuario de una página cuando entra en ella.
- Decrece el ratio contenido-código y la página se hace mucho más ligera. El ratio código contenido no es más que dividir el contenido entre el código de una página HTML. Cuánto mayor es el ratio más ligera es la página. ¿Quieres evaluar este ratio en tu página web? Te recomendamos esta herramienta SEO: Code to Text Ratio. Te recomendamos también que cojas una página hecha con divs y otra con tablas y realices una comparación.
- El uso de etiquetas HTML estandarizadas como h1, h2,… para que el buscador lo reconozca como un título.
- El uso de etiquetas HTML <ul><li> para los menús dando importancia a las diversas áreas del sitio web y que los buscadores encuentren de manera rápida las páginas internas.
