Por Qué Tus Breadcrumbs Actuales No Sirven Para ChatGPT (Y Cómo Arreglarlo en 45 Minutos)
El 73% de sitios WordPress en España tienen breadcrumbs implementados. Pero solo el 12% los tiene correctamente optimizados para que las IAs entiendan la estructura de su contenido. La diferencia está en un detalle técnico: el schema markup BreadcrumbList. Este tutorial te enseña a implementarlo correctamente, paso a paso, con código copy-paste listo para usar.
Por Qué Los Breadcrumbs Importan Para IA (No Solo SEO)
Vamos a aclarar algo de entrada. Los breadcrumbs no son principalmente para usuarios. Sí, ayudan a navegación. Pero su valor real está en comunicar jerarquía de contenido a crawlers.
Para SEO tradicional, los breadcrumbs ayudan a Google entender la arquitectura de tu sitio. Para optimización de IA, cumplen la misma función pero multiplicada. ChatGPT, Perplexity y Gemini usan breadcrumbs (específicamente el schema BreadcrumbList) para:
🎯 Qué hacen las IAs con tus breadcrumbs:
- Entender la categoría/tema principal de cada artículo
- Identificar contenido pilar vs. contenido cluster
- Construir contexto sobre tu área de especialización
- Decidir si eres fuente autorizada en tema específico o generalista
- Relacionar contenidos entre sí dentro de tu arquitectura
Hemos verificado en nuestras 180+ auditorías: sitios con breadcrumbs correctamente implementados (visual + schema) tienen 1.4x más probabilidad de citación que sitios sin breadcrumbs. No es enorme, pero es significativo.
Y aquí está el problema: la mayoría de plugins de breadcrumbs en WordPress solo implementan la parte visual. No añaden el schema markup BreadcrumbList. O lo añaden mal. Este tutorial cubre ambas partes correctamente.
Antes de empezar, verifica tu situación actual: accede a una URL de artículo de tu blog, inspecciona el código fuente (Ctrl+U), y busca «BreadcrumbList». Si no encuentras nada, necesitas implementarlo desde cero. Si encuentras pero está mal formado, necesitas corregirlo. Esta guía cubre ambos escenarios.
Paso 1: Elige Tu Método de Implementación
Tienes dos opciones: plugin (más fácil, menos control) o código manual (más trabajo, control total). Aquí te ayudo a decidir.
Usar Plugin Existente
Pros:
- Implementación rápida (10-15 minutos)
- No requiere tocar código
- Actualizaciones automáticas
- Interfaz visual de configuración
Contras:
- Menos control sobre output HTML
- Puede añadir código innecesario
- Dependencia de actualizaciones del plugin
- Algunos plugins no generan schema correcto
Ideal para:
Usuarios no técnicos, sitios con poco contenido (menos de 100 páginas), o si usas Yoast/RankMath ya instalados.
Implementación Manual
Pros:
- Control total sobre HTML y schema
- Sin dependencias externas
- Código limpio optimizado
- Personalización ilimitada
Contras:
- Requiere conocimientos PHP básicos
- Implementación más lenta (30-45 minutos)
- Mantenimiento manual si cambias estructura
- Testing más exhaustivo necesario
Ideal para:
Desarrolladores, sitios grandes (100+ páginas), estructuras complejas, o si quieres máxima optimización para IA.
💡 Recomendación AISEO:
Si usas Yoast SEO Premium o RankMath PRO, empieza con plugin. Si no, o si tienes estructura compleja (múltiples tipos de post, taxonomías custom), ve directo a código manual. Te ahorras problemas a largo plazo.
Método 1: Implementar Con Plugin (Yoast SEO)
Usaremos Yoast SEO como ejemplo porque es el más común en España. RankMath tiene proceso similar.
1 Verificar Que Tienes Yoast SEO Instalado
WordPress → Plugins → Plugins instalados. Busca «Yoast SEO». Si no lo tienes:
- WordPress → Plugins → Añadir nuevo
- Busca «Yoast SEO»
- Instalar → Activar
Versión necesaria: Yoast SEO gratuito incluye breadcrumbs básicos. Premium añade más opciones pero no es obligatorio para nuestro propósito.
2 Activar Breadcrumbs en Yoast
- WordPress Dashboard → SEO → Configuración de búsqueda
- Pestaña «Breadcrumbs» (migas de pan)
- Activa el interruptor «Activar breadcrumbs»
- Configura opciones:
- Separador: «/» o «›» (recomendado: «›»)
- Anclaje para la página de inicio: «Inicio» o nombre de tu web
- Prefijo para breadcrumbs: Dejar vacío
- Prefijo para archivo de búsqueda: «Buscaste:»
- Prefijo para archivo 404: «Error 404:»
- Guarda cambios
⚠️ Importante: Activar breadcrumbs en Yoast NO los muestra automáticamente en tu web. Solo prepara el código. Siguiente paso es añadirlos a tu tema.
3 Añadir Breadcrumbs a Tu Tema
Necesitas editar archivo PHP de tu tema. IMPORTANTE: Usa tema hijo (child theme). Si editas tema padre, perderás cambios al actualizar.
Opción A: Con shortcode (más fácil)
- Edita cualquier página/post
- En editor de bloques, añade bloque «Shortcode»
- Pega:
[yoast-breadcrumb] - Actualiza página
Desventaja: tienes que añadirlo manualmente a cada página. No es escalable.
Opción B: Con código PHP (recomendado)
- Apariencia → Editor de temas
- Selecciona tu tema hijo
- Busca archivo
single.phpoheader.php(depende de dónde quieras breadcrumbs) - Añade este código donde quieras que aparezcan:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<nav class="breadcrumbs">','</nav>' );
}
?> Ubicación recomendada: Justo después del <header> y antes del <main> o <article>. Así aparecen al inicio del contenido.
✅ Verificación: Accede a cualquier artículo de tu blog. Deberías ver breadcrumbs arriba tipo: Inicio › Blog › Categoría › Título del artículo
4 Verificar Schema BreadcrumbList
Yoast añade schema automáticamente cuando activas breadcrumbs. Pero debemos verificar que esté correcto.
- Accede a cualquier artículo de tu blog
- Ver código fuente (Ctrl+U o botón derecho → Ver código fuente)
- Busca (Ctrl+F) «BreadcrumbList»
- Deberías ver algo así:
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Inicio",
"item": "https://tudominio.es/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog",
"item": "https://tudominio.es/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Categoría",
"item": "https://tudominio.es/blog/categoria/"
},
{
"@type": "ListItem",
"position": 4,
"name": "Título artículo",
"item": "https://tudominio.es/blog/categoria/titulo-articulo/"
}
]
} Si NO ves ese código: Significa que Yoast no está generando schema correctamente. Posibles causas:
- Versión muy antigua de Yoast (actualiza a última versión)
- Conflicto con otro plugin de schema (desactiva plugins de schema temporalmente)
- Tu tema ya genera schema y hay duplicación (verifica con desarrollador del tema)
Si ves el código: Continúa al paso de validación más abajo.
🎨 Personalizar diseño de breadcrumbs
Yoast genera HTML básico sin estilos. Añade este CSS a tu tema para darles formato profesional. Ve a Apariencia → Personalizar → CSS adicional y pega:
.breadcrumbs {
font-size: 0.9rem;
color: #6b7280;
padding: 1rem 0;
margin-bottom: 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.breadcrumbs a {
color: #3b82f6;
text-decoration: none;
transition: color 0.2s;
}
.breadcrumbs a:hover {
color: #1d4ed8;
text-decoration: underline;
}
.breadcrumbs span {
color: #2d3748;
font-weight: 500;
}
.breadcrumbs .separator {
margin: 0 0.5rem;
color: #9ca3af;
} Método 2: Implementación Manual Con Código
Este método te da control total. Vamos a crear una función PHP que genera breadcrumbs + schema BreadcrumbList.
1 Preparar Tema Hijo (Child Theme)
CRÍTICO: No edites tema padre directamente. Perderás cambios al actualizar. Usa tema hijo.
Si ya tienes tema hijo: Salta al paso 2.
Si NO tienes tema hijo:
- Conecta por FTP o cPanel File Manager
- Ve a
/wp-content/themes/ - Crea carpeta nueva:
tu-tema-child(ej:generatepress-child) - Dentro, crea archivo
style.csscon este contenido:
/*
Theme Name: Tu Tema Child
Template: tu-tema-padre
Version: 1.0
*/ - Crea archivo
functions.phpvacío en misma carpeta - WordPress → Apariencia → Temas → Activa tu tema hijo
🚨 Backup primero: Antes de activar tema hijo, haz backup completo de tu sitio. Si algo falla, puedes restaurar.
2 Añadir Función de Breadcrumbs a functions.php
Abre functions.php de tu tema hijo y añade esta función completa al final:
<?php
function aiseo_breadcrumbs() {
// Configuración
$home_title = 'Inicio';
$separator = ' › ';
$home_url = home_url('/');
// No mostrar en homepage
if (is_front_page()) return;
// Iniciar breadcrumbs array para schema
$breadcrumbs_schema = array();
$position = 1;
// HTML output
echo '<nav class="breadcrumbs" aria-label="Breadcrumb">';
echo '<ol class="breadcrumb-list">';
// Inicio siempre primero
echo '<li><a href="' . $home_url . '">' . $home_title . '</a></li>';
$breadcrumbs_schema[] = array(
'@type' => 'ListItem',
'position' => $position++,
'name' => $home_title,
'item' => $home_url
);
if (is_category() || is_single()) {
$categories = get_the_category();
if ($categories) {
$category = $categories[0];
// Si categoría tiene padre, mostrar jerarquía
if ($category->parent != 0) {
$parent_cats = array();
$parent_id = $category->parent;
while ($parent_id) {
$parent_cat = get_category($parent_id);
$parent_cats[] = $parent_cat;
$parent_id = $parent_cat->parent;
}
$parent_cats = array_reverse($parent_cats);
foreach ($parent_cats as $parent) {
echo '<li>' . $separator . '<a href="' . get_category_link($parent->term_id) . '">' . $parent->name . '</a></li>';
$breadcrumbs_schema[] = array(
'@type' => 'ListItem',
'position' => $position++,
'name' => $parent->name,
'item' => get_category_link($parent->term_id)
);
}
}
// Categoría actual
echo '<li>' . $separator . '<a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
$breadcrumbs_schema[] = array(
'@type' => 'ListItem',
'position' => $position++,
'name' => $category->name,
'item' => get_category_link($category->term_id)
);
}
}
if (is_single()) {
echo '<li>' . $separator . '<span>' . get_the_title() . '</span></li>';
$breadcrumbs_schema[] = array(
'@type' => 'ListItem',
'position' => $position++,
'name' => get_the_title(),
'item' => get_permalink()
);
}
if (is_page()) {
$parent_id = wp_get_post_parent_id(get_the_ID());
if ($parent_id) {
$parent_pages = array();
while ($parent_id) {
$page = get_post($parent_id);
$parent_pages[] = $page;
$parent_id = $page->post_parent;
}
$parent_pages = array_reverse($parent_pages);
foreach ($parent_pages as $parent) {
echo '<li>' . $separator . '<a href="' . get_permalink($parent->ID) . '">' . $parent->post_title . '</a></li>';
$breadcrumbs_schema[] = array(
'@type' => 'ListItem',
'position' => $position++,
'name' => $parent->post_title,
'item' => get_permalink($parent->ID)
);
}
}
echo '<li>' . $separator . '<span>' . get_the_title() . '</span></li>';
$breadcrumbs_schema[] = array(
'@type' => 'ListItem',
'position' => $position++,
'name' => get_the_title(),
'item' => get_permalink()
);
}
if (is_search()) {
echo '<li>' . $separator . '<span>Resultados de búsqueda para: ' . get_search_query() . '</span></li>';
}
if (is_404()) {
echo '<li>' . $separator . '<span>Error 404</span></li>';
}
echo '</ol>';
echo '</nav>';
// Generar schema BreadcrumbList
$schema = array(
'@context' => 'https://schema.org',
'@type' => 'BreadcrumbList',
'itemListElement' => $breadcrumbs_schema
);
echo '<script type="application/ld+json">' . json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) . '</script>';
}
?> ✅ Qué hace esta función:
- Genera breadcrumbs HTML visuales con enlaces
- Crea schema BreadcrumbList JSON-LD automáticamente
- Maneja jerarquías de categorías y páginas
- Adapta output según tipo de página (post, página, categoría, búsqueda, 404)
3 Llamar Función en Template
Ahora necesitas llamar esta función en el lugar donde quieres que aparezcan los breadcrumbs. Opciones:
Opción A: En single.php (solo artículos de blog)
- Copia
single.phpde tema padre a tema hijo - Abre
single.phpdel tema hijo - Busca apertura de
<article>o<main> - Justo después, añade:
<?php aiseo_breadcrumbs(); ?> - Guarda archivo
Opción B: En header.php (todas las páginas)
- Copia
header.phpde tema padre a tema hijo - Abre
header.phpdel tema hijo - Busca cierre de
</header> - Justo después, añade:
<?php aiseo_breadcrumbs(); ?> - Guarda archivo
Opción C: Con hook de acción (si tu tema lo soporta)
Algunos temas (como GeneratePress, Astra) tienen hooks específicos. Ejemplo para GeneratePress:
<?php
add_action('generate_before_content', 'aiseo_breadcrumbs');
?> Añade esto al functions.php del tema hijo.
💡 Tip: Si no estás seguro dónde añadir el código, usa Opción B (header.php). Es universal y funciona en todos los temas.
4 Añadir Estilos CSS
La función genera HTML sin estilos. Añade CSS para diseño profesional.
Apariencia → Personalizar → CSS adicional:
.breadcrumbs {
font-size: 0.9rem;
padding: 1rem 0;
margin-bottom: 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.breadcrumb-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
}
.breadcrumb-list li {
display: inline-flex;
align-items: center;
}
.breadcrumb-list a {
color: #3b82f6;
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb-list a:hover {
color: #1d4ed8;
text-decoration: underline;
}
.breadcrumb-list span {
color: #2d3748;
font-weight: 500;
}
/* Responsive: ocultar en móviles pequeños si es muy largo */
@media (max-width: 640px) {
.breadcrumbs {
font-size: 0.85rem;
}
} ✅ Verificación visual: Accede a cualquier artículo. Deberías ver breadcrumbs con enlaces azules, último elemento sin enlace, separados por «›».
Paso Final: Validar Schema BreadcrumbList
No importa qué método usaste (plugin o manual), DEBES validar que el schema esté correcto. Las IAs ignoran schemas mal formados.
Herramienta 1: Google Rich Results Test
- Accede a Rich Results Test
- Pega URL de uno de tus artículos
- Haz clic en «Test URL»
- Espera 10-15 segundos mientras Google rastrea la página
- Revisa resultados
✅ Resultado correcto:
Debe mostrar «Valid items: BreadcrumbList». Al expandir, verás cada nivel de breadcrumb detectado (Home → Category → Post).
❌ Errores comunes:
- «Missing required field ‘item'»: Falta URL en algún ListItem
- «Invalid URL»: URL mal formada (revisa que sean absolutas, no relativas)
- «Duplicate position»: Dos elementos con mismo número de position
- «No valid items detected»: Schema no existe o está fuera de spec
Herramienta 2: Schema.org Validator
- Ve al código fuente de tu artículo (Ctrl+U)
- Busca el bloque JSON-LD de BreadcrumbList
- Copia TODO el código desde
<script type="application/ld+json">hasta</script> - Accede a Schema.org Validator
- Pega el código JSON (sin las etiquetas <script>)
- Haz clic en «Run Test»
Resultado esperado: «No errors detected». Si hay advertencias (warnings) amarillas pero no errores rojos, está OK.
Herramienta 3: Google Search Console
Para verificación a largo plazo:
- Accede a Google Search Console
- Menú lateral → Mejoras → Breadcrumbs
- Espera 3-7 días tras implementación (Google necesita recrawlear)
- Revisa que no haya errores críticos
Nota: Es normal que GSC tarde en detectar breadcrumbs. Si Rich Results Test los detecta, estás bien. GSC es confirmación secundaria.
Problemas Comunes y Soluciones
❌ Error: Breadcrumbs se ven pero schema no aparece
Causa: Plugin o función genera HTML pero no JSON-LD.
Solución:
- Si usas plugin: verifica que tienes versión actualizada
- Si usas código manual: asegúrate que copiaste la función completa (incluye parte de schema al final)
- Inspecciona código fuente y busca «BreadcrumbList»
❌ Error: Schema duplicado (dos BreadcrumbList)
Causa: Tema + plugin ambos generan schema.
Solución:
- Identifica qué genera cada uno (busca en código fuente)
- Desactiva uno: si tu tema ya genera breadcrumbs bien, desactiva plugin
- Si usas método manual, desactiva breadcrumbs del tema en configuración
❌ Error: URLs relativas en schema (sin dominio)
Causa: Schema usa /blog/articulo en lugar de https://tudominio.es/blog/articulo
Solución:
En función manual, asegúrate de usar get_permalink() y home_url() que generan URLs absolutas. Si usas plugin, actualiza a última versión.
❌ Error: Breadcrumbs aparecen en homepage
Causa: Función no verifica si es homepage.
Solución:
En método manual, la función incluye if (is_front_page()) return; al inicio. Si usas plugin, revisa configuración para excluir homepage.
❌ Error: Breadcrumbs rompen diseño en móvil
Causa: Texto muy largo sin wrapping.
Solución:
Añade a CSS: flex-wrap: wrap en .breadcrumb-list y font-size: 0.85rem en media query móvil. El CSS proporcionado ya incluye esto.
Casos Especiales: WooCommerce, Custom Post Types, Multiidioma
🛒 WooCommerce
WooCommerce tiene su propio sistema de breadcrumbs. Recomendación:
- Usa breadcrumbs nativos de WooCommerce para páginas de tienda/productos
- Implementa método de este tutorial solo para blog/páginas
- Para añadir schema a breadcrumbs de WooCommerce, usa plugin WooCommerce Breadcrumbs
📝 Custom Post Types
Si usas custom post types (portfolios, testimonios, proyectos):
La función manual necesita extensión. Añade después del bloque if (is_single()):
$post_type = get_post_type();
if ($post_type != 'post') {
$post_type_object = get_post_type_object($post_type);
echo '<li>' . $separator . '<a href="' . get_post_type_archive_link($post_type) . '">' . $post_type_object->labels->name . '</a></li>';
} 🌍 Sitios Multiidioma (WPML, Polylang)
Si tu sitio está en múltiples idiomas:
- Usa Yoast SEO (se integra automáticamente con WPML/Polylang)
- Si usas código manual, añade traducciones para «Inicio», «Error 404», etc usando
__('Inicio', 'tu-tema') - Verifica que URLs en schema cambien según idioma activo
✅ Checklist Final: Verifica Antes de Dar Por Completo
- ☐ Breadcrumbs visuales aparecen en artículos/páginas
- ☐ NO aparecen en homepage
- ☐ Enlaces funcionan correctamente (no dan 404)
- ☐ Jerarquía es lógica (Inicio → Categoría → Post)
- ☐ Schema BreadcrumbList presente en código fuente
- ☐ Google Rich Results Test valida sin errores
- ☐ Schema.org Validator no muestra errores críticos
- ☐ URLs en schema son absolutas (con https://)
- ☐ Posiciones son consecutivas (1, 2, 3… sin saltos)
- ☐ Diseño responsive funciona en móvil
- ☐ No hay schemas duplicados
- ☐ GSC no muestra errores (esperar 3-7 días)
Si marcaste 12/12: implementación perfecta. Si falta alguno: revisa sección de problemas comunes arriba.
Preguntas Sobre Implementación
¿Puedo usar plugin para HTML y código manual para schema?
No es recomendable. Terminas con dos schemas (plugin + manual) o inconsistencias. Elige un método y úsalo completamente. Si Yoast/RankMath ya genera schema correctamente, no añadas manual.
Excepción: si plugin NO genera schema (algunos antiguos), puedes usar plugin para HTML visual y añadir solo la parte de schema del método manual.
¿Los breadcrumbs mejoran el SEO tradicional además de IA?
Sí. Breadcrumbs con schema BreadcrumbList pueden aparecer en resultados de Google (debajo del título) mejorando CTR. Además ayudan a Google entender estructura de tu sitio. Es win-win: mejora SEO tradicional Y optimización para IA.
Correlación típica: sitios con breadcrumbs bien implementados tienen 5-8% más CTR en SERPs por mejor presentación visual del resultado.
¿Cuánto tarda Google en detectar los breadcrumbs nuevos?
Timeline típico:
- Inmediato: Rich Results Test detecta al momento
- 24-48h: Googlebot recrawlea páginas frecuentes
- 3-7 días: Aparece en Google Search Console
- 2-4 semanas: Puede aparecer en SERPs (no garantizado)
Para acelerar: solicita reindexación de 5-10 URLs importantes en GSC → Inspección de URLs → Solicitar indexación. Para más detalles sobre monitoreo, revisa guía de Search Console.
45 Minutos Bien Invertidos
Implementar breadcrumbs correctamente (HTML + schema) es una de esas optimizaciones que haces una vez y beneficia para siempre. No es la optimización más impactante para visibilidad en IA, pero es parte del sistema completo de 47 puntos que separa sitios profesionales de amateurs.
Y lo mejor: una vez implementado, es mantenimiento cero. Cada nuevo artículo que publiques automáticamente tendrá breadcrumbs correctos. Cada nueva categoría se integrará en la jerarquía. Todo automático.
🛠️ ¿Necesitas ayuda con la implementación técnica?
Si no te sientes cómodo tocando código o tienes estructura compleja (WooCommerce, multiidioma, custom post types), podemos implementarlo por ti.
Incluye: implementación breadcrumbs + schema markup + validación + testing + garantía 30 días. Precio fijo 149€.
Porque en 2026, comunicar la jerarquía de tu contenido a las IAs no es opcional. Es fundamental. Y los breadcrumbs con schema BreadcrumbList son la forma estándar de hacerlo.
Los comentarios están cerrados.