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


Answers

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)

Question

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!




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 aquí . Por favor, compruebe el punto número 4




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




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.




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




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.



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" />