FB OpenGraph og: la imagen no tira de las imágenes (¿posiblemente https?)

Primero, no creo que esto sea un problema duplicado. He buscado problemas similares o similares en SO extensamente, y debido a la naturaleza de la solución de problemas antes de preguntar, creo que este problema es único.

Facebook no puede entender mis archivos de og:image y he intentado todas las soluciones habituales. Estoy empezando a pensar que podría tener algo que ver con https://...

  • He marcado http://developers.facebook.com/tools/debug y no tengo advertencias o errores.
  • Se trata de encontrar las imágenes a las que hemos vinculado en ” og:image “, pero aparecen en blanco. Sin embargo, cuando hacemos clic en la (s) imagen (es), SI EXISTEN y se toma directamente a ellos.
  • Muestra una imagen, una imagen alojada en un servidor que no es https.
  • Hemos intentado imágenes cuadradas, jpegs, pngs, tamaños más grandes y tamaños más pequeños. Colocamos las imágenes en public_html. Cero están apareciendo.
  • No es un error de almacenamiento en caché, porque cuando agregamos otra og:image al meta, el progtwig de FB encuentra y lee eso. SÍ muestra una vista previa. La vista previa está en blanco. La única excepción que recibimos es para las imágenes que no están en este sitio web.
  • Pensamos que tal vez había algún tipo de anti-lixiviado en cpanel o .htaccess que impedía que aparecieran las imágenes, así que lo verificamos. No había. Incluso hicimos un rápido en un servidor completamente diferente y la imagen se muestra bien.
  • Pensamos que tal vez era el og:type u otra rareza con otra metaetiqueta. Eliminamos todos, uno a la vez y lo revisamos. Ningún cambio. Solo advertencias.
  • El mismo código en un sitio web diferente aparece sin ningún problema.
  • Pensamos que tal vez no estaba tirando imágenes porque estamos usando las mismas páginas de productos para varios productos (cambiándolas en función del valor de obtención, es decir, “details.php? Id = xxx”) pero todavía estamos tirando de uno imagen (desde una url diferente).
  • Dejando off og:image o image_src off, FB no encuentra ninguna imagen.

Estoy al final de mi cuerda. Si digo cuánto tiempo yo y otros hemos gastado en esto, te sorprenderías. El problema es que esta es una tienda en línea. Absolutamente, positivamente no podemos tener imágenes. Tenemos que. Tenemos diez o más sitios … Este es el único con problemas de og:image . También es el único en https , así que pensamos que tal vez ese era el problema. Pero no podemos encontrar ningún precedente en la web para eso.

Estas son las meta-tags:

                 

En caso de que lo desee, aquí hay un enlace a una de nuestras páginas de productos en el que hemos estado trabajando. [Enlace acortado para tratar de frenar esta obtención de resultados de búsqueda para nuestro sitio]: http://rockn.ro/114

EDITAR —-

Utilizando la herramienta raspadora “ver lo que Facebook ve”, pudimos ver lo siguiente:

 "image": [ { "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png" }, { "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png" }, { "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" } ], 

Probamos todos los enlaces que encontró para una sola página. Todas eran imágenes perfectamente válidas.

EDIT 2 —-

Probamos una prueba y agregamos un subdominio al sitio web NONSECURE (desde el cual las imágenes son realmente visibles a través de Facebook). Subdominio fue http: // img. [Nonsecuresite] .com. Luego colocamos todas las imágenes en la carpeta principal del subdominio y las referenciamos. No haría esas imágenes en FB. Sin embargo, aún extraerá las imágenes a las que se hizo referencia en el dominio principal no seguro.

TRABAJO PUBLICADO —-

Gracias a Keegan, ahora sabemos que esto es un error en Facebook. Para solucionarlo, colocamos un subdominio en un sitio web distinto de HTTPS y volcamos todas las imágenes en él. Hicimos referencia a la imagen http://img.otherdomain.com/[like-image.jpg] coordinación en og:image en cada página de producto. Luego tuvimos que pasar por FB Linter y ejecutar CADA enlace para actualizar los datos OG. Esto funcionó, pero la solución es una solución de curita, y si el problema de https es reparado y volvemos a usar el dominio natural de https, FB habrá almacenado las imágenes en caché desde un sitio web diferente, lo que complicará las cosas. Esperemos que esta información ayude a evitar que otra persona pierda 32 horas de encoding de su vida.

Me encontré con el mismo problema y lo reporté como un error en el sitio del desarrollador de Facebook. Parece bastante claro que los URI de og: image que usan HTTP funcionan bien y que los URI que usan HTTPS no. Ahora han reconocido que están “investigando esto”.

El error se puede ver aquí: https://developers.facebook.com/bugs/260628274003812

Algunas propiedades pueden tener metadatos adicionales adjuntos. Estos se especifican de la misma manera que otros metadatos con property y content , pero la property tendrá extra:

La propiedad og:image tiene algunas propiedades estructuradas opcionales:

  • og:image:url – Idéntico a og: imagen.
  • og:image:secure_url : una url alternativa para usar si la página web requiere HTTPS.
  • og:image:type – Un tipo MIME para esta imagen.
  • og:image:width – El número de píxeles de ancho.
  • og:image:height – El número de píxeles de altura.

Un ejemplo de imagen completa:

      

Por lo tanto, debe cambiar la propiedad og:image para sus URL HTTPS a og:image:secure_url

Ex:

HTTPS META TAG PARA IMAGEN:

  

HTTP META TAG PARA IMAGEN:

  

Fuente: http://ogp.me/#structured <- Puede visitar este sitio para obtener más información.

Espero que esto te ayude.

EDITAR: No te olvides de hacer ping a los servidores de Facebook después de actualizar tus códigos – URL Linter

No sé, si es solo conmigo, pero para mí og:image no funciona y elige el logotipo de mi sitio, aunque el depurador de Facebook muestra la imagen correcta.

Pero cambiar og:image to og:image:url funcionó para mí. Espero que esto ayude a cualquier otra persona que enfrenta un problema similar.

Llegué aquí de Google, pero esto no fue de mucha ayuda para mí. Resultó que hay una relación de aspecto mínima de 3: 1 requerida para el logotipo. El mío fue casi 4: 1. Usé Gimp para recortarlo exactamente 3: 1 y listo – mi logotipo ahora se muestra en FB.

tl; dr – ser paciente

Terminé aquí porque veía imágenes en blanco publicadas desde un sitio https. El problema fue bastante diferente:

Cuando el contenido se comparte por primera vez, el rastreador de Facebook raspará y almacenará en caché los metadatos de la URL compartida. El rastreador debe ver una imagen al menos una vez antes de poder renderizarla. Esto significa que la primera persona que comparte un contenido no verá una imagen renderizada

[ https://developers.facebook.com/docs/sharing/best-practices/#precaching%5D

Mientras probaba, Facebook tardó unos 10 minutos en mostrar finalmente la imagen renderizada. Así que mientras me estaba rascando la cabeza y arrojando tags de og al azar en Facebook (y sospechando el problema de https mencionado aquí), todo lo que tenía que hacer era esperar.

Como esto podría impedir que las personas compartan tus enlaces por primera vez, FB sugiere dos formas de eludir este comportamiento: a) ejecutar el Depurador OG en todos tus enlaces: la imagen se almacenará en caché y estará lista para compartir después de ~ 10 minutos o ) especificando og: image: width y og: image: height. (Lea más en el enlace de arriba)

Todavía me pregunto qué les llevará tanto tiempo …

Tuve el mismo error y nada de lo anterior me ayudó, así que traté de seguir la documentación original de Open Graph Protocol y agregué el atributo de prefijo a mi etiqueta html y todo se volvió increíble.

  

Tuve problemas similares Eliminé la propiedad = “og: image: secure_url” y ahora se eliminará con solo og: image. A veces menos es más

Descubrí otro escenario que puede causar este problema. Pasé por todos los pasos descritos en la pregunta y las respuestas, todavía el problema se mantuvo.

Revisé mis imágenes y descubrí que algunas de mis publicaciones tenían imágenes en miniatura demasiado grandes en og:image en el rango de varios miles de píxeles y varios megabytes.

Esto sucedió debido a la migración reciente de WP a Jekyll, optimicé mis imágenes con un gulp, pero usé las imágenes originales en og: imagen por error.

Facebook nos da las siguientes recomendaciones a partir de hoy :

Use imágenes de al menos 1200 x 630 píxeles para obtener la mejor visualización en dispositivos de alta resolución. Como mínimo, debe usar imágenes de 600 x 315 píxeles para mostrar las publicaciones de la página de enlace con imágenes más grandes. Las imágenes pueden tener un tamaño de hasta 8 MB.

Entonces, hay un límite superior de 8 MB.

Me encontré con el mismo problema y luego noté que tenía un dominio diferente para el og:url

Una vez que me aseguré de que el dominio fuera el mismo para og:url y og:image funcionaba.

Espero que esto ayude.

No olvide actualizar los servidores a través de:

Depurador de Facebook

Y haga clic en “Recostackr nueva información”

En mi caso, el problema consistía en no proporcionar CA Root Certificate . Lo descubrí después de usar: https://www.ssllabs.com/ssltest/analyze.html para analizar la configuración de SSL.

Veo que el depurador está recuperando 4 og:image tags de og:image de su URL.

La primera imagen es la más grande y, por lo tanto, tarda más en cargarse. Pruebe reducir la primera imagen o cambie el orden para mostrar primero una imagen más pequeña.

Además, este problema también ocurre cuando agrega una historia generada por el usuario (donde no usa og: image). Por ejemplo:

 POST /me/cookbook:eat? recipe=http://www.example.com/recipes/pizza/& image[0][url]=http://www.example.com/recipes/pizza/pizza.jpg& image[0][user_generated]=true& access_token=VALID_ACCESS_TOKEN 

Lo anterior solo funcionará con http y no con https. Si usa https, obtendrá un error que dice: No se pudo cargar la imagen adjunta ()

Como encontré accidentalmente, la imagen en blanco transparente viene con un encabezado de respuesta que indica la posible causa del problema.

  1. Vaya al depurador en https://developers.facebook.com/tools/debug/og/object/
  2. Pon tu URL
  3. En la parte inferior, Facebook muestra su “imagen” (GIF transparente 1×1)
    1. La imagen está vinculada a su imagen original, no tiene sentido presionarla
    2. Presiona a la derecha y ve la imagen (obtendrás algo como https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=... )
  4. Active la pestaña Red en firebug / herramientas de desarrollador, actualice la página si es necesario
  5. Obtendrá un encabezado de respuesta x-error-detail con explicación

Por ejemplo, en mi caso era una Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

El verdadero problema en mi caso estaba relacionado con prerender.io .

Como resultado, si la imagen se solicita a través de prerender, se convierte a HTML. Algo como esto:

      

Es un error en prerender, o se supone que debe estar configurado en su proxy para no usar prerender para solicitudes *.jpg (incluso si el bot de Facebook lo solicita).

Es realmente difícil notar esto, ya que prerender se usa solo en ciertos encabezados de agente de usuario.

Por lo que observé, veo que cuando su sitio web es público y aunque la url de la imagen es https, simplemente funciona bien.

Para mí esto funcionó:

         

Síntomas similares (Facebook y otros no recuperan correctamente og: imagen y otros activos sobre https) pueden ocurrir cuando el certificado https del sitio no es totalmente compatible.

El certificado https de su sitio puede parecer válido (tecla verde en el navegador y todo), pero no se borrará correctamente si falta un certificado intermedio o de cadena. Esto puede llevar a muchas horas perdidas verificando y volviendo a verificar todas las cachés y metatags.

Puede que no haya sido tu problema, pero podría ser otro con síntomas similares (como el mío). Hay muchas maneras de verificar tu certificado, el que usé: https://www.sslshopper.com/ssl-checker.html

Después de varias horas de pruebas e intentando cosas …

Resolví este problema lo más simple posible. Noté que usan “páginas de prueba” dentro de la página de desarrolladores de Facebook que contiene solo las tags “og” y algún texto en la etiqueta del cuerpo que hace referencia a estas tags.

Entonces, ¿qué he hecho?

Creé una segunda vista en mi aplicación, que contiene estas mismas cosas que usan.

¿Y cómo sé que Facebook está accediendo a mi página para poder cambiar la vista? Tienen un agente de usuario único: “facebookexternalhit / 1.1”

Intereting Posts