Tip: ¿Por qué Facebook no detecta el thumbnail de mis posts?
16 may 2012
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.
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 en OGP pero el único que debes cargar para la imagen es el siguiente:
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 sin http://www. y la / final, por ejemplo: pisitoenmadrid.com/blog/2012/05/los-mejores-dibujos-de-draw-something.
Facebook y sus misterios 
Si tenéis problemas con algo, ¡coméntalo!
) Como sabéis son tutoriales paso a paso que empiezan a muy bajo nivel y van subiendo conforme avanza el artículo.
