En muchas ocasiones cuando intentamos compartir un contenido en Facebook o en otras redes sociales, no carga ninguna imagen o, si lo hace, no es exactamente la que más nos gustaría. Si bien hay circunstancias que dependen de cada Red Social, generalmente el motivo es que no hemos configurado adecuadamente las meta tags sociales de nuestra web, que nos permiten definir de una forma óptima y ordenada características como descripciones o imágenes. En este artículo, incluimos distintos códigos de ejemplo que nos permitirán informar a los rastreadores de las Redes Sociales del contenido que estamos publicando de acuerdo a sus necesidades, lo que mejorará la viralidad del contenido de cualquier sitio.
Si utilizas un CMS o un plugin SEO implementado en una web no tendrás que preocuparte, porque generalmente se encargan de manera autónoma de esa gestión. Pero si deseas optimizar cómo apareces sin depender de otros, te resultarán de utilidad los códigos que te dejamos a continuación para que puedas incluirlos en tu web.
Cómo utilizar estos códigos
Copia y pega el código en tus artículos o páginas usando un editor de texto. Deberás de asegurarte de reemplazar todo lo relativo a lo aquí expuesto. Valores de atributos como content, URL, etc. son los que tienes que editar para colocar tus propios datos en los meta tags sociales. Puedes personalizar, eliminar o agregar cualquier tag que creas necesario. Todos ellos están optimizados para la mayoría de contenidos.
Código 1
Ese código de meta tags sociales contiene datos elementales para compartir con 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 superar 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
Este código de meta tags sociales funciona en todas las plataformas y, además de las características del anterior código, incluye: tarjeta de resumen básica de Twitter, imagen de miniatura de Twitter e 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 superar 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
Es el más completo de los meta tags sociales. Incluye el de los dos anteriores y, además: Google Authorship y Publisher Markup, agrega hipervínculos a las 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 superar 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="Sección de la web" /> <meta property="article:tag" content="Article Tag" /> <meta property="fb:admins" content="ID de Facebook " />
Ahora, sólo queda comprobar que nuestros meta tags sociales funcionan correctamente. Para ello, afortunadamente, tenemos distintas opciones:
- Herramienta de Validación de Twitter. Necesitarás tener validado tu dominio en Twitter, sólo tienes que acceder a la siguiente URL: https://cards-dev.twitter.com/validator
- Facebook Debugger. No es necesario tener aprobación pero incluirás la herramienta de depuración en https://developers.facebook.com/tools-and-support/
- Herramienta de Validación de Rich Pins de 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: https://help.pinterest.com/en/articles/enable-rich-pins-your-site
También deberás tener en cuenta los diferentes estándares para el tamaño de las imágenes de redes sociales.