El encabezado HTML (<head>) contiene metadatos sobre el contenido de la página web, se establecen normas sobre su comportamiento, la presentación de la información, se define la relación con otros elementos no visibles como las hojas de estilo (CSS), el javascript, etc.
La importancia del TITLE
Una página web esta formada por diferentes páginas independientes, a las que se puede acceder desde menús, enlaces, banners, etc. Cada página tiene su propio código fuente, por que son diferentes, con diferente texto, diferentes imágenes o simplemente diferente funcionalidad. Por ejemplo, una paginación muestra una información parecida visualmente pero el contenido que se ve no es el mismo en cada página, y por tanto cada página de la paginación es diferente.
EL title sirve para identificar cada una de estas páginas. El title no se visualiza en la propia web, pero si en la pestaña del navegador, y también se muestra en los motores de búsqueda como Google, Bing, etc. Por lo que debe ser oportuno, conciso, claro y no superar los 70 caracteres, ya que de otra forma no cabra en la visualización.
Respecto al SEO (posicionamiento en buscadores) también cabe destacar que es un elemento clave, y se usa para que los buscadores identifiquen de que trata la página en cuestión, para luego saber para que palabras claves posicionar cada página. En este sentido, es importante conocer quienes son nuestros clientes para saber que palabras claves usan y de esta forma incluir esas palabras en los titles.
Otros elementos en el <head>
Vamos a ver un pequeño resumen de los elementos más importantes que se usan en la cabecera:
- Meta description.
El funcionamiento es muy parecido al title, pero permitiendo hasta unos 150 caracteres aproximadamente. Y aunque es menos importante de cara al posicionamiento en buscadores es muy importante en que luego hagan click en el anuncio, ya que es el párrafo que se muestra debajo de la url.
<meta name="description" content="Somos especialistas en diseño web en Bilbao. Tambien hacemos desarrollo WordPress, Prestashop o a medida. Presupuesto sin compromiso." />
- Meta Keywords.
Aunque se sabe que no cuenta para el posicionamiento y no se visualiza, esta etiqueta se creo para indicar cuales son las palabras claves o frases que identifican al contenido de la página. Esta en desuso.
- Enlaces con estilos y javascript.
Los CSS (estilos) y javascript que usemos no deben estar en el propio código fuente ya que seria más costoso mantener el código fuente, cuanto más contenido más complejo. Deben estar en otros ficheros: .css y .js, y para usarlos en una página debemos llamarlos usando la etiqueta: <link> o <script>
<link rel='stylesheet' href='css/mi-css-ejemplo.css' type='text/css' media='all' />
Esto es una llamada a una hoja de estilos.
<script type='text/javascript' src='js/mi-js-ejemplo.js'></script>
Y esto una llamada de javascript.
De esta forma podríamos usar el contenido de estas dos librerías en nuestra página.
Otras etiquetas
En realidad existen multitud de etiquetas que se pueden usar en el head, como canonical para identificar la página padre en páginas iguales y evitar el contenido duplicado (fundamental en el SEO), la etiqueta charset para identificar la codificación de la web, etc.
Tratar todas en un articulo es imposible, así que entendiendo el concepto es cuestión de ponerse manos a la obra, investigar y poco a poco descubrir. Excepto el title ninguna es indispensable, pero si importantes, dependiendo lo que quieras conseguir.