Generador de schema y HTML de migas de pan
Crea datos estructurados BreadcrumbList y HTML de migas de pan accesible (nav, ol, aria-current) a partir de una lista de nombres de página y URL. JSON-LD listo para copiar.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog",
"item": "https://example.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Cold Brew Guide",
"item": "https://example.com/blog/cold-brew"
}
]
}
</script><nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav>¿Qué es Generador de breadcrumbs?
Este generador convierte una lista de elementos de migas de pan (nombre + URL, desde la página de inicio hasta la página actual) en dos salidas: JSON-LD BreadcrumbList de schema.org para los buscadores y marcado HTML accesible para los visitantes.
Cómo usar Generador de breadcrumbs
- Edita los elementos: una fila por nivel con su nombre y su URL absoluta.
- Añade o elimina filas; la última fila es la página actual y puede no tener URL.
- Fija el aria-label del elemento de navegación en el idioma de tu sitio.
- Copia el bloque JSON-LD y el HTML en tu página.
Ejemplo
Home → Blog → Cold Brew Guide
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav> Cuándo usar Generador de breadcrumbs
Úsalo en páginas que muestran una ruta de migas de pan, sobre todo en estructuras profundas como tiendas o documentación. Los datos estructurados deben coincidir con las migas de pan visibles en la página. Da estilo a los separadores con CSS en lugar de añadir caracteres al marcado.
Cómo funciona Generador de breadcrumbs
Cada fila no vacía se convierte en un ListItem con una posición que empieza en 1, un nombre y la URL del item (que se omite si está vacía). El HTML es un <nav aria-label> que contiene una lista ordenada; los elementos anteriores son enlaces y el último recibe aria-current="page", siguiendo el patrón de migas de pan de WAI-ARIA. Los nombres y las URL se escapan en HTML; las URL relativas generan un aviso porque los datos estructurados deberían usar URL absolutas.
Casos de Uso Comunes
- Añadir resultados enriquecidos de migas de pan a las páginas de categoría y de producto.
- Crear HTML de migas de pan accesible para un sitio de documentación.
- Sustituir unas migas de pan con separadores de texto simple por marcado semántico.
- Generar el marcado para un sitio estático sin plugin de migas de pan.
Preguntas Frecuentes
¿El último elemento necesita URL?
No. Google permite que la página actual omita item; aquí se incluye si introduces una.
¿El marcado de migas de pan garantiza que aparezcan en los resultados de búsqueda?
No. Ayuda a los buscadores a entender la estructura del sitio y hace que el resultado pueda mostrar una ruta de estilo breadcrumb, pero Google decide qué mostrar.
¿Puede una página tener varias rutas de migas de pan?
Sí, añade un BreadcrumbList por ruta si la página es accesible por varios caminos.