type tutorial open debugger facebook facebook-graph-api facebook-opengraph

facebook - tutorial - og:type



¿Cuál es el ancho y alto mínimo de Facebook Open Graph Images? (14)

Había leído que las imágenes asociadas con una URL determinada en el gráfico abierto de Facebook tenían que ser mayores de 50 x 50

Sin embargo, cuando ejecutamos el depurador de objetos de Facebook, recibimos la siguiente advertencia:

"Tiny og: image: Todas las imágenes a las que hace referencia og: image deben tener al menos 200px en ambas dimensiones. Compruebe todas las imágenes con la etiqueta og: image en la url proporcionada y asegúrese de que cumpla con la especificación mínima".

Nuestra URL es http://www.famousbirthdays.com/people/charlie-chaplin.html y la imagen aparece bajo Object Properties

¿Necesitamos convertir nuestras imágenes a más de 200 x 200? ¿O podemos dejarlo como está? Actualmente es una imagen de 65 x 75.

¡gracias por tu ayuda!

¡Los documentos se han actualizado nuevamente!

og: la imagen ahora puede ser tan grande como quieras - grito

Ellos han recomendado lo siguiente:

  • al menos 600x315 píxeles
  • Idealmente 1.91: 1 en proporción
  • no más grande que 5mb en tamaño de archivo
  • ¡pero TAN GRANDE COMO TÚ ME GUSTA!

Además, no olvide que puede agregar múltiples og: imágenes y dejar que el usuario elija la imagen que quiere usar.

De la página de desarrolladores de Facebook:

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.

Puede encontrar más detalles sobre esto developers.facebook.com/docs/opengraph/howtos/… . Por favor, compruebe el punto número 4

Desde https://developers.facebook.com/docs/plugins/checklist/#opengraphtags

  1. Use etiquetas Open Graph adecuadas para dirigir la distribución

Las etiquetas Open Graph se pueden incluir en el HTML de su página para permitir que el rastreador de Facebook genere mejores vistas previas cuando su contenido se comparte en Facebook.

Las etiquetas básicas de Open Graph que debes implementar son:

Descripción de etiqueta

  1. og: título El título de su artículo, excluyendo cualquier marca.
  2. og: site_name El nombre de su sitio web. eg IMDb no imdb.com.
  3. og: url La URL que es el identificador único para su publicación. Debe coincidir con su URL canónica utilizada para SEO, y no debe incluir variables de sesión, parámetros de identificación de usuario o contadores. Si usa esto de forma incorrecta, los Me gusta y los recursos compartidos no se agregarán para esta URL y se distribuirán en todas las variaciones de la URL.
  4. og: description Una descripción detallada de la pieza de contenido, generalmente entre 2 y 4 oraciones.
  5. og: image La URL de la imagen que desea que aparezca cuando comparte un enlace. Sugerimos que use una imagen de al menos 1200x630 píxeles.

Desde su publicación, parece que desea compartir la publicación utilizando el concepto OG en Facebook. Para ello, el tamaño mínimo de la imagen debe ser 200px (x) 200p x. Esta es una dimensión estándar de FB y si no hay una imagen de tamaño específico disponible, se tomará la siguiente imagen en su página que tenga la misma dimensión.

Tamaño mínimo de la imagen El tamaño mínimo de la imagen es de 200 x 200 píxeles. Si intenta utilizar una imagen más pequeña, verá un error en el Depurador de URL. Consulte este enlace >>

Está bastante claro. No pueden ser más de 130x110px y deben ser de al menos 200px por lado. Eso es completamente posible si almacena su imagen en una TARDIS.

En serio, acabo de toparme con esto, lo que me confundió bastante desde que las páginas pasaron muy bien hace poco. Espero que esto sea un cambio diseñado para el diseño de la línea de tiempo que simplemente no se ha actualizado en la documentación. Lo que no puedo encontrar es que si las imágenes og: ahora deben ser "al menos" 200px por lado, cuál es el máximo y cuál es el tamaño recomendado actual. WTF de hecho.

Scott

Hoy tuve una respuesta mucho más clara a esta pregunta (de la herramienta de depuración Open Graph ):

Pequeño og: imagen: todas las imágenes a las que hace referencia og: image deben tener al menos 200px en ambas dimensiones, con 1500x1500 como preferencia. (El tamaño máximo de imagen es de 5 MB). Verifique todas las imágenes con la etiqueta og: image en la url proporcionada y asegúrese de que cumpla con las especificaciones recomendadas.

og: la imagen debería ser más grande: siempre que og: la imagen no sea lo suficientemente grande. Utilice una imagen de al menos 200x200 y preferiblemente de 1500x1500. (El tamaño máximo de imagen es de 5MB). Imagen ... se usará en su lugar.

Por lo tanto, SÍ , debe convertir sus imágenes de gráfico abierto a al menos 200x200 píxeles, y parece que cuanto más grande, mejor.

Si su imagen es más pequeña que 200x200, Facebook intentará usar una imagen más grande (si) disponible en la página.

La misma información devuelta por el depurador se puede encontrar en la documentación de gráfico abierto, en el tema "Maximizar la distribución del contenido multimedia", elemento 3: etiquetas

Parece ser un error en la especificación. Una solución alternativa es hacer que sus imágenes sean 200px, pero recortar lo que no desea ver, o reducirlo si tiene originales lo suficientemente grandes. Por ejemplo, si su imagen es de 25x25 píxeles, puede agregar 175 px a ambas dimensiones y luego anidar esa imagen dentro de un div que tenga un desbordamiento: propiedad css oculta y ancho / alto de 25x25. No es el más limpio, pero funcionaría.

He abierto un ticket de error con Facebook para abordar la cuestión de la documentación deficiente y descubrir si se trata de una especificación o error real. http://developers.facebook.com/bugs/210269722417284

Si incluso informa una imagen de más de 200x200 (como nueva documentación), el Debuger aún acusa que la imagen no es lo suficientemente grande, la solución es agregar la metaetiqueta siguiente con las dimensiones de la imagen:

Ejemplo:

<meta property="og:image:width" content="500" /> <meta property="og:image:height" content="500" />

Solo sigue estas reglas:

  1. "Use imágenes de al menos 1200 x 630 píxeles para la mejor visualización en dispositivos de alta resolución".
  2. "Trate de mantener sus imágenes lo más cercanas posible a la relación de aspecto de 1.91: 1 para mostrar la imagen completa en Noticias sin ningún recorte".
  3. El ancho preferido de una imagen es 1500 px

Siguiendo los principios anteriores, la imagen preferida tiene un ancho de 1500px y una altura de 786px (que conserva la relación de aspecto de 1.91: 1).

Fuente: developers.facebook.com/docs/opengraph/howtos/…

Tuve el mismo problema. No realicé pruebas exhaustivas, por lo que no puedo decir exactamente cuáles son los requisitos para que aparezcan las imágenes. Puedo decir que cambié mis imágenes a ser> 200x> 200 (específicamente 350x350) y aparecieron después de eso.

Editar: Facebook corrigió su documentación:

De la respuesta de Luciano :

og: la imagen debe tener al menos 200px en ambas dimensiones, con 1500x1500 como preferencia. (El tamaño máximo de imagen es de 5 MB)

Tuve el mismo problema que hice. Uso el sitio de wordpress, así que tuve que soltar el www . Compruebe en su wordpress admin > settings >general para su dirección de sitio / dirección de wordpress, etc. Esto supera otros errores de URL.
En cuanto al problema de la imagen, todo lo que puedo decir es que poner esto en mi archivo de encabezado funcionó para mí. Agregué esto a continuación.

<html prefix="og: http://ogp.me/ns#"> <head> <meta property="og:image" content="http://yourwebsite.com/images/yourimage.jpg"/> <meta property="og:image:width" content="500" /> <meta property="og:image:height" content="500" /> <meta property="og:title" content="your website page title"/> <meta property="og:url" content="http://yourwebsite.com"/> <meta property="og:site_name" content="site name and content etc"/> <meta property="og:description"content="description of site" /> <meta property="og:type" content="Website"/>

EN wordpress, dejé el <title><?php wp_title( ''|'', true, ''right'' ); ?></title> <title><?php wp_title( ''|'', true, ''right'' ); ?></title> allí.

También como se sugirió en otras publicaciones en mi instancia, este código: <link rel="image_src" href="http://URL-TO-YOUR-IMAGE" / > hizo NO FUNCIONAR. Al eliminarlo lo arregló al instante.

Usé una imagen de 500 x 500. Buena suerte ... con suerte puedo salvar el dolor de alguien más.