914 34 75 81

somos@mjcachon.es

¿Cómo debe ser el "head" HTML?

¿Te preguntas qué elementos contiene el HEAD en html y en qué orden deben ir?
Has llegado al sitio adecuado.


La etiqueta <head> la analizamos y repasamos dentro de nuestra auditoría SEO en la parte de maquetación, puesto que la etiqueta HEAD forma parte de la codificación HTML.

 

¿Qué es el <head>?

Pues bien, antes de optimizar nada deberíamos saber qué es el <head> html y dónde se ubica.

 

Estructura de una web

La estructura tradicional de una página web en cuanto al código html consta de 2 apartados o secciones:

<html>
<head>Elementos como meta etiquetas, no visibles en front-end</head>
<body>Elementos visibles en el front-end</body>
</html>

 

En HTML5 se permite eliminar estas etiquetas, formando una estructura como lo podría ser esta:

<!DOCTYPE html>
<title>Título de la página</title>
<h1>Encabezado</h1>
<p>Texto</p>

 

No obstante, no es una práctica recomendada ya que puede generar, entre otros problemas, errores en navegadores más antiguos. Y cuando se trata de nuestra web, ¡es mejor ir a lo seguro! 😉

 

Elementos del <head>

En la cabecera <head> insertamos todas las etiquetas tan valiosas para SEO como lo son Title, Description, la codificación o conjunto de caracteres (charset) y otros elementos como enlaces a archivos CSS y JS.

¿Pero... cómo? ¿A lo loco? ¡No! Las etiquetas del <head> tienen un orden ideal para que los rastreadores y navegadores puedan entender correctamente el contenido de nuestro sitio y, por tanto, ahorrarle tiempo.

 

¿Cuál es el orden óptimo del <head>?

Llegamos al quid de la cuestión. Tanto el orden de los elementos como los propios elementos que contiene la sección del Head html es importante para SEO y para los navegadores.

Lo verdaderamente trascendental es indicarle el charset (conjunto de caracteres) en la primera línea, ya que gracias a esto los navegadores y bots podrán leer correctamente el contenido, en los caracteres correctos en los que hemos codificado la web.

En cuanto a las demás etiquetas incluidas en el <head>, realmente depende del orden en el que queramos que se carguen los elementos, si CSS antes que JS, etc.

Por lo general, siempre recomendamos tener el charset lo primero, la etiqueta Base (aunque esta no se ve en todas las webs), el Viewport, después el Title ya que es esencial para SEO, seguido de la Description, que no falte.

Proponemos la siguiente estructura de <head>:

  1. Meta Charset (encoding de la página)
  2. Etiqueta Base
  3. Meta Viewport (para webs responsive)
  4. Title
  5. Etiquetas:
    1. Meta Description
    2. Meta Robots
    3. Canonical
  6. Ficheros CSS
  7. Ficheros JS
  8. Resto de etiquetas (OG, otras llamadas y metas)

 

¿Y los meta Keywords?

Para los que os preguntáis si no incluimos la etiqueta meta keywords: no. Es una etiqueta anticuada a la que los bots no le prestan atención. Servía de truquito SEO hasta que los webmasters y SEOs sobreoptimizaron esa parte para alterar los rankings y aparecer para el mayor número de keywords. Esto ha traído como (lógica) consecuencia que los motores de búsqueda ya no lo consideran una meta válida. Ahora nos lo tenemos que “currar” con un buen texto bien optimizado.

Así que… ¡manos a la obra con nuestro <head> y nuestras redacciones SEO!

Saskia Moreno
Sobre Saskia Moreno

Una chica medio alemana en el equipo que piensa más en SEO y en Google que en cerveza, for real!!

Otros contenidos que te pueden interesar

Semrush: Análisis de competidores

Este post forma parte de una serie que no sé cuánto más se extenderá, sobre distintos análisis ...

Sistrix: Análisis de proyectos y competidores

Es difícil encontrar herramientas que cubran distintas áreas de marketing online, y que estén a ...

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *