🗂️ Breadcrumbs + 🔒 Security Headers

Código completo listo para copiar: Breadcrumbs con Schema + Headers de seguridad para Apache y Nginx

🗂️ Breadcrumbs Completo (HTML + CSS + Schema)

Sistema de navegación breadcrumb semántico, responsive y con Schema integrado. IA usa esto para entender jerarquía de tu sitio.

1. CSS (Agregar a style.css)

/* ==========================================
   BREADCRUMBS - Estilos Responsive
   ========================================== */

.breadcrumbs {
  font-size: 14px;
  color: #64748b;
  padding: 15px 0;
  margin-bottom: 20px;
}

.breadcrumbs nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
  align-items: center;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs a {
  color: #0066cc;
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumbs a:hover {
  color: #0088ff;
  text-decoration: underline;
}

.breadcrumbs .separator {
  color: #cbd5e1;
  user-select: none;
}

.breadcrumbs .current {
  color: #1e293b;
  font-weight: 500;
}

/* Responsive móvil */
@media (max-width: 640px) {
  .breadcrumbs {
    font-size: 13px;
  }
}

2. HTML (Copiar donde quieras breadcrumbs)

<!-- BREADCRUMBS COMPLETO: HTML Semántico + Schema -->
<div class="breadcrumbs">
  <nav aria-label="Breadcrumb">
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      
      <!-- Nivel 1: Home -->
      <li itemprop="itemListElement" itemscope 
          itemtype="https://schema.org/ListItem">
        
        
        <meta itemprop="position" content="2" />
        <span class="separator" aria-hidden="true">›</span>
      </li>
      
      <!-- Nivel 3: Página Actual (sin link) -->
      <li itemprop="itemListElement" itemscope 
          itemtype="https://schema.org/ListItem">
        <span itemprop="name" class="current">Templates Descargables</span>
        <meta itemprop="position" content="3" />
      </li>
      
    </ol>
  </nav>
</div>

📝 Implementación WordPress:

Opción A: Con Rank Math (automático)

Rank Math ya genera breadcrumbs automáticos
Activar: Rank Math → General Settings → Breadcrumbs → Enable
Agregar en theme (header.php antes del H1):
<?php rank_math_the_breadcrumbs(); ?>

Opción B: Manual (código arriba)

Copiar CSS al archivo style.css de tu theme
Copiar HTML donde quieras mostrar (típicamente antes del H1)
Actualizar URLs y nombres según tu estructura
Para hacer dinámico, usar PHP de WordPress

Opción C: Plugin simple

Instalar “Breadcrumb NavXT”
Configurar en Settings → Breadcrumb NavXT
Agregar shortcode: [bcn_display]

⚠️ Validación importante:

Google Rich Results Test: https://search.google.com/test/rich-results
Verificar que breadcrumbs aparezcan en SERP (tarda 1-2 semanas)
Última posición NO debe tener link (solo <span>)

🔒 Security Headers (Apache + Nginx)

7 headers de seguridad esenciales. Mejora score SecurityHeaders.com y protege tu sitio.

Para Apache (.htaccess)

# ============================================
# SECURITY HEADERS - APACHE (.htaccess)
# Ubicación: Raíz del sitio (/.htaccess)
# ============================================

<IfModule mod_headers.c>

  # HSTS (HTTP Strict Transport Security)
  # Fuerza HTTPS por 1 año
  # ⚠️ Solo activar después de confirmar HTTPS funciona 100%
  Header always set Strict-Transport-Security \
    "max-age=31536000; includeSubDomains; preload" env=HTTPS
  
  # X-Content-Type-Options
  # Previene MIME type sniffing
  Header always set X-Content-Type-Options "nosniff"
  
  # X-Frame-Options
  # Protege contra clickjacking
  Header always set X-Frame-Options "SAMEORIGIN"
  
  # X-XSS-Protection
  # Activa protección XSS del navegador
  Header always set X-XSS-Protection "1; mode=block"
  
  # Referrer-Policy
  # Controla información enviada en header Referer
  Header always set Referrer-Policy \
    "strict-origin-when-cross-origin"
  
  # Permissions-Policy
  # Controla features del navegador
  Header always set Permissions-Policy \
    "geolocation=(self), microphone=(), camera=()"
  
  # Content-Security-Policy (CSP)
  # ⚠️ Ajustar según tus necesidades
  Header always set Content-Security-Policy \
    "default-src 'self' https:; \
     script-src 'self' 'unsafe-inline' 'unsafe-eval' https:; \
     style-src 'self' 'unsafe-inline' https:; \
     img-src 'self' data: https:; \
     font-src 'self' data: https:; \
     frame-src 'self' https:;"

</IfModule>

# ============================================
# CONFIGURACIÓN ADICIONAL SEGURIDAD
# ============================================

# Deshabilitar listado de directorios
Options -Indexes

# Proteger archivos sensibles
<FilesMatch "(^#.*#|\.(bak|conf|dist|fla|in[ci]|log|psd|sh|sql|sw[op])|~)$">
  # Apache 2.4
  <IfModule mod_authz_core.c>
    Require all denied
  </IfModule>
  
  # Apache 2.2
  <IfModule !mod_authz_core.c>
    Order allow,deny
    Deny from all
  </IfModule>
</FilesMatch>

Para Nginx

# ============================================
# SECURITY HEADERS - NGINX
# Ubicación: /etc/nginx/sites-available/tudominio
# ============================================

# Agregar dentro del bloque server { }

add_header Strict-Transport-Security \
  "max-age=31536000; includeSubDomains; preload" always;

add_header X-Content-Type-Options \
  "nosniff" always;

add_header X-Frame-Options \
  "SAMEORIGIN" always;

add_header X-XSS-Protection \
  "1; mode=block" always;

add_header Referrer-Policy \
  "strict-origin-when-cross-origin" always;

add_header Permissions-Policy \
  "geolocation=(self), microphone=(), camera=()" always;

add_header Content-Security-Policy \
  "default-src 'self' https:; \
   script-src 'self' 'unsafe-inline' 'unsafe-eval' https:; \
   style-src 'self' 'unsafe-inline' https:; \
   img-src 'self' data: https:; \
   font-src 'self' data: https:; \
   frame-src 'self' https:;" always;

# Después de hacer cambios:
# sudo nginx -t
# sudo systemctl reload nginx

📝 Pasos de implementación:

Backup: Hacer copia de .htaccess actual
Agregar headers: Copiar código al final de .htaccess
Validar: Ir a securityheaders.com
Score objetivo: A o A+
Ajustar CSP: Si algo se rompe, revisar Content-Security-Policy

⚠️ Problemas comunes:

Error 500: Comentar línea por línea para identificar cuál causa problema
CSP rompe JavaScript: Agregar dominio específico a script-src
YouTube no carga: Agregar https://www.youtube.com a frame-src
Google Analytics: Agregar https://www.google-analytics.com a script-src

🔍 Validar implementación:

Después de agregar los headers, verifica en:

SecurityHeaders.com: https://securityheaders.com (score A o A+)
Browser DevTools: F12 → Network → Seleccionar página → Headers
Console (F12): Verificar que no haya errores CSP

¿Necesitas Ayuda con la Implementación?

Te ayudamos a configurar tu sitio completo para máxima seguridad y visibilidad IA

💬 Agendar Consultoría 🛠️ Más Herramientas

✉️ info@aiseo.com.mx | 📱 +52 55 1860 7503