¿Qué quieres mejorar de tu empresa?Revisamos tu web, SEO y visibilidad en IARevisamos tu web, SEO y visibilidad en IACuéntanoslo

Diseño web

H1, H2 y contenido: una web que Google y tus clientes entiendan

H1, H2 y contenido: una web que Google y tus clientes entiendan. Ordena tus páginas con ejemplos y una plantilla. Mejora la lectura, los enlaces y la decisión.

Estructura de una página que conecta un H1 claro, secciones H2, imágenes útiles y una decisión de cliente

H1, H2 y contenido: una web que Google y tus clientes entiendan. Ordena tus páginas con ejemplos y una plantilla. Mejora la lectura, los enlaces y la decisión.

Una web se entiende cuando cada bloque responde a una pregunta y prepara la siguiente. El H1 identifica el tema; los H2 organizan decisiones. Párrafos, imágenes y enlaces deben desarrollar ese orden, no competir con él.

Recomiendo leer primero solo los encabezados: oferta, encaje, condiciones y acción siguiente deberían reconocerse. Después comprueba contenido y render. Aquí comparo dos páginas públicas de YAG para decidir qué título informa y cuál repite. Contar etiquetas no sustituye una prueba de comprensión ni demuestra mejores posiciones.

La guía SEO de Google sitúa la organización al servicio de la lectura; el tutorial de W3C WAI explica cómo los encabezados permiten navegar por la estructura. Úsalos para ordenar contenido, no como una receta de ranking.

La plantilla de esta guía convierte esa lectura en un brief revisable. Las observaciones públicas son reales; los ejemplos didácticos de antes y después son ficticios y no representan resultados de clientes.

1. La jerarquía no es una colección de etiquetas: es el orden de una decisión

Una comparación real de encabezados en nuestras páginas

El 7 de octubre de 2026 revisamos diez páginas públicas de YAG con un procedimiento de solo lectura. Seis rutas principales se renderizaron en móvil, a 390 por 844 píxeles. Para este contraste utilizo los encabezados extraídos de las páginas de diseño web y SEO en Madrid. El registro conserva una muestra de H2, no un índice completo de todas las páginas del sitio. No hicimos una prueba de lectores con tecnologías de apoyo ni medimos comprensión o posiciones. Esa limitación permite usar los datos para lo que sí sirven: discutir decisiones editoriales concretas.

En la página de diseño web en Madrid se registró un H1 que identifica el servicio y anuncia un precio de entrada. Entre sus H2 figuran «¿Quieres una web nueva o mejorar la que tienes?» y «¿Cuánto cuesta una web en Madrid?». Las dos preguntas ayudan a anticipar decisiones diferentes: situar el encargo y evaluar su coste. Otro H2 de la muestra reúne agencia, contenido incluido, precio y plazo. Mi lectura es que la estructura combina orientación comercial y condiciones; el examen completo del texto debe comprobar después si cada sección responde realmente a lo que anuncia.

La página de SEO en Madrid también registró un H1. Anuncia posicionamiento web, Google Maps e IA. Los H2 de la muestra incluyen «Lo que puede entrar en tu SEO, y lo que nunca entra.» y «Primero entender qué frena tu crecimiento. Después actuar.». El primero aporta una frontera de alcance; el segundo anticipa proceso. Es una diferencia editorial útil frente a repetir el nombre del servicio en todos los títulos. No demuestra que las tres líneas del H1 hayan producido visibilidad ni que el proceso esté probado para cualquier empresa.

Hecho observadoLectura editorialLo que no demuestra
Se registró un H1 en cada una de las dos rutasHay un encabezado principal identificable en esta observaciónRegla universal de ranking ni comprensión garantizada
Diseño web utiliza una pregunta de encaje y otra de precioEl índice puede separar decisiones del compradorQue la oferta sirva a todos los encargos
SEO incluye un H2 de alcance y exclusionesEl contenido puede explicar fronteras del servicioTrabajo ejecutado o resultados de posicionamiento
El registro conserva seis H2 por ruta principalPermite contrastar títulos concretos de una muestraUn inventario exhaustivo de encabezados del sitio

La muestra también muestra un riesgo editorial: el primer H2 registrado en ambas páginas es una frase extensa que repite la oferta y añade mensajes comerciales. Aquí no lo presento como un fallo técnico de Google. Es una pregunta de edición: ¿necesita el lector esa repetición antes de llegar a encaje, coste o alcance? Mi recomendación es revisar el render y la función del componente antes de tocarlo. Puede haber un motivo de presentación que el extracto no recoge; aun así, el título debería aportar información reconocible al navegar solo por encabezados.

Este borrador utiliza H2 para sus diez secciones principales y H3 para los asuntos que dependen de ellas. Su H1 corresponde al título que la plantilla del blog renderiza, no a una segunda cabecera escrita dentro del cuerpo. Esa separación evita duplicar el título, pero solo el render final permite comprobar cómo queda el conjunto con navegación y componentes compartidos. El Markdown no demuestra por sí solo accesibilidad del documento servido. Hay que inspeccionar la página que recibe la persona y no únicamente el archivo que entregó redacción.

El registro de observaciones públicas utilizado aquí permite contrastar la fecha, las rutas y los campos observados. No es un experimento que atribuya visitas a una jerarquía de títulos. Puedes reproducir el método con una página propia: extrae el encabezado principal, lee una muestra de secciones, anota qué decisión anuncia cada una y contrástala con su contenido. Corrige el título que no informa; conserva el que ya permite orientarse. Esa es una acción editorial defendible sin inventar una garantía SEO.

Una página puede tener un H1 técnicamente correcto y seguir siendo incomprensible. Basta con colocar debajo seis bloques que compiten, esconder el alcance del servicio y terminar con un botón que dice «Descubrir más». Las etiquetas describen la estructura del documento; la jerarquía editorial decide qué debe comprender la persona primero, después y al final.

Empieza fuera del gestor de contenidos. Escribe la pregunta que trae a la visita, la respuesta de la primera pantalla, las objeciones y la acción razonable que puede tomar. Asigna después H1, H2, párrafos e imágenes. Mi criterio es decidir primero qué necesita entender la persona; rellenar componentes ya decididos hace demasiado fácil conservar bloques que no responden a nada.

Convertir una página en una secuencia de preguntas

Una página de servicio suele acompañar varias decisiones. ¿Estoy en el lugar correcto? ¿Hacéis exactamente lo que necesito? ¿Para quién funciona? ¿Cómo trabajáis? ¿Qué puedo comprobar? ¿Cuánto compromiso exige el siguiente paso? No todas pesan igual ni deben aparecer en cualquier orden.

La primera pregunta necesita una respuesta rápida. El H1 y su texto próximo deberían identificar la propuesta sin obligar a interpretar un eslogan. Después llega el encaje: tipo de cliente, problema, zona o condiciones. El proceso tiene sentido cuando ya sabemos qué se ofrece. La prueba vale cuando está cerca de la afirmación que sostiene. El contacto llega con contexto, no como interrupción.

Un mapa sencillo puede ordenar el trabajo:

MomentoPregunta del lectorPieza responsableError habitual
Llegada¿Qué ofrece esta página?H1 y entradillaLema abstracto sin servicio
Encaje¿Sirve para mi caso?Primer H2 y criteriosHablar para todo el mundo
Evaluación¿Cómo lo resolvéis?Proceso, alcance y pruebaBeneficios sin mecanismo
Comparación¿Por qué esta opción?Diferencias y límitesSuperlativos sin evidencia
Acción¿Qué pasa si avanzo?CTA y explicación próximaBotón ambiguo o prematuro

No es una plantilla obligatoria. Una ficha de producto, una página local y un artículo siguen recorridos diferentes. La utilidad de la tabla está en asignar responsabilidad: si dos bloques responden a la misma pregunta, quizá sobra uno; si ninguna pieza responde, existe un hueco.

Separar importancia visual de nivel semántico

Un texto enorme no se convierte en H1 por tamaño. Un H2 no deja de serlo porque el diseño lo muestre pequeño. La tipografía expresa énfasis visual; el marcado comunica relación dentro del documento. Deben coordinarse, pero no son lo mismo.

Este matiz evita dos errores opuestos. El primero consiste en usar encabezados para conseguir estilos: cada frase grande acaba como H2 aunque no abra ninguna sección. El segundo convierte párrafos en falsos títulos mediante clases visuales, de modo que la página parece ordenada a la vista pero pierde esa organización cuando se lee sin CSS o se navega por encabezados.

Separa los estilos visuales de los niveles de encabezado en el sistema de diseño. Adapta tamaño o color con una clase; elige H1, H2 o H3 por la relación del contenido. Comprueba luego que la apariencia expresa esa dependencia. Revisa un H3 que domina visualmente a su H2: puede existir una razón de interfaz, pero debe quedar justificada y no ser un efecto accidental de la plantilla.

También distinguiría el encabezado del contenido de los rótulos de navegación, pie o tarjetas repetidas. Un menú puede necesitar nombres visibles sin que todos formen parte del esquema del artículo. La respuesta concreta depende del componente y su semántica; no se resuelve contando etiquetas desde una extensión.

Dibujar el esquema antes de escribir el texto final

Esta plantilla reutilizable convierte la lectura de encabezados en una decisión de edición. Copia una fila por sección, incluyendo el primer bloque. No asignes niveles para que encajen con el tamaño de letra que te gusta: registra primero la relación entre las ideas.

CampoQué escribir
Pregunta de llegadaQué viene a resolver la persona
Respuesta principalUna frase comprensible sin el resto de la página
Encabezado y nivelTema principal o asunto dependiente de otro
Contenido que lo respaldaPárrafo, comparación, proceso o evidencia disponible
Imagen y funciónQué información se perdería al quitarla
Acción siguienteQué puede hacer el lector con ese contexto
Defecto dominanteRespuesta ausente, tardía, repetida o contradictoria
ComprobaciónLectura sin estilos, render móvil y escritorio, navegación

Al terminar, lee solo la columna de encabezados. Después lee solo las respuestas. Las dos secuencias deberían explicar la misma oferta, aunque con distinto detalle. Corrige primero una contradicción o una respuesta ausente; pulir tipografía antes de eso no resuelve el problema. El resultado es un brief revisable, no una certificación de accesibilidad o de posicionamiento.

El esquema útil no es una lista de palabras clave. Es un guion de decisiones. Para cada sección anotaría una pregunta, una respuesta de una frase, la evidencia disponible y la transición hacia la siguiente. Si no podemos completar esas cuatro columnas, todavía no sabemos qué debe hacer el bloque.

Por ejemplo:

SecciónRespuesta de trabajoEvidenciaSiguiente paso
ServicioDiseñamos webs corporativas que explican y conviertenProceso y entregables realesComprobar encaje
EncajeTrabajamos con empresas que pueden aportar contenido y validar decisionesRequisitos del proyectoEntender proceso
ProcesoOrdenamos contenido, diseño, desarrollo y QAFases y responsablesVer prueba
PruebaMostramos proyectos con alcance verificableCaso o captura contextualizadaSolicitar valoración

Este ejercicio descubre contradicciones antes de redactar. Si la prueba no existe, no basta con reservar una galería. Si el servicio cambia según el caso, la respuesta debe admitirlo. Si el siguiente paso requiere información, el CTA y el formulario tienen que pedirla sin fingir una compra instantánea.

El esquema también protege contra el relleno. No necesito un bloque de «valores» porque todas las webs lo tienen. Necesito explicar una decisión. Si los valores ayudan a decidir, encuentran sitio. Si solo ocupan una franja bonita, quizá pertenecen a otra página o no pertenecen a ninguna.

2. El H1 debe confirmar la promesa principal sin sonar a etiqueta de archivo

El H1 es la frase que encabeza el contenido principal. En una página comercial debería confirmar qué se ofrece y, cuando aporte precisión, para quién, dónde o con qué diferencia. No tiene que contener toda la propuesta. Tiene que evitar que la persona dude si ha llegado al lugar adecuado.

Mi prueba favorita es sencilla: mostrar solo el H1 y la primera frase a alguien que no conoce la empresa. Si puede explicar qué encontrará y para quién parece relevante, la entrada funciona. Si responde «algo de innovación» o «una frase de marca», el texto ha usado espacio sin reducir incertidumbre.

Nombrar la oferta antes de vestirla de personalidad

La personalidad importa, pero necesita un objeto. «Impulsamos tu siguiente etapa» puede abrir una presentación, una consultoría, un banco o un gimnasio. En una web de servicios, el lector aún no sabe qué está comprando. La frase puede vivir como apoyo; no debería cargar sola con la orientación.

Un H1 más claro sería «Diseño web para empresas que necesitan explicar y vender mejor». Nombra el servicio y una consecuencia deseada sin prometer ventas. La entradilla puede concretar alcance: estrategia de contenidos, diseño, desarrollo y comprobación. Después la marca recupera su tono en la forma de decirlo.

No busco convertir cada H1 en una fórmula rígida. «Muebles que caben en casas reales» puede funcionar en una tienda si las categorías, la imagen y el texto inmediato confirman producto, medidas y entrega. La claridad se evalúa en contexto. Lo que evitaría es confiar en que una fotografía genérica rescate una frase que podría pertenecer a cualquier sector.

En diseño web en Madrid, por ejemplo, el H1 debe dejar claro el servicio antes de explicar metodología o tecnología. La ubicación es útil si modifica disponibilidad o intención. Repetir «Madrid» en cada subtítulo no añade esa precisión; explicar cómo se presta el servicio sí.

Mantener una promesa coherente entre resultado, H1 y primer bloque

La visita no empieza siempre dentro de la página. Puede venir de un resultado de búsqueda, un enlace, una campaña, una recomendación o un menú. Cada origen crea una expectativa. El título SEO, el texto del enlace y el H1 no necesitan coincidir palabra por palabra, pero deben describir la misma oferta.

Imaginemos un resultado que promete «Tienda online para vender sin depender de un marketplace». La persona entra y encuentra el H1 «Creamos experiencias digitales memorables». No hay una mentira literal, pero sí un cambio de conversación. El primer segundo se gasta en reconstruir el contexto.

Una versión coherente podría ser:

  • Título de resultado: «Diseño de tienda online para marcas | YAG».
  • H1: «Una tienda online preparada para enseñar, cobrar y gestionar pedidos».
  • Entradilla: «Diseñamos la estructura, el catálogo y el recorrido de compra; antes de presupuestar, revisamos productos, pagos, envíos e integraciones».

Cada pieza cumple una función distinta y conserva el mismo núcleo. La página no promete que la tienda venderá por sí sola. Tampoco reduce el trabajo a una plataforma. Si el usuario compara proveedores, ya sabe qué conversación puede iniciar.

Google explica que el enlace de título puede apoyarse en el elemento title y en otros encabezados de la página. Eso no convierte el H1 en una palanca mecánica. Refuerza una idea editorial: los nombres principales deben ser claros, concisos y representar el contenido real. Guía SEO de Google Search Central

Editar el H1 con una prueba de pérdida, no con densidad

Para revisar un H1, quitaría una palabra y comprobaría qué información desaparece. Si eliminamos «web» y la oferta deja de identificarse, la palabra cumple una función. Si eliminamos «innovador» y nada cambia, era decoración. La edición por pérdida produce frases cortas sin volverlas vacías.

Después buscaría cuatro señales:

  1. Objeto: servicio, producto o decisión que encabeza.
  2. Audiencia o caso: solo cuando diferencia de verdad.
  3. Resultado razonable: lo que la página ayuda a conseguir, sin garantía.
  4. Continuidad: una entradilla capaz de desarrollar la promesa.

No exigiría que aparezcan las cuatro en una sola línea. Un H1 interminable es un resumen, no un encabezado. La entradilla, la imagen y el primer H2 comparten el trabajo. El diseño debe permitir esa cooperación sin colocar un vídeo, un carrusel o un formulario entre la promesa y su explicación.

También revisaría el H1 en móvil. Una frase que ocupa dos líneas en escritorio puede convertirse en seis, empujar la respuesta fuera de pantalla y romper el ritmo. La solución no siempre es acortarlo; quizá la tipografía es desproporcionada o la anchura está mal resuelta. Contenido y diseño se editan juntos.

3. Los H2 deben permitir recorrer la página sin leerla completa

Mucha gente no lee de arriba abajo. Explora. Busca una palabra conocida, una objeción, un precio, una zona o el nombre de una solución. Los H2 funcionan como señales de ruta. Si todos son creativos pero vagos, el recorrido obliga a abrir cada sección mentalmente. Si son repetitivos, no ayudan a elegir.

Un buen H2 resume la pregunta que resuelve el bloque. No necesita ser una pregunta gramatical, aunque puede serlo. «Qué incluye el proyecto» orienta mejor que «Todo lo que necesitas». «Cómo calculamos el presupuesto» informa más que «Inversión inteligente». La personalidad puede vivir dentro de una frase precisa.

Escribir encabezados que sobrevivan fuera de contexto

Yo copiaría todos los H2 en una lista y ocultaría el resto. Esa lista debería contar la historia básica de la página: propuesta, encaje, proceso, prueba, condiciones y siguiente paso. Si aparecen «Innovación», «Compromiso», «Calidad» y «Tu futuro», el esquema no comunica una decisión.

La prueba fuera de contexto también descubre duplicidades. «Por qué elegirnos», «Nuestra diferencia» y «Lo que nos hace únicos» probablemente compiten por la misma sección. Podemos unirlas y liberar espacio para una duda real: plazos, entrega, mantenimiento o propiedad del proyecto.

Un esquema ficticio para una página B2B podría pasar de esto:

  • Soluciones.
  • Beneficios.
  • Tecnología.
  • Confianza.
  • Contacto.

a esto:

  • Qué proceso operativo conecta la plataforma.
  • Qué necesita tu equipo antes de implantarla.
  • Cómo migramos datos y reducimos interrupciones.
  • Qué incluye soporte y qué se presupuesta aparte.
  • Qué revisamos en una demostración inicial.

La segunda lista no garantiza conversión ni posicionamiento. Sí permite entender mejor la oferta y formular preguntas. Esa es una mejora verificable en el contenido, aunque el resultado comercial dependa de más factores.

Repartir las decisiones sin fragmentar cada frase

La claridad no exige convertir cada párrafo en una sección. Demasiados encabezados interrumpen el argumento y hacen que todo parezca igual de importante. Google dice que no existe una cantidad ideal. El criterio es editorial: un nuevo H2 abre una decisión principal; un H3 desarrolla una parte subordinada; un párrafo continúa la misma idea.

Yo agruparía contenido cuando la persona necesita leerlo como una unidad. Alcance, exclusiones y entregables pueden vivir bajo «Qué incluye el proyecto» con H3 internos si son extensos. Separarlos en tres H2 puede ser útil en una página larga, pero innecesario en una propuesta sencilla.

También evitaría un H2 antes de una sola frase que no va a desarrollarse. Ese patrón suele nacer de componentes visuales: se diseña una tarjeta para cada beneficio y el marcado asigna un encabezado a cada rótulo. A veces basta una lista semántica con texto destacado. No todo énfasis merece una nueva sección.

El extremo contrario es el bloque de mil palabras sin señales. Aunque el argumento sea bueno, la persona no puede volver a una parte ni anticipar lo que viene. Dividir no significa cortar al azar; significa reconocer cambios reales de pregunta.

Conectar cada H2 con una salida concreta

Una sección debería cambiar lo que el lector sabe o puede hacer. Al terminar «Qué incluye», puede evaluar alcance. Tras «Cómo trabajamos», comprende responsabilidades. Después de «Casos y ejemplos», puede comprobar si la promesa tiene respaldo. Esa salida evita contenido ornamental.

Prepararía cada H2 con una ficha mínima:

CampoPregunta de edición
Función¿Qué decisión facilita esta sección?
Respuesta¿Puede resumirse en una frase concreta?
Prueba¿Qué dato, ejemplo o demostración la sostiene?
Límite¿Qué no podemos afirmar o incluir?
Salida¿Qué entiende o hace la persona después?

La ficha sirve también para decidir el orden. Si una sección depende de un concepto que aparece después, se mueve o se reescribe. Si la prueba llega cinco pantallas más tarde, se aproxima. Si el CTA necesita información que todavía no se ha explicado, espera.

En una página de SEO en Madrid, la sección sobre medición debería explicar qué se observa y qué no puede atribuirse antes de prometer un informe. En una tienda online, pagos, envíos, catálogo y operación deben aparecer antes de tratar el checkout como simple diseño. Los H2 exponen esas dependencias; no las decoran.

Esquema que convierte H1, H2 y H3 en una ruta de preguntas, respuestas y decisiones

La jerarquía representa relaciones editoriales; no es una fórmula de ranking ni obliga a usar la misma cantidad de secciones en todas las páginas.

4. H3, componentes y niveles: representar relaciones sin convertir el HTML en un organigrama

El H3 desarrolla una parte de la sección abierta por un H2. Parece una definición sencilla, pero muchos sistemas la rompen porque el componente decide la etiqueta antes que el contenido. Una tarjeta siempre imprime H3. Un acordeón siempre imprime H4. El editor elige un tamaño de letra y el CMS deduce un nivel. La página termina con una jerarquía accidental.

W3C WAI recomienda anidar los encabezados por rango y evitar saltos cuando sea posible; por ejemplo, no pasar de H2 a H4 sin un H3 que abra la subsección intermedia. La razón que destaca es la comprensión y la navegación. No afirmaría que cumplir ese consejo por sí solo convierte una página en conforme con todas las WCAG. La accesibilidad incluye muchas más relaciones, estados, interacciones y pruebas. Tutorial de encabezados de W3C WAI

Usar el nivel que corresponde a la dependencia

Imaginemos un H2 llamado «Cómo se desarrolla el proyecto». Dentro aparecen «Diagnóstico», «Diseño», «Desarrollo» y «QA». Esas fases dependen de la sección, por lo que pueden ser H3. Si dentro de «QA» distinguimos contenido, accesibilidad y formularios, quizá necesitemos otro nivel o una lista. La decisión depende de cuánto desarrollo tenga cada punto.

Ahora imaginemos que «Mantenimiento» no forma parte del proyecto inicial, sino que es un servicio posterior con alcance propio. Colocarlo como otro H3 bajo proceso puede ocultar esa diferencia comercial. Podría necesitar un H2 o incluso otra página. La semántica revela una decisión de producto, no solo de marcado.

Yo haría la prueba del índice verbal: «Dentro de X, existe Y». Si la frase tiene sentido, Y puede ser subsección. «Dentro de cómo desarrollamos el proyecto, existe una fase de diagnóstico» funciona. «Dentro de casos de éxito, existe el precio del mantenimiento» no. El segundo asunto necesita otra relación.

No obligaría a que cada H2 tenga H3. Una sección breve puede resolverse con varios párrafos y una lista. En este artículo usamos una estructura regular porque el encargo la necesita; una web comercial debe elegir la forma que ayude a comprender su contenido.

Diseñar componentes que no secuestren la semántica

Un componente reutilizable debería aceptar el nivel o, mejor, recibir el elemento adecuado desde el contexto. Si una tarjeta aparece bajo un H2, su título puede ser H3. La misma tarjeta en una lista principal no debería arrastrar ese nivel sin revisión. La reutilización visual no garantiza equivalencia estructural.

Esto importa en bloques frecuentes:

  • tarjetas de servicios;
  • acordeones de preguntas;
  • testimonios con títulos;
  • pasos de un proceso;
  • métricas destacadas;
  • llamadas a la acción;
  • pies con columnas de enlaces.

No todos necesitan encabezado. Un testimonio puede usar una cita y un nombre. Una métrica puede ser un dato con etiqueta. Un botón no es un título. Cuando etiquetamos todo como heading para conseguir tipografía o navegación, el esquema se llena de fragmentos que no abren contenido.

También revisaría componentes ocultos. Un carrusel puede mantener varias diapositivas en el DOM. Un modal cerrado puede incluir otro H1. Un menú móvil puede duplicar rótulos. La página visible parece tener una jerarquía, pero la estructura expone otra. No asumiría un fallo solo por el recuento; abriría el componente y comprobaría cómo se oculta, etiqueta y anuncia.

La solución sostenible es separar tres decisiones en el sistema: etiqueta semántica, estilo visual y función del componente. Si están acopladas, cada corrección en una página genera otra incoherencia en la siguiente.

Comprobar el esquema con navegación, no solo con una auditoría automática

Una herramienta puede detectar ausencia de H1 o salto de nivel. No puede decidir si «Nuestra pasión» describe la sección, si dos H2 compiten o si la persona entiende el proceso. La revisión necesita lectura.

Yo haría tres pasadas. La primera obtiene el esquema del documento y lo lee como índice. La segunda navega por encabezados con una tecnología de apoyo o una herramienta que reproduzca esa lista. La tercera compara ese orden con la composición visual en escritorio y móvil. Busco diferencias, no un número perfecto.

Preguntas concretas:

  1. ¿El encabezado principal identifica el contenido y no solo la marca?
  2. ¿Cada nivel inferior pertenece al superior?
  3. ¿Hay frases visualmente importantes que no aparecen en el esquema?
  4. ¿Aparecen encabezados invisibles, duplicados o ajenos al contenido?
  5. ¿El orden del DOM coincide con el recorrido visual razonable?
  6. ¿La navegación permite saltar a una sección y entender dónde hemos llegado?

Una página puede pasar reglas automáticas y fallar estas preguntas. También puede tener un salto técnico aislado sin que eso explique su problema comercial principal. Priorizaría el defecto que más perjudica comprensión y navegación, lo corregiría y repetiría la prueba completa. Las comprobaciones automáticas ayudan a no olvidar; no sustituyen el juicio editorial.

5. El contenido claro responde antes de adornar y evita repetir palabras para parecer relevante

La claridad no significa escribir como un manual infantil ni borrar la personalidad. Significa que la persona puede identificar sujeto, acción, condición y consecuencia sin reconstruir la frase. Una marca puede sonar cercana, técnica, sobria o provocadora. Lo que no debería sonar es indeterminada.

Yo escribiría primero la respuesta desnuda. Después decidiría qué tono la hace propia. Este orden impide que una metáfora ocupe el lugar de una condición, que un beneficio oculte el mecanismo o que una palabra clave se repita porque todavía no sabemos qué explicar.

Colocar la respuesta cerca de la pregunta

Si el H2 pregunta «¿Cuánto tarda una web?», el primer párrafo no debería empezar con la historia de internet. Debe explicar de qué depende el plazo, qué puede confirmarse y qué información falta. Si no existe una cifra estable, se dice. La respuesta puede ser condicionada y seguir siendo directa.

Esta regla vale para secciones que no usan interrogación. Bajo «Qué incluye el proyecto», la primera frase enumera o define el alcance. Bajo «Trabajamos en estas zonas», confirma cobertura. Bajo «Soporte después de publicar», explica si está incluido, es opcional o requiere otro contrato.

La respuesta temprana mejora el escaneo, pero no obliga a escribir todos los bloques igual. Podemos alternar una frase breve, una comparación o un ejemplo. Lo que evitaría es la introducción ceremonial: «La presencia digital ya no es opcional para las empresas que quieren avanzar». Esa frase consume atención y sirve para casi cualquier web.

Un comienzo más útil sería: «Una web corporativa debe explicar el servicio, demostrarlo y entregar cada consulta al equipo correcto. El diseño empieza por ese recorrido, no por elegir una plantilla». Hay una opinión, un objeto y un criterio que pueden discutirse.

Repetir conceptos cuando ayudan, no expresiones para cubrir variaciones

Google señala que sus sistemas pueden comprender cómo una página se relaciona con muchas consultas aunque no utilice cada variante exacta. También advierte contra la repetición excesiva de palabras. No necesito escribir «diseño web Madrid» en cada H2, pie de foto y botón para que el tema exista. Guía SEO de Google Search Central

Sí repetiría el nombre del servicio cuando evita ambigüedad. Un usuario que salta hasta la sección de precio necesita saber si hablamos del diseño, el mantenimiento o el SEO. La repetición humana conserva referentes. El relleno SEO repite una cadena aunque el contexto ya esté claro.

Una prueba práctica consiste en subrayar cada aparición de la expresión objetivo y asignarle una función:

  • identificar la página;
  • diferenciar un servicio;
  • recuperar contexto tras un salto;
  • nombrar un enlace;
  • aclarar una condición local.

Si varias apariciones no tienen función, las quitaría o escribiría información nueva. No las sustituiría automáticamente por sinónimos. «Diseño web», «creación digital», «desarrollo de presencia online» y «construcción de ecosistemas web» pueden convertir un tema claro en cuatro nombres para lo mismo.

También cuidaría la entidad detrás del pronombre. «Lo hacemos» puede referirse al diseño, la migración o el soporte. En frases cercanas se entiende; después de una tarjeta o imagen, quizá no. La claridad se pierde en pequeños saltos, no solo en grandes errores.

Editar verbos, condiciones y pruebas

Los verbos vagos esconden trabajo. «Potenciamos», «impulsamos» y «transformamos» no explican qué cambia. A veces encajan en un titular de marca; no deberían sustituir acciones verificables. «Ordenamos el catálogo, configuramos pagos y probamos el pedido» permite evaluar el servicio.

Las condiciones protegen la promesa. «La web estará lista en cuatro semanas» es una garantía si no contempla alcance, materiales y validaciones. «El calendario se confirma después de revisar páginas, integraciones y disponibilidad de contenidos» es menos llamativo y más honesto. Puede añadirse una horquilla solo si el negocio dispone de una base actual que la sostenga.

La prueba debe estar cerca. Si decimos que una imagen explica mejor el producto, mostramos un ejemplo o describimos la información que contiene. Si afirmamos que el formulario llega, se prueba. Si presentamos experiencia, enlazamos casos con alcance verificable. Un adjetivo no es evidencia.

Yo revisaría cada bloque con tres colores: promesa, condición y prueba. Una página llena del primer color y vacía de los otros dos está vendiendo una conclusión. Una página con condiciones pero sin propuesta se defiende tanto que no avanza. La edición busca equilibrio, no modestia automática.

6. Antes y después: cambiar el orden del mensaje sin inventar resultados

Los ejemplos permiten ver una diferencia que la teoría disimula. Los siguientes casos son ficticios. No proceden de webs de clientes, no se han sometido a una prueba de conversión y no implican que una redacción concreta mejore posiciones. Comparan información, jerarquía y siguiente paso.

No presento el «después» como texto definitivo. Una empresa real tendría que aportar catálogo, cobertura, proceso, precios y pruebas. Precisamente por eso los ejemplos evitan cifras y logros: muestran la forma de preguntar antes de escribir.

Ejemplo uno: servicio local con un hero que no identifica el trabajo

Antes

H1: El confort que mereces.

Texto: Soluciones de calidad con un equipo comprometido contigo.

Botón: Saber más.

El bloque podría pertenecer a climatización, mobiliario, reformas o descanso. «Confort» apunta a un resultado, pero no identifica el servicio. «Calidad» y «comprometido» no describen alcance. El botón obliga a explorar sin saber qué ocurrirá.

Después ficticio

H1: Mantenimiento de climatización para locales y oficinas en [zona atendida].

Texto: Revisamos equipos, proponemos el mantenimiento adecuado y coordinamos las intervenciones con la actividad del negocio. Primero confirmamos instalación, ubicación y necesidad.

Botón: Solicitar revisión de mantenimiento.

La versión nueva tiene huecos deliberados: la zona debe ser real y el proceso debe confirmarlo la empresa. A cambio, la persona puede evaluar servicio, contexto y siguiente paso. El texto no promete ahorro, rapidez ni ausencia de averías.

Los H2 posteriores podrían ser «Qué instalaciones mantenemos», «Cómo preparamos la propuesta», «Cobertura y disponibilidad» y «Qué necesitamos para valorar tu caso». La arquitectura sigue preguntas que cambian la decisión.

Ejemplo dos: software B2B que enumera funciones antes de explicar el problema

Antes

H1: El control que tu negocio necesita.

H2: Innovación.

Texto: Centraliza tu empresa con funciones avanzadas de automatización, analítica y colaboración para todos tus equipos.

No sabemos qué proceso conecta, quién la usa ni qué exige implantarla. La lista de categorías suena amplia porque carece de objeto. El H2 no ayuda a localizar información.

Después ficticio

H1: Unifica pedidos, inventario y preparación de almacén en un mismo flujo.

Texto: La plataforma conecta las tareas que hoy se reparten entre hojas de cálculo y aplicaciones separadas. Antes de una demostración revisamos volumen operativo, sistemas actuales e integraciones necesarias.

H2: Qué proceso cambia para operaciones, almacén y administración.

Esta versión tampoco afirma que el software reduzca tiempos o errores. Para hacerlo necesitaríamos una medición definida. Sí delimita proceso, participantes y requisitos. Un siguiente H2 podría explicar «Qué datos hacen falta para preparar la implantación», seguido de «Qué integra y qué queda fuera».

En este escenario, el H1 no intenta nombrar todas las funciones. El primer H2 abre la consecuencia operativa. Los H3 pueden separar roles porque dependen de esa sección. La estructura nace de la decisión de compra, no de cuatro tarjetas disponibles en la plantilla.

Ejemplo tres: ecommerce con imágenes bonitas pero sin información de compra

Antes

H1: Diseños que hablan de ti.

Imagen: salón editorial sin producto identificable.

H2: Colecciones únicas.

Botón: Descubre el universo.

La dirección visual puede ser atractiva, pero la persona no sabe qué se vende, si puede comprarlo, qué medidas existen o dónde se entrega. La imagen crea ambiente y no aporta contexto de producto.

Después ficticio

H1: Mesas modulares para adaptar comedor, escritorio y espacio disponible.

Texto: Compara medidas, acabados y configuraciones antes de añadir una opción al carrito. La ficha indica disponibilidad, entrega y montaje donde corresponda.

Imagen: la misma mesa cerrada y extendida, con una referencia visual de escala.

Botón: Ver medidas y configuraciones.

Ahora la imagen tiene una tarea. Su texto alternativo debería describir la diferencia visible que ayuda a elegir, no repetir «mesa modular comprar mesa diseño mesa». La sección siguiente puede explicar medidas; otra, materiales; otra, entrega. Una tienda online bien planteada coordina contenido, catálogo y operación. El diseño no termina en la fotografía.

Estos ejemplos comparten una transformación: pasan de una promesa amplia a una decisión concreta. La mejora editorial puede comprobarse comparando qué preguntas responde cada versión. El efecto en negocio o búsqueda necesitaría datos posteriores y una atribución prudente.

7. Las imágenes deben explicar algo y vivir junto al texto que les da sentido

Una imagen relevante puede mostrar forma, escala, diferencia, proceso, resultado visual o relación espacial. Una imagen genérica puede crear tono. Ambas tienen usos, pero no deberían confundirse. Si presentamos una fotografía atmosférica como prueba de servicio, la página pide al lector que complete lo que falta.

Google recomienda imágenes de calidad situadas cerca de texto relevante y explica que el contexto próximo ayuda a comprender su tema. También destaca el texto alternativo descriptivo y desaconseja llenarlo de palabras clave. Esto no garantiza presencia en Google Imágenes; son buenas prácticas para descubrimiento y comprensión. Buenas prácticas de imágenes de Google Search Central

Elegir la imagen por la pregunta que resuelve

Antes de producir una imagen, escribiría su función en una frase. «Comparar el estado anterior y posterior del menú». «Mostrar qué piezas recibe el cliente». «Explicar cómo se conectan catálogo, pago y pedido». «Ver el acabado y la escala del producto». Si la frase es «hacer la sección más visual», todavía no tenemos contenido.

Una matriz ayuda a escoger formato:

PreguntaImagen posibleQué debe conservar el texto
¿Cómo funciona?Diagrama de procesoPasos y dependencias explicados
¿Qué aspecto tiene?Fotografía o capturaContexto, escala y estado
¿Qué ha cambiado?Comparación antes/despuésAlcance y condiciones
¿Qué incluye?Composición etiquetadaLista accesible equivalente
¿Dónde ocurre?Mapa o planoCobertura escrita y verificable

No sustituiría información crítica por texto incrustado dentro de una imagen. En móvil puede quedar ilegible; con las imágenes desactivadas desaparece; no siempre puede adaptarse o traducirse. Si el diagrama contiene conceptos necesarios, el párrafo o la lista cercana ofrece una alternativa comprensible.

También descartaría imágenes que contradicen la oferta. Una foto de un gran equipo en una oficina ajena puede sugerir una estructura inexistente. Una maqueta de producto no publicado necesita etiqueta. Una captura con datos inventados no se convierte en demostración porque parezca real.

Escribir el alt desde la función y el contexto

El texto alternativo no es un pie oculto para SEO. Comunica la información de la imagen cuando esta no se ve o no se carga. Su redacción depende de lo que ya dice el texto próximo. Repetir el párrafo completo añade ruido; escribir «imagen» no aporta nada.

Para el diagrama de este artículo, un alt útil puede ser «Jerarquía que conecta H1, H2 y H3 con preguntas y decisiones del lector». Si el pie ya explica que no es una fórmula de ranking, no hace falta copiar esa advertencia en el alt. Para una captura de interfaz, describiría el estado o diferencia relevante, no cada color y borde.

Una imagen decorativa puede usar un alt vacío cuando la implementación y el contexto lo permiten. Eso evita que una tecnología de apoyo anuncie un archivo sin información. No convertiría esta frase en una regla universal para cualquier componente: una imagen que también es enlace, botón o contenido complejo necesita otro tratamiento. Imágenes decorativas en W3C WAI

Revisaría además nombre de archivo y cercanía. contenido-jerarquia.png orienta mejor que IMG_4482.png, pero el nombre apenas resuelve el significado. Google considera que el archivo puede aportar indicios ligeros y da mucho más contexto al alt y al contenido de la página. La prioridad sigue siendo explicar bien.

Equilibrar calidad, carga y composición en móvil

Una imagen nítida pierde su utilidad si tarda tanto que desplaza el contenido o consume la conexión. El formato, las dimensiones, las variantes responsivas y el tamaño forman parte de la decisión editorial. Google recomienda combinar calidad y velocidad, usar elementos de imagen reconocibles y ofrecer una URL de respaldo cuando se trabaja con fuentes responsivas.

Yo probaría cuatro cosas: reserva de espacio para evitar saltos, recorte en diferentes proporciones, legibilidad de cualquier detalle y relación con el texto. Una comparación de dos pantallas puede funcionar en escritorio y convertirse en miniaturas inútiles en móvil. Quizá necesita apilarse, permitir ampliación o dividirse.

La composición tampoco debería insertar una imagen entre el encabezado y su respuesta. Si el H2 dice «Qué incluye el proyecto» y la fotografía ocupa toda la pantalla antes del texto, el lector todavía no obtiene la información prometida. La imagen puede seguir, acompañar o ejemplificar; no tiene derecho automático a interrumpir.

En la entrega, comprobaría que el recurso real existe, carga, tiene dimensiones apropiadas, no muestra información sensible y mantiene su sentido sin depender de un pie minúsculo. Una ruta escrita en Markdown no prueba que el asset esté producido. Este borrador incluye cuatro ilustraciones conceptuales: sirven para explicar, no para acreditar métricas ni resultados de clientes.

Comparación entre una imagen decorativa sin función y otra situada junto al texto que explica su información

Una imagen útil conserva contexto en el texto próximo y una alternativa adecuada; no se evalúa solo por estética.

8. El orden de lectura también se diseña con espacio, tipografía, enlaces y móvil

La estructura semántica puede ser correcta y la lectura visual seguir rota. Un H1 pierde autoridad si un distintivo, una cifra y dos botones gritan más. Un H2 deja de orientar cuando tiene el mismo tamaño que un párrafo destacado. Una columna estrecha ayuda a leer; cuatro columnas obligan a saltar. El diseño interpreta la jerarquía, no la sustituye.

Yo revisaría la página como una secuencia de atención. Qué aparece en la primera pantalla. Qué elemento domina. Dónde se detiene el ojo. Qué relación existe entre título y respuesta. Qué ocurre al terminar una sección. No buscaría un recorrido idéntico para todo el mundo, sino señales suficientes para que distintas formas de lectura lleguen a la misma información.

Resolver la primera pantalla sin intentar meter toda la página

La primera pantalla necesita orientación, no un catálogo completo. H1, respuesta breve, una acción principal y una señal visual pueden bastar. Añadir valoraciones, logos, vídeo, formulario, ventajas, sello y dos acciones secundarias reduce la prioridad de cada elemento.

En móvil, el problema se amplifica. Una etiqueta superior, navegación alta, H1 de seis líneas y párrafo largo pueden empujar el primer botón fuera de vista. Eso no convierte automáticamente la página en mala: el contenido puede merecer espacio. Pero obliga a decidir qué debe verse antes de desplazarse.

Mediría la posición real de:

  • inicio y final del H1;
  • primera frase que explica la propuesta;
  • acción principal;
  • primera señal de encaje o prueba;
  • cualquier banner o capa que interrumpa.

Después observaría, no solo contaría píxeles. Un botón visible pero sin contexto no resuelve la decisión. Un formulario que aparece pronto puede ser útil para una búsqueda muy comercial y agresivo para una guía. La primera pantalla tiene que corresponder a la intención de la página.

También controlaría las palabras que preceden al H1. Migas, etiquetas y antetítulos pueden situar la categoría. Si repiten el mismo mensaje, crean eco. «Diseño web / Diseño web Madrid / Diseño web para empresas / Diseñamos webs» no construye una jerarquía por acumulación.

Usar tipografía y espacio para mostrar dependencia

El tamaño es una señal, pero no la única. Peso, color, anchura, margen y posición comunican qué pertenece a qué. Un H3 con mucho espacio superior parece abrir un capítulo nuevo. Un H2 pegado al párrafo anterior puede parecer parte de esa sección. El sistema de espaciado debe acompañar la estructura.

Yo definiría relaciones, no medidas aisladas:

RelaciónSeñal visual esperada
H1 con entradillaProximidad clara y anchura compatible
H2 con sección anteriorSeparación suficiente para anunciar cambio
H2 con primer párrafoCercanía que los presenta como unidad
H3 dentro de H2Menor énfasis y sangría conceptual, no necesariamente física
Imagen con explicaciónPie y texto cercano sin ambigüedad
CTA con argumentoAcción próxima a la razón para tomarla

No usaría gris tenue para todo lo secundario. El contenido secundario puede seguir siendo necesario y necesita contraste legible. Tampoco centraría párrafos largos porque la estética editorial se vuelve difícil de seguir línea a línea. La personalidad visual tiene que convivir con una lectura estable.

La anchura de línea merece una prueba real. Una columna enorme en un monitor obliga a recorrer demasiado; una columna minúscula corta cada frase. No fijaría un número universal en este artículo. Revisaría el tipo, el cuerpo, el idioma y los dispositivos objetivo, y aplicaría un ratchet: no aceptar una versión que empeore claramente lectura o produzca desbordamiento.

Diseñar enlaces y llamadas a la acción como parte del argumento

Un enlace interno no es solo distribución de autoridad. Explica que existe otra pieza para continuar una pregunta. El anchor debe anticipar el destino. «Consulta nuestro servicio de diseño web en Madrid» informa más que «aquí». La frase no necesita sonar forzada si el enlace aparece donde surge la necesidad.

Los CTA cumplen otra función: proponen una acción. «Contactar» puede servir cuando el contexto ya explica qué ocurrirá. «Solicitar valoración del proyecto» es más específico si esa es la operación real. No convertiría cada sección en un botón; elegiría momentos donde el lector ha recibido información suficiente.

Una página puede ofrecer rutas distintas sin darles el mismo peso. Acción principal: iniciar una valoración. Secundaria: ver casos. Terciaria: leer una guía. La jerarquía visual y verbal debe reflejar esa prioridad. Tres botones iguales obligan a decidir sin ayuda.

También probaría estados. Foco de teclado, hover, contraste, texto cuando el enlace visita otra página y comportamiento de anclas. Un ancla que oculta el H2 bajo la cabecera rompe la orientación. Un botón cuyo texto desaparece al pasar el ratón existe técnicamente y falla en uso.

El recorrido termina en la respuesta del sistema. Si el formulario envía, confirma qué pasó. Si necesita revisar un presupuesto, lo explica. La claridad de la página pierde valor cuando el siguiente estado vuelve a ser ambiguo.

9. Auditar contenido exige leer la página en varios modos y registrar el defecto dominante

Una auditoría no debería empezar contando H1 y terminar con una nota. El recuento detecta síntomas. La revisión tiene que comprobar propósito, orden, texto, imágenes, enlaces, formulario y comportamiento real. Si una página tiene dos H1 pero explica perfectamente el servicio, hay una corrección técnica; si tiene uno y nadie entiende la oferta, el problema es mayor.

Yo usaría una línea base reproducible. URL, fecha, viewport, captura, esquema de encabezados, texto principal, assets y estado del contacto. Así podemos distinguir una observación de una impresión y volver después sin depender de memoria.

Primera pasada: leer sin diseño y reconstruir el índice

Extraería título, meta, H1, H2, H3, párrafos, enlaces, alt y formularios en orden DOM. No para evaluar la página solo como código, sino para ver qué queda cuando desaparece la composición. La secuencia debería mantener una historia reconocible.

En esta pasada preguntaría:

  • ¿El título externo y el H1 sostienen la misma promesa?
  • ¿La respuesta principal aparece pronto?
  • ¿Los H2 forman un índice útil?
  • ¿Cada H3 depende de su H2?
  • ¿Las listas tienen introducción y propósito?
  • ¿Las imágenes aportan información identificable?
  • ¿Los enlaces describen destino o acción?
  • ¿El formulario pide lo que el negocio necesita para responder?

Marcaría cada hallazgo con evidencia exacta. «Contenido confuso» no es accionable. «El H1 habla de soluciones digitales y el servicio de diseño web no se nombra hasta el tercer bloque» sí. «Faltan keywords» tampoco basta. «La sección de mantenimiento no aclara si está incluida o es opcional» identifica una decisión comercial.

No declararía inaccesible una web porque encuentre un salto de encabezado. Documentaría el salto, su contexto y el riesgo, y continuaría con navegación, foco, etiquetas y contraste según el alcance. La conformidad global requiere una evaluación mucho más amplia.

Segunda pasada: abrir escritorio y móvil y ejecutar el recorrido

El render revela jerarquías que el texto no muestra. En escritorio comprobaría primera pantalla, anchura, columnas, ritmo, imágenes, botones y final de página. En móvil repetiría la lectura, no solo reduciría la ventana. Menús, acordeones, tablas y formularios cambian su comportamiento.

Usaría una cobertura explícita:

CapaEscritorioMóvilEvidencia
Promesa inicialH1, texto y CTAH1, texto y CTACaptura y coordenadas
JerarquíaH2/H3 visiblesOrden apiladoEsquema y captura
ImágenesContexto y recorteEscala y cargaRutas y render
NavegaciónEnlaces y anclasMenú y anclasInteracción sin envío
ContactoCampos y mensajesTeclado y viewportPrueba controlada según autorización

Para un borrador local no enviaría un formulario ni pulsaría un canal externo sin necesidad. Se puede comprobar visibilidad, campos, ancla y validación básica sin generar un lead. Una entrega publicada necesitará la prueba funcional autorizada que corresponda.

Buscaría también interferencias: banners que cubren CTA, barras adhesivas que aparecen sobre campos, animaciones que mueven texto, tarjetas que desbordan y hover ilegible. Son defectos de contenido porque cambian la posibilidad de leerlo y actuar.

Tercera pasada: priorizar por comprensión, riesgo y coste de corregir

Una auditoría con cincuenta observaciones no ayuda si no dice cuál impide avanzar. Yo elegiría un defecto dominante por página y agruparía el resto. Puede ser promesa ambigua, orden invertido, falta de encaje, prueba lejana, imagen contradictoria o contacto inaccesible.

La prioridad combinaría:

  1. Impacto en la decisión: cuánto impide comprender o avanzar.
  2. Cobertura: cuántas páginas o componentes comparten el fallo.
  3. Riesgo: posibilidad de cambiar una promesa, accesibilidad o ruta comercial.
  4. Evidencia: qué observación concreta sostiene la corrección.
  5. Esfuerzo: contenido, componente, sistema o dependencia necesaria.
  6. Verificación: cómo sabremos que quedó resuelto.

Ejemplo: un componente de tarjeta usa H2 para cada título en cuarenta páginas. Corregirlo puede tener cobertura alta, pero antes necesitamos entender el contexto donde aparece. Una home no nombra el servicio hasta la segunda pantalla: el impacto comercial puede ser mayor y la corrección más acotada. No dejaría que el volumen de incidencias decidiera solo.

Cada acción llevaría condición de cierre. «Mejorar H1» se convierte en «el H1 identifica servicio y audiencia, se mantiene legible en 390 y 1440 píxeles y conserva coherencia con title y primer párrafo». «Optimizar imágenes» se convierte en «las tres imágenes informativas cargan, mantienen contexto, tienen alt funcional y no introducen desbordamiento».

Recorrido de auditoría que compara esquema sin estilos, render en escritorio y móvil, e interacción antes de priorizar

La revisión cruza código, lectura y uso; una puntuación automática aislada no demuestra que el contenido sea comprensible.

10. Un sistema de contenido comprensible une estrategia, redacción, diseño, desarrollo y QA

La jerarquía se rompe cuando cada área entrega una capa y nadie conserva la decisión completa. Estrategia define la oferta, copy escribe titulares, diseño los coloca, desarrollo elige etiquetas y QA revisa al final. Cualquier traspaso puede cambiar el propósito. El remedio no es añadir una reunión; es compartir un contrato pequeño por página.

Ese contrato debería decir qué promete la URL, a quién ayuda, qué debe decidir la persona, qué prueba existe, qué no puede afirmarse y qué acción entrega. El H1, los H2, las imágenes y el formulario derivan de ahí. Si cambia la oferta, se actualiza el contrato y después la página.

Preparar un brief que pueda ejecutar todo el equipo

Mi brief mínimo tendría estos campos:

CampoContenido esperado
PropósitoUna decisión concreta que la página facilita
AudienciaSituación y condiciones de encaje, no personaje inventado
PromesaResultado razonable y alcance del servicio
PreguntasDudas en el orden en que deben resolverse
EvidenciaCasos, proceso, condiciones, imágenes o datos disponibles
LímitesExclusiones, dependencias y afirmaciones prohibidas
AcciónSiguiente paso y datos necesarios para responder
QAVista, interacción y contenido que se comprobarán

Redacción convierte preguntas en respuestas. Diseño decide énfasis y recorrido. Desarrollo preserva semántica, rendimiento y estados. QA intenta romper comprensión e interacción. La persona responsable de la oferta valida que el texto corresponde al servicio real. Ningún rol debería inventar lo que otro no ha definido.

El brief también registra lo que no se hará. No habrá un bloque de cifras sin fuente. No se usará una foto de equipo falsa. No se prometerá una fecha antes de revisar alcance. No se crearán cinco páginas para variantes de la misma decisión. Las exclusiones evitan que la página crezca por negociación silenciosa.

En proyectos de diseño web, este documento conecta contenido y sistema visual. En proyectos de SEO, impide que la expresión objetivo sustituya a la respuesta. En ecommerce, obliga a incluir catálogo, pagos, entrega y operación. Los tres servicios comparten claridad; cambian las decisiones.

Publicar una versión comprobable y aprender sin tocarla cada dos días

Antes de publicar, guardaría línea base y versión. Después comprobaría HTML, metadatos, canónica, indexabilidad, encabezados, imágenes, enlaces, formulario y render. Esas pruebas demuestran que la entrega existe como se diseñó. No demuestran posiciones ni ventas.

Para aprender, separaría señales:

  • comprensión observada en pruebas de uso o revisión cualitativa;
  • interacción con enlaces y formularios cuando la medición está consentida y bien definida;
  • consultas de búsqueda asociadas a la página;
  • acciones realmente entregadas;
  • clasificación comercial posterior.

Si falta una capa, la marco como desconocida. No uso un clic como sinónimo de cliente ni una permanencia larga como prueba de satisfacción. Tampoco atribuyo a un H1 cualquier movimiento de la página. Un cambio editorial convive con demanda, competencia, enlaces, dispositivo, marca y otros factores.

Google advierte que los cambios pueden tardar desde horas hasta meses y sugiere esperar unas semanas antes de evaluar efectos en búsqueda. Aplicaría esa cautela sin convertirla en inmovilidad: errores técnicos y promesas incorrectas se corrigen al detectarlos; una hipótesis de rendimiento necesita una ventana y un criterio acordados. Guía SEO de Google Search Central

El registro de cambios evita ansiedad. Fecha, URL, elemento, hipótesis, línea base, prueba técnica y próxima revisión. Si editamos título, H1, orden, CTA e imágenes a la vez, no podremos atribuir el efecto a una pieza. A veces el rediseño completo es necesario; en ese caso aceptamos que evaluamos el conjunto.

Mantener la claridad cuando la web crece

Una página comprensible hoy puede degradarse. Se añade una promoción encima del H1. Un nuevo servicio entra en las tarjetas. Marketing duplica un CTA. La imagen deja de representar el producto. El menú crece. La conservación necesita inventario y propietarios.

Yo revisaría periódicamente páginas de mayor responsabilidad comercial y componentes compartidos. No para reescribir por calendario, sino para comprobar cambios de oferta, preguntas, enlaces, imágenes y estados. Una página sin propietario acumula decisiones de varios años.

El control puede ser ligero:

  1. propósito de la URL vigente;
  2. H1 y primer párrafo coherentes;
  3. índice de H2 comprensible;
  4. encabezados anidados con sentido;
  5. imágenes relevantes, disponibles y contextualizadas;
  6. enlaces internos con destino actual;
  7. CTA y formulario operativos;
  8. versión móvil sin interrupciones;
  9. afirmaciones sensibles con fuente o condición;
  10. próxima revisión definida solo si existe motivo.

No llamaría a esto «SEO perfecto». Es mantenimiento editorial y técnico. Ayuda a que buscadores y personas encuentren relaciones, pero no garantiza una posición. Ayuda a que un posible cliente entienda la propuesta, pero no convierte automáticamente. La web sigue necesitando una oferta competitiva, demanda, confianza y capacidad de respuesta.

También conservaría un registro de decisiones rechazadas. «Añadir otra keyword al H1» puede descartarse porque ya identifica bien la propuesta. «Convertir todas las tarjetas en H3» puede quedar pendiente hasta revisar el contexto de cada componente. «Sustituir la imagen por un vídeo» puede rechazarse si no aporta información nueva y retrasa la respuesta. Documentar el motivo evita que la misma ocurrencia vuelva como tarea urgente dos semanas después.

El registro distinguiría cuatro estados: corregir ahora, probar de forma acotada, investigar y no hacer. Corregir ahora corresponde a un fallo demostrado: un encabezado invisible, un texto incorrecto, una imagen rota o un botón ilegible. Probar corresponde a una hipótesis con métrica y reversión. Investigar señala que falta información. No hacer protege una decisión válida frente a cambios sin fundamento.

Cuando aparezca una nueva necesidad, no la añadiría automáticamente a la página con más tráfico. Preguntaría qué URL tiene la responsabilidad, qué pregunta resuelve y si el visitante necesita esa información para la decisión principal. Una sección puede ser útil y estar en el lugar equivocado. Moverla a una guía o a otra página no la degrada; recupera el foco de ambas.

La formación editorial debería usar ejemplos de la propia arquitectura, no una lista abstracta de reglas. Tomar una página, ocultar estilos, leer encabezados, revisar móvil y seguir el formulario enseña más que memorizar «un H1 y varios H2». El equipo aprende a reconocer relaciones. Así puede resolver una excepción sin romper el criterio.

Finalmente, asignaría un propietario por tipo de verdad. Operaciones valida alcance y plazos. Comercial valida preguntas y encaje. Diseño valida énfasis. Desarrollo valida marcado y comportamiento. SEO valida descubrimiento y coherencia de intención. Nadie valida en solitario toda la página. La responsabilidad compartida no significa aprobación infinita: una persona integra, registra discrepancias y decide cuándo la evidencia es suficiente para publicar.

El punto de partida cabe en una pregunta: si alguien leyera solo el H1, los H2, los pies de imagen y los botones, ¿podría explicar qué ofrecemos, para quién y qué debe hacer después? Si la respuesta es no, no añadiría otra animación ni otro párrafo. Corregiría el orden.

Sigue con una guía relacionada

El orden de los bloques nace de la intención de compra, no del tamaño de letra. Si también quieres preparar respuestas que puedan usarse como fuente, consulta qué revisar cuando tu web no aparece citada en ChatGPT.

Respuesta directa

Preguntas frecuentes sobre este tema

¿Qué diferencia hay entre el H1 y el título SEO?

El H1 es el encabezado principal que la persona encuentra dentro de la página. El título SEO suele alimentar el enlace que aparece en buscadores y también puede mostrarse en la pestaña del navegador. Pueden parecerse, pero no tienen que ser idénticos. Yo mantendría la misma promesa y adaptaría cada texto a su espacio. Si uno anuncia una cosa y el otro desarrolla otra, la visita empieza con una contradicción difícil de corregir después. La continuidad se comprueba en el render final.

¿Cuántos H1 debe tener una página?

Para una página comercial prefiero un solo H1 que identifique con claridad el tema y la propuesta principal. No lo trato como una regla mágica de posicionamiento, sino como una decisión editorial: permite saber qué encabeza el contenido y evita que varios mensajes compitan por el mismo nivel. El resto de asuntos se organiza con H2 y H3. Antes de corregir una plantilla, revisaría también encabezados del menú, pie y componentes compartidos para no confundir estructura visual con estructura real.

¿Los encabezados tienen que incluir siempre la palabra clave?

No. Un encabezado debe anticipar el contenido de la sección y ayudar a decidir si merece la pena leerla. La expresión principal puede aparecer cuando describe de forma natural el asunto, pero repetirla en todos los H2 produce textos mecánicos y poco informativos. Google explica que sus sistemas pueden relacionar una página con distintas formas de buscar sin exigir cada variación literal. Yo elegiría vocabulario preciso, preguntas reales y diferencias útiles antes que una secuencia de sinónimos forzados.

¿Saltar de un H2 a un H4 perjudica el SEO?

No lo presentaría como una penalización SEO. Google indica que el orden de encabezados no es una señal mágica para clasificar una página. Sin embargo, W3C WAI recomienda anidar los niveles y evitar saltos cuando sea posible, porque una jerarquía irregular puede resultar confusa al navegar con tecnologías de apoyo. La solución no consiste en cambiar números sin pensar: primero se define qué sección depende de cuál y después se asigna el nivel que representa esa relación real.

¿Una página necesita mucho texto para que Google la entienda?

Necesita el contenido suficiente para responder a su propósito, no una cifra universal. Una página sencilla puede ser breve si deja claros el servicio, el encaje, la prueba y el siguiente paso. Otra decisión exige explicar opciones, límites o proceso. Google señala que no existe una extensión mágica que garantice posiciones. Añadir párrafos para alcanzar un contador suele ocultar la respuesta. Yo mediría comprensión, preguntas resueltas y utilidad comercial antes que densidad o longitud aisladas, y justificaría cada bloque.

¿Qué debe decir el texto alternativo de una imagen?

Debe comunicar la información que esa imagen aporta en su contexto. Si muestra un proceso, describe el proceso; si compara dos opciones, expresa la diferencia relevante. No repetiría el nombre del archivo ni llenaría el atributo con palabras clave. Una imagen puramente decorativa puede necesitar un alt vacío para que no añada ruido, según cómo esté implementada. La decisión depende de la función, por lo que revisar una captura aislada sin leer el párrafo cercano da una respuesta incompleta.

¿Cómo sé si una imagen ayuda o solo decora?

La quitaría temporalmente y preguntaría qué información se pierde. Si desaparece una comparación, un detalle del producto, un resultado visual o una explicación espacial, la imagen cumple una función. Si nada cambia, quizá solo aporta atmósfera; puede ser válida, pero no debería interrumpir la lectura ni recibir un texto alternativo artificial. También comprobaría calidad, tamaño, carga y relación con el bloque cercano. Una imagen bonita colocada junto a un tema distinto puede crear más ambigüedad que confianza comercial.

¿Cómo audito la jerarquía de una página sin rediseñarla entera?

Empiezo por una lectura sin estilos: título, encabezados, párrafos, enlaces, imágenes y formularios en el orden en que aparecen. Después comparo esa secuencia con el render de escritorio y móvil. Marco la promesa principal, las decisiones que debe tomar la persona y el siguiente paso. Si falta una respuesta, la añado; si existe pero llega tarde, la muevo. Por último pruebo navegación con teclado y lectura de encabezados. El objetivo es corregir relaciones y su contexto, no maquillar síntomas.