Optimiza tu contenido web para Facebook y Twitter
Es importante que prepares tu contenido para las diferentes redes que existen, hay 2 opciones muy interesantes: Open Graph y Twitter Cards, para Facebook y Twitter, respectivamente.
Harán que la información que publicas en tu sitio web/blog se vea como deseas en Facebook y Twitter, ya que optimizarás la visualización de dicho contenido, sin importar si son imágenes, videos, audio o una galería.
Estas dos herramientas en conjunto permiten que cuando alguien comparta un enlace de tu sitio web/blog, se muestre la información que deseas y de manera adecuada para esas redes.
Un ejemplo sencillo:
Si copian y pegan esta URL:
https://luisescoffie.com/instagram-presenta-hyperlapse/
En Facebook verán lo siguiente:
Y en Twitter verán lo siguiente:
¿A qué se debe?
A la utilización de las etiquetas Open Graph de Facebook y a la utilización de una Twitter Card tipo Player para la optimización del contenido para dichas redes sociales, independientemente de la información contenida en la página.
Open Graph
Es muy sencillo añadir las etiquetas Open Graph, aquí un ejemplo de las etiquetas mínimas requeridas en Open Graph:
og:title – El título del objeto, como deseas que aparezca, ejemplo: «Instagram presenta: Hyperlapse».
og:type – El tipo del objeto, ejemplo: «video.movie». Dependiendo del tipo de objeto pueden aplicar otras etiquetas o propiedades adicionales.
og:image – La URL de la imagen que represente el objeto. El tamaño mínimo que pide Facebook es de 200px x 200 px.
og:url – La URL canónica que se usará de manera permanente en el graph para identificar al objeto, ejemplo: «https://luisescoffie.com/instagram-presenta-hyperlapse/».
Etiquetas Requeridas:
meta property="og:type" content="article"
meta property="og:title" content="Instagram presenta: Hyperlapse"
meta property="og:url" content="https://luisescoffie.com/instagram-presenta-hyperlapse/"
meta property="og:image" content="https://luisescoffie.com/wp-content/uploads/2014/08/Hyperlapse-Instagram-862x398.jpg"
Etiquetas Adicionales:
meta property="og:image:width" content="862"
meta property="og:image:height" content="398"
meta property="og:image:type" content="image/jpeg"
meta property="article:author" content="https://luisescoffie.com/author/luisescoffie/"
meta property="article:publisher" content="https://luisescoffie.com"
meta property="article:section" content="Social Media"
meta property="article:tag" content="social media"
meta property="article:tag" content="hyperlapse"
meta property="article:tag" content="instagram"
Para validar las etiquetas Open Graph podemos utilizar esta herramienta de Facebook: http://developers.facebook.com/tools/debug/
Sólo debemos pegar la URL a validar y nos mostrará una vista previa del contenido con Open Graph y si hay errores nos dirá como podemos corregirlos.
Twitter Card
Este es un ejemplo de una Twitter Card, con las etiquetas básicas y requeridas para el tipo «summary»:
meta name="twitter:card" content="summary"
meta name="twitter:site" content="@luisescoffie"
meta name="twitter:title" content="Instagram presenta: Hyperlapse"
meta name="twitter:description" content="Conoce esta nueva app de Instagram"
Etiquetas adicionales:
meta name="twitter:image" content=""
meta name="twitter:url" content="https://luisescoffie.com/intagram-presenta-hyperlapse/"
Al adecuar el contenido a cada canal se incrementa la posibilidad de lograr más interacción y aumentar así el alcance de nuestras publicaciones.
Para validar las Twitter Cards debemos solicitar su aprobación en: https://cards-dev.twitter.com/validator
Sólo debemos pegar la URL a validar y nos pedirá solicitar su aprobación (si no lo hemos hecho).
NOTA: Una vez que solicitas la aprobación de un tipo de Twitter Card, las siguientes Twitter Cards del mismo tipo, serán aprobadas automáticamente.
Tanto para Open Graph como para Twitter Cards tenemos diferentes opciones si lo que queremos mostrar es un video, o audio, o múltiples fotografías, es cuestión que escojan la opción que les permitirá destacar de acuerdo al tipo de contenido que manejan. Podrán obtener información más detallada en los siguientes enlaces.
Sitio oficial Open Graph: http://ogp.me/
Sitio oficial Twitter Cards: https://dev.twitter.com/cards/overview
¿Has utilizado anteriormente alguna Twitter Card u Open Graph?