La importancia de las URLs canónicas en desarrollo

[drupal] Caso de estudio: La importancia de las URLs canónicas en desarrollo

El uso correcto de las urls canónicas ayuda de muchas maneras a mejorar, entre otras cosas, la usabilidad y la inteligibilidad de los sitios webs. En el siguiente caso de estudio me gustaría explicar de qué manera se puede implementar con Drupal el entorno para trabajar con ellas y cómo podemos aprovecharnos de su buen uso.

Módulos clave: Path (Core Opcional), Pathauto (Alias automático de urls), Token (API para patrones de texto sustituibles)

Supongamos un sitio web con la dirección: http://www.misitioweb.es; cualquier dirección que sea del tipo:

• http://www.misitioweb.es/pagina1
• http://www.misitioweb.es/pagina2
• http://www.misitioweb.es/pagina3

se podría entender que cuelga de la raíz del sitio, se establece por tanto una jerarquía en la organización del sitio. Si planteamos una web que contiene varias secciones con contenido, parece lógico entonces tener urls dela forma:

• http://www.misitioweb.es/seccion1
• http://www.misitioweb.es/seccion1/pagina1
• http://www.misitioweb.es/seccion1/pagina2
• http://www.misitioweb.es/seccion2/pagina3

• http://www.misitioweb.es/seccion2
• http://www.misitioweb.es/seccion2/pagina1
• http://www.misitioweb.es/seccion2/pagina2
• http://www.misitioweb.es/seccion3
• http://www.misitioweb.es/seccion3/pagina1
• http://www.misitioweb.es/seccion3/pagina2

A poco que nos documentemos sobre el manejo de las URLs con Drupal sabremos que todo lo que aparezca tras el dominio del sitio es considerado un argumento. Un argumento para una función es un parámetro variable que puede ser manejado por ésta. Digamos, que el texto seccion1/pagina1 nos aporta una información para el gestor de contenidos que puede ser manipulada, sabiendo que el primer argumento es seccion1 y el segundo pagina1.

Los argumentos, por tanto, vendrán separados por una contrabarra "/", y la función arg nos da la posiblidad de referenciarlos de modo que

• arg(0) será seccion1
• arg(1) será pagina1
• ... y así sucesivamente

Hasta aquí lo que sería una buena costumbre, organizar las direcciones de forma jerárquica siguiendo la organización propia del sitio como un árbol que se extiende hacia abajo. Existen otras formas, aunque no sabría dar una buena explicación, pero nos encontramos el ejemplo de El País con direcciones como: http://www.elpais.com/articulo/internacional/Obama/culmina/sueno/cambio/elpepuint/20081105elpepuint_1/Tes

Donde vemos que la construcción de la URL se basa en tipo de contenido + sección + titular

En el caso de drupal, todo ese titular se tomaría como 5 argumentos diferentes por lo que la forma correcta sería

http://www.elpais.com/articulo/internacional/Obama_culmina_sueno_cambio/elpepuint/20081105elpepuint_1/Tes

Nota: Los guiones bajos también posicionan! http://www.seoposicion.com/foro/sobre-los-separadores-de-palabras-en-las...

Hay otro detalle en esa dirección, justo al final la cadena 20081105 nos indica la fecha de publicación. Considerando que es la web de un periódico y, aunque no les sirva para jerarquizar estrictamente el contenido, es importante también que desde la misma URL podamos saber esa información. Otra manería podría ser http://www.elpais.com/articulo/internacional/2008/11/05/Obama_culmina_sueno_cambio/

Para hacer esto en Drupal tendríamos que configurar correctamente el Pathauto y hacer un patrón para que, cada vez que se publicara un artículo, cogiera el node-type + vocabulary + date + title.

¿Qué conseguimos con esto?

1. Legibilidad. Para muchos usuarios habituados, la dirección web tiende a convertirse en un rastro (breadcrumb).
2. Posicionamiento. Mejora la indexación en Google. http://www.artimedia.es/blog/marketing-online/posicionamiento-web/url-ca...
3. Funcionalidad. El correcto uso de las urls y paths automáticos puede aprovecharse durante la creación de vistas (Módulo Views) para el paso de argumentos.
4. Flexibilidad de estilos. Podremos tomar los argumentos para añadir una nueva clase a la etiqueta body y definir estilos CSS diferenciados por secciones y subsecciones.
5. ...

Sirva el punto 4 para este caso de ejemplo que quiero explicar.

Supongamos que tenemos que maquetar un diseño en el que se requiere algo como esto:

• Menú 1:
• Noticias
• Nacional
• Internacional
• América latina
• Oriente Medio
• Estados Unidos
• Asia
• África subsahariana
• Europa
• Menú 2
• Deportes
• Fútbol
• Motociclismo
• Tenis
• Ajedrez
• Menú 3
• Cultura
• Cine
• Teatro
• Música
• Literatura
• Internet

Cada enlace del menú corresponde a una página simple, un nodo de tipo page por ejemplo, y ha sido creado en el mismo momento de creación del nodo (para asegurarnos de que el enlace nunca quede muerto). La plantilla en la que nos basamos es la Zen que nos servirá de framework para la maquetación.

El código HTML que se generaría por el sistema de menús de Drupal sería (versión reducida):

<ul class="menu">     <li class="leaf">Noticias         <ul class="menu">                <li class="leaf">Nacional</li>                <li class="leaf">Internacional                       <ul class="menu">                     <li class="leaf">América latina</li>                            <li class="leaf">Oriente Medio</li>                             <li class="leaf">...</li>             </ul>                 </li>            </ul>     </li> </ul>

Si para crear esta estructura creamos menús diferentes desde la Administración, este código iría dentro de unos envoltorios del tipo:

<div class="block block-menu region-even even region-count-1 count-1" id="block-menu-333"> <div class="block-inner">       <div class="content">  ...         </div> </div></div>

A lo que podremos definir cada menú de forma diferente gracias al id="block-menu-333" desde las CSS con los selectores:

div#block-menu-333 div#block-menu-333 ul.menu{} div#block-menu-333 ul.menu ul.menu{} div#block-menu-333 ul.menu li.leaf{} div#block-menu-333 ul.menu ul.menu li.leaf{}

O a todos de forma genérica:

div.block-menu{}

¿Pero y si queremos que el contenido cambie de estilo según el bloque en el que estemos? Ya no podríamos usar el id porque no heredamos los estilos dentro del área principal. Como bien hace el template de Zen, debemos sacar un estilo para la etiqueta del body que nos permita distinguir la sección y acceder a cualquier etiqueta interior:

<body class="front logged-in two-sidebars admin-menu seccion-noticias"></body> <body class="front logged-in two-sidebars admin-menu seccion-deportes"></body> <body class="front logged-in two-sidebars admin-menu seccion-cultura"></body>

Para ello necesitamos:

1. Configurar las urls para que cuando se cree una página se genere una dirección del tipo: [menu-raw]/[tittle-raw]
2. Crear menús diferentes que llamaremos: noticias, deportes y cultura respectivamente, del que cuelguen los enlaces pertinentes.
3. Mostrar los tres bloques correspondientes.
4. Definir el template como en el caso de Zen.

Puesto que el template de Zen viene preparado y si no lo viene ya explicaré cómo hacerlo en artículo porque en este me estoy extendiendo, cuando creemos cualquier noticias crearemos direcciones del tipo:

http://www.misitioweb.es/noticias/obama_culmina_sueno_cambio, si colgamos este artículo del menú de noticias, y si lo cambiamos a la sección cultura y actualizamos el contenido tendremos el alias:http://www.misitioweb.es/cultura/obama_culmina_sueno_cambio. De esta manera dependiendo de donde cuelgue tomará un estilo diferenciado e igual para todas las páginas de la subsección noticias, cultura, deportes y cualquiera que sea.