Cómo usar los Meta Tags para lograr viralización en Redes Sociales
Tiempo de lectura: 5 minutos¿Se han dado cuenta que al postear un enlace en Facebook en ocasiones se carga automáticamente una imagen y en otros casos no ocurre? Esto está relacionado a los meta tags que tu sitio use, una herramienta que la mayoría de las veces no se sabe utilizar adecuadamente para sacarle el mayor provecho.
Usar meta tags te ayuda a tener un mayor alcance en tus redes sociales: ayuda a elegir las imágenes y textos de tus contenidos, lo cual es muy necesario al publicar en Facebook y Twitter.
Determinar cuál es la mejor Meta Tag para cada caso puede ser complicado, hasta para un webmaster con experiencia. Cabe destacar que quienes usan el plugin Yoast's SEO para WordPress ya disfrutan de los beneficios de los meta tags. Si este no es tu caso, acá te indicamos varias estructuras admitidas por la gran mayoría de las redes sociales:
Facebook: Artículos, Fotos, Audio, Video, y más.Twitter Cards: Sumarios, Imágenes, Galerías, Apps, Video, Audio y Productos.Pinterest Rich Pins: Productos, Recetas, Películas y Artículos.Con el propósito de dar solucionar a esto, aquí recopilamos cuatro Social Media Tags que podrás editar según tus requerimientos y compartirlo con tu grupo de trabajo:
¿Cómo utilizar estas plantillas?
Solo debes copiar y pegar la plantilla en tu editor de texto. Luego, reemplaza todo con tus datos y configura, agrega o borra el tag según consideres.
Las tres primeras plantillas están creadas utilizando marcadores y datos de un "artículo", por lo cual son ideales para un blog y la mayoría de los contenidos escritos. La última plantilla tiene marcadores relacionados a páginas de productos.
Cuando hayas terminado esto, recuerda revisar todo y aplicar para la aprobación (según te indicamos al final de este artículo).
La plantilla minimalistaEs una versión ligera que se ejecuta de forma veloz. Contiene pocos datos por lo que permiten compartir, de manera optimizada, en Twitter, Facebook y Pinterest.
Aun cuando no son realmente meta tags sociales, esta plantilla contiene incluye etiquetas de títulos y meta descripciones, las cuales ayudan en la comunicación con otras plataformas sociales, y por consiguiente, vale la pena incluirlos en cada una de las entradas que se publican.
Media Tag Social minimalista: Artículo
<!– Agrega estos datos entre las etiquetas <head> de tu sitio –>
<title>Título de página. Máximo de 60-70 caracteres</title>
<meta name=”description” content=”Descripción de página. No más de 155 caracteres.” />
<meta name=”twitter:card” value=”summary”>
<meta property=”og:title” content=”Título aquí” />
<meta property=”og:title” content=”Título aquí” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”http://www.ejemplo.com/” />
<meta property=”og:image” content=”http://www.ejemplo.com/imagen.jpg” />
<meta property=”og:description” content=”Descripción aquí” />
La plantilla EstándarLa plantilla estándar es un desarrollo más grande de los tags sociales, ya que está orientado a funcionar en todas las plataformas. Asimismo, además de las características que se mencionan anteriormente, esta plantilla también incluye lo siguiente:
Tarjeta de Resumen de TwitterImágen de miniatura de TwitterInsights de las Páginas de FacebookPlantilla de Media Tag Social Estándar: Artículo
<!– Agrega estos datos entre las etiquetas <head> de tu sitio –>
<title>Título de página. Máximo de 60-70 caracteres</title>
<meta name=”description” content=”Descripción de página. No más de 155 caracteres.” />
<!– Twitter Card data –>
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”@publisher_handle”>
<meta name=”twitter:title” content=”Título de página”>
<meta name=”twitter:description” content=”Descripción de página, no menos de 200 caracteres”>
<meta name=”twitter:creator” content=”@author_handle”>
<– Las imágenes de sumario de Twitter deben ser de al menos 200x200px –>
<meta name=”twitter:image” content=” http://www.ejemplo.com/imagen.jpg“>
<!– Open Graph data –>
<meta property=”og:title” content=”Título aquí” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”http://www.ejemplo.com/” />
<meta property=”og:image” content=”http://ejemplo.com/imagen.jpg” />
<meta property=”og:description” content=”Descripción aquí” />
<meta property=”og:site_name” content=”Site Name, i.e. Moz” /meta property=”fb:admins” content=”Facebook numeric ID” />
La plantilla "Full" o paquete completoEs un código más extenso. Además de todos los datos de la plantilla Estándar, esta tiene:
Marcador de artículos de Schema.orgTarjeta de Resumen con imagen grande de TwitterInformación de artículo Expanded Open GraphPlantilla Full Social Media Tag: Articulo
<!– Update your html tag to include the itemscope and itemtype attributes. –>
<html itemscope itemtype=”http://schema.org/Article“>
<!– Agrega estos datos entre las etiquetas <head> de tu sitio –>
<title>Título de página. Máximo de 60-70 caracteres</title>
<meta name=”description” content=”Descripción de página. No más de 155 caracteres.” />
<!– Schema.org markup for Google+ –>
<meta itemprop=”name” content=”Nombre o título acá”>
<meta itemprop=”description” content=”Esta es la descripción de la página”>
<meta itemprop=”image” content=” http://www.ejemplo.com/imagen.jpg“>
<!– Twitter Card data –>
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:site” content=”@publisher_handle”>
<meta name=”twitter:title” content=”Título de la página”>
<meta name=”twitter:description” content=”Descripción de la página menor a 200 caracteres”>
<meta name=”twitter:creator” content=”@author_handle”>
<!– Imagen de sumario de Twitter debe al menos tener 280x150px –>
<meta name=”twitter:image:src” content=” http://www.ejemplo.com/imagen.html“>
<!– Open Graph data –>
<meta property=”og:title” content=”Título aquí” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=” http://www.ejemplo.com/” />
<meta property=”og:image” content=” http://ejemplo.com/imagen.jpg” />
<meta property=”og:description” content=”Descripcion aquí” />
<meta property=”og:site_name” content=”Nombre del sitio, ej. MiTienda” />
<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=”Sección del artículo” />
<meta property=”article:tag” content=”Etiqueta del artículo” />
<meta property=”fb:admins” content=”Número de ID de Facebook” />
Adicional: La plantilla de Productos
Para quienes cuentan con sitios de venta online, los marcadores de productos son los más indicados, y la buena noticia es que son fáciles de instalar para los desarrolladores utilizando las plataformas que cuentan con carritos de compra (ej.: WooCommerce). Esta plantilla es un poco diferente que los marcadores de artículos por algunos factores:
Etiquetas <html> configuradas para mostrar los datos de producto de schema.orgLa Carta de Productos de Twitter contiene las etiquetas necesariasLos datos de Open Graph contienen datos sobre los precios y tipos de monedaPlantilla de Etiquetas Sociales de Productos
<!– Update your html tag to include the itemscope and itemtype attributes. –>
<html itemscope itemtype=”http://schema.org/Product”>
<!– Coloca esto entre las etiquetas <head> de tu sitio –>
<title>Título de la página, entre 60-70 caracteres</title>
<meta name=”description” content=”Descripción de la página no mayor a 155 caracteres.” />
<meta itemprop=”name” content=”Nombre o título aquí”>
<meta itemprop=”description” content=”La descripción de la página”>
<meta itemprop=”image” content=”http://www.ejemplo.com/imagen.jpg”>
<!– Twitter Card data –>
<meta name=”twitter:card” content=”producto”>
<meta name=”twitter:site” content=”@publisher_handle”>
<meta name=”twitter:title” content=”Título de la página”>
<meta name=”twitter:description” content=”Descripción de la página no menor a 200 caracteres”>
<meta name=”twitter:creator” content=”@author_handle”>
<meta name=”twitter:image” content=” http://www.ejemplo.com/imagen.html”>
<meta name=”twitter:data1″ content=”$3″>
<meta name=”twitter:label1″ content=”Price”>
<meta name=”twitter:data2″ content=”Black”>
<meta name=”twitter:label2″ content=”Color”>
<!– Open Graph data –>
<meta property=”og:title” content=”Título aquí” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”http://www.ejemplo.com/” />
<meta property=”og:image” content=” http://ejemplo.com/imagen.jpg” />
<meta property=”og:description” content=”Description Here” />
<meta property=”og:site_name” content=”Site Name, i.e. Moz” />
<meta property=”og:price:amount” content=”15.00″ />
<meta property=”og:price:currency” content=”USD” />
Métodos para testear y solicitar aprobación:
Validación de Twitterhttps://dev.twitter.com/docs/cards/validation/validator
Debes tener tu dominio aprobado, como paso previo, antes de que tus tarjetas se muestren en Twitter. La buena noticia es que es un proceso muy sencillo. Después de completar estos datos, solo ingresa tu URL en la herramienta de validación.
Facebook Debuggerhttps://developers.facebook.com/tools/debug
No es necesaria la previa aprobación para que tus meta datos se muestren en Facebook. La función de depuración que ofrecen te brindará la información que necesitas de todas tus etiquetas, incluyendo las de tu cuenta de Twitter.
Herramienta de pruebas de Datos Estructurados de Googlehttp://www.google.com/webmasters/tools/richsnippets
Los desarrolladores web generalmente utilizan herramientas de datos estructurados para hacer pruebas en los marcadores y partes del artículo que se mostrarán en cada resultado de las búsquedas, y también podrás ver qué otros tipos de meta datos de Google puede extraer de cada página.
Herramienta de Validación de Rich Pinsde Pinterest.http://developers.pinterest.com/rich_pins/validator/
Al igual que en Twitter, Pinterest tiene un proceso de aprobación para activar la herramienta de Rich Pins. Puedes utilizar el Validador de Pins Enriquezidos para hacer pruebas de los datos de tus marcadores y solicitar la aprobación simultáneamente.
Redactor de contenidos
¿Querés tener tu propia web?
