cambia_imagen

En este artículo, vas a aprender a cambiar la imagen que sale al compartir TUS enlaces en las redes sociales:

Cuando compartes el enlace de tu web en Facebook, puedes ver que aparece una ventana nueva con una imagen y texto:

Lo que se ve en esa ventana es lo que las personas verán, pero… es un problema muy común que cuando compartes una publicación o un enlace de tu sitio web en las redes sociales, la imagen miniatura no está o no es la que esperabas. ¡Ohhh! ¡Un error!

¿Qué haces? pues hay que definir cuál es la imagen que quieres compartir y no dejarlo al azar, para que Facebook u otra red social, determine qué imagen vas a compartir. Fíjate qué es lo que pasa:

Hay una tecnología que permite escoger qué imagen vas a compartir y se llama protocolo Open Graph. Te permite personalizar la información que compartes y además la utilizan casi todas las plataformas de redes sociales, como Facebook, LinkedIn, Google+, Twitter y Pinterest. Twitter tiene sus propios meta etiquetas para conformar las Twitter Cards, o Tarjetas Twitter, solo que si el robot de Twitter no encuentra esas etiquetas, usará las etiquetas de Open Graph.

Pero, ¿ Por qué Open Graph? Porque te permite personalizar lo que aparece al compartir enlaces de tu sitio web. Puedes colocar una super imagen para compartir, un titulo y un texto, que te permita llegar a más personas.

Y, ¿Por qué compartes? Al compartir puedes:

  • Aumentar la audiencia y llevar más tráfico a tu sitio.
  • Lograr que tu contenido esté a la vista de profesionales que potencialmente puedan ser tus clientes.
  • Beneficiarte de la distribución viral cuando las personas comparten con sus redes sociales.

Para ayudarte en todo esto, he decidido compartir esta información contigo.

¿Qué pasa cuando compartes?

Cuando compartes un enlace en las redes sociales, se genera un extracto de la información en una pequeña ventana, que en Inglés llaman Snippet.  Este extracto usa información de tu página web para poder colocar allí en esa ventana. Los datos acerca de esa información, se llaman metadata. Para ello necesitas una tecnología que ya mencioné: Protocolo Open Graph.

Gracias a Dios, no tenemos que hacerlo a mano. Para WordPress hay varios plugins que te pueden ayudar a definir esto metadata. Yo uso el plugin All in One SEO. Te ayuda a configurar los datos que necesitas para elaborar el extracto o Snippet. Datos como:

  • La imagen de tu artículo o página. og:image
  • El tipo de dato que estás compartiendo, un video, libro, película, compañía, restaurant, etc. La lista es larga. og:type
  • El título de lo que compartes. og:title
  • El enlace de lo que compartes (URL). og:url

Como puedes ver, si no estableces bien esta información, los buscadores de información de Facebook (crawler) escogerá el que más se acerque a lo que está buscando, y si no encuentra, no muestra nada.

IMPORTANTE: Recomiendo primero probar las vistas previas antes de compartir un artículo. No hay una sola herramienta con lo que esta prueba se pueda hacer, así que vamos una por una

 

Facebook

Cada vez que compartes un artículo o nueva información en tu sitio web, el rastreador de Facebook recoge información para elaborar la vista previa, con una imagen, un título y una descripción. Cada vez que cambies alguna de esta información, deberás resetear la vista previa. Esto se logra con el Depurador de errores al compartir. Escribes el enlace web del sitio que estás compartiendo y le das a “Depuración”.

facebook_debug_page

 

Deberías tener una vista previa de tu sitio, más todos los datos que el rastreador de Facebook recoge:

 

facebook_debug

Ahora, pueden pasarte varias cosas:

  • Error: al analizar la URL de entrada, no hay datos en caché o no se han extraído datos–> SCRAPE AGAIN
  • En el tiempo de extracción, te aparece que fue hace varios días, horas o minutos. No te dice hace 2 segundos.  –> SCRAPE AGAIN.
  • Intentaste lo anterior y no te aparece la imagen que quieres. Sigue leyendo.
  • Te da varios errores. Te doy algunas soluciones a continuación.

Si no te gusta la imagen o la información que aparece en la vista previa, puedes seleccionar (WordPress) una imagen nueva y guardarla como imagen destacada en tu artículo o página. Si no hay presente etiquetas Open Graph, por lo general el rastreador de Facebook toma esta imagen. Lo mejor es que instales un plugin que te ayude a establecer las etiquetas Open Graph para cada elemento de la vista previa. Yo uso el plugin All in One Pro plugin.  Puedes instalar ese o cualquier otro que te sirva para ese fin.

¿Qué pasa si obtienes mensajes de error? Eso es porque el rastreador no encuentra los elementos con las etiquetas adecuadas. Por eso es mejor utilizar un plugin.

Cuando la vista previa sea la que quieres, compártelo en Facebook.

Tamaño de las imágenes al compartir en Facebook

Siguiendo las mejores práctica de Facebook,deberías utilizar imágenes del al menos 1200 x 630 pixeles, para un mejor display y resolución. Como mínimo deberías usar 600 x 315 pixeles. Las imágenes pueden pesar hasta 8MB.

Si tu imagen es más pequeña que 600x315 pixeles, Facebook la mostrará más pequeña en la vista previa. Pero no puede ser más pequeña que 200 x 200 pixeles porque Facebook colocará otra imagen que pueda cumplir con las medidas y las etiquetas y además, dará un error en el Depurador de errores.

Posibles errores del Depurador de Facebook

  1. Error al analizar la URL de entrada, no hay datos en caché o no se han extraído datos. Solución: No pasa nada. Este anuncio de error sale cuando se utiliza por primera vez el depurador de errores porque no hay ninguna vista previa en caché. Vuelve a hacer “SCRAPE AGAIN”.
  2. Error: La propiedad “og:image” se debe proporcionar de forma explícita, incluso si un valor se puede deducir a partir de otras etiquetas. Solución: Esto significa que no hay imagen seleccionada con la etiqueta de Open Graph. Usa un plugin para seleccionarla.
  3. Error: La propiedad “og:url” se debe proporcionar de forma explícita, incluso si un valor se puede deducir a partir de otras etiquetas. Esto significa que no hay un enlace web seleccionado con la etiqueta de Open Graph. Usa un plugin para seleccionarlo.
  4. Error: La propiedad “og:title” se debe proporcionar de forma explícita, incluso si un valor se puede deducir a partir de otras etiquetas. Esto significa que no hay ningún título seleccionado con la etiqueta de Open Graph. Usa un plugin para seleccionarlo.
  5. La propiedad “og:description” se debe proporcionar de forma explícita, incluso si un valor se puede deducir a partir de otras etiquetas. Esto significa que no hay ninguna descripción seleccionada con la etiqueta de Open Graph. Usa un plugin para seleccionarla.
  6. Error: og:image no se ha definido, no se pudo descargar o no era lo suficientemente grande. Por favor definir una imagen elegida mediante la etiqueta meta og:image,  y utilizar una imagen que sea al menos 200x200px y sea accesible desde Facebook. En su lugar se colocar ‘http://www.tusutioweb.com/wp-content/uploads/otra_imagen.jpg‘.  Consultar http://developers.facebook.com/docs/sharing/webmasters/crawler para más sugerencias y solucionar problemas. Solución: la imagen que has seleccionado es muy pequeña. Lo ideal es que sea mayor de al menos 1200 x 630 pixeles, para un mejor display y resolución. Como mínimo deberías usar 600 x 315 pixeles. Si aún no lo toma, coloca las medidas de la imagen en la plantilla que te deja el plugin. Yo uso All in One SEO. Puedes buscar cualquier otro plugin que haga los mismo.
  7. Error: Share App ID Missing. The ‘fb:app_id’ property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog. Solución: Si eres el desarrollador del sitio web, ve a Facebook developers page y sigue las instrucciones para crear una aplicación y obtnener un ID. Lo copias y lo pegas en tu sitio web o en el formulario del  plugin que estés usando par manejar los Open Graph. Incluso haciendo esto, este error te puede seguir saliendo. Lo bueno es que no tiene ningún efecto en tu vista previa. Te lo puedes saltar por ahora.

 

LinkedIn

Si ya estás usando el protocolo Open Graph para describir los datos de tu vista previa, será fácil generarla con LinkedIn, ya que el rastreador de LinkedIn buscará esta info. Los requerimientos de imagen para que salgan bien en la vista previa son:

  • Max ftamaño archvo: 1 MB
  • Dimensiones Mínimas: 80 x 150 pixels
  • Proporción  recomendada: 4:1 or 1:4

Pero lo que realmente pasa con LinkedIn que guarda la vista previa por una semana y no tiene un depurador como Facebook. Pero hay un truco. El truco es limpiar el caché del rastreador de LinkedIn.  Esto se hace añadiendo un nuevo parámetro a la dirección web, para que la vuelve a rastrear como si fuera otra página y … Voilá! tendrás un refrescamiento de la imagen y de los datos nuevos que hayas introducido

Los pasos son los siguientes:

  1. Ve al perfil de LinkedIn y le das a “Comparte una actualización”. Eso está en la pestaña Inicio de tu perfil.
  2. En la caja de texto escribe la dirección web que quieres compartir y le añades ?1 ANTES DE COMPARTIR.
  3. Le das a “ENTER”  (y no Compartir) y ahora LinkedIn refresca el caché de tu sitio y saca la nueva información.
  4. Si no se te da la imagen que esperas, dale a la X y borra y la vista previa y vuelve a darle Enter. Asegúrate también que has definido las etiquetas de imagen, título y descripción con un plugin.
  5. Cuando obtengas la imagen previa que quieres, quítale el ?1 y dale “Enter”, confirma que tiene la imagen que quieres y ahora si, dale a “Compartir”.

share update linkedinExample:

Original link: http://www.gabydiaz.com/
“New” link: http://www.gabydiaz.com?1 <—- add ?1

 

Twitter

Para ayudar a los usuarios a personalizar sus vistas previas de los enlaces que compartir, Twitter desarrolló la tecnología de las llamadas Twitter Cards,que son una vista previa del sitio web, parecido a lo que sucede con Facebook. Con estas cartas puedes agregar fotos, videos e imágenes que le den vida a tu noticia. El ratreador de Twitter busca los datos en la página o noticia y mostrará los datos que estén codificados.

Si ya estás utilizando Open Graph, el rastreador de Twitter buscará esos datos para mostrarlos en la vista previa. Si utilizas un plugin para introducir estos datos, te será todo más fácil. Yo uso All in One SEO Pro plugin.

Además también puedes validar la info que irá a mostrarse en la vista previa. Aquí te indico cómo:

  1. Necesitas una cuenta de Twitter.
  2. Si usas WordPress, utiliza un plugin para que introduzcas los metadatos para el título, la imagen y el texto.
  3. Selecciona también el tipo de tarjeta usando el plugin. Puedes escoger entre una pequeña y la grande.
  4. Usa el  Twitter card validator tool  para validar la vista previa que aparecerá. Escribe la dirección web que piensas compartir en la caja de texto.
  5. Después de validar la tarjeta, y que aparezca como quieres, ya la puedes tuitear. Si no te aparece como quieres, es que has fallado en llenar algún dato en los datos que hay que rellenar en la sección de social metadata del plugin.
  6. Usa el Twitter Card analytics para medir los resultados.

Tamaños de imágenes a compartir en Twitter

  • Summary card: la imagen debe tener al menos 120 x 120px y menos de 1MB. Twitter la transformará en una imagen cuadrada. Toma esto en cuenta si lleva texto, para que se pueda leer.
  • Summary Card with large image: Esta es la mejor, porque lleva la imagen más grande y visible. La imagen debe ser al menos 280px de ancho, al menos 150px de alto y menos de 1MB.

Puedes considerar el truco de añadir algo de texto a la imagen para que impulsar más el mensaje.

Google+

El rastreador de Google+ recoge de forma natural todo lo que esté en la página o el artículo. Al igual que los demás, obtiene los datos para la vista previa, de los datos de Open Graph metadata. Puedes añadir estos datos a través de un plugin.

Para cambiar la imagen en la vista previa de Google+, sigue los pasos:

  1. Cambia los detalles que quieres cambiar en tu artículo o página a través de un plugin que utilice Open Graph metadata.
  2. Ve a tu perfil de Google+ y haz click en Home. Escribe tu sitio web en la caja de texto que aparece para compartir noticias.
  3. Presiona Enter y espera a ver si aparece la vista previa que quieres. NO compartas todavia.
  4. Si la vista previa es la que deseas, presiona Compartir.
  5. Si la vista no es la que deseas, vuelve a presionar Enter, y si no cambia, es que hay algún dato que no has establecido bien en tus datos de social sharing metadata del plugin que hayas escogido. Asegúrate que has respetas los tamaños mínimos que exige Google+ (mira más abajo)
  6. Para cambiar la imagen, repite todo otra vez.

Según Google+, los tamaños de las imágenes deben ser:

  • Al menos 400px de ancho. Puede ser más.
  • Al menos 120px de alto. Puede ser más.
  • Una proporción no mayor de 5:2 (ancho:alto)

La vista previa puede verse así:

sharing_google

Vista previa de mi artículo en Google+

Problema: ¿por qué no aparece la imagen en la vista previa?

Porque la imágen puede ser muy pequeña o no lo suficientemente cuadrada para que pueda ser incluida en la vista previa. Incluso si están definidas en los metadatos sociales del plugin. La altura mayor que 120px, y la anchura mayor que 100px, y el radio debe ser mayor que 3.0.

Resumiendo

Para que obtengas la vista previa que quieres cuando compartes tus noticias y páginas de tu sitio web, es necesario que inviertas un poco de tiempo en establecer cuáles son los datos que se vas a compartir. Si tienes que elaborar una nueva imagen o foto para compartir, házlo. Valdrá la pena. Se verá mejor y tendrá más impacto.

No dejes al azar algo que puedes controlar. Usa un plugin para ello. En todo el artículo en recomendado All in One SEO Pro plugin. Puedes usar cualquier otro con este fin.

 Nota: los enlaces para este plugin son enlaces afiliados. Yo solo recomiendo plugins que utilizo y me funcionan bien. El precio es el mismo que si lo compras a través de otro enlace.

¿Te gustó? Compártelo para que otras personas arreglen este problema.

Dime, ¿haz tenido problemas diferentes a los que menciono en este artículo?

Escrito con amor,

Gaby

Share This