ES 
EN 
FR 
Cuando se trabaja con WordPress (temas, plugins, constructores...), el <head> acaba en un lío: etiquetas críticas demasiado bajas, scripts antes del título, preconexiones que no se encuentran, etc. El resultado es un análisis menos eficiente y pequeñas pérdidas en rendimiento/SEO.
Las buenas noticias: Clasificador jefe (un módulo del WPMasterToolKit) ordena automáticamente las cosas, y Capo.js (extensión de Chrome) te permite comprobar de un vistazo que todo va bien.
¿Por qué el <head> cuenta
Capo.js clasifica los elementos del <head> por grupos prioritarios (peso), para determinar un orden óptimo. Lo más crítico son los directivas pragma (algunos <meta http-equiv>entonces <meta charset>, <meta name="viewport">y <base>), ya que guían al navegador en las primeras fases del proceso de análisis. Por lo tanto, deben aparecer al principio.
Dos recordatorios útiles de las normas Capo:
<meta charset>debe descubrirse muy pronto (dentro de los primeros ~1024 bytes) para evitar cualquier problema de codificación, incluso en el archivo<title>.<base>: establece la URL base para los enlaces relativos; para evitar enlaces rotos en los primeros recursos, se recomienda en la parte superior de la sección<head>.
A continuación vienen (en orden resumido) : <title>, preconectar, hojas de estilo síncronas, guiones (aplazar/asincronizar según proceda), preload/modulepreload, pistas especulativas (prefetch, dns-prefetch, prerender), luego "todo lo demás" (iconos, meta social, etc.).
Qué hace el módulo Clasificador jefe (WPMasterToolKit)
El módulo Clasificador jefe automatiza la clasificación de <head> sin tocar el contenido tags :
- Clasificación inspirada en Capo.js Las directrices críticas y el título se sitúan en primer lugar, seguidos de las preconexiones/hojas de estilo/guiones y, por último, los elementos débiles.
- Respeto del orden interno cuando dos elementos tienen el mismo "peso" (se mantiene su orden relativo).
- Compatible con WordPress Se aplica a la renderización del front-end, sea cual sea el tema o los plugins (ACF, WooCommerce, plugins SEO, etc.).
- Seguro ninguna reescritura agresiva, sólo reordenación.
En concreto: usted mantiene sus mismas etiquetas, pero Head Sorter el gama para que el navegador pueda ver primero lo que es importante.
Configuración en 1 clic
- Activar WPMasterToolKit → Clasificador jefe.
- Purgar caché (plugin + caché del servidor/CDN).
- Cargar una página pública (excluyendo admin) y prueba con Capo.
- Si tiene ganchos/código personalizado que inyecta etiquetas en el archivo
<head>vuelva a cargar la página correspondiente para confirmar el pedido.
Compruebe el resultado con Capo.js (Extensión de Chrome)
- Instalar la extensión Capo.js de la Chrome Web Store y, a continuación, haga clic en el icono de una página de su sitio. La extensión muestra un barra de color que compara el orden real de
<head>(línea superior) a el orden ideal (línea inferior). Lo ideal es que las dos líneas sean muy parecidas. - Mueva el ratón sobre un color: a información sobre herramientas describe el elemento y su prioridad. Abra el Consola DevTools Capo también registra los detalles y cualquier advertencia de validación. (rviscomi.github.io)
- Colores :
- Rojo : elementos prioridad muy alta (directrices pragma,
<title>). - Verde : elementos recursos (hojas de estilo, scripts "normales").
- Azul/Gris : elementos bajo (pistas especulativas, meta social...). (rviscomi.github.io)
- Rojo : elementos prioridad muy alta (directrices pragma,
Lo que Capo también puede decirte (validación)
Capo hace controles de conformidad de <head> sólo algunos ejemplos:
- Sólo los elementos autorizados por la especificación deben figurar en el
<head>de lo contrario, el navegador puede cerrar el<head>prematuramente y empuje (SEO) etiquetas en el<body>. - Debe haber exactamente uno
<title>y como máximo uno<base>en caso contrario, advertencias. - Evite el CSP mediante
<meta http-equiv>en Chrome, este desactiva la precarga del escáner (error conocido) - prefiera el encabezado HTTP.
Si Capo emite una advertencia, corrija la configuración/SEO del lado del servidor o el código del tema/plugin en cuestión, y a continuación actualizar para confirmar.
Modelo de pedido recomendado (lista de comprobación práctica)
He aquí una lista de control simple, conforme al espíritu de las normas Capo (de arriba abajo):
- Orientaciones críticas :
<meta http-equiv>seleccionado (por ejemplocontent-security-policysi es realmente necesario en<meta>pero dando preferencia a la cabecera HTTP),<meta charset="UTF-8">,<meta name="viewport" …>,<base href="…">.
<title>.- Conexiones previas :
<link rel="preconnect" href="…">(policía CDN, análisis, API, etc.). - Estilos sincrónicos :
<link rel="stylesheet">,<style>. - Guiones :
<script defer src="…">(referido),<script async src="…">(asíncrono) según sea necesario.
- Precarga/modulepreload (fuentes críticas, CSS clave, módulos).
- Pistas especulativas :
prefetch,dns-prefetch,prerender. - Todo lo demás iconos, meta social, etc.
Activar Clasificador jefe : se organiza automáticamente en este espíritu, a continuación, pasar un golpe de Capo para comprobar que "real" ≈ "ideal".
Consejos específicos para WordPress
<meta charset>&<title>: la mayoría de los temas bien elaborados los sitúan en lo alto delwp_head(). Si un plugin los mueve, Head Sorter los moverá hacia atrás.- Preconectar dirija sus dominios a terceros real (fuentes CDN, vídeos, análisis). No hace falta pasarse.
- CSP : prefieren elCabecera HTTP (servidor/CDN) en lugar de un
<meta http-equiv>en el<head>para evitar el impacto en la precarga del escáner. - Cubiertas en una página fuera de caché para validar la estructura y, a continuación, purgarla globalmente.
Ejemplo de antes/después (diagrama condensado)
Adelante (desordenado)
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page Title</title>
<meta charset="UTF-8">
Después (ordenados por Head Sorter)
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page Title</title>
<link rel="preconnect" href="https://cdn.example.com">
<link rel="stylesheet" href="style.css">
<script defer src="jquery.js"></script>
Conclusión
Clasificador jefe pone su <head> WordPress al cuadrado automáticamentey Capo.js le ofrece pruebas visuales y garantías de validación. Es sencillo, medible y evita una deuda técnica invisible pero costosa.
