Encabezado HTML: metadatos, title, css, etc.

Home » Blog » Encabezado HTML: metadatos, title, css, etc.

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.

Etiqueta title

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.



Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

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

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023