Metadatos HTML and all about the head

As I guess all know the html is divided in the head and the body, the body is the authentic page web what see, what the browser "shows" while the head are them metadata, i.e., it information additional or complementary to the page. There are a series of metadata that are which come by default in any manual of html as the title or the icon, others siven or servian for help to them browsers to index your page, not forget them files that is added in addition and complement the web as them CSS or them JavaScript. But in the last years are are adding information to the head that not are standards but if are really useful, as all it related with networks social, Google Analitycs, geolocation and other tools that will see then.

By what this post is intended to be a summary of all the metadata that has a website, to avoid forgetting anything, it tries to be a comprehensive manual of the head by adding more important additional data that are not own language but on the Internet today, practically mandatory.

Basic HTML metadata

Coding of characters

Encryption helps prevent the browser knows the language in which the web is written and thus display special characters correctly, is the first thing that should be in the head and html5 would be as follows:

<meta charset="UTF-8">

If we wish to use UTF-16 encoding is quite similar, although the UTF-8 is almost the most used standard:

<meta charset="UTF-16">

Without a configuration of the character encoding the text could provide problems in browsers displayed, especially characters such as n or in the case of the Spanish accents.

Title

The title is the name that appears in the browser tabs, in positioning SEO is very important because Google and other search engines take into account his words to show their results, also the title is that shows Google in your listing, so you can give us more visitors if you call the intention of the user.

To indicate our title simply use the tag<title>:</title>

<title>Metadata in HTML</title>

Each page that believe of a site should have a title own, remember that the word of the title is important and is which want that we seek, has of repeat is along the document.

Icon

Next to the title in browsers often show a small icon, normally a logo or brand of the visited site, so we must have that icon uploaded on the server a 32 x 32 png image or 16 x 16 can serve.

We must then indicate where the icon is located at the head of the html in the following way

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

By in the attribute type must indicate you the type of file that will use of the following form:

• PNG: image/png
• JPEG: image/jpeg
• GIF: image / gif

There are more ways to insert the icon and some non-standards therefore we will draw on this.

Apple icons

In the icons section, Apple has its own system for display, so we should add the following metadata for the different products of this company.

<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">

Key words

Formerly existed a tag to add a series of words key for facilitate the life to them seekers, some even continue using them but Google already not, or not them has so in has as should, from my opinion is import you use them, is recommended some six words key approximately.

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

As comment Google and other search engines not you give importance but it have in has.

Description

When we perform a search in a search engine, the corresponding list appears the title and below a description, as this brief introduction to the content of our page is done by adding a new metadata:

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

Intellectual property

Important if you want to add the intellectual property of our website to anyone, we have to use the following structure:

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

Add additional documents

How much more clean is the code of our website better, therefore it is advisable to reduce all possible styles and scripts in your own code and add it to external sheets, not only cleaner and more clear but it also if we wish to change a color or effect we do it in sheets, external CSS or JavaScript and not in all the html from our web pages.

By the way I would like to make a recommendation here, or at least how I do it. Style sheets created a folder/css/to all of them (his own), the same with the JavaScript in/js/and images/img /, on the other hand if I use a framework that has its own sources, css, img or js, believe a folder for the single.

Add CSS style sheets

If we create own stylesheets, or even if we use some that you like someone, we must add it to the document in the head in the following way:

Add JavaScript

First of all we must add the frameworks will use, in this case the example will be with Jquery which is the most widely used, always before that our scripts.

Frameworks

Increasingly fewer people makes their whole websites uses frameworks with CSS and JS designs responsives and effects such as sliders, bars navigation or progress. In this case, my favorite is Bootstrap although there are many more. These tools should add leaf styles and scripts:

Also can add themes custom of Bootstrap, that does not leave of be a CSS further.

Dublin Core

Introduction

It is a standardized set of metadata and has its own ISO 15836 standard in 2003, and NISO Z39.85-2007 standard. They are fifteen semantic definitions, are optional, they can be repeated and do not require an established order. Dublin Core not only is used for Web sites, the standard is written in XML and can serve for books, research and governmental institutions… For more information visit the page Dublin Core.

Elements:

SEO

Introduction

It is important to highlight the SEO to create a good head also there are tools that we must identify that they show us the data. Important that the title has at least them two words that want position, later those words should repeat is along the document, in the h1, h2… and in paragraphs, also must be in the keywords, as we have said Google does not pay them as much attention as old but some of case if it makes them.

Canonical addresses

Us indicate which is the source original of the content of this page, i.e., serves to indicate to Google which is the page original and with this that not us penalises to the have content plagiarized of another place. Simply with the following command in the head got that Google only indexed the page original and not the copy.

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

Google Analytics

We must create an account on Google Analytics and check our site there, once done, indicate us one id and we will add a script to make Google analyze the movements of our website. Sometimes it takes to connect to our website, such as 24 hours approximately. In this way also we indicate to Google the authorship of our website to enter in Google Webmasters Tools.

Alexa

Alexa is an a section of Amazon that is in charge of know them sites websites most visited and create a ranking world, for this uses users that installed the Alexa Toolbar.

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

Bing

In the same way that is interesting to indicate that a website is our to Google, we must do the same with Bing, the search engine from Microsoft. It is not so used, but remember that there are people who look for other places, not only Google is the internet. To know how to perform this process access to Bing webmaster tools is similar to Google's, they managed a scrip that you stick in the head of your web.

Social networks

All social networks have standards for Web pages, which indicate the title, description and image to show when it comes to sharing that link. Below is shown what must indicate in each a.

Google +

We can automatically create the necessary metadata through the link, once filled in the fields we would be something like the following.

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

<!-- 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 and OpenGraph

OpenGraph is a system created for the metadata of the networks social, is the used by Facebook and are going to show them aspects more basic.

 <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. property="og:site_name" content=""></meta property="og:site_name" content="Site Name, i.e.> Moz"/ &gt;
<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

There are several formats of Twitter Cards according to the needs, today there are six available: summary, product, photo, overview with image large, player and app.

To create them just visit the Tweeter Cards and fill the form.

Geolocation

Increasingly more importantly the use of mobile to navigate and this is vital in our website, if we go down a street and are looking for a shop or bar, having reference geography is important so that the search engines help you where to eat. Therefore metadata that remain are the geolocation of the physical site.

<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">