Los Metatags que deberían tener todas las webs en 2014

Las metatags son etiquetas html que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información. Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc.

Los más comunes

<!--Descripción del sitio-->
<META NAME="Description" CONTENT="De que se trata la página, que se ofrece, cual es el proposito">
<!--Titulo del sitio-->

<title>Mi página - donde muestro mis cosas</title>
<!--Usamos Follow para decirle al robot de Google que nos siga-->

<meta name="robots" content="index, follow">

Etiquetas OpenGraph

OpenGraph de Facebook le permite especificar metadatos para optimizar la forma en que su contenido aparece en la línea de tiempo del usuario. El beneficio adicional del uso de estos datos es que mediante la creación de un "border" en Facebook, puede obtener algunos datos fantásticos acerca de los usuarios que buscan tus contenidos a través de Facebook Insights. Si no utiliza las etiquetas Open Graph de Facebook, de forma predeterminada se usarán los metadatos estándar.

<!-- OG: título - Este es el título. Usted debe utilizar esto como un titular que sea de interés para la audiencia de Facebook. Usted tiene 95 caracteres para trabajar with-->
<meta property="og:title" content="Aca va el título”> 

<!-- og: type - Este es el tipo de objeto. Para sus propósitos por lo general será blog ,  web site o article , Facebook ofrece una lista completa de posibilidades (https://developers.facebook.com/docs/opengraph/)-->
<meta property="og:type" content="article"/>

<!-- og: image - Esta es la imagen que Facebook mostrará en la captura de pantalla y los contenidos. Asegúrese de especificar una imagen cuadrada para asegurar la mejor visibilidad en la línea de tiempo de un usuario. No especificar una imagen suele ser la peor forma de generar buena impresión.
-->
<meta property="og:image" content="URL de la Imagen.jpg"/>

<!-- og: url - Esto no es más que la dirección URL de la página. Usted debe especificar esto, especialmente si usted tiene problemas de contenido duplicado.-->
<bienes meta = "og: url" content = "http://misitio.com "/>

<!-- og: Descripción - Esta es la descripción que Facebook mostrará en la pantalla de la parte del contenido. Al igual que la meta descripción estándar que debe ser pegadiza y contener una llamada a la acción, pero en este caso tiene casi dos veces el número de caracteres para trabajar. Usted tiene a 297 caracteres.-->
<Bienes meta = "og: description" content = "Una larga descripción de mi sitio."/>

<!-- fb: admins - Esta meta-etiqueta es fundamental para conseguir el acceso a la riqueza de datos disponibles a través de Facebook Insights. Usted simplemente tiene que especificar los ID de usuario de Facebook en los metadatos. Para obtener más información sobre Facebook Insights ver la documentación .-->
<meta property="fb:admins" content="USER_ID"/>

Twitter Cards

Twitter Cards es simplemente la respuesta de Twitter para el Open Graph Protocol. Es posible que hayan notado ya su presencia, pero aquí está una captura de pantalla de la documentación de Twitter .

<!--card - Este es el tipo de tarjeta. Sus opciones son resumen, la foto o el reproductor. Twitter pondrá por defecto en "Resumen" si no es especificado otro (ver ej:https://dev.twitter.com/docs/cards/validation/validator).-->
<meta name="twitter:card" content="summary">
<!--domain - Esta es la dirección URL delcontenido.-->
<meta name="twitter:domain" content="tusitio.com">
<!--user. Acá ponemos nuestro usuario de twitter.-->
<meta name="twitter:site" content="@soylealweb">
<!--title. el titulo de nuestro sitio.-->
<meta name="twitter:title" content="Mi sitio - Las cosas que hago">
<!--Description. Hasta 200 caracteres que explican nuestro sitio.-->
<meta name="twitter:description" content="Mi sitio trata...">
<!--creator. Si el articulo hablara de otra persona/usuario.-->
<meta name="twitter:creator" content="@usuario-autor">
<!--image. Una umagen de 250x250px que nos represente.-->
<meta name="twitter:image:src" content="URL de la imagen">

Schema.Org (para Google +)

Hasta hace poco, no me había dado cuenta de que, si bien Google de forma predeterminada usaba los estándars de metadatos o etiquetas de Facebook Open Graph, la plataforma también ofrece a los webmasters la posibilidad de especificar metadatos específicamente para Google utilizando Schema.org. La belleza de esto es que Schema.org se puede utilizar en casi cualquier etiqueta HTML en el contenido que ya está en la página.

<!-- Organization. Hay varios perfiles como autor, persona, org, etc (https://developers.google.com/+/web/snippet/) -->
<html itemscope itemtype="http://schema.org/Organization">
<!-- Titulo del Sitio -->
<meta itemprop="name" content="Mi Sitio- Las cosas que Hago">
<!-- Descripción larga del Sitio-->
<meta itemprop="description" content="Descripcion de lo que hago">
<!--Una imagen, preferentemente cuadrada de 250x250px para la previsualización en G+ -->
<meta itemprop="image" content="URL de la imagen">