[Este post fue escrito originalmente por Saskia Moreno, en su paso por nuestra agencia SEO, antes llamada «Somos Mjcachon»]
¿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! 😉
test9
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>:
-
Meta Charset (encoding de la página) -
Etiqueta Base -
Meta Viewport (para webs responsive) -
Title -
Etiquetas:-
Meta Description -
Meta Robots -
Canonical
-
-
Ficheros CSS -
Ficheros JS -
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!
¡Claro, sencillo y «al grano»! Me ha gustado mucho: tanto los consejos, como las advertencias en contra de determinadas prácticas. ¡Gracias!
Gracias por el post! Nos va genial para poder comprobar si nuestra página web sigue una estructura optimizada al máximo. Saludos!
Hola!!!!
Excelente artículo! muchas gracias!!
Excelente articulo, aunque no es mejor poner los js en la parte inferior? digo mas que nada para el tema de velocidad de carga y con el atributo async o defer, de igual manera se agradece por el resto de información, lo que comente es mas para otra cosa pero si normalmente va en la parte superior el js
Artículo claro, breve y interesante, nuestras felicitaciones.
Muy práctico como todos vuestros posts!
Lo pondré en práctica.
Un saludo.
thanks for this useful information