Plantillas “Meta Tags” para las Redes Sociales

Inicio>Herramientas y Recursos online>Plantillas “Meta Tags” para las Redes Sociales
Las redes sociales se están convirtiendo en una “fase” crítica en todo proyecto SEO. Definir exactamente los títulos, las descripciones y las imágenes que se comparten en las redes sociales como Twitter, Facebook, Google+ y 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 :)

La fuente de esta entrada es Moz.

 
2017-06-14T17:19:24+00:00 6 Comments

El autor de contenido es

Ignacio Santiago
Soy muchas cosas, pero todo empezó como Blogger. Desde ahí he crecido como especialista en Marketing Online, pero con el Blogging, el Posicionamiento Web y WordPress bajo el brazo. Estas herramientas son las que uso para crear todo tipo de sitios web para mi y mis clientes. Ayudo a empresas y autónomos a crear, mejorar y potenciar su presencia y visibilidad en la red, dándoles las herramientas que necesitan para formar un branding fuerte, que inspire confianza y que genere ventas.

6 Comentarios

  1. David 22/12/2015 en 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
      Ignacio Santiago 21/01/2016 en 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
  2. Esteban 10/10/2015 en 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 :)

  3. PortalArtistico 23/05/2014 en 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
      ignaciosantiago 30/05/2014 en 18:14- Responder

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

¡Es tu turno! Comparte tu experiencia o pregunta