Por qué Facebook no Detecta las Imágenes de mis Artículos


Por qué Facebook no Detecta las Imágenes de mis Artículos Uno de los grandes motivos por los que las publicaciones de Facebook consiguen un nivel elevado de likes y comentarios, es debido al atractivo de su formato y a que llaman la atención de los usuarios. ¿Cómo? Mostrando una imagen acompañando al título y a las primeras líneas del post. Facebook recoge esta imagen de forma automatizada pero seguro que te ha pasado mil veces que vas a compartir algo y no sale la miniatura del post, sale otra imagen que no tiene nada que ver o peor incluso: no sale ninguna foto. No os preocupéis, esto tiene fácil solución.

¿ Por qué Facebook no Detecta las Imágenes de mis Artículos ?

Facebook lo que hace es recoger las primeras etiquetas del tipo IMG y te las muestra para que elijas la correcta. Puede ocurrir que porque haya funciones javascript que carguen el contenido o impidan su lectura, no pueda mostrarlas. Debido a esto lo mejor es especificar la imagen que quieres que salga en los metadatos de Facebook. Supongo que conocéis los metadatos HTML, etiquetas que deben ir en la cabecera de las páginas HTML, necesarios de cara al SEO y que indican el título, la descripción, tipo de contenido… Pues existen unos equivalente para Facebook: Open Graph Protocol. Al igual que los metadatos HTML deben ir en la cabecera e indican información para que Facebook pueda obtener el título, la descripción o la imagen de los posts, por ejemplo en los compartir.

WordPress

Si usas WordPress la solución es muy sencilla: un plugin. Facebook Like Thumbnail es un plugin que te genera dinámicamente estos metadatos y los prepara para que Facebook no tenga ningún problema. Incluso en la configuración puedes definir un thumbnail por defecto cuando un post no tiene ninguna imagen.

HTML

Si tienes que escribirlo “a pelo” en HTML, puedes ver todos los metadatos de Facebook enOGP pero el único que debes cargar para la imagen es el siguiente:

<meta property=»og:image» content=»http://example.com/image.jpg»/>

Recuerda que debes ponerlo dentro de las etiquetas <head></head>. Por supuesto, si haces esto siempre te mostrará la misma imagen para todos los posts. Si quieres algo dinámico, dependiendo de cómo esté programada tu web o el CMS de tu blog, puedes usar funciones para que carguen diferentes imágenes. Si tenéis algún problema específico, ponlo en los comentarios e intentaré resolverlo.

Posibles problemas

En muchas ocasiones me he vuelto loco para intentar que funcionaran los thumbnails, estando todo bien por mi parte, y es que Facebook tiene muchos errores, problemas de caché, formatos que no le gustan… Por eso os dejo una lista de posibles problemas y herramientas:

    • A Facebook no le gustan los PNGs, usa siempre JGP o GIF.
    • A Facebook no le gustan los espacios en las URLs ni tampoco cuando hay variables después de la imagen.
    • Si te estás volviendo loco porque no sale el thumbnail, usa Lint, la herramienta de debug de Facebook. Introduce la URL de un post y verás la información que Facebook detecta, avisos y errores.
    • Otra curiosidad es que en algunos casos funciona cuando compartes una URL sinhttp://www. y la / final, por ejemplo: pisitoenmadrid.com/blog/2012/05/los-mejores-dibujos-de-draw-something.



Facebook y sus misterios :) Si tienes problemas con algo, ¡coméntalo!

Antes de que te vayas, me gustaría pedirte un pequeño favor; que me ayudes a difundir este artículo para que llegue a más personas. Solamente tienes que compartirlo en tus redes sociales usando los botones de Google+ , Facebook y Twitter que verás más abajo.

¡Muchas gracias!

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.