{"id":11440,"date":"2024-07-12T13:00:00","date_gmt":"2024-07-12T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=11440"},"modified":"2024-07-12T12:06:48","modified_gmt":"2024-07-12T10:06:48","slug":"etiquetas-de-encabezado-html-jerarquias-de-titulos","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/","title":{"rendered":"Etiquetas de encabezado HTML: Jerarqu\u00edas de t\u00edtulos"},"content":{"rendered":"\n<p>Hoy os traemos un art\u00edculo sobre un tema sencillo y b\u00e1sico, pero que muchas veces se usa mal: <strong>Las etiquetas de encabezado HTML y su uso para jerarquizar el contenido<\/strong>. No hay proyecto que no abordemos sin tener que actuar sobre los encabezados del contenido, y es que hay dos tipos de problemas que se repiten continuamente. Por un lado, los <strong>errores t\u00e9cnicos<\/strong> que hacen que las etiquetas est\u00e9n mal jerarquizadas; por otro, el <strong>contenido<\/strong> de las mismas que no se ajustan a una estructura correcta.<\/p>\n\n\n\n<p>Creo, realmente, que estos errores b\u00e1sicos se dan porque acostumbramos a dar ciertas cosas por sentadas y sabidas, y, cuando falla la base, la estructura no se sostiene. Empecemos, pues, por el principio.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Qu\u00e9 es un encabezado<\/h2>\n\n\n\n<p>Tratemos de dar una definici\u00f3n de encabezado. Se trata de <strong>una secci\u00f3n de una p\u00e1gina que contiene un titular y que engloba al texto que precede<\/strong>. Este es un punto clave, ya que dentro de estas secciones puede haber secciones m\u00e1s peque\u00f1as, definidas por sus propios encabezados. Es decir, estas secciones pueden estar <strong>anidadas<\/strong> y, para diferenciar las secciones unas de otras, los encabezados <strong>deben seguir un orden jer\u00e1rquico que los identifique<\/strong>.<\/p>\n\n\n\n<p>A todos nos resulta familiar un texto que, para aligerar su contenido y distribuirlo en bloques, viene seccionado en partes separadas por encabezados o t\u00edtulos. Esta secci\u00f3n, por ejemplo, donde tratamos qu\u00e9 es un encabezado, viene identificada con un peque\u00f1o t\u00edtulo englobado dentro del t\u00edtulo del art\u00edculo.<\/p>\n\n\n\n<p>Para <strong>que los navegadores identifiquen estos t\u00edtulos<\/strong>, se usan las etiquetas de encabezado HTML. Al hablar de las etiquetas de encabezado HTML nos estamos refiriendo a los <strong>c\u00f3digos que usa la web para entender los t\u00edtulos del contenido<\/strong>.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Cu\u00e1les son las etiquetas de encabezado HTML<\/h2>\n\n\n\n<p>Para definir estos encabezados tenemos las etiquetas h, que se numeran de la 1 a la 6: <strong>h1, h2, h3, h4, h5 y h6<\/strong>. Son elementos de bloque, igual que el p\u00e1rrafo, es decir, ocupan todo el ancho disponible, de manera que si ponemos dos encabezados seguidos, el segundo se colocar\u00e1 por debajo de forma autom\u00e1tica. Este es el comportamiento por defecto, evidentemente, podemos cambiarlo luego con <a href=\"https:\/\/carontestudio.com\/blog\/tag\/css\/\">CSS<\/a>.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">La jerarqu\u00eda de los encabezados<\/h2>\n\n\n\n<p>La tradici\u00f3n nos dice que el t\u00edtulo principal debe ser el m\u00e1s grande, con un tama\u00f1o de letra llamativo, mientras que un t\u00edtulo con una fuente m\u00e1s peque\u00f1a la entendemos como una secci\u00f3n dentro del contenido de ese gran t\u00edtulo. En definitiva, hacemos valer una<strong> jerarqu\u00eda visual basada en el tama\u00f1o<\/strong>.<\/p>\n\n\n\n<p>HTML es un lenguaje para que el navegador y los robots entiendan el contenido. Ya hemos dicho m\u00e1s veces que el contenido es HTML y la forma es CSS. Entonces, si definimos los encabezados por su aspecto y esto es CSS, \u00bfc\u00f3mo trasladamos esta jerarqu\u00eda a HTML? Aqu\u00ed es donde entran las <strong>etiquetas de encabezado HTML<\/strong>, que usan sus n\u00fameros para indicar su jerarqu\u00eda, <strong>siendo el 1 el encabezado principal, el 2 los secundarios contenidos en un principal, etc.<\/strong><\/p>\n\n\n\n<p>Espera, entonces, \u00bftenemos dos jerarqu\u00edas diferentes? Exacto, para un usuario, que no ve las etiquetas, seguir\u00e1 primando el <strong>aspecto visual a trav\u00e9s del CSS<\/strong>. Mientras, <strong>los robots, leer\u00e1n las etiquetas HTML y se basar\u00e1n en la jerarqu\u00eda de estas<\/strong> para entender el contenido. Evidentemente, lo correcto ser\u00eda que ambas jerarqu\u00edas coincidiesen y el h1 fuera el t\u00edtulo m\u00e1s grande y llamativo, y que el resto de etiquetas fueran perdiendo fuerza visual seg\u00fan su jerarqu\u00eda. Pero esto nos da, tambi\u00e9n, una opci\u00f3n interesante, y es que ambas jerarqu\u00edas pueden ser diferentes y poner el inter\u00e9s del usuario en un punto mientras en las etiquetas estamos poniendo el foco para los robots en otro lado. \u00bfQu\u00e9 objetivo puede tener esto?<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Encabezados en SEO<\/h2>\n\n\n\n<p>En primer lugar, hay que saber que <strong>para el SEO el encabezado principal es de gran importancia<\/strong>. Si estamos optimizando un texto para el posicionamiento org\u00e1nico, un consejo est\u00e1ndar ser\u00eda incluir la keyword principal en el h1. Para los buscadores, este es un elemento importante y con peso a la hora de la indexaci\u00f3n del sitio.<\/p>\n\n\n\n<p>Esto, a veces, choca con el mensaje de marketing, donde queremos usar un eslogan sugerente y pegadizo, pero que puede no contener ning\u00fan t\u00e9rmino de b\u00fasqueda interesante. Aqu\u00ed se nos presenta una oportunidad de jugar con HTML y CSS para jugar con las jerarqu\u00edas y mandar mensajes disociados&#8230; pero este es ya otro tema, aqu\u00ed entramos en un tema delicado que no os aconsejamos abordar sin la supervisi\u00f3n de vuestro <a href=\"https:\/\/carontestudio.com\/marketing\/seo-posicionamiento-buscadores-vitoria\/\">consultor SEO<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"394\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/pantalla_azul.png\" alt=\"Este es un consejo SEO, lea la documentaci\u00f3n del buscador Google y pregunte a su consultor SEO\" class=\"wp-image-19805\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/pantalla_azul.png 500w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/pantalla_azul-300x236.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption class=\"wp-element-caption\">Este es un consejo SEO, lea la documentaci\u00f3n del buscador Google y pregunte a su consultor SEO<\/figcaption><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">C\u00f3mo poner un encabezado HTML<\/h2>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Con editores<\/h3>\n\n\n\n<p>Si est\u00e1s manejando un editor de texto o alg\u00fan <em>wysiwyg<\/em>, tendr\u00e1s opciones para indicar que lo que est\u00e1s escribiendo no es un p\u00e1rrafo normal, sino un encabezado. Te dejo algunos ejemplos:<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">WordPress<\/h4>\n\n\n\n<p>En la primera imagen puedes ver c\u00f3mo escoger un bloque de encabezado en <a href=\"https:\/\/carontestudio.com\/blog\/tag\/wordpress\/\">WordPress<\/a>. Una vez hecho esto, en la segunda imagen, puedes ver c\u00f3mo escoger el nivel deseado.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"592\" height=\"588\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-2.png\" alt=\"Escoger encabezado en WordPress\" class=\"wp-image-19880\" style=\"width:391px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-2.png 592w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-2-300x298.png 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-2-150x150.png 150w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"634\" height=\"469\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-3.png\" alt=\"Nivel de encabezado en WordPress\" class=\"wp-image-19881\" style=\"width:427px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-3.png 634w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-3-300x222.png 300w\" sizes=\"auto, (max-width: 634px) 100vw, 634px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Si todav\u00eda manejas el editor cl\u00e1sico de WordPress, tu panel ser\u00e1 algo como esto:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"585\" height=\"391\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-5.png\" alt=\"Encabezados en editor cl\u00e1sico de WordPress\" class=\"wp-image-19883\" style=\"width:453px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-5.png 585w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-5-300x201.png 300w\" sizes=\"auto, (max-width: 585px) 100vw, 585px\" \/><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">PrestaShop<\/h4>\n\n\n\n<p>Este es un ejemplo del <em>wysiwyg <\/em>de <a href=\"https:\/\/carontestudio.com\/blog\/tag\/prestashop\/\">PrestaShop<\/a>. Escoge el texto que deseas como t\u00edtulo y escoge el nivel de encabezado adecuado.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1009\" height=\"340\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-4.png\" alt=\"Escoger encabezado en PrestaShop\" class=\"wp-image-19882\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-4.png 1009w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-4-300x101.png 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-4-768x259.png 768w\" sizes=\"auto, (max-width: 1009px) 100vw, 1009px\" \/><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Elementor<\/h4>\n\n\n\n<p>Entre los bloques b\u00e1sicos encontrar\u00e1s el de encabezados.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"290\" height=\"323\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-6.png\" alt=\"Bloque de encabezado en Elementor\" class=\"wp-image-19884\" style=\"width:250px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-6.png 290w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-6-269x300.png 269w\" sizes=\"auto, (max-width: 290px) 100vw, 290px\" \/><\/figure>\n<\/div>\n\n\n<p>Arr\u00e1stralo a tu p\u00e1gina, escoge tu texto y as\u00edgnale el nivel adecuado.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"283\" height=\"415\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-7.png\" alt=\"Encabezados HTML con Elementor\" class=\"wp-image-19885\" style=\"width:248px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-7.png 283w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-7-205x300.png 205w\" sizes=\"auto, (max-width: 283px) 100vw, 283px\" \/><\/figure>\n<\/div>\n\n\n<p>Ten en cuenta que, aunque te ofrece que sea un <em>div<\/em>, <em>span <\/em>o <em>p<\/em>, no son <strong>encabezados HTML<\/strong> y, por lo tanto, solo ser\u00e1n encabezados \u00abvisuales\u00bb, no de contenido.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Con c\u00f3digo<\/h3>\n\n\n\n<p>Si el problema de estructura es m\u00e1s profundo y no depende del contenido del editor del <em>backoffice<\/em>, sino que la plantilla est\u00e1 mal concebida, habr\u00e1 que recurrir a modificar los archivos por c\u00f3digo. Te recomendamos que lo revise un <a href=\"https:\/\/carontestudio.com\/diseno-web\/diseno-web-vitoria\/\">equipo de dise\u00f1o web<\/a>, pero si te animas a hacerlo t\u00fa mismo, te explicamos c\u00f3mo. Como dec\u00eda, es sencillo y b\u00e1sico. Debemos colocar una etiqueta de apertura y una de cierre que englobe el t\u00edtulo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1>Etiquetas de encabezado HTML: Jerarqu\u00edas de t\u00edtulos&lt;\/h1><\/code><\/pre>\n\n\n\n<p>Es posible que la plantilla<strong> se use en varios sitios para pintar diferente contenido<\/strong>, por lo que puede que tengas que recurrir a condicionales y <a href=\"https:\/\/carontestudio.com\/blog\/como-programar-bucles-for-y-foreach-en-php\/\">bucles en PHP<\/a> para, seg\u00fan sea una ficha de producto, una miniatura o un resultado de b\u00fasqueda, se especifiquen diferentes niveles de encabezado.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Jerarqu\u00eda, de h1 a h6<\/h2>\n\n\n\n<p>Dicho todo esto, hay varios puntos a tener en cuenta.<\/p>\n\n\n\n<p>Primero, <strong>no debemos saltar encabezados<\/strong>, no podemos pasar de un h1 a un h3, esto rompe la jerarqu\u00eda.<\/p>\n\n\n\n<p>Segundo, los <strong>contenidos deben ser coherentes con la jerarqu\u00eda<\/strong>. Esto no le importar\u00e1 a los buscadores, pero el contenido resulta confuso para los usuarios. Por ejemplo, esto ser\u00eda err\u00f3neo a nivel de contenido:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;C\u00f3mo usar las etiquetas HTML de encabezado&lt;\/h1&gt;\n    &lt;h2&gt;C\u00f3mo usar los encabezados HTML&lt;\/h2&gt;\n    &lt;h2&gt;Crear etiquetas encabezados HTML&lt;\/h2&gt;<\/code><\/pre>\n\n\n\n<p>Podemos ver que la estructura resulta confusa, ser\u00eda mejor algo de este estilo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;C\u00f3mo usar las etiquetas HTML de encabezado&lt;\/h1&gt;\n    &lt;h2&gt;C\u00f3mo usarlas pensando en el usuario&lt;\/h2&gt;\n    &lt;h2&gt;c\u00f3mo usarlas para mejorar el posicionemiento&lt;\/h2&gt;<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Ejemplos de encabezado HTML<\/h2>\n\n\n\n<p>Por \u00faltimo, te dejo el esquema de encabezados de este mismo art\u00edculo, como ejemplo de anidaci\u00f3n y jerarquizaci\u00f3n de contenido:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"751\" height=\"512\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-8.png\" alt=\"Ejemplo de encabezados con orden jer\u00e1rquico\" class=\"wp-image-19887\" style=\"width:473px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-8.png 751w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-8-300x205.png 300w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>A la hora de escoger las etiquetas, <strong>no debe prevalecer un criterio est\u00e9tico<\/strong>. Despu\u00e9s de lo explicado parece una obviedad, pero muchas veces se escogen las etiquetas en funci\u00f3n del tama\u00f1o que queremos ponerle al t\u00edtulo, de manera que se empieza un texto con un h3 porque el h1 era muy grande. Recordemos, <strong>todo lo visual se trabaja desde el CSS<\/strong>. Recuerda que son elementos jer\u00e1rquicos, tanto visual como conceptualmente.<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hoy os traemos un art\u00edculo sobre un tema sencillo y b\u00e1sico, pero que muchas veces se usa mal: Las etiquetas de encabezado HTML y su uso para jerarquizar el contenido. Te contamos qu\u00e9 son y c\u00f3mo usarlas.<\/p>\n","protected":false},"author":2,"featured_media":19891,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94,22],"tags":[92],"class_list":["post-11440","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-seo","tag-html"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Etiquetas de encabezado HTML y las jerarqu\u00edas de t\u00edtulos<\/title>\n<meta name=\"description\" content=\"Os traemos un art\u00edculo sobre etiquetas de encabezado HTML y su uso para jerarquizar el contenido. Te contamos qu\u00e9 son y c\u00f3mo usarlas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Etiquetas de encabezado HTML y las jerarqu\u00edas de t\u00edtulos\" \/>\n<meta property=\"og:description\" content=\"Os traemos un art\u00edculo sobre etiquetas de encabezado HTML y su uso para jerarquizar el contenido. Te contamos qu\u00e9 son y c\u00f3mo usarlas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-12T11:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/05\/etiquetas-encabezado-html.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alberto Bravo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alberto Bravo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/\"},\"author\":{\"name\":\"Alberto Bravo\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/a0133e9cd91f1e8b75d120ac01ff0350\"},\"headline\":\"Etiquetas de encabezado HTML: Jerarqu\u00edas de t\u00edtulos\",\"datePublished\":\"2024-07-12T11:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/\"},\"wordCount\":1322,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/etiquetas-encabezado-html.jpg\",\"keywords\":[\"HTML\"],\"articleSection\":[\"Dise\u00f1o web\",\"SEO\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/\",\"name\":\"Etiquetas de encabezado HTML y las jerarqu\u00edas de t\u00edtulos\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/etiquetas-encabezado-html.jpg\",\"datePublished\":\"2024-07-12T11:00:00+00:00\",\"description\":\"Os traemos un art\u00edculo sobre etiquetas de encabezado HTML y su uso para jerarquizar el contenido. Te contamos qu\u00e9 son y c\u00f3mo usarlas.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/etiquetas-encabezado-html.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/etiquetas-encabezado-html.jpg\",\"width\":1250,\"height\":737,\"caption\":\"Etiquetas de encabezado HTML: Jerarqu\u00edas de t\u00edtulos\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/etiquetas-de-encabezado-html-jerarquias-de-titulos\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Etiquetas de encabezado HTML: Jerarqu\u00edas de t\u00edtulos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/a0133e9cd91f1e8b75d120ac01ff0350\",\"name\":\"Alberto Bravo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g\",\"caption\":\"Alberto Bravo\"},\"sameAs\":[\"http:\\\/\\\/albertobravoart.com\",\"https:\\\/\\\/www.instagram.com\\\/albertobravoart\\\/\",\"https:\\\/\\\/es.linkedin.com\\\/in\\\/albertobravobarreiro\",\"https:\\\/\\\/www.youtube.com\\\/@albertobravoart224\"],\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/alberto\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Etiquetas de encabezado HTML y las jerarqu\u00edas de t\u00edtulos","description":"Os traemos un art\u00edculo sobre etiquetas de encabezado HTML y su uso para jerarquizar el contenido. Te contamos qu\u00e9 son y c\u00f3mo usarlas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/","og_locale":"es_ES","og_type":"article","og_title":"Etiquetas de encabezado HTML y las jerarqu\u00edas de t\u00edtulos","og_description":"Os traemos un art\u00edculo sobre etiquetas de encabezado HTML y su uso para jerarquizar el contenido. Te contamos qu\u00e9 son y c\u00f3mo usarlas.","og_url":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2024-07-12T11:00:00+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/05\/etiquetas-encabezado-html.jpg","type":"image\/jpeg"}],"author":"Alberto Bravo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Alberto Bravo","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/"},"author":{"name":"Alberto Bravo","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/a0133e9cd91f1e8b75d120ac01ff0350"},"headline":"Etiquetas de encabezado HTML: Jerarqu\u00edas de t\u00edtulos","datePublished":"2024-07-12T11:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/"},"wordCount":1322,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/05\/etiquetas-encabezado-html.jpg","keywords":["HTML"],"articleSection":["Dise\u00f1o web","SEO"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/","url":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/","name":"Etiquetas de encabezado HTML y las jerarqu\u00edas de t\u00edtulos","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/05\/etiquetas-encabezado-html.jpg","datePublished":"2024-07-12T11:00:00+00:00","description":"Os traemos un art\u00edculo sobre etiquetas de encabezado HTML y su uso para jerarquizar el contenido. Te contamos qu\u00e9 son y c\u00f3mo usarlas.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/05\/etiquetas-encabezado-html.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/05\/etiquetas-encabezado-html.jpg","width":1250,"height":737,"caption":"Etiquetas de encabezado HTML: Jerarqu\u00edas de t\u00edtulos"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/etiquetas-de-encabezado-html-jerarquias-de-titulos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Etiquetas de encabezado HTML: Jerarqu\u00edas de t\u00edtulos"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/a0133e9cd91f1e8b75d120ac01ff0350","name":"Alberto Bravo","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/459c471b2404a0ce253ecf5bfdb8d313ed5973d63d20347d265e48a5429e6a7d?s=96&d=mm&r=g","caption":"Alberto Bravo"},"sameAs":["http:\/\/albertobravoart.com","https:\/\/www.instagram.com\/albertobravoart\/","https:\/\/es.linkedin.com\/in\/albertobravobarreiro","https:\/\/www.youtube.com\/@albertobravoart224"],"url":"https:\/\/carontestudio.com\/blog\/author\/alberto\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/11440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=11440"}],"version-history":[{"count":6,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/11440\/revisions"}],"predecessor-version":[{"id":19889,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/11440\/revisions\/19889"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/19891"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=11440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=11440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=11440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}