Introducción

Ocultar el título de la página en la home de WordPress sin afectar al SEO es una práctica habitual cuando el diseño exige una cabecera más limpia pero se quiere conservar el beneficio de mantener el título en el HTML (para motores de búsqueda, datos estructurados y accesibilidad). En este tutorial detallado veremos por qué no conviene eliminar el título del DOM, cómo localizar el selector correcto y varias técnicas CSS seguras y recomendadas para ocultarlo visualmente manteniéndolo disponible para buscadores y lectores de pantalla.

Por qué no eliminar el título del HTML

• SEO: los motores de búsqueda usan el HTML para determinar la temática y la jerarquía de la página eliminar el título puede reducir la claridad semántica.
• Datos estructurados: plugins y themes suelen usar el título para generar microdatos/schema.org y Open Graph borrarlo puede afectar rich snippets y compartido en redes.
• Accesibilidad: eliminar o ocultar con display:none puede impedir el acceso a lectores de pantalla las técnicas off-screen permiten que sigan leyendo el título.

Cómo funciona WordPress y qué selectores usar

WordPress añade clases en la etiqueta body que nos ayudan a apuntar solo a la home: home, front-page y blog según el caso. El selector del título varía por tema: .entry-title, .page-title, .post-title, .site-title, etc. Antes de añadir CSS debes identificar con las herramientas de desarrollador (Inspector) el selector exacto que usa tu tema para el título.

Clases de body útiles

• .home — para la página principal del blog o la front page si es listada.
• .front-page — cuando la portada es una página estática.
• .blog — cuando la home muestra entradas del blog (depende del theme).

Paso a paso: añadir CSS seguro (recomendado)

1. Hacer copia de seguridad o trabajar en un child theme para no perder cambios con actualizaciones.
2. Identificar el selector con el inspector (clic derecho → inspeccionar) y copiar la clase del título.
3. Añadir el CSS desde Apariencia → Personalizar → CSS adicional, o en style.css del child theme.
4. Comprobar accesibilidad y SEO: usar Lighthouse, ver la fuente (Ver código fuente) y la inspección de URL en Google Search Console.
5. Probar en dispositivos y con un lector de pantalla (NVDA o VoiceOver) para garantizar que el título sigue accesible si usaste la técnica off-screen.

Ejemplos de CSS

A continuación verás varios enfoques. El primero es no recomendado si quieres que el título siga disponible para lectores y algunos motores: display:none. Después te muestro la técnica recomendada (off-screen/sr-only) que oculta visualmente pero mantiene la etiqueta en el DOM.

1) Solución simple (no recomendada si quieres accesibilidad)

Si por alguna razón necesitas ocultarlo visualmente y no te preocupa la lectura por lectores de pantalla, puedes usar:

.home .entry-title,
.front-page .entry-title {
  display: none
}

Nota: display:none hará que el contenido no sea expuesto a lectores de pantalla y podría ser tratado como contenido oculto por motores no es la mejor práctica para mantener el SEO/ACCESIBILIDAD intactos.

2) Solución recomendada: técnica off-screen (accesible y SEO-friendly)

Esta técnica mantiene el título en el DOM, lo hace legible para buscadores y para lectores de pantalla, pero lo posiciona fuera del área visible para el usuario.

/ Clase sr-only estándar adaptada para scope en la home /
.home .entry-title,
.front-page .entry-title {
  position: absolute !important
  width: 1px !important
  height: 1px !important
  padding: 0 !important
  margin: -1px !important
  overflow: hidden !important
  clip: rect(0 0 0 0) !important
  clip-path: inset(50%) !important
  white-space: nowrap !important
  border: 0 !important
}

Esta regla oculta visualmente el título pero lo deja en el flujo semántico para motores y accesibilidad. Es la mejor opción en la mayoría de los casos.

3) Alternativa moderna con clip-path (compatible y más explícita)

.home .page-title,
.front-page .page-title {
  position: absolute !important
  inset: 0 auto auto -9999px !important / otra forma de sacar fuera de la pantalla /
  width: 1px !important
  height: 1px !important
  overflow: hidden !important
  white-space: nowrap !important
  border: 0 !important
}

Ten en cuenta que clip

Ejemplos según selectores comunes de temas

• Twenty y muchos themes clásicos: .entry-title
• Themes que usan page-title: .page-title
• Site title en header (si quieres ocultar el logo-título en home): .site-title

Ejemplos:

/ Ejemplo para un tema que usa .entry-title /
.home .entry-title {
  / técnica off-screen recomendada /
  position: absolute
  width: 1px
  height: 1px
  margin: -1px
  padding: 0
  overflow: hidden
  clip: rect(0 0 0 0)
  clip-path: inset(50%)
  white-space: nowrap
  border: 0
}

/ Ejemplo para un tema que usa .site-title (cabecera) /
.home .site-title {
  position: absolute
  width: 1px
  height: 1px
  margin: -1px
  padding: 0
  overflow: hidden
  clip: rect(0 0 0 0)
  clip-path: inset(50%)
  white-space: nowrap
  border: 0
}

Cómo localizar el selector correcto (breve guía)

1. Abrir la página principal en el navegador y hacer clic derecho sobre el título → Inspeccionar.
2. Observar la etiqueta HTML y las clases aplicadas (por ejemplo lth1 class=entry-titlegt).
3. Verificar la existencia de las clases home o front-page en la etiqueta ltbodygt (WordPress las añade normalmente).
4. Probar en consola aplicando temporalmente el CSS para confirmar que el selector funciona.

Pruebas y verificación

• Ver código fuente: Verifica que el lth1gt o el título sigue presente en Ver código fuente.
• Google Search Console: Usa la herramienta Inspección de URL para ver cómo Google renderiza la página.
• Auditoría: Ejecuta Lighthouse (Chrome DevTools) y revisa la puntuación de accesibilidad y SEO.
• Lector de pantalla: Comprueba que lectores como NVDA o VoiceOver anuncian el título si eso es necesario para la experiencia.

Advertencias y buenas prácticas

• No uses técnicas de ocultamiento con la intención de manipular los resultados de búsqueda (keyword stuffing oculto): esto puede ser penalizado.
• Si la homepage se gestiona como un listado de posts (blog) y no como página estática, asegúrate de que tu selector no afecta títulos de entradas individuales que sí deban mostrarse.
• Prefiere la técnica off-screen (sr-only) sobre display:none para mantener accesibilidad y claridad semántica.
• Mantén los títulos en el HTML para que los motores y las herramientas de accesibilidad puedan utilizarlos en microdatos y resultados enriquecidos.

Opcional: pequeño snippet PHP para identificar si necesitas una clase extra

WordPress suele añadir clases útiles en ltbodygt. Si por algún motivo necesitas una clase adicional (raro), este fragmento la añade. No borres el título, solo añade una clase que puedas usar en CSS.

/ functions.php del child theme: añadir clase home-hide-title si es front page /
add_filter(body_class, function(classes) {
    if (is_front_page()) {
        classes[] = home-hide-title
    }
    return classes
})

Luego en CSS puedes usar .home-hide-title .entry-title { / técnica off-screen / }

Resumen final

La manera más segura y recomendable de ocultar el título en la home sin afectar SEO ni accesibilidad es mantener el título en el HTML y aplicarle una técnica off-screen mediante CSS (la clase sr-only adaptada). Evita eliminar el título del DOM y evita display:none si quieres conservar accesibilidad. Identifica el selector correcto con el inspector, añade el CSS en el Customizer o en el style.css de tu child theme, y verifica con herramientas como Google Search Console y Lighthouse.