seo onsite

H1, H2 y H3: Cómo utilizar correctamente las etiquetas de encabezado de HTML

febrero 201286 comentarios

La etiqueta de encabezado H1 y sus hermanas pequeñas son una de las herramientas más potentes con las que contamos a nivel de SEO para decirle a los buscadores de qué va el contenido de nuestra página web. Sin embargo, y aunque su concepto es en origen sencillo, darles un uso adecuado no es algo conocido por todos. Este post está dedicado a analizar alguno de las falsas creencias acerca de estas etiquetas de titulares, y a dar consejos certeros para aprovechar realmente su potencial.

Las etiquetas de encabezados han tenido una importancia vital en el posicionamiento en buscadores desde sus orígenes, y con pequeñas variaciones en el peso de su influencia se han ido manteniendo en el tiempo como algo que definitivamente hay que cuidar, desde la fase de maquetación del diseño web hasta la creación de contenidos para un portal en funcionamiento. Estas nociones básicas deben ser pues conocidas por diseñadores, programadores y personas encargadas de la redacción de texto para web.

Qué es la etiqueta H1 (y qué no es)

H1 es una etiqueta que sirve para colocar la frase que indica el título del contenido de una página web. Importante en este punto delimitar de forma clara la diferencia entre sitio web y página web: un título H1 debe hacer referencia a una página de tu sitio web, y no al sitio web en general.

De este párrafo, se extraen varias conclusiones. La primera de ellas, es que si el titular H1 resume en una frase el contenido de la página actual, no tiene sentido que en un mismo documento web tengamos varios H1, pues el resumen de tu sitio debe ser uno. Un caso de mal uso relacionado con este hecho son los blogs donde en el listado de los últimos posts cada uno de ellos lleva un titular H1: esto no es correcto, y lo adecuado sería que en el listado los títulos fueran H2 (etiqueta de título de menor importancia de la que hablaré más tarde), y al acceder al post completo ya sí se nos mostrara el título como un H1.

La segunda de las conclusiones es que si resume el contenido de una única página, tu sitio web completo deberá tener un H1 para cada uno de los documentos, que resuma el contenido de la misma de la forma más específica posible. Un caso de mal uso para esta norma son aquellos sitios web donde el H1 está dedicado en todas las páginas al nombre de la compañía.

Como título que es, y estando el SEO orientado en el fondo al usuario, lo lógico es que tu titular H1 aparezca cuanto más arriba de la página mejor, tal cual lo haría el título de una noticia en una web. Google confiere mayor importancia al contenido situado en el primer tramo de un documento web, y también para el usuario es lógico encontrar el H1 en esa posición.

Un H1 no debería en principio ir enlazado a otros documentos, pues su contenido debería ser importante únicamente para el documento que estamos viendo. Si colocamos un enlace en ese H1, vamos a indicar inconscientemente que la página importante para ese título es a la que enlazamos, y no la página actual. Desde otros documentos, esta página debería estar enlazada con el mismo texto del H1 para reforzar la importancia de su titular, o variaciones de sus palabras clave para tratar de posicionar en varios términos relacionados.

El H1 debe mantenerse corto, pues la importancia de las palabras clave que contiene el titular irá perdiendo fuerza cuanto más largo sea. Tanto en esta etiqueta como en otras (por ejemplo, la metaetiqueta title), Google confiere una mayor importancia a las primeras palabras de la frase que a las últimas: asegúrate de que tu H1 empieza siempre que sea posible por la palabra o palabras claves principales para ese documento. Puede que esto vaya en contra de un titular de un estilo más periodístico, pero es lo ideal para posicionar el documento. Piensa en el contenido de la etiqueta como una frase que contenga información completa por sí misma para definir el contenido del sitio, y que no necesite de información adicional.

Además, de nada servirá el titular H1 si su título no hace realmente referencia al contenido de esa página. Las palabras clave del titular deben aparecer en varias ocasiones a lo largo del texto de contenido de la página.

El titular H1 puede o no coincidir con la metaetiqueta title del documento HTML. La metaetiqueta Title tiene una importancia menor que el H1, y se muestra en los resultados de búsqueda, por lo que podemos optimizar más para SEO el H1, y redactar la metaetiqueta title de tal forma que esté más destinada a captar la atención de un humano en los SERP, variando la redacción sobre las mismas palabras clave. Como curiosidad, en caso de que no dispongas de metaetiqueta title en tu web o de que contenga algún error de sintaxis HTML, es posible que el H1 acabe mostrándose como el título de la página en los resultados de búsqueda de Google.

Qué es la etiqueta H2 (y qué no es)

La etiqueta H2 es un elemento similar al H1, que indica títulos de importancia para subsecciones del documento web actual. Por su naturaleza, puede haber varios H2 en un sitio, que indiquen los diferentes títulos de importancia de la página en la que nos encontramos.

No debemos confundir los H2 con herramientas para colocar títulos en las zonas de nuestra página: “Últimas noticias”, “Contáctame”, ”Zona de usuario”, “Páginas amigas”, “Bienvenido a mi web”… son títulos genéricos para bloques de una web, pero que nada tienen que aportar al contenido. Este tipo de títulos deberían ser etiquetas estándar de HTML con el estilo CSS deseado, pero no deben ser titulares H2, pues las etiquetas de encabezado no son una herramienta de estilo pese a que frecuentemente se les haya relegado a este uso. Además, de utilizar así los titulares H2 es muy probable que fueran los mismos de una página a otra del sitio, y al igual que ocurría con los H1 es vital que sean diferentes, adaptados al contenido de cada documento.

Los titulares H2 marcan las diferentes secciones de un texto, los títulos de los nodos accesibles desde un listado de elementos, etcétera. Su texto debe cumplir las mismas directrices que las dadas para el H1, pero sus palabras clave deben hacer referencia al texto que encontramos justo a continuación, o en la página a la que enlazan. No existe un número determinado de elementos H2 que pueden colocarse en una página, pero el contenido debe ser el que marque este requerimiento. Entre 2 y 8 titulares H2 son lo más adecuado, aunque pueden no aparecer o presentarse en un número mayor si la longitud del texto lo requiere.

Qué son las etiquetas H3, H4…

Las etiquetas H3 en adelante nos permiten definir títulos de subapartados de un bloque encabezado con un H2. Su incidencia en SEO es más limitada, y por ello no es habitual ni recomendable el trabajar los titulares a partir de H4.

El orden lógico de los titulares debería ser el que apareciera en primer lugar el titular H1, después todos los H2 y después todos los H3. También es habitual el trabajar con H1, H2 y H3 como títulos de capítulo, apartados y epígrafes, de forma que aparezca primero el titular H1, después un H2 con sus subapartados marcados con H3, después otro H2 y sus subapartados, y así sucesivamente.

Quitar todos los elementos restantes de tu sitio web y dejar sólo los titulares deberían en la mayoría de los casos dar una idea del contenido de tu página, tal cual lo hace un índice en un libro: las etiquetas de encabezado deben describir la estructura del artículo.

La relación entre titulares y texto debe tener una proporción razonable: intentar utilizar más encabezados de la cuenta no es una ventaja, sino un error que hará que la importancia que tratamos de dar a nuestras palabras clave acabe completamente ignorada.

Dando estilo a los titulares

Puedes utilizar CSS para definir los tamaños y estilo de los textos. De todos modos, piensa que el SEO es al fin y al cabo tratar de mejorar nuestros resultados en los buscadores, y éstos quieren ofrecer la mejor experiencia al usuario y contenidos de calidad. Es decir, puedes modificar las propiedades CSS de una forma lógica, pero no deberías hacer por ejemplo un H1 excesivamente pequeño respecto al texto de contenido, o los buscadores percibirán que algo raro tratas de hacer. Del mismo modo, la jerarquía de tamaños entre H1, H2 y el resto de titulares debería seguir una cierta lógica.

Dentro de los titulares es técnicamente posible incluir otros elementos de estilo, como spans y otras etiquetas que nos permitan modificar cómo se ve finalmente el contenido de otra etiqueta. Sin embargo, como regla general, si podemos mantener el contenido de la etiqueta H únicamente como un texto sin aditivos, será más eficaz. Sí es posible aplicar sin problemas estilos, y preferentemente clases, a la etiqueta del titular.

Google no reconoce por el momento textos en imágenes, por lo que hacer que tu H1 sea una imagen no es en absoluto una buena idea. Si no queda otro remedio que utilizar imágenes, vuelve a pensar si realmente no puedes hacerlo en texto. Si pese a todo decides utilizar imágenes para un titular, asegúrate de que esta imagen tenga un texto alternativo. Si ese titular está enlazado, deberías añadir también el atributo Title a la etiqueta A para indicar el contenido de la misma.

Otra opción para incorporar una imagen a un titular es colocar la imagen de fondo del H1, e incorporar un padding a esta etiqueta que haga que el texto quede fuera de la zona de visión. Es algo que funciona visualmente, pero de nuevo insisto en que no es en absoluto aconsejable el jugársela con estas tácticas en el elemento más importante de nuestro documento.

 

comparte
Comparte en Linkedin Comparte en Twitter Comparte en Facebook
Licencia de Creative Commons
El contenido de este blog se edita bajo licencia
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
Close
¿Te ha interesado?

Si este post te ha resultado interesante, sígueme en Twitter, donde comparto diariamente artículos relacionados con el desarrollo de proyectos en Internet.

Agradezco mucho la info,

Agradezco mucho la info, tenía Varios H1 en mi página http:/www.reformasintegralesenvalencia.com, lo cual era bastante malo para el SEO

gracias ya aplicando estos

gracias ya aplicando estos nuevos conocimientos http://comobajarpeso.us/

No tenía ni idea de lo que

No tenía ni idea de lo que significaba cuando mencionan H1, H2 en SEO.

Gracias por aclararlo

Muy Interesante... Trabajé en

Muy Interesante...
Trabajé en el diseño de un sitio de clasificados gratis cuando recien se estaba estructurando.
www.publicente.com/ads

Alli hice mis primeros "pininos" en programacion y me di cuenta de la importancia de estas etiquetas.

Muchas gracias por la Ayuda

Muchas gracias por la Ayuda realmente me sirvio de mucho. http://comidassaludablesyfitness.info/

Hola, mi pagina es dinamica,

Hola, mi pagina es dinamica, creo que esto no aplica o debe estar en un lado diferente, www.complicidadesparaelamor.com .

Uso WP y los titulos de las

Uso WP y los titulos de las entradas ya me los toma como h1, así que tengo esta duda

¿es correcto poner el h1 en las entradas si el title ya es h1?

Gracias.

Muy bien artículo, ya estoy

Muy bien artículo, ya estoy resolviendo esos temas en mi sitio http://chavimendez.com
¡Gracias por los tips!

Muy buena info. Pero me surge

Muy buena info. Pero me surge una pregunta. Cuando vas a redactar el H2, ¿¿ usas simplemente el modo texto, o H3,H4....???

Quisiera saber como aplicar

Quisiera saber como aplicar estos conocimientos en este sitio http://www.escapaportuvida.net

Gracias

Muy buena información....

Muy buena información.... Graciasss

Que las etiquetas H3 Y H4

Que las etiquetas H3 Y H4 apenas tienen utilidad??? mejor que el autor del post empiece a editar esta info. ya que tienen MUCHA, y repito, MUCHA UTILIDAD Y RELEVANCIA SEO. Post desfasado!!!!!!

Hola tengo una duda, tengo un

Hola tengo una duda, tengo un encabezado ESTE ES ENCABEZADO quiero resaltar una parte del encabezado cambiando de color una palabra, puedo usar ESPAN dentro? y darle otro estilo.

les dejo mi web para que vean mi encabezado. http://www.remiserostudio.com

Hola tengo una duda, tengo un

Hola tengo una duda, tengo un encabezado ESTE ES ENCABEZADO quiero resaltar una parte del encabezado cambiando de color una palabra, puedo usar ESPAN dentro? y darle otro estilo.

les dejo mi web para que vean mi encabezado. http://www.remiserostudio.com

Hola tengo una duda, tengo un

Hola tengo una duda, tengo un encabezado ESTE ES ENCABEZADO quiero resaltar una parte del encabezado cambiando de color una palabra, puedo usar ESPAN dentro? y darle otro estilo.

les dejo mi web para que vean mi encabezado. http://www.remiserostudio.com

Hola tengo una duda, tengo un

Hola tengo una duda, tengo un encabezado ESTE ES ENCABEZADO quiero resaltar una parte del encabezado cambiando de color una palabra, puedo usar ESPAN dentro? y darle otro estilo.

les dejo mi web para que vean mi encabezado. http://www.remiserostudio.com

Hola tengo una duda, tengo un

Hola tengo una duda, tengo un encabezado ESTE ES ENCABEZADO quiero resaltar una parte del encabezado cambiando de color una palabra, puedo usar ESPAN dentro? y darle otro estilo.

les dejo mi web para que vean mi encabezado. http://www.remiserostudio.com

Hola tengo una duda, tengo un

Hola tengo una duda, tengo un encabezado ESTE ES ENCABEZADO quiero resaltar una parte del encabezado cambiando de color una palabra, puedo usar ESPAN dentro? y darle otro estilo

Al adquirir un vehículo de

Al adquirir un vehículo de segunda mano Ud.

debe hacer frente al pago de las siguientes tasas e impuestos:

Hola, excelente articulo pero

Hola, excelente articulo pero tengo una pregunta de algo muy curioso que me ha pasado mientras evaluaba lso H1, H2 y H3 de esta pagina del articulo... Me encontre que tienes 188 H2, es decir cada negrita de palabra que tienes en el articulo resulta ser un H2... Por que haces eso? es asi como se maneja realmente el H2? no hay un limite de usar el H2?

Y otra pregunta es si con el H2 puedo linkear a otras paginas desde mi Home page por example...

Gracias...
Best Regards,
Francisco Carrillo

Higuly energetic blog, I

Higuly energetic blog, I loved that bit. Will there bbe a part 2?

Pregunto: Tengo una tienda

Pregunto: Tengo una tienda online, si quiero que el nombre de los zapatos que vendo sean el nombre de la marca y no alpargata como H1 y coloco en descripción alpargata, para SEO y que me cojan los buscadores, estaría bien? o es mejor que en el H1 lleve el nombre alpargata? no sé si me explico.

Muchas gracias, me ha servido

Muchas gracias, me ha servido mucho, saludos.

muy buen articulo

muy buen articulo

muy buen articulo Felicidades

muy buen articulo Felicidades

Muy buen post. Justo lo que

Muy buen post. Justo lo que buscaba. Gloria a Dios.

Empecé hace un mes un blog.

Empecé hace un mes un blog. He estado mirando por Internet, cosas para configurar el blog, las metatags, las etiquetas... El caso es que creo que he fastidiado bastante mi trabajo por como aparece en google mi web si hago un site: (sin www) NO sé que he hecho mal, creo recordar que hace unas semanas modifiqué algo en los h1, h2, y desde entonces me sale raro y no tengo para nada buen posicionamiento. Además, si hago un site: google me pone como h1 mis etiquetas de cada post, por lo que me duplica webs y google me las bloquea... Un lio. Me puedes ayudar?

Gracias por este articulo de

Gracias por este articulo de uso de etiquetas y como favorecer al posicionamiento.

Hola Hector. Gracias por tus

Hola Hector.
Gracias por tus artículos.
Tengo una duda con las etiquetas y te agradecería me contestaras:
Tengo una web de anuncios y quiero etiquetar estos campos:

Titulo del anuncio => h2
Propietario del anuncio =>h3

El problema se me plantea porque quiero que aparezca primero el propietario del anuncio y despues el título. Es decir, va a aparecer antes h3 que h2, pero quiero que sea más importante h2.
¿Es esto malo para el posicionamiento?
Gracias y felicitaciones por tus post

Claro y conciso. Excelente

Claro y conciso. Excelente post

Gracias por ser tan claro y

Gracias por ser tan claro y conciso.

Todos y cada uno de los

Todos y cada uno de los vídeos que colgamos en videoxpornos
están apropiadamente transformados a mp4, con lo
que al cumplir los estándares del html5
los vas a poder ver desde cualquier terminal, así sea computador, móvil Tablet.

Realmente muy instructivo el

Realmente muy instructivo el post. Se agradece mucho y espero que sigas así. Dale para adelante y saludos desde Uruguay.

Esta excelente el post,

Esta excelente el post, aprendí mucho del mismo y ya estoy en acción para ponerlo en práctica en los websites que administro. Tengo una pregunta fuera del tema pero quiero aprovechar a hacerte: Cómo hago para que un sitio web aparezca en las busquedas de cualquier buscador o pongamos el caso de Google para que me aparezca tal cual y como siempre pasa el título principal del sitio para luego aparecer una descripción, el teléfono y más pero necesitaría que aparecieran determinadas páginas mas abajo como una especie de secciones del título arriba mostrado. Miré como es el caso del sitio soloporteros que veo tiene lo que antes te mencioné. Espero tu respuesta Héctor y ya te estoy siguiendo en Twitter, gracias de antemano.

Muchas gracias por el post,

Muchas gracias por el post, antes no tenia ni idea y usaba los H de cualquier manera.

Hola Héctor, Te quería

Hola Héctor,

Te quería preguntar acerca de tu opinión sobre poner más de un H1 en cada página. Estoy haciendo pruebas poniendo más de un h1, uno para el título de la web y otro para el título de la página.

Título de la web

Título de la página o artículo

De momento no he visto ningún signo de que haya perdido ni ganado nada de posicionamiento. Esperaba una pérdida pero no he notado nada... Te dejo lo que decía Matt ya en 2009 https://www.youtube.com/watch?&v=GIn5qJKU8VM

¿Qué opinas?

Un saludo!

Hola, lei tu post

Hola, lei tu post felicitaciones
una pregunta como podria darle interlineado a los encabezados si son muy extensos? como seria el codigo?

Hola. Puedes aplicar un

Hola.
Puedes aplicar un estilo css line-height a los encabezados.

Te dejo un comentario de

Te dejo un comentario de agradecimiento, porque te los has ganado. LLevo un monton haciendo mal el etiquetado, por culpa de que nunca me aclaro con las explicaciones que se leen por ahi. No queda claro, aunque el que entienda lo vea facil. Facil es todo, cuando sabemos hacerlo...

Muchas gracias

Muy Buen Post! Me ayudo un

Muy Buen Post! Me ayudo un montón. Muchas Gracias!

Hola muchas gracias por el

Hola muchas gracias por el artículo, le recomiendo que agrande el tamaño del texto y ponga separaciones entre lineas de texto.

Saludos

Enhorabuena por el artículo,

Enhorabuena por el artículo, me ha sido muy útil.

Hola, muy bueno el articulo,

Hola, muy bueno el articulo, me apasiona este tema, volvere a leerlo ya que no me quedan completamente claras algunas ideas.

Buenos días Buen artículo,

Buenos días

Buen artículo, claro y conciso sobre las etiquetas H1, h2, etc

Tengo una pregunta.
¿Es bueno poner la etiqueta H1 a los títulos de cada entrada en un blog?

Tengo un blog de viajes y hace poco, utilizando una aplicación para hacer una auditoría SEO, me decía que no tenia ninguna etiqueta H1 en mi blog. Yo pensaba que la H1 se pondría automáticamente en Wordpress.

Gracias

Por ahí ubiese estao bueno

Por ahí ubiese estao bueno (para mi) indicar cuales son los tamaños de un H1, H2 etc... porque varias páginas no dicen lo mismo y eso marea un poco. :) slds. gracias por tu blog y larga vida!

lindo blog.slds

lindo blog.slds

Muy buen artículo,

Muy buen artículo, especialmente para aquellos que estamos trabajando de cero en lo referido a SEO.

Nos gustaría contactar con usuarios de este foro para intercambiar opiniones y mejorar el posicionamiento.
Saludos!

Muchas gracias por la

Muchas gracias por la información me ha servido de gran ayuda

Tengo una pregunta, si

Tengo una pregunta, si quieres destacar los puntos claves de algo que te diferencia del resto, se puede utilizar algun tipo de código que permita saber a los robots que ese contenido tiene más importancia que otro sin ser subtítulos?

Hola Hector, Tengo una duda

Hola Hector,

Tengo una duda respecto a la etiqueta h1, señalas que es mejor no etiquetar imagenes con ella (Google no reconoce por el momento textos en imágenes), por contra realicé un curso, sin profundizar mucho, pero me quedó claro que lo mas importante en la pagina de una empresa sería su logo, el logo es una imagen representativa de la empresa y por tanto muy importante.

Según el tutor la opción que comentas (colocar la imagen de fondo del H1, e incorporar un padding a esta etiqueta que haga que el texto quede fuera de la zona de visión)es la mejor opción a la hora de crear una pagina, así aseguramos al logo la importancia que tiene y de paso permitimos que google sepa lo que representa h1 al añadirle el texto.

No sé de que fecha es tu articulo, puede que actualmente sea aún mas sencillo que todo eso.

Me ha gustado el articulo y agradezco la aportación, sin duda pasaré por aquí de nuevo ya que actualmente estoy realizando un curso en mas profundidad sobre desaroyo de paginas WEB.

Saludos !!!

Opina sobre este artículo

El contenido de este campo se mantiene privado y no se mostrará públicamente.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Etiquetas HTML permitidas: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Saltos automáticos de líneas y de párrafos.

Más información sobre opciones de formato

hola

Bienvenido a mi blog.

Me llamo Héctor Mainar, y soy un ingeniero informático de Zaragoza especializado en el desarrollo de proyectos web.

Me interesa la programación web, pero sobre todo el lado menos técnico de lo que implica realizar un proyecto web: el posicionamiento en buscadores, las redes sociales, el marketing online, la usabilidad, conversión y la experiencia del usuario.

En este blog hablo de todo eso, muchas veces centrado en el comercio electrónico, donde desarrollo mi carrera profesional, y donde creo que el cuidado de esos elementos detrás de la web implica más directamente un retorno medible de la inversión.

Como puedes ver los artículos de este blog son en su mayoría bastante antiguos, y algunos pueden haber perdido vigencia. ¡No hay tiempo para todo! Si quieres información más actual, mira en mi Twitter, que actualizo mucho más frecuentemente.

temáticas blog
twitter
sígueme en Twitter: @hectormainar

mi libro

Descarga. Redes sociales y empresa.

Descarga gratis o compra en formato físico mi primer libro.

140 páginas con las que aumentarás los beneficios de tu empresa gracias a las redes sociales.