Un sitio bien estructurado mejora tanto la experiencia de usuario como la indexabilidad del mismo, cosa que tiene un gran impacto en el SEO, lo que a su vez, incrementa su visibilidad y por tanto el tráfico, creando así un valiosísimo círculo virtuoso.
El punto importante aquí es que, partiendo de taxonomías bien definidas podemos concebir e implementar unas estructuras de navegación y un sistema de menús tan completo y tan diverso como sea conveniente para nuestro sitio web.
En realidad, organizar contenidos mediante estructuras de navegación, es una de las funciones más potentes de las taxonomías, y WordPress, como esperamos mostrar en este artículo, aporta herramientas que ayudan considerablemente a implementar este uso.
Por razones de oportunidad, utilizaremos el caso de nuestro propio sitio web ya que necesitaremos mostrar funciones del escritorio de WordPress, sin pretensiones de ejemplaridad.
Definiciones
Para esta entrada, necesitamos un juego de definiciones específicas que mostramos a continuación:
| Término | Definición |
| Menú / Sistema de menús | Los menús son el componente principal de las estructuras de navegación de un sitio. Un menú se compone a su vez de elementos o ítems con cuya activación es posible acceder de forma directa a determinados contenidos. La selección de los componentes del menú se realiza de acuerdo con alguna estrategia o principio de ordenación de los contenidos. El conjunto de los menús de un sitio constituye el sistema de menús. Aunque no existe un censo cerrado, la mayor parte de los sitios intensivos en contenidos contempla, al menos, esta tipología de menús:
Obsérvese que la tipología anterior implica una concepción facetada, ya que los dos últimos son tipos de menú en función de una faceta distinta de los cuatro primeros. |
| Navegación | Actividad que se lleva cabo mediante la activación de enlaces, o más técnicamente, de hiperenlaces. Mediante ella es posible recorrer las diferentes secciones o partes de un mismo sitio o desplazarse entre sitios distintos de Internet. |
| Estructuras de navegación web | Conjunto de menús y de otros recursos de navegación que muestran los contenidos disponibles en un sitio y que ayudan a los usuarios a acceder a los mismos y a encontrar la información deseada de manera lo más directa posible. Aunque no hay un censo cerrado, la mayor parte de sitios intensivos en contenidos contempla al menos dos estructuras de navegación:
Adicionalmente, pueden contemplar otras tipologías, entre las que podemos destacar:
Por último, como un complemento a los menús podemos mencionar a las:
En cambio, parece oportuno aclarar que el acceso mediante sistemas de búsqueda no forma parte de los sistemas de navegación, ya que se basan en operaciones de interrogación y recuperación de información (y no en navegación), aunque, obviamente, la página de resultados puede incluir, eventualmente, sistemas de navegación. |
| Elemento o ítem de menú | Los términos, etiquetas, rótulos o iconos que forman parte de un menú. |
| Sub- elemento/ subítem de menú | Los términos, etiquetas, rótulos o iconos que forman parte de un submenú. |
| Menú principal | El menú que suele ocupar la parte más prominente de una web, generalmente en la parte superior de la página o en la parte superior de una de las barras laterales. Es el menú que contiene los elementos o ítems que permiten acceder a las secciones principales de la web. En dispositivos móviles el menú principal puede quedar integrado en el conocido como hamburger menu. |
| Menú secundario | Principalmente por razones de espacio, pero también por la denominada ley de Hicks, muchos sitios web utilizan un menú secundario para complementar el menú principal, sin cargar este último. Se distingue de los menús complementarios, porque suele acompañar al menú principal en algún lugar prominente de la estructura de la página, ya sea en la parte superior o en uno de los laterales. Como en dispositivos móviles, las barras laterales se desplazan hacia abajo, puede aparecer al final de la página. |
| Menús complemen- tarios | Cualquier menú además del principal y del secundario. Pueden estar en las barras laterales o en el pie de página. Una de sus utilizaciones más habituales es proporcionar enlaces a información corporativa, la página de contacto o las de información legal. Pero se pueden utilizar con cualquier otro fin. Por ejemplo, otros usos habituales consisten en proporcionar menús redundantes de navegación en el pie de página o para dar acceso a índices o al mapa del sitio. |
| Submenú | Una parte del menú principal o secundario que se mantiene oculta salvo que sea activada de forma expresa. Corresponde a la idea de la así llamada revelación progresiva (progressive disclosure). |
| Menú desplegable | Un tipo de menú que no se muestra de forma extendida, sino a partir de una interacción. Es otra forma de revelación progresiva. |
Nube de | Una forma gráfica de mostrar el contenido de un sitio mediante palabras clave. Los contenidos se muestran mediante términos taxonómicos como las Etiquetas o las Categorías. El tamaño de cada término está relacionado con su frecuencia. |
Navegación | Recibe este nombre la navegación basada en hiperenlaces entre contenidos que mantienen una relación de semejanza. Por ejemplo, entre dos Entradas que tratan el mismo tema. Los hiperenlaces de esta clase de navegación forman parte de los contenidos de las Entradas o Páginas, en lugar de formar parte de los sistemas de menús. |
Índices | Un índice es una lista ordenada por algún criterio, p.e. alfabético, de los contenidos de un sitio. Los índices más habituales en un sitio intensivo en contenidos son los de autores, los de temas o títulos y los cronológicos. Otro tipo de índice habitual puede consistir en los temas del sitio, función que puede ir a cargo de las Etiquetas presentadas en orden alfabético. |
Mapas | En el contexto de un sitio web, se entiende por mapa la representación gráfica o en forma de tabla de la totalidad de los temas o secciones de un sitio. Suele estar a cargo de las Categorías. |
Migas de | Una clase de navegación basada en el contexto. Las migas de pan o breadcrums consisten en una cadena de caracteres que muestra la situación de la página actual en la estructura de menús. Por ejemplo: inicio > cultura > museos De una gran popularidad en su momento, su uso parece haber decaído actualmente. A veces, se dice erróneamente que muestran el camino seguido por el usuario, pero en general, no es así, puesto que las breadcrum muestran el contexto de la página visitada, no el recorrido del usuario. |
Ubicaciones | Lugar en la estructura (layout) de un sitio donde aparece un menú. En un sitio característico los menús pueden ubicarse en todas o en alguna de estas secciones:
|
Hamburger | Consiste en un icono formado por tres líneas horizontales. Cuando se activa despliega el menú principal. Es una solución extensamente aplicada, pese al gran criticismo que ha despertado, para ubicar el menú principal en el caso de los dispositivos móviles. De nuevo es un recurso que sigue el principio del progressive disclosure. Como decimos, pese a las críticas, ha demostrado ser un recurso útil si juzgamos por su casi universal aplicación, en especial en sitios de medios de comunicación para versión móvil. De hecho, hemos visto casos de utilización de este recurso incluso en la versión de escritorio de algunas web. Lógicamente, no es necesario aplicar el menú hamburguesa utilizando las tres líneas horizontales. En su lugar puede usarse la palabra «Menú» o el logo del sitio. El principio de la revelación progresiva es el mismo. |
Revelación | El término progressive disclosure está tomado del diseño de interactivos. En general, hace referencia a la necesidad de mostrar de forma progresiva, y no de forma anticipada, opciones de una interfaz, dadas las limitaciones de espacio de las pantallas. En el ámbito de las estructuras de navegación, la revelación progresiva se manifiesta en aspectos como los menús desplegables o los submenús. |
Fuente: elaboración propia | |
Contenidos de esta entrega
Dada su orientación, esta será, con diferencia, la más global y también la más pragmática de las tres entradas dedicadas a ese tema -ver aquí y aquí las dos primeras.
Los temas correspondientes de esta Entrada son los siguientes:
- Sistema de menús
- Menú principal
- Menú secundario
- Menús complementarios
- Submenús
- Menú desplegable
- Nube de etiquetas
- Navegación semántica
- Categorías y Etiquetas en Entradas
- Contenidos relacionados
- Estructuras del sitio web
- Silo
- Piramidal
Adicionalmente, trataremos también otras estructuras de navegación en el siguiente apartado:
- Otras estructuras
- Índices
- Mapas
- Migas de pan
A continuación, un pequeño juego de capturas para mostrar algunas ideas iniciales:
Estructuras de navegación · Sistema de menús
Vamos a mostrar, en lo que sigue, mediante capturas de pantalla comentadas, cómo podemos establecer un sistema de navegación como parte de las estructuras de navegación.
Necesitaremos para ello utilizar dos componentes del Escritorio de WordPress que podemos encontrar dentro del apartado Apariencia :
- Editor de Menús, del que dependen:
- La operación de creación y edición de menús
- La determinación de su ubicación en el diseño de la página
- La determinación de los componentes y estructuras de cada menú
- Widgets. Recordemos que los widgets son pequeños programas que forman parte de un tema o de un plugin. Mediante ellos podemos definir al menos tres estructuras adicionales:
- Menús complementarios
- Nube de términos
- Categorías como menú desplegable y jerarquizado
Lo vemos en la siguientes capturas que hemos distribuido en cuatro partes diferenciadas.
PRIMERA PARTE
El editor de Menús
Menú principal
Los diferentes menús de un sitio pueden ser creados y editados desde el editor de Menús, que está disponible dentro del apartado Apariencia en el Escritorio de WP:
Configuración del menú principal con el editor de WP
Una vez configurado, el menú principal formará parte de la navegación del sitio, lo que mostramos en las siguientes capturas.
El menú principal como parte de la navegación del sitio
Regresaremos de nuevo al editor de menús para mostrar más detalles del mismo en la siguiente captura.
Edición de un elemento o ítem de menú
Menú secundario
El menú secundario como parte de la navegación de un sitio
Submenús
En aplicación de la así llamada revelación progresiva (progressive disclosure), se suele utilizar submenús como forma de conciliar la limitación de espacio con la necesidad de añadir componentes a los elementos de un menú principal o secundario (no debemos confundir secundario con submenú).
Cumplen esta función los llamados subelementos en el editor de menús de WordPress, que se forman simplemente desplazándolos a la derecha y anidando así los componentes bajo un elemento.
Submenús como parte de la navegación
Versiones para dispositivos móviles
Veamos ahora los equivalentes del menú principal en un dispositivo móvil. Como muestra, nos limitaremos al caso del menú principal.
Menú hamburguesa – 1
Menú hamburguesa – 2
SEGUNDA PARTE
Estructuras de navegación con widgets
Los widgets de WP permiten añadir un número virtualmente ilimitado de estructuras de navegación a un sitio. Su disponibilidad está vinculada al tema y los plugins instalados en cada caso.
Nosotros utilizaremos los que están disponibles en un tema estándar como GeneratePress y con uno de los plugin gratuitos más extendidos como es Jetpack, de la misma empresa que desarrolla WP.
Opciones para menús complementarios con el uso de widgtes
Los menús complementarios suelen crearse mediante la utilización de algún widget disponible y su disposición en alguna de las ubicaciones disponibles
Ubicaciones de estructuras complementarias de navegación
Widget de menú desplegable
Un menú desplegable es otra forma de implementar sistemas de revelación progresiva. En este caso, utilizamos el widget que permite añadir esta clase de menú vinculado con las Categorías en alguna zona de la página web.
Menú desplegable como parte de la navegación de un sitio – 1
Menú desplegable como parte de la navegación de un sitio – 2
Menús complementarios como parte de la navegación de un sitio
Edición del widget de un componente de menú complementario
Widget de nube de etiquetas
Una nube de etiquetas como parte de la navegación
TERCERA PARTE
Navegación semántica
Lo que caracteriza a la navegación semántica es que forma parte de los contenidos, en lugar de encontrarse en menús. En lo que sigue examinaremos dos de sus formas más habituales.
Asignación de Categorías y Etiquetas en las Entradas
Configuración en el tema del sitio
Ubicación de Categorías y Etiquetas en las Entradas
Contenidos relacionados
WordPress Related Post by Sovrn
Tanto por su elegante diseño como por el acierto de su selección de contenidos, en este sitio utilizamos el plugin WordPress Related Post, de Sovrn.
CUARTA PARTE
Estructuras del sitio web
Hacemos un alto en las estructuras de navegación para centrarnos por un momento en las estructuras que afectan a la organización de todo un sitio web. En su momento, solía hacerse referencia a estructuras lineales, jerárquicas y en red, con algunas variantes.
Actualmente, tanto desde el punto de vista de la usabilidad como la del SEO (sobre todo pensando en la indexabilidad o crawl budget) las estructuras que se consideran son siempre las de tipo jerárquico, con unas pocas categorías principales en la parte superior y un grupo de Entradas enlazadas entre ellas en base a enlaces verticales, es decir, desde las Entradas a la página de su Categoría (y viceversa) y desde las Entradas de una Categoría a otras Entradas de la misma Categoría.
Además, se pueden contemplar, o no, según el modelo aplicado, enlaces horizontales, es decir, entre Entradas pertenecientes a diferentes categorías, e incluso con Entradas pertenecientes a más de una Categoría (polijeraquías), aunque esto se debe llevar a cabo con precaución: crea contenidos duplicados, por un lado, y desdibuja la claridad de la estructura de navegación, por otro.
Como sea, esto ha producido los dos modelos dominantes que examinaremos a continuación: las estructuras de silo y la piramidal.
Estructura de silo
Las así llamadas estructuras de silo se hicieron muy famosas hace algunos años gracias a su promotor, uno de los autores SEO más famosos, Bruce Clay,
A partir de su propuesta, se han publicado numerosos artículos sobre esta estructura, algunos de notable calidad, como puede verse si se activa una búsqueda sobre el tema en Google con este enlace.
La mejor forma de explicar qué es una estructura de silo es mediante un diagrama:
Como muestra el diagrama anterior, en una estructura de silo, los contenidos de un sitio se organizan por Categorías, de modo que hay N páginas que corresponden a las N Categorías principales del sitio. Cada página de Categoría une mediante enlaces el conjunto de Entradas relacionadas y, por tanto, asignadas a cada Categoría.
Las reglas principales para construir una estructura de silo, entonces son las siguientes:
- El menú principal está formado por las Categorías principales.
- Cada Categoría tiene una página de cabecera o página-padre de la misma.
- Cada Entrada se asigna a una, y solo a una Categoría, por tanto, las polijerarquías están prohibidas.
- De este modo, cada página de cabecera o página-padre enlaza así al conjunto de sus entradas-hijo, y solamente a sus entradas-hijo.
- Los enlaces entre Entradas de una misma Categoría están permitidos. Es decir, están permitidos los enlaces entre hermanos, así como los enlaces hijo-padre, es decir, desde la entrada hasta la página de la misma Categoría.
- Por tanto, los enlaces verticales están permitidos, o lo que es lo mismo, las relaciones jerárquicas en ambas direcciones están permitidas.
- Los enlaces horizontales están prohibidos, es decir, enlaces entre Entradas de diferentes Categorías.
Como es fácil deducir, el uso de taxonomías y, en especial la de Categorías como base para las estructuras de navegación de un sitio parece especialmente adecuado para esta clase de organización en silo.
Las ventajas de la misma son tanto para la experiencia de usuario, que puede entender enseguida la organización del sitio, como para el SEO, ya que las páginas de Categorías adquieren una gran relevancia para una misma palabra clave y transmiten así mismo una gran autoridad a sus Entradas relacionadas. Igualmente, favorecen la indexabilidad del sitio y evitan contenidos duplicados.
Observaciones
- En el caso de webs de productos o de comercio electrónico, hay autores que promueven el uso de Páginas (en el sentido de WP) y no de Categorías para esta estructura. Esto conlleva perder el beneficio del funcionamiento orgánico de las taxonomías y es poco práctico en el caso de sitios intensivos en contenidos.
- Respecto a la regla 3, hay autores que señalan que los enlaces entre la Entrada de una Categoría y la cabecera de otra Categoría pueden ser beneficiosos. Es decir, los enlaces entre sobrino-tío estarían permitidos, lo que no implicaría polijerarquía, ya que es la Entrada la que enlaza a la página-padre, sin haber sido asignada a la Categoría. Por tanto, se evita la polijerarquía.
- Para sitios intensivos en contenidos, como un cibermedio, la estructura de silo mediante el uso de Categorías y de las páginas de Categoría es una solución muy viable y altamente aconsejable, porque se apoya en la automatización que ofrece este CMS en la agrupación de Entradas en sus Categorías correspondientes.
- En estructuras basadas en Categorías, algunos autores recomiendan que las diferentes Categorías estén equilibradas, es decir, que tengan un número parecido de Entradas asignadas. No parece una recomendación factible en el caso de medios de comunicación, donde necesariamente, algunas categorías tendrán más contenido.
- Debe evitarse Categorías con pocas Entradas. De ser así, debería considerarse su eliminación y el paso de los contenidos a otra Categoría. Eventualmente, puede considerarse la operación contraria: desdoblar alguna Categoría que tenga un gran número de contenidos. Pero todas estas consideraciones deben conducirse con sumo cuidado, porque no es conveniente alterar con frecuencia las estructuras de una taxonomía.
Estructura piramidal
La estructura piramidal es la que recomiendan, en cambio, otros expertos, por ejemplo los del equipo de Yoast SEO. No es contradictoria con la de silo, sino que es un caso más general, porque simplemente pone el énfasis en organizar y distribuir los contenidos a partir de un grupo de Categorías.
La idea de la pirámide, entonces, procede de una estructura con la página principal arriba de todo, un pequeño número de categorías a continuación y una serie de Entradas asignadas a cada Categoría, eventualmente, con el uso de subcategorías.
Como hemos dicho, no contradice la estructura anterior, simplemente evita entrar en los detalles del tipo de enlaces permitidos y prohibidos. En su lugar, recomienda un enlazado interno cuidado e intensivo y que cada Categoría tenga algunos contenidos especialmente importantes a los que debería enlazar los demás contenidos de la misma categoría.
Otras estructuras de navegación
Regresemos de nuevo a las estructuras de navegación.
Además de las que ya hemos visto, existen otras, tales como mapas o índices (de autores, de fechas, de títulos, etc.) que, aunque no gozan de la universalidad de las estructuras vistas hasta ahora, no queremos dejar de hacer alguna mención.
Índices
Tal como hemos señalado en la tabla de definiciones, un índice es una lista ordenada (p.e. alfabéticamente) de los contenidos de un sitio utilizando alguna propiedad común, p.e., la fecha de publicación, con lo que tendríamos un índice cronológico. Otro ejemplo sería un índice alfabético de autores o aún un índice de títulos o de temas, etc.
Para varios de los índices más habituales podremos utilizar los widgets de los que dispone una instalación característica de WP.
Otro ejemplo de índices podría ser el que mostramos en la captura siguiente, tomado de The Guardian:
Mapas
En el contexto de la web, cuando nos referimos a un mapa estamos hablando de una forma de representación gráfica o de orientación diagramática de los contenidos de un sitio, generalmente utilizando las Categorías.
El nombre procede del hecho de que, inicialmente, los mapas solían ser de orientación gráfica. Con el tiempo, la mayoría de sitios se han inclinado por utilizar una versión mucho más basada en texto, aunque siempre con una orientación de despliegue en un solo golpe de vista, típica de los diagramas.
Migas de pan
Las breadcrum o migas de pan muestran el contexto de la página visitada en la estructura de navegación del sitio, facilitando en teoría que el usuario tenga una mejor comprensión de la estructura de contenidos, así como favoreciendo su actividad exploratoria.
No tienen una relación especial con las taxonomías, sino con la estructura de menús (que a su vez, puede seguir o no, una taxonomía).
En el caso de un CMS como WP requieren de un tema que permita su uso o de un plugin que ayude a implementarlo. En sitios de comercio electrónico y otros mantiene su popularidad, pero en cambio parecen haber perdido peso en el ámbito de los medios de comunicación.
Estructuras adicionales
Ni siquiera con las 9 estructuras que hemos examinado hasta aquí se agotan las posibilidades, ya que no hay un censo cerrado de las mismas.
En general, las estructuras adicionales que podamos concebir o necesitar las vamos a poder establecer por una de estas dos vías:
- Uso de widgets procedentes de un plugin o de un tema (estamos siempre pensando en una instalación característica de WP), como hemos mostrado con el ejemplo del índice cronológico y de autores.
- Creación de páginas adhoc, con el contenido navegacional de nuestra conveniencia, y su enlace mediante uno o más elementos de menú, ya sea disponiéndolos en el menú principal o complementario.
Taxonomías y sitios web: la idea en síntesis
A continuación, un diagrama de síntesis para resumir la relación entre las taxonomías y las estructuras de navegación de un sitio web:
El diagrama anterior muestra de un modo simplificado la relación que hemos intentando mostrar en esta entrega y la dos precedentes.
La relación completa debería mostrar otros componentes y posibilidades (que hemos obviado en la ilustración en aras de la sencillez), ya que, por un lado, la aplicación de los términos de las taxonomías está mediada, por ejemplo, por políticas de labeling (etiquetas de los menús) y otros aspectos de diseño.
Por otro lado, las taxonomías también pueden jugar un rol excepcional en los sistemas de búsqueda interna de los sitios intensivos en contenidos, pero esto ya es otra historia.
Conclusiones
En esta serie de tres artículos, hemos visto con detenimiento los fundamentos teóricos de las estructuras de menú y de las taxonomías.
Hemos presentado de forma detallada la manera de diseñar, crear y mantener taxonomías, así como hemos considerado las reglas de su aplicación a las entradas, explicando y diferenciando los roles de las Categorías y Etiquetas.
Finalmente, en esta última entrega, hemos examinado de forma detallada y ampliamente apoyada en gráficos, la forma de aplicar las taxonomías, en especial las Categorías, a las estructuras de navegación: a los sistemas de menús, a la navegación semántica y otras formas adicionales de navegación como los índices y las nubes de etiquetas.
Con frecuencia, hemos destacado la importancia de las taxonomías en la organización de la información de los sitios intensivos en contenidos debido al rol polifuncional de las mismas. Este rol tiene un doble impacto: en la usabilidad y la experiencia de usuario, y en la indexabilidad de los contenidos y, por tanto, en el SEO.
Esperamos, con esta pequeña serie, haber aportado argumentos a favor estas consideraciones.
Para el lector interesado, las tres entradas son las siguientes:
- Taxonomías y estructuras de navegación web · 1: Definiciones
- Taxonomías y estructuras de navegación web · 2: Edición y aplicación a contenidos
- Taxonomías y estructuras de navegación web · 3: Implementación (esta entrada)
Una nueva entrada, de síntesis, con algunos contenidos nuevos, por ejemplo, referidos a taxonomías facetadas se puede consultar aquí:
Referencias
Las cuatro obras principales en las que nos hemos basado para las tres entradas precedentes son las siguientes:
- John F. Sowa. «Chapter 2: Ontology». En: Knowledge Representation: Logical, Philosophical and Computational Foundations. Pacific Grove (California): Brooks/Cove, 2000.
- Heather Hedden. The Accidental Taxonomist. Medford: Information Today, 2016.
- Louis Rosenfeld, Peter Morville. Information Architecture: for the Web and Beyond. Sebastopol (Californdia): O’Reilly Media, 2015.
- Mario Pérez-Montoro, Lluís Codina. Navigation Design and SEO for Content-Intensive Websites: A Guide for an Efficient Digital Communication. Oxford: Chandos Publishing-Elsevier, 2017 (ver reseña).
- Rafael Pedraza-Jiménez, Lluís Codina, Javier Guallar. Calidad en sitios web
Método de análisis general, e-commerce, imágenes, hemerotecas y turismo. Colección: EPI Scholar. Barcelona: UOC, 2016
