¿Quieres conocer cuales son las metaetiquetas de las redes sociales que te permitan controlar qué información se comparte? ¿Quieres añadir el protocolo Open Graph pero no sabes por dónde empezar? ¡Estás en el sitio correcto! Las redes sociales son una parte muy importante en cualquier estrategia de marketing digital, pero también a nivel SEO. Definir exactamente los títulos, las descripciones y las imágenes que se comparten en plataformas sociales como Facebook, Instagram, LinkedIn, Twitter o Pinterest es clave para optimizar los canales sociales y hacer que el engagement aumente.
Piensa en ello como una optimización del porcentaje de conversión para la exposición social. Las implicación con el SEO es significativa. Te puedo decir por experiencia, que, por ejemplo, incluir imágenes optimizadas en los timeline de las redes sociales ayuda a la propagación de contenidos que, a menudo, conduce a un aumento de enlaces y menciones. Vamos a ver todas las plantillas de las etiquetas meta sociales.

Saber exactamente que etiquetas meta sociales se deben incluir puede confundir incluso a los webmasters con experiencia. Lo primero es conocer las diferentes estructuras de apoyo de las principales plataformas sociales:

  • Twitter Cards: Resúmenes, Imágenes, Galerías, Aplicaciones, Video, Audio y Productos
  • Pinterest Rich Pins: Productos, Recetas, Películas y Artículos
  • Google+: Artículos, Blog, Libro, Eventos, Negocio local, Organización, Persona, Producto, Opiniones
  • FacebookArtículos, Fotos, Audio, Video y más

Para ayudar a lidiar con todos estos datos, te muestro 4 plantillas para etiquetas meta sociales que se puede rellenar y personalizar para tu propio uso.

plantillas etiquetas meta sociales


Cómo usar las plantillas de las etiquetas meta sociales

Simplemente copia y pega cada plantilla en el editor de texto de tu elección. Asegúrate de reemplazar cualquier texto «Descripción de la página», «Título de la página», «Autor», etc… con tus propios datos y personalizar, suprimir o añadir cualquier etiqueta que sea necesario.

Las tres primeras de estas plantillas están optimizadas con el marcado de «artículo» y datos, ideal para las entradas de un blog y  mayor parte de contenido escrito. La plantilla final consta del marcado para páginas de producto.Para otros tipos de entradas, tales como libros o recetas, consulta la documentación disponible al final de este artículo.

Cuando termines, que no se olvide probar y verificar tu trabajo con las herramientas de prueba y verificación.


Plantilla Etiquetas Meta Sociales #1 Básica

Esta es la plantilla de etiquetas meta sociales más simple. Contiene los datos mínimos para poder compartir contenido en Twitter, Facebook, Google+ y Pinterest.

Las etiquetas del título y las meta descripciones se incluyen, aunque no sean etiquetas meta sociales propiamente dichas. Esto es debido a que pueden ser utilizadas por Google+ y otras plataformas de redes sociales, y forma parte de las mejores práctica incluirlas en todas las páginas que publiques.

Plantilla Etiquetas Meta Sociales Básica: Artículo

<!-- Coloca estos datos entre las etiquetas <head> de tu página web -->
<title>Título de la página. Longitud máxima 60-70 caracteres</title>
<meta name="description" content="Descripción de la página. Longitud máxima 155 caracteres." />

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

<!-- Open Graph data -->
<meta property="og:title" content="Título de la página 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 de la página" />

Plantilla Etiquetas Meta Sociales #2 Estándar

La plantilla etiquetas meta sociales estándar representa una implementación más robusta de las etiquetas sociales y tiene la suficiente información para trabajar en todas las plataformas sociales. Además de todas las características de la plantilla básica anterior, la plantilla estándar incluye lo siguiente:

  • Twitter Summary card básica
  • Miniatura Twitter
  • Página de Facebook Insights

Plantilla Etiquetas Meta Sociales Estándar: Artículo

<!-- Coloca estos datos entre las etiquetas <head> de tu página web -->
<title>Título de la página. Longitud máxima 60-70 caracteres</title>
<meta name="description" content="Descripción de la página. Longitud máxima 155 caracteres." />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@anunciante">
<meta name="twitter:title" content="Título página">
<meta name="twitter:description" content="Descripción de la página. Longitud máxima 200 caracteres">
<meta name="twitter:creator" content="@autor">
<-- Twitter Summary card images must be at least 200x200px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="Título de la página 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 de la página" />
<meta property="og:site_name" content="Nombre de la página web" />
<meta property="fb:admins" content="ID numérico de Facebook" />

Plantilla Etiquetas Meta Sociales #3 Avanzada

Esta es la plantilla de etiquetas meta sociales más completa sin lugar a dudas. Además de todos los datos contenidos en la plantilla estándar, la plantilla avanzada contiene:

  • Autoría  Google y marcado de Publisher: Aunque estos datos no cambian el aspecto de tu contenido en Google+, añaden enlaces a tu página de Google+ en los resultados de búsqueda.
  • Marcado Schema.org de artículo
  • Twitter Summary card con una imagen grande
  • Datos de Open Graph para artículos ampliados

Plantilla Etiquetas Meta Sociales Avanzada: Artículo

<!-- Actualiza tu etiqueta HTML para incluir itemscope y itemtype. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Coloca estos datos entre las etiquetas <head> de tu página web -->
<title>Título de la página. Longitud máxima 60-70 caracteres</title>
<meta name="description" content="Descripción de la página. Longitud máxima 155 caracteres." />

<!-- Google Authorship y Marcado de Anunciante -->
<link rel="author" href="<a "="">https://plus.google.com/
[Perfil_Google+]/posts"/> <link rel="publisher" href=”https://plus.google.com/[Página_Google+]"/> <!-- Marcado Schema.org para Google+ --> <meta itemprop="name" content="Nombre de la página web"> <meta itemprop="description" content="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="@anucniante"> <meta name="twitter:title" content="Título de la página"> <meta name="twitter:description" content="Descripción de la página. Longitud máxima 200 caracteres"> <meta name="twitter:creator" content="@autor"> <!-- Resumen Twitter Card con una imagen grande con al menos 280x150px --> <meta name="twitter:image:src" content="http://www.ejemplo.com/imagen.html"> <!-- Open Graph data --> <meta property="og:title" content="Descripción de la página 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 de la página" /> <meta property="og:site_name" content="Nombre de la página" /> <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="ID numérico de Facebook" />

Plantilla Etiquetas Meta Sociales #4 Producto

El marcado de producto es muy popular para los que tienen un ecommerce, y por lo general es muy fácil para los desarrolladores implementarlo en el software de tiendas online. La plantilla del producto difiere de la de marcado  de artículo en pocos puntos:

  • Etiqueta <html> modificada para reflejar los datos de producto schema.org
  • La Ficha de Producto de Twitter incluye etiquetas de los datos obligatorios
  • Los datos de Open Graph incluyen datos sobre precio y moneda

Plantilla Etiquetas Meta Sociales: Producto

<!-- Actualiza tu etiqueta HTML para incluir itemscope y itemtype. -->
<html itemscope itemtype="http://schema.org/Product">

<!-- Coloca estos datos entre las etiquetas <head> de tu página web -->
<title>Título de la página. Longitud máxima 60-70 caracteres</title>
<meta name="description" content="Descripción de la página. Longitud máxima 155 caracteres." />

<!-- MArcado Schema.org para Google+ -->
<meta itemprop="name" content="Nombre de la página web">
<meta itemprop="description" content="Descripción de la página">
<meta itemprop="image" content="http://www.ejemplo.com/imagen.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@anunciante">
<meta name="twitter:title" content="Título de la página">
<meta name="twitter:description" content="Descripción de la página. Longitud máxima 200 caracteres">
<meta name="twitter:creator" content="@autor">
<meta name="twitter:image" content="http://www.ejemplo.com/imagen.html">
<meta name="twitter:data1" content="$3">
<meta name="twitter:label1" content="Precio">
<meta name="twitter:data2" content="Negro">
<meta name="twitter:label2" content="Color">

<!-- Open Graph data -->
<meta property="og:title" content="Título de la página 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 de la página" />
<meta property="og:site_name" content="Nombre de la página" />
<meta property="og:price:amount" content="15.00" />
<meta property="og:price:currency" content="EUR" />

Herramientas de prueba y verificación

plantillas etiquetas meta sociales twitterA. Herramienta de validación de Twitter

https://dev.twitter.com/docs/cards/validation/validator

Antes de que se muestren tus Twitter Cards debes tener tu dominio verificado. Afortunadamente, es un proceso muy fácil. Después de implementar tus tarjetas, escribe la URL de ejemplo en la herramienta de validación. Después de comprobar el marcado, seleccione el botón «Enviar para aprobación».

plantillas etiquetas meta sociales facebookB. Herramienta de depuración de Facebook

https://developers.facebook.com/tools/debug

No necesitas aprobación previa para que se muestre en Facebook tu metainformación, pero la herramienta de depuración que ofrece te da una gran cantidad de información acerca de todas las etiquetas y también te permite analizar las etiquetas de Twitter.

plantillas etiquetas meta sociales google plusC. Herramienta de prueba de datos estructurados de Google

http://www.google.com/webmasters/tools/richsnippets
Webmasters traditionally use the structured data testing tool to test authorship markup and preview how snippets will appear in search results, but you can also use see what other types of meta data Google is able to extract from each page.

plantillas etiquetas meta sociales pinterestD. Validador de Pins de Pinterest

http://developers.pinterest.com/rich_pins/validator/

Al igual que Twitter, Pinterest requiere un proceso de aprobación para habilitar la funcionalidad Pin Enriquecido. Utiliza la herramienta de validación de Rich Pin para probar el marcado de datos y solicitar la aprobación al mismo tiempo.


Consejos y mejores prácticas

Optimización de imágenes

La imagen que vinculas a tus datos sociales en realidad no tiene por qué estar o mostrarse en la misma página, pero debe representar a la perfección tu contenido. La imagen le permite controlar lo que la gente ve cuando comparten tu contenido, por lo que es importante la utilización de imágenes de calidad.

Cada plataforma social tiene diferentes estándares para las medidas. Por lo general, es más fácil elegir un tamaño de imagen que vayas a usar para todos los servicios:

  • Miniatura Twitter: 120x120px
  • imagen grande Twitter: 280x150px
  • Facebook: Los estándares suelen variar, pero una imagen de la menos 200x200px funciona muy bien. Facebook recomienda imágenes grandes de hasta 1200px de ancho.

En pocas palabras, cuanto mayor sea la imagen mayor flexibilidad. En caso de duda, prueba cada página utilizando la herramienta apropiada en la lista que acabamos de ver, para ver exactamente cómo van a aparecer las imágenes los resultados de búsqueda.

La importancia de los datos Open Graph

Si tan pudiéramos elegir un solo tipo de metadatos para incluir en una página web, estos serían los datos Open Graph. Esto se debe a que todas las plataformas pueden utilizarlo como reserva, incluyendo Twitter en gran medida.

Página de Insights de Facebook

La propiedad meta «fb: admins» requiere que introduzcas tu número de identificación numérico de Facebook y te da acceso a la analítica de cómo el contenido de tu página web es compartido en Facebook. Te animo a leer más acerca de Insights de Facebook, incluyendo cómo configurarlo y descubrir la identificación numérica.

plantillas etiquetas meta sociales


Otros recursos

Utiliza estas plantillas como punto de partida, pero estas pueden personalizarse de millones de maneras. Te dejo unas cuantas páginas que pueden ayudarte en ese proceso:

Si te ha gustado el artículo que no se te olvide compartirlo y ponerle nota.

¿Te ha gustado el contenido?

Puntuación media 5 / 5. Votos: 42

¡Todavía no hay votos! Sé el primero en valorar el contenido.

¿Te ha gustado? Comparte el contenido
Publicado por Ignacio Santiago

Soy muchas cosas, pero todo empezó como blogger hace más de 20 años. Desde ahí he ido ido creciendo como persona y profesional hasta que decidí dejar un buen trabajo, emprender por mi cuenta y poner en marcha mi propia agencia de marketing digital. Ahora, junto con un equipo joven, motivado y muy cualificado, ayudo a profesionales y empresas a crear y hacer crecer su negocio en Internet ofreciendo un servicio de marketing digital atento, cercano, integral y profesional.

Contenidos relacionados
Deja tu comentario
  1. Brian 16/10/2019 a las 18:09 - Responder

    Buen aporte Ignacio, sigue asi!!!
    Claro que es necesario tener los que Indica Ignacio
    Saludos!!!

    • Ignacio Santiago 18/10/2019 a las 11:00 - Responder

      Hola Brian ????

      Muchísimas gracias por tu aportación. Me alegra saber que coincides con mi punto de vista.

      ¡Saludos!

  2. Elena 02/01/2019 a las 12:30 - Responder

    No existen meta tags para instagram?

    • Ignacio Santiago 21/06/2019 a las 12:56 - Responder

      Hola Elena, las publicaciones y compartir contenido en Instagram son diferentes a Twitter o Facebook. Saludos!

  3. Liz 02/07/2018 a las 20:37 - Responder

    Hola,

    En los meta tags de twitter ¿Qué se agrega en la parte de content= «Summary»? ¿Con que debo sustituir a summary?

    • Ignacio Santiago 07/11/2018 a las 17:30 - Responder

      Hola Liz,

      No lo edites, es una manera de que el buscador y la red social sepa qué tipo de meta tag de Twitter es.

      Saludos

  4. David 22/12/2015 a las 14:21 - Responder

    Hola,

    El open graph de facebook me funciona, pero cuando cambio la imagen esta no se actualiza ¿Por qué?. Cuando uso la herramienta de validación de twitter, no logro ver el botón de enviar para aprobación.

    saludos

    Gracias

    • Ignacio Santiago 21/01/2016 a las 14:05 - Responder

      Hola David,

      Gracias por comentar.

      • Porque el sistema coge como principal la imagen que configuraste por primera vez. Después es cuestión de esperar unos días.
      • Está en la parte de abajo, si no te sale es porque no has hecho bien algún paso
  5. Esteban 10/10/2015 a las 08:14 - Responder

    Hola,

    Yo estoy haciendo una paágina para usarla como base de datos de un juego que estoy creando, solo comento para felicitarte por tu pagina :)

  6. PortalArtistico 23/05/2014 a las 19:43 - Responder

    Buenas tardes, estoy tratando de implementar esto en mi página web. Sin embargo, cuando quiero compartir en Facebook un articulo en particular el titulo y la descripción me la toma del meta tag.
    Quisiera saber si existe alguna forma para hacer que tome otros datos, ya que cada articulo posee datos distintos.
    Esto es lo que he usado para compartir:
    http://www.facebook.com/sharer.php?s=100&p%5Burl%5D=url_pagina&p%5Btitle%5D=titulo_contenido&p%5Bsummary%5D=
    descripcion_contenido&p[images][0]=url_imagen

    El link de ejemplo es el siguiente:
    http://www.portalartistico.com.ar/DetalleAcademia/1/academia-encuentro

    Desde ya muchas gracias por tu respuesta.
    Saludos Cordiales!

    • ignaciosantiago 30/05/2014 a las 18:14 - Responder

      Hola, necesitas decir a través de meta tags lo que quieres que se comparta, es decir, la url que quieres.

Suscríbete y estate al día en marketing digital

Únete a más de 50.000 personas que, aparte de recibir los primeros todas las actualizaciones del blog e importantes descuentos en herramientas, tienen acceso gratuito a todos nuestros contenidos.

servicios marketing digital diseño web wordpress seo fondo
servicios marketing digital diseño web wordpress seo fondo
Suscríbete y estate al día en marketing digital

Únete a más de 50.000 personas que, aparte de recibir los primeros todas las actualizaciones del blog e importantes descuentos en herramientas, tienen acceso gratuito a todos nuestros contenidos.