Meta Tags para redes sociales y posicionamiento web

Respuesta rápida

Los metatags sirven para que a los buscadores les sea más cómodo indexar tu página y para integrar mejor el contenido de tu página con las redes sociales. Los metatags se añaden en el <head>, donde deben estar las librerías CSS y no las librerías Javascript, ya que éstas van al pie de página.

Respuesta completa

Siempre he dudado mucho sobre qué etiquetas y qué datos debo incluir en el <head>, cuáles son relevantes, cuáles son necesarios, y cuáles son completamente useless.

A lo largo de los años me he encontrado con un sinfín de metatags y, finalmente, me he decantado por usar el sentido común (el menos común de los sentidos).

La relevancia SEO de los metatags tuvo su importancia mucho tiempo atrás, cuando los buscadores como Google confiaban en el buen uso de éstos. Pero la gente usaba metatags de gatitos para atraer usuarios y dentro tenían venta de viagra.

Por eso, actualmente los únicos metatags puros útiles para el SEO son el título y la descripción del contenido.

El resto de metadatos sirven para la configuración del navegador y la integración con las redes sociales.

Si eres un newbie, quizás te interese saber:

¿Que es el head de una página?

Es la cabecera de una página web no visible para el usuario, pero si para los buscadores y navegadores.

Por lo tanto, la información que pondremos en el head serán metadatos específicos para los buscadores.

¿Qué es un metatag o metadato?

Es una etiqueta html no visible para el usuario que contiene información relevante sobre la página web que se visita.

¿Que se consigue con los metadatos?

Diversas cosas, como por ejemplo, el título de la pestaña, el icono bonito de la izquierda (favicon), que las redes sociales muestren una imagen y un título específico, que el ancho del navegador se adapte a la pantalla del dispositivo, que se especifique el formato de escritura para que lean bien las eñes y las tildes, que se incluyan archivos de estilo para tener un diseño bonito en la página, …

Así que vamos al meollo:

<!-- Con este doctype se define la página como HTML5 -->
<!doctype html>
<!-- El prefix se define para Facebook y el itemtype para Google+ -->
<html lang="es-ES" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Blog" >
<head>
<!-- Con este charset no tendremos problemas con las 'ñ' y las tildes -->
<meta charset="UTF-8">
<!-- Forzamos a que el ancho de la página se adapte al del dispositivo. Así conseguimos el responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compatibilidad de el odioso Internet Explorer -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!-- Tamaño máximo de 70 caracteres -->
<title>OROPEnSAndo</title> 
<!-- Tamaño máximo de 155 caracteres -->
<meta name="description" content="Otra web de desarrollo web">

<!-- El canónico siempre debe ser la página actual -->
<link rel="canonical" href="http://oropensando.com/" />

<!-- Enlaces Google+ --> 
<link rel="author" href="https://plus.google.com/+CarlosOropesa/posts"/>
<link rel="publisher" href="https://plus.google.com/+CarlosOropesa"/>

<!-- Schema.org para Google+ --> 
<meta itemprop="name" content="OROPEnSAndo"> 
<meta itemprop="description" content="Otra web de desarrollo web"> 
<meta itemprop="image" content=" http://oropensando.com/imagen.jpg">

<!-- Open Graph para Facebook--> 
<meta property="og:title" content="OROPEnSAndo" /> 
<meta property="og:type" content="article" /> 
<meta property="og:url" content="http://oropensando.com/" />
<meta property="og:image" content="http://oropensando.com/imagen.jpg" />
<meta property="og:description" content="Otra web de desarrollo web" /> 
<meta property="og:site_name" content="Oropensando" />
<meta property="og:locale" content="es_ES">
<meta property="fb:admins" content="Facebook ID" />

<!-- Twitter Card --> 
<meta name="twitter:card" content="summary_large_image"> 
<meta name="twitter:site" content="@oropensando"> 
<meta name="twitter:title" content="OROPEnSAndo"> 
<meta name="twitter:description" content="Otra web de desarrollo web"> 
<meta name="twitter:creator" content="@oropensando"> 
<meta name="twitter:image:src" content="http://oropensando.com/imagen.jpg">

<!-- Favicon -->
<link rel="icon" type="image/png" href="http://oropensando.com/favicon-32x32.png" sizes="32x32">
...

<!-- Archivos CSS -->
<link rel='stylesheet/less' id='alisios-style'  href='...' type='text/css' media='all' />
...

Herramientas

Para las redes sociales es necesario testear y validar las conexiones. Así que para ello nos apoyamos en las herramientas de cada una de ellas.

Herramienta de validación de Twitter

https://dev.twitter.com/docs/cards/validation/validator

Para poder usar las Cards de Twitter es necesario validar el sitio y la cuenta.

Facebook Debugger

https://developers.facebook.com/tools/debug

No es necesario validar nada en Facebook, ya que éste lo hace automáticamente, pero pasar la herramienta de debug te puede aportar bastante información valiosa.

Herramienta de pruebas de datos estructurados de Google

http://www.google.com/webmasters/tools/richsnippets

Webmaster de Google tradicional. Conociendo los metadatos con los que trabaja Google podremos mejorar bastante el SEO.

WordPress SEO by Yoast

https://wordpress.org/plugins/wordpress-seo/

Si usas WordPress lo normal es que uses un theme sencillo de esos que tienes que ponerle muchos plugins ya que no tienen mucha funcionalidad integrada. Este plugin te proviene de todo el SEO que puedas necesitar.

Para finalizar, vendiéndome un poco 😉 el theme de WordPress Alisios que estoy desarrollando tendrá todo esto integrado.