Web + SEO: Etiquetas meta HTML o ‘metatags’ para redes sociales (Open Graph, Twitter Card)


Cuando un contenido publicado en una web se comparte en una red social, ésta tratará de buscar información útil (el título del artículo, una descripción o resumen, una imagen…), para presentar este contenido de una manera atractiva. Si no se especifica de alguna manera esta información, leerán la información del contenido y presentarán aquella que consideren adecuada, lo que muchas veces no coincide con lo que queremos mostrar, obteniendo una fotografía que nada tiene que ver con el artículo, un título poco descriptivo, o una introducción poco adecuada al contenido que compartimos.

Para establecer qué datos se deben mostrar, utilizaremos los metadatos sociales. Como casi siempre en temas de la web, no hay un estándar, por lo que cada red social utiliza un tipo de metadatos. Por ejemplo:

  • Linkedin, Google+, Pinterest y Facebook utilizan Open Graph Protocol.
  • Twitter utiliza las llamadas Twitter Cards.

Para simplificarlo un poco, veamos 4 plantillas. Recuerda cambiar únicamente aquello que está en MAYÚSCULA:

  1. Plantilla básica
    Son los datos mínimos optimizados para ejecutarse rápidamente en Google+, Facebook, Twitter y Pinterest. Lo mejor es que se incluyan de forma personalizada en cada una de las páginas.

  2. Plantilla estándar
    Representa una implementación más robusta soportando prácticamente a todas las redes sociales. Además de la plantilla básica, soporta:

    – Sumario básico para Twitter
    – Imagen en miniatura de Twitter
    – Profundización en la página para Facebook

  3. Plantilla completa para artículos
    Comienza a ser un monstruo. Además de lo anterior, esta plantilla ofrece:

    – Google Authorship and Publisher Markup. Aunque no parezca que ha cambiado mucho en Google+. potencialmente añade enlaces a tus páginas Google+ en los resultados de las búsquedas.
    – Schema.org article markup
    – Twitter Summary card con imagen mayor
    – Datos expandidos de Open Graph article

    Esta plantilla se separa en dos, ya que hemos de tocar en 2 sitios diferentes. Leer con atención los comentarios:

  4. Bonus: Plantilla para el producto completo
    Para aquellos vendedores, la etiquetación de los productos es muy popular, y es fácil de implementar para los desarrolladores en su catálogo de productos. La plantilla de producto difiere de la plantilla de artículos en unas cuantas cosas:

    – Modificación de la etiqueta HTML para reflejar el schema.org con datos de producto
    – Twitter Product Card requiere de etiquetas de datos (data labels)
    – Los datos de Open Graph incluyen datos sobre precios y monedas.

Y una vez que hemos elegido, rellenado y subido nuestra plantilla, llega la hora de probar y validar que funciona correctamente…

Validadores de metadatos sociales:

  • Twitter Card Validator
    Antes de que nuestra carta se muestre en Twitter es necesario tener primero aprobado el dominio. Afortunadamente es muy sencillo. Entras en el enlace anterior y luego pon la URL de tu sitio y click en el botón.
  • Facebook Debugger
    No necesitas aprobación previa, pero el poder depurar tus metadatos con esta herramienta nos ofrece bastante información útil sobre nuestras etiquetas, e incluso las de Twitter.
  • Google Structured Data Testing Tool
    Los webmasters tradicionalmente usan este tipo de herramientas para preveer los resultados de la página. Sin embargo, con esta herramienta Google nos muestra qué es capaz de sacar de nuestra página.
  • Rich Pins Validator
    Como en Twitter, en Pinterest también hace falta un proceso de aprobación. Usa esta herramienta para la aprobación y ver si todo está bien.

Consejos y buenas prácticas
Para las imágenes, no es necesario que estén subidas en esta misma web. Eso sí, usa imágenes que representen bien el contenido de la página, así como imágenes con buena calidad. Los tamaños recomendadoes varían:

  • Imagen en miniatura para Twitter: 120x120px
  • Imagen grande para Twitter: 280x150px
  • Facebook: El estándar varía, pero que al menos sea de 200x200px, aunque ellos recomiendan al menos de 1200x630px.

Facebook también ofrece la etiqueta fb:admins junto a tu ID para ofrecernos estadísticas de cómo es compartida nuestra información en Facebook. Aquí tienes más información.

Fuentes:
Fundacion CTIC
MOZ

Dejar un Comentario