[Este post fue escrito originalmente por Saskia Moreno, en su paso por nuestra agencia SEO, antes llamada «Somos Mjcachon»]
En anteriores post ya tratábamos la importancia de entender cómo auditar una arquitectura web en base a SEO y cómo este análisis nos da una visión completa del estado de nuestra web, repasando en profundidad cómo analizar los códigos de error y la importancia de la estructura de tus URLs.
Hoy vamos a analizar los otros dos bloques de vital importancia dentro de nuestra auditoria de arquitectura SEO:
- Rutas canónicas
- Breadcrums o Migas de pan
Rutas canónicas
La ruta canónica es por, así decirlo, la URL original de una web. Una página web debe tener un dominio canónico y existen diferentes variantes.
Por ejemplo, un dominio puede ser:
http://dominio.com
http://www.dominio.com
https://dominio.com
https://www.dominio.com
Si observamos las opciones de dominio, vemos que existe el protocolo http o https y el subdominio www.
Cuando damos de alta un dominio, el proveedor nos pide que decidamos si queremos que se incluya el subdominio www o no. De igual manera, por defecto nos dan el dominio en http y podemos optar, según el proveedor que escojamos, a la opción https de forma gratuita o a cambio de un pago (anual, mensual, etc.).
Por tanto, si es nuestro propio proyecto ya sabemos qué ruta es la canónica. Si se trata de un cliente o un proyecto ajeno, podemos pedirle que nos de la ruta o URL canónica verificándolo con su proveedor de dominio.
Una vez conocemos la ruta canónica del dominio, realizamos en el navegador una combinación de todas las opciones de dominio que hemos expuesto anteriormente.
Si no lo tenemos todavía, ahora es el momento de instalar una extensión para Chrome que nos muestre las redirecciones que hace una web. Podéis utilizar Ayima o Link Redirect Trace.
Vamos a hacer la prueba con nuestra web, MJ Cachón.
La ruta canónica es https://www.mjcachon.com/, con el protocolo seguro (https) y el subdominio www.
La comprobación que vamos a realizar es si todas las demás opciones de dominio redirigen correctamente, mediante una redirección 301, a la ruta canónica. De no ser así, tendríamos más de una variante de dominio y eso sería incorrecto.
Por tanto, empezamos comprobando si de http redirige a https. Lo hace, así que es correcto.
Probamos http y le quitamos las www. También redirige sin problema.
Y la última sería eliminar el subdominio www, manteniendo el protocolo https y… ¡es correcto!
Todo bien aquí. 😉
Si no redirigiera a la ruta canónica, ésta sería una recomendación o acción a realizar.
Migas de pan / Breadcrumbs
Las migas de pan o breadcrumbs de una web permiten al usuario conocer el punto en el que se encuentra dentro de la web. Además, ayudan a los bots de motores de búsqueda a reconocer la arquitectura del site. Finalmente, mediante los breadcrumbs podemos también insertar keywords de nuestro interés.
Con las migas de pan nos adentramos en el mundo de los microformatos, una parte quizás algo más técnica, para la que es bueno que te familiarices con Schema.org.
Recomendamos marcar los breadcrumbs con JSON-LD o con Microdata.
Marcar Breadcrumb con Microdata
Hay webs que ya tienen el menú tipo breadcrumb pero no está marcado de ninguna forma, por lo que no ayuda a los bots a estructurar el contenido.
Un ejemplo de breadcrumb sería el siguiente:
Si la web no cuenta con migas de pan, las implementaremos de 0. Si ya cuenta con esa navegación, podemos insertar el Microdata en el código html que ya tenemos.
Por tanto, lo que debemos incluir en el código html de la web en cuestión es el siguiente código, adaptándolo si fuera necesario, donde vaya el breadcrumb.
Ejemplo con un post del blog de MJ Cachón:
<ol itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://www.mjcachon.com/"> <span itemprop="name">MJ Cachón</span></a> <meta itemprop="position" content="1" /> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://www.mjcachon.com/blog/"> <span itemprop="name">Blog</span></a> <meta itemprop="position" content="2" /> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://www.mjcachon.com/blog/ryte-analisis-seo/"> <span itemprop="name">Probando Ryte para análisis de proyectos SEO</span></a> <meta itemprop="position" content="3" /> </li> </ol>
La lista de breadcrumb debe contener por cada URL: el item (URL), el nombre (del menú que ven los usuarios) y la posición dentro de esta navegación.
El breadcrumb se mostraría de la siguiente manera:
MJ Cachón > Blog > Probando Ryte para análisis de proyectos SEO
Marcar Breadcrumb en JSON-LD
Para marcar nuestras migas de pan con JSON-LD existe esta potente web con ejemplos Steal Our JSON-LD, así como el Playground de JSON-LD.org. El funcionamiento sería igual, pero en forma de script que se incrusta en el de nuestro código html.
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "item": { "@id": "https://www.mjcachon.com/", "name": "MJ Cachón" } },{ "@type": "ListItem", "position": 2, "item": { "@id": "https://www.mjcachon.com/blog/", "name": "Blog" } },{ "@type": "ListItem", "position": 3, "item": { "@id": "https://www.mjcachon.com/blog/ryte-analisis-seo/", "name": "Probando Ryte para análisis de proyectos SEO" } }] } </script>
Cabe mencionar que este código es útil para los bots de motores de búsqueda, pero no añade la barra de navegación visual para los usuarios. Ésta la tendremos que poner aparte. Al haber utilizado el script JSON-LD, ya no haría falta marcarla con nada más.
¿Cómo verificamos que el código Microdata o JSON-LD está bien puesto?
Para comprobar que el código, tanto en Microdata como en JSON-LD, está correctamente implementado, Google proporciona una Herramienta de Datos Estructurados.
Tenemos 2 opciones:
– Introducir la URL
– Introducir el fragmento de código
¿Acabamos de poner el marcado o queremos verificar si nuestra web o plantilla ya viene con el marcado?
Entonces insertamos nuestra URL y lo veremos de inmediato. Deberíamos comprobar varias tipologías de página: post del blog, categoría, producto, etc.
Si no queremos subir el código a la web todavía, podemos probarlo antes introduciendo el fragmento de código.
Google nos dirá si ha encontrado errores en el marcado o si es correcto. De contener errores, tendremos que modificar lo que Google nos pida o el marcado no se mostrará. Frecuentemente es cuestión de una coma o un cierre, por eso recomiendo que nos fijemos bien en la estructura del script o del código y la entendamos.
¿Has implementado ya migas de pan en tu web? ¿Con qué dificultades te has topado?
Cuéntanoslo aquí. 😉
Una Auditoría SEO nos ayuda a encontrar puntos de mejora y optimización de nuestra web. Son muchas las áreas a trabajar dentro de una auditoría, pero si eres organizado y trabajas paso a paso verás que es más sencillo de lo que pensabas. Aquí te dejamos un Checklist SEO bien completo para que puedas tener una base por donde empezar tu auditoría.
