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
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">
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="
/>
<meta property="og:type" content="article" />
<meta property="og:url" content=" " />
<meta property="og:image" content=" " />
<meta property="og:description" content=" " />
<meta property="og:site_name" content=" " />
<meta property="article:published_time" content=" " />
<meta property="article:modified_time" content=" " />
<meta property="article:section" content=" " />
<meta property="article:tag" content=" " />
<meta property="fb:admins" content=" " />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.
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" />