Mapa de Sitio optimizado, imprescindible para apuntar bien alto
Todos aquellos que pretendan un mejor posicionamiento en buscadores no pueden olvidar implementar un Mapa de Sitio en su sitio web.
Esto es fundamental para conseguir buenos resultados en las búsquedas, ya que los motores de búsquedas utilizan este mapa como una guia estructural que les describe la arquitectura de la información de nuestro sitio web.
A continuación voy a darles un ejemplo de como hacer un mapa de sitio correctamente, utilizando una estructura de etiquetas html, que cumplan con los estandares XHTML y CSS que recomienda el consorcio W3C.
En primer lugar debemos tener en cuenta que utilizaremos estilos CSS para darle la apariencia que pretendemos al mapa de sitio.
Además, que estos estilos seran llamados de manera externa, a un documento CSS. Esto nos otorgara mejor flexibilidad y tendremos un documento de mejor rendimiento; cumpliendo con las normas de validacion XHTML 1.1
Documento CSS:
En primer lugar crearemos la capa DIV contenedora del mapa; esta capa utilizará un selector unico (id) denominado “navigation”:
#navigation {
margin-left: 3em;
width: 80%;
}
los valores estan abiertos a las necesidades y posibilidades del usuario.
Con la declaración margin buscamos ubicar con precisión los elementos dentro de esta capa DIV. En este caso margin-left: 3em; indica que los elementos del mapa serán ubicados a 3em del margen izquierdo del DIV contenedor.
En cuanto al width: 80%; utilicé este valor para crear un espacio acorde a las dimensiones necesarias para tener el mapa bien ubicado dentro de mi estructura estructura (ustedes pueden variarlo e incluso ponerlo en 100%).
Luegos tenemos los estilos que le otorgamos a los elementos de lista (ul, li) que forman parte del árbol jerárquico de las secciones del portal:
ul { width:100%; list-style-type:none; }
li { text-align:left; margin-top: 0.2em; }
Luego tenemos los estilos para los elementos vinculados < a >, los cuales buscarán probocar un efecto rollover que demuestre un cambio en los colores de fondo de los elementos al momento de posar el cursor sobre ellos:
#navigation a:link {
display:block;
max-height:20px;
font: 12px Arial, Helvetica, sans-serif; color:#000033;
background-color:#CDD8E8;
text-decoration:none;
border:1px solid #330000;
padding-left:10px;
}
#navigation a:visited {
display:block;
max-height:20px;
font: 12px Arial, Helvetica, sans-serif; color:#000033;
background-color:#CDD8E8;
text-decoration:none;
border:1px solid #330000;
padding-left:10px;
}
#navigation a:hover {
display:block;
max-height:20px;
font: 12px Arial, Helvetica, sans-serif; color:#000033;
background-color:#B3C8EC;
border:1px solid #330000;
cursor:pointer; padding-left:10px;
}
Luego los elementos de cabecera (h1 y h2) que nos permiten resaltar el valor de los nombres de enlaces(anchor text), ante los motores de busqueda; algo que es muy importante para el posicionamiento:
El selector de elementos H1 Se aplicará a los valores mas altos de la jerarquia de documentos:
h1 {
background:#8598B4; width:80%;
border:1px solid #330000;
text-align:left; padding-left:10px;
font: 700 14px Arial,Verdana;
color:#ffffff;
Margin: 0 0 0 0;
}
Los elementos H2 serán los que destaquen las secciones internas o sub secciones del mapa de sitio:
h2 {
font: 12px Arial,Verdana; width:80%; Margin: 0 0 0 0;
}
Finalizando con los estilos del documento CSS, tenemos a continuación el ejemplo del HTML para el mapa del sitio que contará con los estilos del documento anterior:
La estructura de nuestro mapa de sitio tendrá una apariencia parecida a la que presentamos a continuación:
< h1 > Nuestros Productos < /h1 >
< ul >
< li >< h2 >< a href="%%ref_nav_prod1%%" > Producto 1 < /a >< /h2 >< /li >
< li >< h2 >< a href="%%ref_nav_prod2%%" >Producto 2 < /a >< /h2 >< /li >
< /ul >
Recordemos que todo debe estar contenido dentro del elemento DIV contenedor que aquí hemos declarado como #navigation :
< div id="navigation" >
< h1 >La empresa < /h1 >
< ul >
< li >< h2 >< a href="%%ref_nav_quien%%" > quienes somos < /a >< /h2 >< /li >
< li >< h2 >< a href="%%ref_nav_donde%%" > donde nos encontramos < /a >< /h2 >< /li >
< li >< h2 >< a href="%%ref_nav_part%%" > Partners < /a >< /h2 >< /li >
< /ul >
< h1 > Nuestros Productos < /h1 >
< ul >
< li >< h2 >< a href="%%ref_nav_prod1%%" > Producto 1 < /a >< /h2 >< /li >
< li >< h2 >< a href="%%ref_nav_prod2%%" > Producto 2 < /a >< /h2 >< /li >
< /ul >
< /div >
UN detalle… hemos utilizado el elemento Block (display:block;) para los elementos vinculados. Este genera la caja de bloque sobre el elemento afectado. En este caso los elementos de cabecera h2 que presentan vinculaciones.
De todas formas estos valores del elemento display:block; no son igualmente interpretados por los diferentes navegadores, es por ello que implementamos un elemento margin con todos sus valores de margenes en “cero”:
Margin: 0 0 0 0;
De esta manera dispondremos de un mapa que se podrá apreciar correctamente en los diferentes browsers. Ya que los recuadros de tipo display:block; no presentaran cambios en sus margenes gracias a esta propiedad y sus valores en cero.
Otro consejo:
la estructura de cada elemento de lista debe ser en este caso el siguiente:
< li >< h2 >< a href="%%ref_nav_quien%%" > quienes somos < /a >< /h2 >< /li >
y no cometer el error de ubicarlos de la siguiente forma:
< li >< a href="%%ref_nav_quien%%" >< h2 > quienes somos < /h2 >< /a > < /li >
En este último no se cumple con los estandares XHTML 1.1 de W3C, ya que < h2 > No puede ser elemento hijo de un elemento < a >.
Finalmente tenemos el mapa de sitio terminado!!
Cualquier comentario o dudas me pueden escribir 