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

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

Facebook no puede comprender mis og:imagearchivos y he probado todas las soluciones habituales. Estoy empezando a pensar que podría tener algo que ver conhttps://...

• He consultado http://developers.facebook.com/tools/debug y no tengo advertencias ni errores.
• Se trata de encontrar las imágenes que vinculamos en " og:image", pero se muestran en blanco. Sin embargo, cuando hacemos clic en la (s) imagen (es), sí existen y se necesita directamente.
• Muestra una imagen: una imagen alojada en un servidor que no es https.
• Hemos probado imágenes cuadradas, jpegs, pngs, tamaños más grandes y tamaños más pequeños. Hemos puesto las imágenes en public_html. Cero están apareciendo.
• No es un error de almacenamiento en caché, porque cuando agregamos otro og:imageal meta, el linter de FB lo encuentra y lo lee. Muestra una vista previa. La vista previa está en blanco. La única excepción que estamos obteniendo es para las imágenes que no están en este sitio web.
• Pensamos que tal vez había algún anti-lixiviación cpanelo .htaccessque impedía que las imágenes aparecieran, así que lo verificamos. No había. Incluso hicimos un rápido < img src="[remote file]" >en un servidor completamente diferente y la imagen se muestra bien.
• Pensamos que tal vez era la og:typeu otra rareza con otra metaetiqueta. Los eliminamos todos, uno a la vez y lo comprobamos. 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 extrayendo imágenes porque estamos usando las mismas páginas de productos para múltiples productos (cambiándolas en función del valor de obtención, es decir, "detalles.php? Id = xxx") pero todavía está obteniendo una imagen (de una url diferente).
• Dejando cualquiera og:imageo image_src apagado, FB no encuentra ninguna imagen.

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

Estas son las metaetiquetas:

<meta property="og:title" content="[The product name]" /> 
<meta property="og:description" content="[the product description]" /> 
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />
<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" />
<meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" />
<meta property="og:site_name" content="[our site name]" />      
<meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/>
<meta name="title" content="[The product name]" />
<meta name="description" content="[The product description]" />
<link rel="image_src" href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta name="keywords" content="[four typical keywords]">
<meta name="robots" content="noarchive">

En caso de que lo desee, aquí hay un enlace a una de nuestras páginas de productos en las que hemos estado trabajando. [Enlace acortado para tratar de evitar que esto entre en los resultados de búsqueda de nuestro sitio]: http://rockn.ro/114

EDITAR ----

Utilizando la herramienta de raspado "ver lo que ve Facebook", 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.

EDITAR 2 ----

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

SOLUCIÓN PUBLICADA ----

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. Hacemos referencia a la http://img.otherdomain.com/[like-image.jpg]imagen de coordinación en og:imagecada página de producto. Luego tuvimos que pasar por FB Linter y ejecutar CADA enlace para actualizar los datos de OG. Esto funcionó, pero la solución es una solución de curita, y si el httpsproblema se soluciona y volvemos a usar el dominio https natural, FB habrá almacenado en caché las imágenes de un sitio web diferente, lo que complicará las cosas. Esperemos que esta información ayude a salvar a otra persona de perder 32 horas de codificación de su vida.

Me encontré con el mismo problema y lo informé como un error en el sitio de desarrolladores de Facebook. Parece bastante claro que los og:imageURI que usan HTTP funcionan bien y los URI que usan HTTPS no. Ahora han reconocido que están "investigando esto".

Actualización: a partir de 2020, el error ya no es visible en el sistema de tickets de Facebook. Nunca respondieron y no creo que este comportamiento haya cambiado. Sin embargo, especificar HTTPS URI en og:image:securesí parece estar funcionando bien.

Algunas propiedades pueden tener metadatos adicionales adjuntos. Estos se especifican de la misma manera que otros metadatos con propertyy content, pero propertytendrán más:

La og:imagepropiedad 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 alto.

Un ejemplo de imagen completa:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />

Entonces necesitas cambiar og:image propiedad de sus URL HTTPS aog:image:secure_url

Ex:

HTTPS META TAG PARA IMAGEN:

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

HTTP META TAG PARA IMAGEN:

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

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

Espero que esto te ayude.

EDITAR: no olvide hacer ping a los servidores de Facebook después de actualizar sus códigos - URL Linter

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

Pero cambiar og:imagea og:image:urlfuncionó para mí. Espero que esto ayude a cualquiera que se enfrente a 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 era casi 4: 1. Utilicé Gimp para recortarlo exactamente a 3: 1 y listo, mi logotipo ahora se muestra en FB.

tl; dr - ten paciencia

Terminé aquí porque estaba viendo imágenes en blanco desde un sitio https. Sin embargo, el problema era bastante diferente:

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

[ https://developers.facebook.com/docs/sharing/best-practices/#precaching]

Durante las pruebas, Facebook tardó unos 10 minutos en mostrar finalmente la imagen renderizada. Entonces, mientras me rascaba la cabeza y arrojaba etiquetas og al azar en Facebook (y sospechaba del problema https mencionado aquí), todo lo que tenía que hacer era esperar.

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

Todavía me pregunto qué les lleva tanto tiempo ...

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

<html prefix="og: http://ogp.me/ns#">

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. Revisé todos los pasos descritos en la pregunta y las respuestas, pero el problema persistió.

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

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

Facebook nos da las siguientes recomendaciones a partir de hoy :

Utilice imágenes de al menos 1200 x 630 píxeles para 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 hasta 8 MB de tamaño.

Por lo tanto, hay un límite superior de 8 MB.

Como descubrí 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 1x1)
   1. La imagen está vinculada a su imagen original; no tiene sentido presionarla
   2. Presione a la derecha y vea la imagen (obtendrá algo como https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...)
4. Active la pestaña Red en Firebug / Developer Tools, actualice la página si es necesario
5. Obtendrá x-error-detailencabezado de respuesta con explicación

Por ejemplo, en mi caso fue 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:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body style="margin: 0px;"><img style="-webkit-user-select: none; cursor: -webkit-zoom-in; " src="https://[yourdomain].com/[yourfilename].jpg" width="1078" height="718"></body>
</html>

Se trata de un error en la representación previa, o se supone que está configurado en su proxy para no utilizar la representación previa *.jpg solicitudes (incluso si son solicitadas por el bot de Facebook).

Es realmente difícil darse cuenta de esto, ya que la representación previa solo se usa en ciertos encabezados de agente de usuario.

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

Una vez me aseguré de que el dominio fuera el mismo og:urly og:imagefuncionó.

Espero que esto ayude.

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

Síntomas similares (Facebook et al no obtienen correctamente og: imagen y otros activos a través de 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 raspará correctamente si falta un certificado intermedio o en cadena. Esto puede llevar a muchas horas perdidas comprobando y volviendo a comprobar todos los cachés y metaetiquetas.

Podría no haber sido su problema, pero podría ser otro con síntomas similares (como el mío). Hay muchas formas de verificar su certificado: la que utilicé: https://www.sslshopper.com/ssl-checker.html

Lo http://saqué de mi og:imagey lo reemplacé con simplemente viejo y www.luego comenzó a funcionar bien.

Puede usar esta herramienta, de Facebook, para restablecer su caché de raspado de imagen y probar qué URL está obteniendo para la imagen de demostración.

Puedo ver que el depurador está recuperando 4 og:imageetiquetas de su URL.

La primera imagen es la más grande y, por lo tanto, tarda más en cargarse. Intente reducir esa 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, recibirá un error que dice: No se pudo cargar la imagen adjunta ()

No olvide actualizar los servidores a través de:

Depurador de Facebook

Y haga clic en "Recopilar nueva información"

Tuve un problema similar hoy, que el depurador compartido me ayudó a resolver. Parece que Facebook no puede (actualmente) comprender imágenes con metadatos XMP incrustados. Cuando reemplacé las imágenes de nuestros artículos con versiones sin metadatos XMP y volví a raspar la página (usando el Depurador de uso compartido), el problema desapareció. Un editor hexadecimal lo ayudará a ver si su imagen contiene metadatos XMP o no.

En mi caso, parece que el rastreador solo está teniendo un error. He intentado:

• Cambiar enlaces a http solamente
• Eliminar el espacio en blanco final
• Volviendo a http por completo
• Reinstalar el sitio web
• Instalar un montón de complementos OG (uso WordPress)
• Sospechar que el servidor tiene una configuración incorrecta extraña que bloquea los bots (porque todos los verificadores de OG no pueden obtener etiquetas y otras solicitudes a mis sitios son inestables)

Ninguno de estos trabajos. Esto me costó una semana. Y de repente de la nada parece funcionar de nuevo.

Aquí está mi investigación, si alguien vuelve a encontrar este problema:

• ¿Qué hace que los verificadores de Open Graph no puedan detectar datos de Open Graph?
• ¿Cómo saber qué bots de un sitio web, si no tengo acceso de root al alojamiento, leerán? t
• 👍 ¿Qué hace que los verificadores de Open Graph no puedan detectar datos de Open Graph? - Encriptemos el apoyo de la comunidad
• 👍 Crawler no puede obtener imágenes, pero agregar una cadena de consulta nueva y única puede hacer que funcione por primera vez: Facebook para desarrolladores

Además, hay más verificadores que no sean el depurador de objetos de Facebook para que usted verifique: OpenGraphCheck.com , Abhinay Rathore's Open Graph Tester , Iframely's Embed Codes , Card Validator | Desarrolladores de Twitter .

OK ... Me doy cuenta de que este hilo es viejo y está abarrotado, pero en caso de que alguien venga como yo luchando para que su etiqueta og: image funcione correctamente en Facebook, este es el truco que funcionó para mí:

NO use este enlace:

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.google.com

para resolver tu problema. O si lo hace, desplácese inmediatamente hacia abajo y haga clic en Scrape VIA API.

https://developers.facebook.com/tools/explorer/?method=POST&path=%3Fscrape%3Dtrue%26id%3Dhttps%3A%2F%2Fwww.google.com&version=v5.0

Hay errores que se muestran en la herramienta del explorador que NO se muestran en la herramienta de "depuración". ¡¡¡Enloquecedor!!! (en mi caso, un espacio en el nombre de archivo de la imagen eliminó mi imagen en silencio en la herramienta de depuración, pero mostró el error en la herramienta del explorador).

Encontré otra razón para que las imágenes og no se muestren en las tarjetas FB. Además, al usar la herramienta FB scraper para depurar las metaetiquetas og , podría confirmar todas las etiquetas requeridas en mi página de WordPress y, sin embargo, obtendría el siguiente error de descarga de archivo,

Proporcionado og: image, <https-link-to-jpg-image> no se pudo descargar. Esto puede suceder debido a varias razones diferentes, como que su servidor utilice una codificación de contenido no compatible. El rastreador acepta codificaciones de contenido desinflado y gzip.

Tenía la vaga sensación de que el formato de la imagen tenía un problema, el enlace a la imagen funcionaba pero el mensaje parece indicar que algo anda mal con la codificación del contenido.

Después de mucha búsqueda, terminé mirando las extensiones de php que se requieren para un servidor de WordPress , y me di cuenta de que el módulo pho-exif no estaba instalado. El módulo exif escribe metadatos exif en todas las imágenes cargadas. Como resultado, las imágenes utilizadas en la etiqueta de imagen FB og no tenían ningún metadato exif asociado con ellas.

Una vez que el módulo exif está habilitado, WordPress permite que los metadatos exif se restablezcan para una imagen (Biblioteca multimedia-> seleccionar e imagen-> Editar más detalles-> Asignar metadatos exif) y la imagen ahora apareció en la tarjeta FB como se esperaba.

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ó:

<meta property="og:url" content="http://yoursiteurl" />
    <meta property="og:image" content="link_to_first_image_if_you_want" />
    <meta property="og:image" content="link_to_second_image_if_you_want" />
    <meta property="og:image:type" content="image/jpeg" /> 
    <meta property="og:image:width" content="400" /> 
    <meta property="og:image:height" content="300" />
    <meta property="og:title" content="your title" />
    <meta property="og:description"  content="your text about homepage"/> 

Después de varias horas de probar y probar cosas ...

Resolví este problema lo más simple posible. Me doy cuenta de que usan "páginas de prueba" dentro de la página de desarrolladores de Facebook que contiene solo las etiquetas "og" y algo de texto en la etiqueta del cuerpo que hace referencia a estas etiquetas og.

Entonces, ¿qué he hecho?

Creé una segunda vista en mi aplicación, que contiene las 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"

Una vez que actualice la metaetiqueta, asegúrese de que el enlace del contenido (imagen) sea la ruta absoluta y vaya aquí https://developers.facebook.com/tools/debug/sharing ingrese el enlace del sitio y haga clic scrape againen la página siguiente