Tablas de contenidos y etiquetas h1 en SEO

juego de muñecas rusas ordenas con las etiquetas h


Vale, ya has leído cientos de veces 👀 que en el SEO el contenido es el rey. Pero ¿porqué casi nadie habla de la 💥importancia de la estructura de ese contenido?
Una navegación cómoda y facilitar a cada usuario que encuentre lo que busca fácilmente es clave, no sólo para que esos usuarios regresen, sino también para que los buscadores te pongan en su top 10 de páginas con mejor experiencia de usuario. Yo estoy tratando de incorporarlo en mi día a día, por eso en esta entrada vamos a aprender junt@s cómo crear tablas o índices de contenido, y la influencia de las etiquetas h1, h2, h3, h4, h5, h6, en el posicionamiento de tu web.

1 Las H ya no son mudas

Tienes una forma de decirles a los buscadores cuál es la información que consideras relevante de tu página, y es mediante el uso de las etiquetas h1, h2, h3, h4, h5 y h6 en HTML.

Estas etiquetas hacen referencia a los diferentes "Headline" (Títulos) de la página, que además de ayudarnos a señalar el grado de importancia de nuestro contenido, también potencian la estructura  jerárquica visual que mejora la experiencia de usuario.


Una manera muy visual de entenderlo es pensar en la portada de un periódico, en la que aparece el nombre del periódico en grande, seguido de diferentes titulares, y con un tamaño más reducido de letra, una pequeña introducción a cada titular.
Las etiquetas más utilizadas son las etiquetas h1, h2 y h3. El resto, apenas se usan y no tienen mucha o ninguna influencia en el SEO.



🔼 ETIQUETAS H1


Es la etiqueta más potente en SEO y suele corresponderse al título de la página, al título del artículo o al nombre del producto o servicio que estemos promocionando. Si aprendes a utilizar correctamente las etiquetas h1, verás cómo mejora tu marketing de contenidos de forma notable.

En el caso de este post sería:

<h1>Tablas de contenidos y etiquetas h1 en SEO</h1>

No te asustes por el código. Lo normal es que estés usando un gestor de contenidos tipo Wordpress o Blogger, por lo que no tendrás que preocuparte por utilizar este código. Simplemente añadiendo el título de tu entrada, se generará automáticamente este h1.



🔼 ETIQUETAS H2


Se utilizan para etiquetar subsecciones dentro de tu página y corresponderían a los subtítulos

Se aconseja colocar tu palabra clave en alguno de estos h2 para mejorar su posicionamiento, pero sin pasarte.

En el caso de este post sería:

<h2> 1 Las "H" ya no son mudas </h2>

Al igual que en el caso anterior, no tienes que utilizar código (si no quieres):

  • En Wordpress si te vas al apartado de Párrafo, se correspondería con Título 2.
  • En Blogger sería el “Encabezado


🔼 ETIQUETAS H3


Se corresponde con el contenido o el subapartado del subtítulo

En el caso de este post sería:

<h3>Tienes una forma de decirles a los buscadores cuál es la información que consideras relevante de tu página, y es mediante el uso de las etiquetas H1, H2, H3, H4, H5 y H6 en HTML.  </h3>
  • En Wordpress sería el “Título 3
  • En Blogger tendrías que seleccionar el “Subencabezado


¿Fácil, verdad? 

Ahora, ¿qué conclusión me gustaría que sacases del uso de estas etiquetas? 

Mi consejo, es que si te estás introduciendo en todo ésto, no pienses en etiquetas y en código de manera obsesiva. Ya llegará. Lo más importante es que tu escritura fluya.

Intenta estructurar toda la información de la manera más clara posible, de forma que hasta un niño de 4 años pudiera entenderlo (y no, no hace falta que se lo hagas leer a un niño de 4 años, como haría Groucho Marx).

 Si le dedicas tiempo, el código y tú acabaréis siendo uno. Así que, keep calm and be water, my friend.


2 ¿Cuántos h1 puedo poner en mi entrada?

La mayoría de los webmasters se llevarían las manos a la cabeza ante esta pregunta pensando: “Solamente un h1 por página, insensat@ “.

Expertos de la talla de John Mueller (Senior webmaster de Google) han afirmado que puedes poner tantos h1 como creas relevante (ya empiezan a pitarme los oídos...).

h1-John-Mueller-twitter-2017
h1-John-Mueller-twitter-2018

Y ante la magnitud de estas afirmaciones, si me permitís, humildemente añado: 

¿Todos los h1 que quieras? Será con cierto sentido común, ¿no?

En realidad es muy difícil que varias partes de tu página tengan muchisísima relevancia. Sé honest@ con los usuarios y con Google, aprende a distinguir cuál es el verdadero titular destacado de tu página y optimiza tus h1.

3 Crea una tabla de contenidos

Las tablas o índice de contenidos son elementos que permiten saltar de una parte a otra del artículo, generando una estructura de enlaces internos que pueden contribuir a mejorar su posicionamiento.

También mejoran la estructura y la organización de la página, informando al usuario desde el principio, sobre los puntos importantes que se van a tocar en el artículo.

Para Wordpress, si quieres utilizar pluggins,  puedes usar por ejemplo Table of contents.

Pero si prefieres crear un índice de contenidos de forma manual, aquí te explico cómo hacerlo, tanto para Wordpress como para Blogger.

Sólo informarte de dos pequeños problemillas:

  • Vas a necesitar atreverte con conocimientos de html mínimos.
  • En Blogger tendrás que ser sumamente meticuloso, ya que te podría ocurrir que después de crear la tabla y guardar cambios, el propio Blogger autocompletase el código y tuvieras que volver a empezar con el índice.
Mi consejo es que escribas el código en un editor de texto, por si en Blogger tienes problemas, poder recuperar el código de la tabla.


💭ANÁLISIS DEL CÓDIGO

➜Vamos a analizar el siguiente fragmento de código:

<li><span style="color: blue;"><a class="tdc_titulo" href="LA URL DE TU ARTÍCULO#IDENTIFICADOR ÚNICO">TÍTULO DE LA SECCIÓN DEL ARTÍCULO</a></span></li>


¹LA URL DE TU ARTÍCULO: copia la ruta completa de la entrada donde vas a insertar la tabla.
En mi caso sería: https://yulia.masterseosem.com/2018/04/tablas-contenidos-etiquetas-h1.html

²IDENTIFICADOR ÚNICO: es un atributo que va precedido de # y que permite identificar un elemento único de la página. El nombre lo debes elegir tú, y debe coincidir en el índice y en el ancla.
Un ejemplo de identificador en mi caso sería: #hache

³TÍTULO DE LA SECCIÓN DEL ARTÍCULO: se refiere al nombre que le has dado a cada parte del índice.
Por ejemplo, en mi caso sería: 1 Las H ya no son mudas

Con todas estas aclaraciones, ¿cómo debería personalizar el fragmento anterior con mi código?

➜Mi ejemplo:

<li><span style="color: blue;"><a class="tdc_titulo" href="http://yulia.masterseosem.com/2018/03/tablas-contenidos-etiquetas-h1.html#hache">1 Las H ya no son mudas</a></span></li>

Ahora, copia el siguiente código, pégalo en un editor de texto y personalízalo como acabamos de ver (sólo tienes que cambiar lo que te he mencionado, nada más).

➜Código Índice

<div class="tdc_contenedor">

<div class="tdc_titulo">

Índice de Contenidos<br /><br />

<ul class="tdc_lista_no_numerada">

<li><span style="color: blue;"><a class="tdc_titulo" href="https://yulia.masterseosem.com/2018/04/tablas-contenidos-etiquetas-h1.html#hache">1 Las H ya no son mudas</a></span></li>

<li><span style="color: blue;"><a class="tdc_titulo" href="https://yulia.masterseosem.com/2018/04/tablas-contenidos-etiquetas-h1.html#cuantosh">2 ¿Cuántos h1 puedo poner en mi entrada?</a></span></li>

<li><span style="color: blue;"><a class="tdc_titulo" href="https://yulia.masterseosem.com/2018/04/tablas-contenidos-etiquetas-h1.html#creatabla">3 Crea una tabla de contenidos</a></span></li>

</ul>

</div>

</div>

A continuación, añade las anclas en las partes del artículo hacia donde queremos que apunte cada sección. Recuerda que los identificadores deben ser los mismos en el índice y en el ancla.


➜Fragmento del código:

<h2 id="IDENTIFICADOR ÚNICO">TÍTULO DE LA SECCIÓN DEL ARTÍCULO</h2>


➜Mi ejemplo:

<h2 id="hache">1 Las H ya no son mudas</h2>
<h2 id="cuantosh">2 ¿Cuántos h1 puedo poner en mi entrada?</h2>
<h2 id="creatabla">3 Crea una tabla de contenidos</h2>



Una vez , que has personalizado con tus datos el código del índice y de las anclas, ve a la sección HTML de la entrada en la que quieres añadir el índice y pega el código.

Y cha chan...

Espero que toda esta información te haya sido de utilidad y no me odies por esta entrada. Te aseguro que hay artículos más divertidos y amenos en el resto del blog. Pero tal y como pasa en la vida, a veces un poco de programación tampoco viene mal, le dijo el pez grande al pez chico...(me da que ésto no era así).👀


You Might Also Like

0 comentarios