Este artículo mostrará 3 técnicas de diseño web simples y muy efectivas que utilizan CSS (cascading style sheets) para mejorar su diseño web y hacer que su sitio tenga un mejor desempeño en los principales motores de búsqueda.
En primer lugar, ¿qué es CSS? CSS significa hojas de estilo en cascada (cascading style sheets), y CSS es una manera de separar el código de presentación de su contenido real en el diseño web. Generalmente se construye un conjunto de reglas de estilo CSS que se guardan en un archivo separado con una extensión .css. Luego, se debe vincular el archivo CSS desde sus páginas web utilizando una etiqueta HTML link.
Separar su código de presentación en distintos archivos CSS ofrece muchísimas ventajas en materia de diseño web, y este artículo le dirá 3 formas excelentes de utilizar CSS para hacer que su sitio web sea más apto para aparecer en los motores de búsqueda.
Técnica de Diseño Web 1 – Utilice CSS para Estructurar Su Documento
Tomemos en cuenta los datos que conocemos sobre los motores de búsqueda. Envían sus robots de búsqueda a su sitio para leer el contenido que hay dentro y cuanto más fácil les resulte encontrarlo, mejor, porque no pasan demasiado tiempo buscando. Por lo tanto, ya sabiendo esto, ¿de qué sirve obstruir sus páginas con miles de marcados de presentación innecesarios que fácilmente podrían guardarse en un archivo CSS? A menudo esto significa quitar cualquier etiqueta “table” ajena y reemplazarla con un número menor de etiquetas “HTML div”, que pueden ser formateadas utilizando reglas CSS. Esto elimina la mayoría de los marcados de presentación, dejando un contenido con un bonito formato que los motores de búsqueda pueden encontrar y listar fácilmente.
Técnica de Diseño Web 2 – Utilice CSS para darle Estilo a sus Etiquetas de Encabezado
También sabemos que los motores de búsqueda le dan mucha importancia a las etiquetas de encabezado (h1,h2,h3, etc.) que encuentran en sus páginas. Lo que más le molesta a los diseñadores web inexpertos al utilizar etiquetas de encabezado es que, por defecto, los exploradores modernos los renderizan en texto color negro, que luce bastante feo. Aquí es donde debemos utilizar CSS. Éste puede ser utilizado para hacer que sus etiquetas de encabezado tengan un bonito formato, un texto atractivo que sirva para aparecer en los primeros lugares de los motores de búsqueda y que a la vez sea agradable para la vista del usuario ¡Perfecto!
Técnica de Diseño Web 3 – Utilice CSS para Crear Imágenes de Sustitución
Tradicionalmente, las imágenes de sustitución son creadas utilizando 2 gráficos para la versión “encendido” y “apagado”, que se activan o desactivan utilizando un código JavaScript muy complejo. Este código JavaScript puede incrementar el peso de sus páginas web, ya que para los motores de búsqueda eso no es contenido y estos hacen caso omiso de esta información, lo cual puede afectar sus rankings en forma adversa porque hay mucho JavaScript incrustado en sus páginas web. Una manera mucho mejor de lograr el mismo efecto de diseño web es utilizando CSS.
Aún necesitará los 2 gráficos, pero en realidad creará un vínculo de texto normal en su sitio (que también puede tener un texto con palabras clave) y utilizará CSS para formatear su aspecto. Esto es tan simple como convertir al vínculo en un elemento en bloque en su HTML, darle una altura y un ancho y luego asignarle 2 imágenes de fondo diferentes; 1 para cuando el vínculo está “apagado” y otra para cuando el usuario pasa su mouse sobre dicho vínculo.
Conclusión:
Las CSS son una muy buena manera de separar el código de presentación del contenido real del sitio y los beneficios que la CSS le brindará en cuanto a la optimización en los motores de búsqueda son innegables ¿Por qué no aplicar estas técnicas de diseño web ya mismo en su sitio?
Posts relacionados:
- Como utilizan las cookies los sitios web
- Pintando el Lienzo de Su Sitio Web
- La Estetica del sonido
- 20 Consejos para Lograr un Buen Sitio Web Desde el Punto de Vista Artistico
- 20 Consejos para lograr un Buen Sitio Web Desde el Punto de Vista Artistico