Metadatos HTML y todo sobre el head

Contenidos

Como supongo todos sabréis el html se divide en el head y el body, el body es la autentica pagina web lo que vemos, lo que el navegador «muestra» mientras que el head son los metadatos, es decir, la información adicional o complementaria para la página. Existen una serie de metadatos que son los que vienen por defecto en cualquier manual de html como el titulo o el icono, otros siven o servian para ayudar a los navegadores a indexar tu pagina, no olvidemos los archivos que se añaden adicionalmente y complementan la web como los CSS o los JavaScript. Pero en los últimos años se están añadiendo información al head que no son estándares pero si son realmente útiles, como todo lo relacionado con redes sociales, Google Analitycs, Geolocalización y otras herramientas que veremos a continuación.

Por lo que este post pretende ser un resumen de todos los metadatos que tiene una web, para evitar olvidarnos algo, intenta ser un manual completo del head añadiendo más datos adicionales importantes que no son propios del lenguaje pero en el Internet de hoy en día, prácticamente obligatorios.

 

Los Metadatos Básicos del HTML

Codificación de Caracteres

La codificación nos sirve para que el navegador sepa el lenguaje en el que está escrita la web y con ello muestre correctamente los caracteres especiales, es lo primero que debería ponerse en el head  y en html5 sería de la siguiente forma:

<meta charset="UTF-8">

Si deseamos usar codificación UTF-16 es bastante similar, aunque el UTF-8 es casi el estándar más usado:

<meta charset="UTF-16">

Sin una configuración de la codificación de caracteres el texto podría dar problemas en los navegadores al visualizarse, sobre todo caracteres como la ñ o los acentos en el caso del español.

Titulo

El titulo es el nombre que aparece en las pestañas del navegador, en posicionamiento SEO tiene mucha importancia pues Google y otros buscadores tienen en cuenta sus palabras para mostrar sus resultados, igualmente el titulo es el que muestra Google en su listado, lo que puede darnos más visitas si llama la intención del internauta.

Para indicar nuestro titulo simplemente usamos el tag <title>:

<title> Metadatos en HTML </title>

Cada página que creemos de un site debe tener un titulo propio, recordemos que la palabra del título es importante y es la que queramos que nos busquen, ha de repetirse a lo largo del documento.

Icono

Junto al titulo en los navegadores suele mostrar un pequeño icono, normalmente un logotipo o una marca del sitio visitado, para ello debemos tener dicho icono subido en el servidor una imagen en png de 32×32 o de 16×16 puede servir.

Después debemos indicar donde se encuentra el icono en el head del html de la siguiente forma

<link rel="icon" type="image/png" href="/img/favicon.png" />

Por en el atributo type debemos indicarle el tipo de archivo que usaremos de la siguiente forma:

  • png: image/png
  • jpeg: image/jpeg
  • gif: image/gif
Titulo e Icono HTML
Titulo e Icono HTML

Existen más formas para insertar el icono y alguna no son estándares por ello nos basaremos en esta.

Iconos Apple

Dentro de la sección de iconos Apple tiene su propio sistema para visualizarlos, por lo que deberíamos añadir los siguientes metadatos para los distintos productos de esta compañía.

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

Palabras clave

Antiguamente existía un tag para añadir una serie de palabras claves para facilitar la vida a los buscadores, algunos aún siguen usándolas pero Google ya no, o no las tiene tan en cuenta como deberían, desde mi opinión es importarte usarlas, se recomienda unas seis palabras claves aproximadamente.

<meta name="keyworks" content="html, head, SEO, metadatos">

Como comente Google y otros buscadores no le dan importancia pero lo tienen en cuenta.

Descripción

Cuando realizamos una búsqueda en un buscador, el listado correspondiente aparece el titulo y debajo una descripción, pues esta pequeña introducción al contenido de nuestra página se consigue añadiendo un nuevo metadato:

<meta name="description" content="Todos los metadatos para rellenar el head del HTML">

Title y description
Ejemplo de como mostraría Google nuestra web.

Propiedad intelectual

Importante si queremos añadir la propiedad intelectual de nuestra web a alguien, debemos usar la siguiente estructura:

<META name="Author" content="Drouiz">

Añadir documentos adicionales

Cuanto mas limpio sea el código de nuestra web mejor, por ello es recomendable reducir todo lo posible los estilos y scripts en el propio código y añadirlo en hojas externas, no solo es más limpio y más claro sino que también si deseamos modificar un color o un efecto lo hacemos en las hojas externas CSS o JavaScript y no en todas las páginas html de nuestra web.

Por cierto quiero hacer una recomendación aquí, o al menos como lo hago yo. Las hojas de estilo creo una carpeta /css/ para todas ellas (las propias), lo mismo con los JavaScript en /js/ y las imagenes en /img/, por otro lado si uso un framework que tiene sus propias fuentes, css, img o js, creo una carpeta para el solo.

Añadir Hojas de Estilo CSS

Si creamos hojas de estilo propias o incluso si usamos alguna que nos guste de otra persona, debemos añadirla al documento en el head de la siguiente forma:

Añadir JavaScript

Primeramente debemos añadir los frameworks que usaremos, en este caso el ejemplo sera con Jquery que es el más usado, siempre antes que nuestros scripts.

Frameworks

Cada vez menos gente hace sus webs enteras usa frameworks con CSS y JS con diseños responsives y efectos como sliders, barras de navegación o de progreso. En este caso mi favorito es Bootstrap aunque existen muchos más. Estas herramientas deben añadir hojas de estilos y scripts:

Además podemos añadir temas personalizados de Bootstrap, que no dejan de ser un CSS adicional.

Dublin Core

Introducción

Es un conjunto estandarizado de metadatos y tiene su propia norma ISO 15836 del año 2003, y la norma NISO Z39.85-2007. Son quince definiciones semanticas, son opcionales, se pueden repetir y no requieren un orden establecido. Dublin Core no solo se usa para lugares webs, el estándar se escribe en XLM y puede servir para libros, investigación, instituciones gubernamentales…. para más información visitar la pagina de Dublin Core.

Elementos:

Contenido

ELEMENTO DESCRIPCIÓN ETIQUETA DC
TITULO El nombre dado a un recurso, habitualmente por el autor. DC.Title
CLAVES Expresa las claves o frases que describen el titulo o contenido del recurso, es decir se usa para las palabras claves de búsqueda. DC.Subject
DESCRIPCIÓN Un pequeño resumen del recurso o del contenido. DC.Description
FUENTE Trabajo origen del actual, es decir, la fuente del recurso y del contenido. DC.Source
TIPO La categoría a la que pertenece, podemos usar la palabra que queramos. DC.Type
RELACIÓN Permite enlazar recursos entre sí. DC.Relation
COBERTURA La cobertura espacial, donde esta físicamente, por coordenadas o dirección y la cobertura temporal. DC.Coverage

Propiedad intelectual

AUTOR Persona o organización responsable de la creación del contenido intelectual del recurso. DC.Creator
EDITOR Entidad responsable de hacer que el recurso se encuentre disponible en la red en su formato actual. DC.Publisher
OTROS COLABORADORES Personas o entidades que contribuyeran intelectualmente al recurso de forma secundaria. DC.Contributor
DERECHOS Referencia a una URL para una nota sobre los derecho de autor. DC.Rights

Propiedad intelectual

FECHA Fecha en la cual se coloco el recurso en su forma actual. DC.Date
FORMATO El software y hardware necesarios para el mostrar el recurso. DC.Format
IDENTIFICADOR Secuencia para mostrar el recurso, una URL, ISBN (libros), CIF (empresas y organizaciones). DC.Identifier
LENGUA Lengua del contenido intelectual del recurso. DC.Languaje

SEO

Introducción

Es importante resaltar el SEO al crear un buen head además existen herramientas que debemos identificar para que nos muestren los datos. Importante que el título tenga al menos las dos palabras que queramos posicionar, posteriormente esas palabras deben repetirse a lo largo del documento, en los h1,h2… y en los párrafos, también deben escribirse en los keywords, como hemos dicho Google no les presta tanta atención como antaño pero algo de caso si les hace.

Direcciones canónicas

Nos indican cual es la fuente original del contenido de dicha pagina, es decir, sirve para indicar a Google cual es la página original y con ello que no nos penalice al tener contenido plagiado de otro lugar. Simplemente con el siguiente comando en el head conseguimos que Google solo indexe la página original y no la copia.

<link rel="canonical" href="http://www.paginaoriginal.com"/>

Google Analytics

Debemos crear una cuenta en Google Analytics y registrar nuestro sitio allí, una vez hecho, nos indicara una id y añadiremos un script para que Google analice los movimientos de nuestra web. En ocasiones tarda en conectar a nuestra web, como 24 horas aproximadamente. De esta forma también indicamos a Google la autoria de nuestra web para poder entrar en Google Webmasters Tools.

Alexa

Alexa es una una sección de Amazon que se encarga de conocer los sitios webs mas visitados y crear un ranking mundial, para ello usa usuarios que instalan el Alexa Toolbar.

<meta name="alexaVerifyID" content="Id alexa" />

Bing

De igual forma que es interesante indicar que una web es nuestra a Google, debemos hacer lo mismo con Bing, el buscador de Microsoft. No es tan usado, pero recordar que hay gente que busca por otros lugares, no solo Google es internet. Para saber como realizar dicho proceso se accede a las herramientas de webmaster de Bing es similar a las de Google, en ellas gestionarán un scrip que debes pegar en el head de tu web.

 

Redes Sociales

Todas las redes sociales disponen de unos estándares para las páginas webs, donde indican el titulo, la descripción y la imagen a mostrar a la hora de compartir dicho enlace. A continuación se muestra lo que debemos indicar en cada una.

Google +

Podemos crear automáticamente los metadatos necesarios a través del enlace, una vez rellenado los campos nos quedaría algo como lo siguiente.

 <!-- Modifica la etiqueta HTML para que incluya los atributos itemscope y itemtype. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Añade las tres etiquetas siguientes en la sección "head". -->
<meta itemprop="name" content="Drouiz">
<meta itemprop="description" content="Ejemplo de como sería un metadato de google.">
<meta itemprop="image" content="img/drouiz.com">

Facebook y OpenGraph

OpenGraph es un sistema creado para los metadatos de las redes sociales, es el usado por Facebook y vamos a mostrar los aspectos más básicos.

 <meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />

Tweeter Cards

Existen varios formatos de Twitter Cards según las necesidades, hoy en día hay seis disponibles: resumen, producto, foto, resumen con imagen grande, reproductor y app.

tipos twitter cards
tipos twitter cards

 

Para crearlas simplemente visitar el sitio de Tweeter Cards y rellenar el formulario.

Geolocalización

Cada vez es más importante el uso de móviles para navegar y esto es de vital importancia en nuestra web, si vamos por una calle y buscamos una tienda o bar, tener la referencia geografía es importante para que los buscadores te ayuden donde comer. Por ello los últimos metadatos que nos quedan son los de geolocalización del sitio físico.

 

<meta name="geo.placename" content="C/La Presa 4" />
<meta name="geo.position" content="42.613538;-5.572277" />
<meta name="geo.region" content="ES-Leon" />

Summary
Todo sobre los Metadatos y el Head de una Web
Article Name
Todo sobre los Metadatos y el Head de una Web
Description
Conoce todos los metadatos que debes insertar en cada una de tus páginas, no solo los necesarios por html, también recursos y scrips necesarios a día de hoy y algunos consejos para posicionamiento SEO
Author
Publisher Name
Drouiz
Publisher Logo

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.