Meta tags para interactuar con Redes Sociales.
Las meta tags son etiquetas html que ponemos en el <head>, invisibles para la apariencia de la web y que guardan información relevante de la página. Cuando compartimos un artículo, un producto, la página principal, utilizan estas etiquetas para mostrar toda la información posible en la publicación. Podemos mostrar el título, descripción, imagen, autor, si es artículo, un producto, su precio, el usuario de Twitter o Facebook del autor de la web, incluso que se publique con un hashtag. Todo esto es gracias a formatos como Open graph para Facebook, Twitter Card para twitter y Schema.org para Google + y otras. Todo esto es muy importante a la hora de trabajar con Redes Sociales
Meta Tags: Plantilla estandar
<!-- Declaramos los atributos prefix, itemscope e itemtype en la etiqueta html --> <html prefix="http://ogp.me/ns#" itemscope itemtype="http://schema.org/WebPage"> <!-- Open Graph para Facebook --> <meta property="og:title" content="Título de la página aquí" /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://www.midominio.com/" /> <meta property="og:image" content="http://midominio.com/imagen.jpg" /> <meta property="og:description" content="Descripción de la página" /> <meta property="og:site_name" content="Nombre de la página web" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Título página"> <meta name="twitter:description" content="Descripción de la página"> <meta name="twitter:creator" content="@autor"> <meta name="twitter:image" content="http://www.midominio.com/image.jpg"> <!-- Schema.org para Google+ --> <meta itemprop="name" content="Nombre de la página web"> <meta itemprop="description" content="Descripción de la página"> <meta itemprop="image" content="http://www.midominio.com/imagen.jpg">
Plantilla para artículos avanzada
<html prefix="http://ogp.me/ns#" itemscope itemtype="http://schema.org/Article"> <!-- Open Graph para Facebook --> <meta property="og:title" content="Título de la página aquí" /> <meta property="og:type" content="article" /> <meta property="og:url" content="http://www.midominio.com/" /> <meta property="og:image" content="http://midominio.com/imagen.jpg" /> <meta property="og:description" content="Descripción de la página" /> <meta property="og:site_name" content="Nombre de la página web" /> <meta property="fb:admins" content="ID de Facebook" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large"> <meta name="twitter:site" content="@webjrcode"> <meta name="twitter:title" content="Título página"> <meta name="twitter:description" content="Descripción de la página"> <meta name="twitter:creator" content="@autor"> <!-- Imagen grande. Mínimo 280x150 --> <meta name="twitter:image:src" content="http://www.midominio.com/image.jpg"> <!-- Google Authorship --> <link rel="author" href="https://plus.google.com/[Perfil_Google+]/posts"/> <link rel="publisher" href=”https://plus.google.com/[Página_Google+]"/> <!-- Schema.org para Google+ --> <meta itemprop="name" content="Nombre de la página web"> <meta itemprop="description" content="Descripción de la página"> <meta itemprop="image" content="http://www.midominio.com/imagen.jpg">
Plantilla para página de producto
<html prefix="http://ogp.me/ns#" itemscope itemtype="http://schema.org/Product"> <!-- Open Graph para Facebook --> <meta property="og:title" content="Título de la página aquí" /> <meta property="og:type" content="product" /> <meta property="og:url" content="http://www.midominio.com/" /> <meta property="og:image" content="http://midominio.com/imagen.jpg" /> <meta property="og:description" content="Descripción de la página" /> <meta property="og:site_name" content="Nombre de la página web" /> <meta property="product:price:amount" content="30" /> <meta property="product:price:currency" content="EUR" /> <!-- Twitter Card --> <meta name="twitter:card" content="product"> <meta name="twitter:site" content="@webjrcode"> <meta name="twitter:title" content="Título página"> <meta name="twitter:description" content="Descripción de la página"> <meta name="twitter:image" content="http://www.midominio.com/image.jpg"> <meta name="twitter:creator" content="@autor"> <meta name="twitter:data1" content="3€"> <meta name="twitter:label1" content="Precio"> <meta name="twitter:data2" content="Rojo"> <meta name="twitter:label2" content="Color"> <!-- Google Authorship --> <link rel="author" href="https://plus.google.com/[Perfil_Google+]/posts"/> <link rel="publisher" href=”https://plus.google.com/[Página_Google+]"/> <!-- Schema.org para Google+ --> <meta itemprop="name" content="Nombre de la página web"> <meta itemprop="description" content="Descripción de la página"> <meta itemprop="image" content="http://www.midominio.com/imagen.jpg">
Saber exactamente que Meta Tags incluir puede ser confuso, incluso para un webmaster experimentado. Este artículo de Micheal King (en inglés) nos puede ayudar. Por otro lado, quienes utilicen Yoast’s SEO plugin para WordPress ya están aprovechando las ventajas que éste provee. El resto de nosotros podemos considerar las distintas estructuras soportadas por la mayoría de las plataformas sociales:
- Twitter Cards: Sumarios, Imágenes, Galerías, Apps, Video, Audio y Productos.
- Pinterest Rich Pins: Productos, Recetas, Películas y Articulos.
- Google+: Artículos, Blog, Libros, Eventos, Negocios Locales, Organización, Personas, Productos, y Evaluaciones.
- Facebook: Artículos, Fotos, Audio, Video, y más.
Herramientas para testeo y aprobación
A. Herramienta de Validación de Twitter
https://dev.twitter.com/docs/cards/validation/validator
Antes de que tus tarjetas se aparezcan en Twitter, vas a necesitar tener tu dominio aprobado. Afortunadamente, es un proceso muy sencillo. Luego de implementar tus cartas, simplemente ingresa tu URL en la herramienta de validación.
B. Facebook Debugger
https://developers.facebook.com/tools/debug
No vas a necesitar aprobación previa para que tus meta datos se vean en Facebook y la herramienta de derpuración que ofrecen te va a dar información de todas tus etiquetas, incluso analizando las de Twitter.
C. Herramienta de testeo de Datos Estructurados de Google
http://www.google.com/webmasters/tools/richsnippets
Los webmasters, tradicionalmente, utilizan herramientas de datos estructurados para testear los marcadores y fragmentos del artículo que aparecerán en cada resultado de búsqueda, pero también vas a poder ver que otros tipos de meta data Google puede extraer de cada página.
D.Herramienta de Validación de Rich Pins de Pinterest.
http://developers.pinterest.com/rich_pins/validator/
Como Twitter, Pinterest requiere un proceso de aprobación para activar la funcionalidad de Rich Pins. Utilizá el Validador de Pins Enriquezidos para testear los datos de tus marcadores y aplicar para la aprobación al mismo tiempo.
Tips y Prácticas
Optimización de imágenes
La imagen que vincule en tus datos sociales, no tiene que estar efectivamente en la página, pero debería representar el contenido correctamente. Esa imagen permitirá controlar lo que los usuarios ven cuando comparten tu contenido, asique es importante utilizar imágenes de alta calidad.
Toda plataforma social tiene distintos estándares para el tamaño de sus imágenes. Obviamente, lo más sencillo elegir una imagen que sirva para todos los servicios:
- Imágen de miniatura en Twitter: 120x120px
- Imagen grande en Twitter: 280x150px
- Facebook: los estándares varían, pero una imagen de, al menos, 200x200px, funciona mejor. Facebook recomienda imágenes grandes de hasta 1200px de ancho.
En resumen, cuanto más grandes son las imágenes, más flexibilidad vas a tener.
La importancia de los datos Open Graph
Si pudieras elegir sólo un tipo de datos para incluir, tu mejor apuesta va a ser la de Open Graph. Esto sucede porque todas las plataformas pueden recurrir a él como última alternativa.
Insights de Páginas de Facebook
La propiedad meta “fb:admins” reuqiere que ingreses tu ID numérico de Facebook y te dará acceso a datos analiticos de como los contenidos de tu sitio estan compartidos en la red social
