Meta tags sociales

  • Por
Implementar etiquetas META en el HTML que permiten mejorar nuestra viralidad en las redes sociales, Twitter, Facebook, G+, Pinterest.

En este artículo te explicamos cómo ofrecer mejor información a los rastreadores de las redes sociales, informando pormenorizadamente de las características del contenido que estás publicando, de modo que lo puedan reconocer fácilmente y ofrecer mejor información de ti. La idea es ponérselo fácil a los sistemas de compartir en redes sociales, como Twitter, Google+, Facebook o Pinterest, para mejorar la viralidad del contenido de tu sitio web.

¿Has notado que a veces cuando compartes contenido en Facebook no te carga ninguna imagen y otras veces sí? Bien pues esto depende de los meta tags sociales que el sitio web utilice, algo que muchas veces no esta muy bien gestionado. Hay una cantidad enorme de etiquetas META que puedes usar y que te describimos a continuación.

Utilizar estas metas tags sociales puede ayudarnos a difundir mejor nuestro contenido, ya que nos permite definir las imágenes y descripciones de una forma más óptima.

Saber exactamente que Meta Tags incluir puede ser confuso, incluso para personas con cierta experiencia en este tema. Si por ejemplo utilizas algún CMS y tienes implementado un plugin de SEO, generalmente no tienes que preocuparte por este tema ya que el propio plugin te lo estará gestionando, pero si quieres optimizar cómo apareces en las redes o no quieres depender de otros, te interesará este artículo.

A continuación os vamos a dejar unos códigos genéricos, que van de menos a más, para implementar en tus webs.

Como utilizar estos códigos

Simplemente copia y pega el el código en tus artículos, usando el editor de texto. Asegúrate de reemplazar cualquier información que hemos colocado de muestra por la personalizada para tu web o para tus artículos. Valores de atributos como content, url, etc. son los que tienes que editar para colocar tus propios datos. Puedes personalizar, eliminar o agregar cualquier tag que creas necesario.

Los tres de códigos están optimizados utilizando marcadores y datos típicos de un “artículo”, ideal para posts de blog y la mayoría de los contenidos escritos.

Código 1
Este código se ejecuta de manera limpia y rápida. Contiene pocos datos para poder compartir de forma optimizada en Twitter, Facebook, Google+ y Pinterest.

<!-- Coloca este código dentro de la etiqueta <head> de tu web -->
<title>Titulo de Página. 60-70 caracteres como maximo</title>
<meta name="description" content="Descripcion de pagina. No sueperar los 155 caracteres." />

<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">

<!-- Open Graph data -->
<meta property="og:title" content="Titulo" />
<meta property="og:type" content="article" />
<meta property="og:url" content=" http://www.example.com/" />
<meta property="og:image" content=" http://example.com/image.jpg" />
<meta property="og:description" content="Descripcion" />

Código 2
Código con tag sociales que funciona en todas las plataformas. Además de todas las características del código 1, éste template incluye lo siguiente:

  • Tarjeta de Resumen básica de Twitter
  • Imagen de miniatura de Twitter
  • Insights de Páginas de Facebook

<!-- Coloca este código dentro de la etiqueta <head> de tu web -->
<title>Titulo de Página. 60-70 caracteres como maximo</title>
<meta name="description" content="Descripcion de pagina. No sueperar los 155 caracteres." />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Titulo de la pagina">
<meta name="twitter:description" content="Descripcion de la pagina sin superar los 200 caracteres">
<meta name="twitter:creator" content="@author_handle">

<-- Twitter Summary card images. Igual o superar los 200x200px -->
<meta name="twitter:image" content=" <a href="http://www.example.com/image.jpg">http://www.example.com/image.jpg</a>">

<!-- Open Graph data -->
<meta property="og:title" content="Titulo" />
<meta property="og:type" content="article" />
<meta property="og:url" content=" http://www.example.com/" />
<meta property="og:image" content=" http://example.com/image.jpg" />
<meta property="og:description" content="Descripcion" />
<meta property="og:site_name" content="Nombre de la web, i.e. Moz" /meta property="fb:admins" content="ID de Facebook" />

Código 3
Código completo. Además de todos los datos incluidos en el anterior, tiene:

  • “Google Authorship” y “Pusblisher MArkup”. Aunque estos datos no cambien la apariencia de tus contenidos en Google+, agrega hipervínculos a tus páginas en los resultados de búsqueda de Google+.
  • Marcador de artículo de Schema.org
  • Tarjeta de Resumen con imagen grande de Twitter
  • Datos de artículo Expanded Open Graph

<!-- Actualiza la etiqueta <html> con include de itemscope y itemtype attributes. -->
<html itemscope itemtype="<a href="http://schema.org/Article">http://schema.org/Article</a>">

<!-- Coloca este código dentro de la etiqueta <head> de tu web -->
<title>Titulo de Página. 60-70 caracteres como maximo</title>
<meta name="description" content="Descripcion de pagina. No sueperar los 155 caracteres." />

<!-- Google Authorship and Publisher Markup -->
<link rel="author" href=" <a href="blank">https://plus.google.com/[Google+_Profile]/posts"/</a>>
<link rel="publisher" href=” <a href="blank">https://plus.google.com/[Google+_Page_Profile]"/</a>>

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Titulo">
<meta itemprop="description" content="Descripcion">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Titulo">
<meta name="twitter:description" content="Descripcion que no supere los 200 caracteres">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image. Al menos estas medidas 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.html">

<!-- Open Graph data -->
<meta property="og:title" content="Titulo" />
<meta property="og:type" content="article" />
<meta property="og:url" content=" http://www.example.com/" />
<meta property="og:image" content=" http://example.com/image.jpg" />
<meta property="og:description" content="Descripcion" />
<meta property="og:site_name" content="Nombre de la web, i.e. Moz" />
<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="Seción de la web" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="ID de Facebook " />

Herramientas para comprobación

Herramienta de Validación de Twitter
Antes de que tus tarjetas aparezcan en Twitter,vas a necesitar tener tu dominio aprobado. Es un proceso muy sencillo, simplemente tienes que acceder a la url que te pongo a continuación y ver si esta todo ok.
https://dev.twitter.com/docs/cards/validation/validator

Facebook Debugger
No necesitas aprobación previa para que tus meta sociales se vean en Facebook pero cuentas con una herramienta de depuración que te ofrecen para dar información de todas tus etiquetas, incluso analizando las de Twitter.
https://developers.facebook.com/tools/debug

Herramienta de Validación de Rich Pins de Pinterest
Como Twitter, Pinterest requiere un proceso de aprobación para activar la funcionalidad de Rich Pins. Utiliza el Validador de Pins Enriquecidos para testear los datos de tus marcadores y validarlos al mismo tiempo.
http://developers.pinterest.com/rich_pins/validator/

Optimización de imágenes

La imagen que vincules en tus datos sociales, no tiene porque estar en la página, pero debería representar el contenido correctamente. 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 es elegir una imagen que sirva para todos los servicios:

  • Imagen 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.

Autor

Sara Alvarez

Equipo DesarrolloWeb.com

Compartir

Comentarios

David

24/4/2015
Caracteres especiales
Se puede insertar caracteres especiales tipo & en las meta tags?

davidcm86

24/4/2015
Interesante
Se ve interesante. Voy a limpiar y reformatear los meta tags de mi web ya que aparentemente funcionan bien pero por lo que veo faltan cosas.
Un saludo!

erledie

28/4/2015
Excelente Articulo
Excelente Articulo Sara, muchas gracias por esta información, soy muy nuevo en el tema de SEO y mucho mas en el tema de los Meta Tags Sociales, por lo cual algunas cosas no las entiendo, y aprovecho este espacio para preguntarlas, en el código 3 en el meta <meta property="article:section" content="Seción de la web" /> a que se refiere "secion de la Web"? que información estaria en ese content?. 2 Pregunta: en el siguiente Meta "<meta property="article:tag" content="Article Tag" />" que estaria en el content, todo el articulo?. 3 Pregunta: en el Meta "<meta property="og:description" content="Descripcion" />" en el content, iría como una descripción pequeña del articulo como especie del meta description de la pagina?, esto no seria duplicidad de información?. 4 pregunta: en el meta "twitter:creator" y "twitter:site" pueden ser el mismo usuario de twitter?. creo que no tengo mas preguntas, solo me queda de antemano agradecerte y esperar los comentarios

Miquel

04/5/2015
Felicitaciones
Felicito a la redactora del artículo, se nota todo el esfuerzo que le puso. :P
No siguas así...

Mauricio

14/10/2015
Los meta datos como se actualizan
Hola que tal, manejo contenido dinámico en estos valores, entonces siempre me muestra los valores con los que se quedo el cache de facebook, hay alguna forma de que se actualice de manera automática ??

Muchas gracias, saludos ¡¡

Yulli

20/1/2016
Facebook Debugger y meta tags
Hola, interesante artículo. Oye Ya usé el Facebook Debugger para cada página web, en facebook usé mi cuenta personal y me generó un id_app y fb:admins, sin embargo, si otra persona entra en la web no puede compartir el enlace dice: Este contenido ya no esta disponible... Mi pregunta es que me faltará hacer para que todos compartan el enlace? Yo si lo logro compartir, gracias

carlos

12/6/2016
uso del meta tag
hola tengo una duda no e podido implementar el meta tag los pego en el head cambio los valores como hago para poner los iconos para comparit?