Meta tags sociales para mejorar la presencia en redes

4min

Las meta tags sociales son esenciales para garantizar que el contenido de tu sitio web se muestre correctamente cuando se comparte en redes sociales. Estas etiquetas permiten controlar cómo se presentan los títulos, descripciones e imágenes al compartir un enlace, mejorando el atractivo visual y aumentando la probabilidad de interacción. En este artículo, exploraremos los principales tipos de meta tags, ejemplos prácticos y mejores prácticas para optimizar tu sitio web.

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 en este artículo para que puedas incluirlos en tu web.

Índice

¿Qué son las meta tags sociales y por qué son importantes?

Cuando alguien comparte una URL de tu sitio en redes sociales como Facebook, Twitter o LinkedIn, estas plataformas intentan interpretar el contenido para mostrar una vista previa atractiva. Sin meta tags sociales bien configuradas:

  • Tu contenido puede aparecer mal presentado.
  • Puedes perder clics e interacciones valiosas.

Con meta tags correctamente implementadas, controlas qué título, descripción e imagen aparecen, asegurándote de que se destaquen entre otros enlaces.

Códigos para mejorar la presencia en redes sociales

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=' https://www.example.com/' />
 <meta property='og:image' content=' https://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='https://www.example.com/image.jpg'>https://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=' https://www.example.com/' />
 <meta property='og:image' content=' https://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='https://schema.org/Article'>https://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='https://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='https://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=' https://www.example.com/' />
 <meta property='og:image' content=' https://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 ' />

Mejores prácticas al usar meta tags sociales

  • Usa imágenes de alta calidad: Las imágenes son cruciales para atraer la atención. Adapta sus dimensiones según la plataforma (por ejemplo, 1200 x 630 px para Facebook).
  • Evita contenido duplicado: Personaliza los títulos y descripciones para cada página para evitar duplicados que puedan afectar el SEO y las interacciones.
  • Prueba y ajusta: Usa herramientas como el Debugger de Facebook o el Card Validator de Twitter para asegurarte de que tus meta tags se muestren correctamente.
  • Optimiza para móvil: Asegúrate de que las meta tags y las imágenes funcionen bien en dispositivos móviles, ya que se ha convertido en el dispositivo principal a la hora de usar las plataformas digitales.

Comprobación de los meta tags sociales

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.
  • Facebook Debugger. No es necesario tener aprobación pero incluirás la herramienta de depuración.
  • Herramienta de Validación de Rich Pins de Pinterest. Requiere un proceso de aprobación para activar la funcionalidad de Rich Pins.
Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: