Implementar una navegación de migas de pan con marcado de esquema
Senior SEO-specialist
Las migas de pan proporcionan una mejor experiencia al usuario y ayudan a los motores de búsqueda a comprender la jerarquía de tu sitio web. Al enriquecerlas con datos estructurados (marcado schema), también aumentas las posibilidades de obtener fragmentos enriquecidos en los resultados de búsqueda. En este artículo: cómo implementar correctamente las migas de pan -tanto visual como técnicamente- incluyendo el marcado JSON-LD.
1. ¿Qué son las migas de pan?
Las migas de pan son trazas de navegación que muestran a los usuarios dónde se encuentran dentro de la estructura de un sitio.
Ejemplo:
kotlin
Home > SEO > Structured data > Breadcrumbs implementeren
Mejoran:
- UX (navegación rápida)
- Estructura de enlaces internos (enlaces internos adicionales)
- SEO (contexto y jerarquía)
2. Implementación visual (HTML/CSS)
Lo ideal es colocar las migas de pan en la parte superior de una página, debajo del H1, con HTML estructurado.
Ejemplo HTML:
html
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://jouwdomein.nl">Home</a></li>
<li><a href="https://jouwdomein.nl/seo/">SEO</a></li>
<li>Breadcrumb navigatie</li>
</ol>
</nav>
Añade CSS para el formato visual (por ejemplo, flechas, espaciado).
3. Añadir datos estructurados mediante JSON-LD
Los datos estructurados son necesarios para que las migas de pan sean visibles en los resultados de búsqueda.
Ejemplo de JSON-LD:
html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://jouwdomein.nl"
},
{
"@type": "ListItem",
"position": 2,
"name": "SEO",
"item": "https://jouwdomein.nl/seo/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Breadcrumb navigatie",
"item": "https://jouwdomein.nl/seo/breadcrumb-navigatie/"
}
]
}
</script>
Coloca este guión en o en la parte inferior de de la página.
Aan de slag met SEO? Neem gerust contact op.
4. Implementación en WordPress
¿Utilizas WordPress? Entonces hay tres formas de establecer la miga de pan + esquema automáticamente:
Opción 1: Yoast SEO
- Activar abajo: SEO > Buscar Ver > Migas de pan
Añade el código PHP en tu tema:
php
<?php
if (function_exists('yoast_breadcrumb')) {
yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
}
?>
Opción 2: Matemáticas de rango
- Habilitar las migas de pan en Rank Math > General > Migas de pan
- Integración automática de JSON-LD
Opción 3: Manual
- Utilizar HTML propio + marcado de esquema personalizado como arriba
5. Pruebas y validación
Comprueba que Google reconoce correctamente tus migas de pan.
Herramientas:
- Prueba de resultados
- Validador de marcado de esquemas
Compruébalo:
- Sin errores ni advertencias
- Posiciones y URL correctas
- La estructura coincide con la navegación visual
6. Buenas prácticas
| Directiva | Notas |
| Mostrar migas de pan donde sea relevante | Piensa en blogs, categorías, servicios, contenido de formato largo |
| Utiliza la jerarquía completa | No hay ‘migas de pan de acceso directo’, muestra siempre la ruta completa |
| Emparejar visualmente con JSON-LD | Google espera que las migas de pan también aparezcan en la página |
| Actualización sobre la reestructuración del sitio | Ajusta también el marcado si cambia la estructura de la URL |
En conclusión
Las migas de pan con marcado schema mejoran tu estructura de enlaces internos, el SEO y la experiencia del usuario. Con unas pocas líneas de HTML y JSON-LD, las haces utilizables y visibles en los resultados de búsqueda. Sencillo, eficaz e indispensable para cualquier sitio bien estructurado.
