html y seo
Analítica Web

Algunas etiquetas HTML para SEO que quizá no conozcas y deberías empezar a usar.

¡Buenos días! ¡Una nueva semana por delante para aprender muchas cosas nuevas! Y como siempre, espero que una de esas cosas las aprendas por aquí, pues no hay mayor satisfacción para mi que saber que puedo aportar mi pequeño granito de arena a los conocimientos de alguien. 🙂 Bueno, a lo que iba… Ya sabes que mis artículos van saliendo en función de lo que me voy encontrando por el camino, y en esta ocasión y surgido de una conversación decidí que sería buena idea hacer un artículo sobre las etiquetas HTML más relacionadas con el SEO y así poder entender quizá un poco más una página “por detrás”, como cuando echas un vistazo al “código fuente” o como recomendación cuando se hace una página de cero y hay cierta información que es más adecuado “etiquetar” que dejarlo sólo en un <div> o un <p>. ¿Lo vemos?

Algunas etiquetas HTML para el SEO

Hay infinidad de etiquetas HTML para programar cualquier página web, pero no todas ellas nos afectan a nivel de SEO. Así que he intentado recabar las más “comunes” e interesantes en las que te deberías fijar y deberías tener en cuenta. Quizá ya las conozcas o quizá haya algunas que no, pero ante la duda, aquí las tienes:

etiquetas html seo

Etiqueta <Head>

En el <Head> va la info principal de todas de una página, entre las que está el Title, la Description y las Keywords. Éstas son las más básicas e indispensables de todas. ¿Qué sería de una página sin título ni descripción? Éstas son las más comentadas y de las que siempre se suele escribir, como en este artículo que hice en su día (de hecho fue de los primeros que hice) sobre la estructura semántica más básica de una página web.

Etiquetas H1 – H6

Estás son también igual de comentadas que las anteriores, lo que no lo asocio dentro del <Head> porque pueden estar distribuidas a lo largo de toda una página web.

Etiqueta <Body>

Dentro del <Body> está el grueso del contenido de la página, y dentro de ésta se pueden añadir muchas otras etiquetas como <section>, <article>, <header>, <aside>, <footer> …  Aquí te explico un poco de ellas.

Etiqueta <Header>

Puede confundir con la etiqueta <head> pero no son lo mismo. La segunda es lo comentado al principio, y la primera, es decir, la etiqueta <header> es la que te ayuda a definir la cabecera o contenido, donde crear titulares H1 independientes en una misma página web, por ejemplo.  (En breve verás un ejemplo visual.)

Etiqueta <Article>

Sería la que englobaría el contenido en sí mismo. Para entenderlo mejor… piensa en un periódico online, pues en la misma página que hay diferentes artículos, pues cada uno de ellos estaría dentro de su propia etiqueta <article>.

Etiqueta <Section>

Sería la información que complementaría al contenido del artículo, subtitulares con su info adicional… Todo según el uso que quieras darle. Se suele usar para separar las secciones independientes, donde puedes usar otra etiqueta <header> si lo deseas. (No te preocupes, en el ejemplo lo entenderás enseguida.)

Etiqueta <Aside>

Se suele utilizar como contenido complementario al tratado en la página web, sobretodo en la parte lateral derecha, aunque también se puede utilizar sin problemas en cualquier otra área.

Etiqueta <Main>

Ésta lo que hace es “decir” cuál es el contenido principal de la página o sección. Por ejemplo, si tienes un contenido visual y otro con un “ver más”, puedes indicar que el contenido principal es el que se ve, y el resto estar en <p> (párrafo sin más) o en cualquier otra etiqueta de contenido.

Etiqueta <Footer>

En este apartado, dentro del footer es donde va lo “sobrante” entre otras cosas, como puede ser la info de condiciones y aviso legal, cookies, dirección, aunque también se suele añadir el formulario de contacto o los iconos de las redes sociales. Y puede haber etiquetas <footer> tantas como eitquetas <article> haya, al margen de la que complementa al <head>, <body> y <footer>, que es la estructura básica de una web.

Etiqueta <blockquote>

Esta etiqueta es muy recomendable para aquellas “citas externas” que quieres nombrar en tu sitio web pero que no quieres que Google lo entienda como contenido duplicado. De esta manera, el contenido dentro de esta etiqueta, el crawler de Google lo ignorará.  A saber que <bloqkquote> suele usarse para citas largas, <q> para una cita corta y <cite> para referencia a una cita externa.

Etiquetas <address> <data> <time> …

Adicionalmente existen etiquetas de información complementaria como la de dirección, fecha, teléfono, tiempo… Toda la información que se pueda incluir dentro de etiquetas propias será más fácil y más beneficioso de cara al SEO pues ayudarás al robot a rastrear y entender más fácilmente el contenido del sitio web.

Y aquí te pongo un ejemplo visual de uso de estas etiquetas para que lo entiendas más fácilmente (y un enlace donde podrás ver bastantes más etiquetas HTML para hacerte una idea de lo que hay por ahí):

<body>
 
  <header>
    <h1>Vanessa Tejada</h1>
    <p>Mi blog de Marketing Online</p>
  </header>
   
  <nav>
    <header>
      <h2>HTML para SEO</h2>
    </header>
    <ul>
      <li>Etiquetas Head</li>
      <li>Desglose content Body</li>
      <li>Contenido footer y Aside</li>
    </ul>
  </nav>
   
  <article>
    <header>
      <h1>Para qué sirven las metas del "Head"</h1>
      <h2>Etiquetas indispensables para el Bot de Google</h2>
    </header>
     
    <section>
      <h3>Etiquetas para una mejor estructura semántica</h3>
      <p>Explicación de todas estas etiquetas y su uso.</p>
       
      <h4>Recomendaciones de etiquetas html adicionales.</h4>
      <p>cuáles son y para qué se utilizarían</p>
    </section>
     
    <section>
      <h3>Para qué es el Footer y el Aside.</h3>
      <p>Contenido sobre el Footer</p>
      <p>Contenido sobre el Aside</p>
    </section>
   
    <footer>
      <h4>Artículo escrito por Vanessa Tejada</h4>
      <p>Contenido adicional de los beneficios de este blog.</p>
    </footer>
   
  </article>
   
  <aside>
     
    <h2>Artículos relacionados</h2>
     
    <section>
      <h3>Artículos más vistos</h3>
      <ul>... (artículos por listas sin numerar)</ul>
    </section>
     
    <section>
      <h3>Comentarios</h3>
      <ol>... (artículos más comentados de forma numerada)</ol>
    </section>
     
  </aside>
   
  <footer>
    <ul>
      <li>Copyright</li>
      <li>Enlaces a Redes Sociales Sociales</li>
    </ul>
  </footer>
 
</body>

Bueno, ¿cómo lo has visto? ¿Muy sencillo y básico? ¿Te ha sido de utilidad? Espero que lo segundo, pero fuera lo que fuere, ya sabes que siempre procuro que todo lo que escribo sea de utilidad.  ¡A ver de qué tratará mi siguiente artículo!

¡Nos vemos pronto! 😉

Publicaciones anteriores Siguiente publicación

También puede interesarte

Sin comentarios

Deja una respuesta