- 5 febrero, 2019
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 minimalista
Es 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ándar
La 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 Twitter
- Imágen de miniatura de Twitter
- Insights de las Páginas de Facebook
Plantilla 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 completo
Es 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.org
- Tarjeta de Resumen con imagen grande de Twitter
- Información de artículo Expanded Open Graph
Plantilla 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.org
- La Carta de Productos de Twitter contiene las etiquetas necesarias
- Los datos de Open Graph contienen datos sobre los precios y tipos de moneda
Plantilla 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 Twitter
https://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 Debugger
https://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 Google
http://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.
¿Te ha gustado este artculo?
Recíbe los nuevos en el newsletter mensual de Neolo o Telegram de Neolo
Excelente articulo. Gracias!
Saludos desde San Luis, Argentina