Imagen de enlace de publicación de Facebook

95

Cuando alguien publica un enlace en Facebook, un script generalmente escanea ese enlace en busca de imágenes y muestra una miniatura rápida junto a la publicación. Sin embargo, para ciertas URL (incluida la mía), FB no parece recoger nada, a pesar de que hay varias imágenes en esa página.

Leí que FB prefiere la etiqueta rel "image_src" para la imagen que el usuario desea especificar, pero esto tampoco genera esa miniatura para mi sitio.

Mi URL va directamente al DNS y no se reenvía, por lo que tampoco imagino que ese pueda ser el problema.

¿Alguien tiene una idea de por qué FB no puede generar miniaturas de mi sitio?

facebook thumbnails GEOCHET
fuente
Sería útil si nos proporcionara un enlace a su sitio (u otro que no funcione); podría provocar algunas ideas.
Nick Fortescue
¡Aquí puedes ver cómo funciona! Lo construyo usando PHP + jQuery. El código fuente está disponible para descargar. ¡Espero que lo disfrutes! lab.leocardz.com/facebook-link-preview-php--jquery
Leonardo Cardoso
y si desea hacer lo mismo en Google Plus, aquí está el enlace de mejor referencia que pude encontrar: stackoverflow.com/questions/7985398/…
cregox
posible duplicado de ¿Cómo selecciona Facebook Sharer las imágenes?
dcorking

Respuestas:

119

La forma más sencilla es simplemente una etiqueta de enlace:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

Pero hay algunas otras cosas que puede agregar a su sitio para hacerlo más compatible con las redes sociales:

Etiquetas de gráfico abierto

Las etiquetas Open Graph son etiquetas que agregas a <head>tu sitio web para describir la entidad que representa tu página, ya sea una banda, un restaurante, un blog o cualquier otra cosa.

Una etiqueta de Open Graph se ve así:

<meta property="og:tag name" content="tag value"/>

Si usa etiquetas Open Graph, se requieren las siguientes seis:

  • og:title - El título de la entidad.
  • og:type- El tipo de entidad. Debe seleccionar un tipo de la lista de tipos de Open Graph.
  • og:image- La URL de una imagen que representa la entidad. Las imágenes deben tener al menos 50 píxeles por 50 píxeles. Las imágenes cuadradas funcionan mejor, pero puede usar imágenes hasta tres veces más anchas que altas.
  • og:url- La URL canónica y permanente de la página que representa a la entidad. Cuando utiliza etiquetas de Open Graph, el botón Me gusta publica un enlace en og:urllugar de la URL en el código del botón Me gusta.
  • og:site_name - Un nombre legible por humanos para su sitio, por ejemplo, "IMDb".
  • fb:adminso fb:app_id- Una lista separada por comas de las ID de Facebook de los administradores de la página o una ID de la aplicación de la plataforma de Facebook. Como mínimo, incluya solo su propia identificación de Facebook.

Puede encontrar más información sobre las etiquetas Open Graph y detalles sobre la administración de su página en la documentación del protocolo Open Graph.

http://developers.facebook.com/docs/reference/plugins/like

WyrdNEXUS
fuente
5
Recibí este error de la herramienta de pelusa. All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.. Just an fyi
Trevor
He agregado etiquetas og en mi código y cuando lo probé con la herramienta de depuración de objetos og de facebook, me muestra la información correcta tal como la guardé en las etiquetas og, pero cuando trato de vincular la página en mi cuenta de Facebook, muestra el copia en caché solamente. ¿Cuánto tiempo fb mantiene la copia en caché? ¿Hay alguna otra forma de vaciar la copia en caché?
KAsh
Solo para informarle, la única forma de agregar una imagen a una publicación cuando se usa AppLinks ( applinks.org ) dentro de la aplicación de Facebook es usar la etiqueta <link>, usar una etiqueta <meta> con og: image NO funcionará .
emerino
Esto tiene una lista de tipos, etc., y tiene alguna otra información útil.
Wilf
61

Sé que esta pregunta es antigua, pero recientemente me enfrenté al mismo problema y lo estuve dando vueltas y vueltas durante un par de semanas. Varias búsquedas en Google arrojaron mucha información útil, pero la mayor parte se centró en las etiquetas Open Graph, que no me interesaba usar. Resulta que mi sitio tuvo varios problemas, pero estos son algunos de los conceptos básicos.

  1. Como dijo EightyEight, asegúrese de que su HTML sea válido, y lo mismo ocurre con su javascript y el código del lado del servidor (PHP, ASP, etc.). Tuve un pequeño error de PHP en un fragmento de código que se estaba ejecutando como una llamada separada al servidor desde la página principal. Debido a una serie de coincidencias extrañas, ese código generaba un error 500, pero SOLO para IE6 y motores de análisis estrictos como el validador W3C y el rastreador de páginas de Facebook. El problema no apareció en los navegadores modernos (Chrome 4, FF 3.5, IE 8, etc.), así que no lo vi de inmediato, pero los clientes más antiguos / más estrictos mostraban el 500 cada vez y esa era la razón principal por la que FB no estaba rastreando nuestra página (cuando todo lo demás parecía estar correcto).

  2. Con respecto a la respuesta de Randy, tiene razón en que Facebook mantendrá una copia antigua en caché de su página mucho después de que la haya actualizado. FB afirma que solo se mantiene durante 24 horas, pero experimenté tiempos mucho más largos que eso. Afortunadamente, FB ha lanzado su herramienta "URL Linter" que le mostrará una vista previa de cómo aparecerá su página cuando se comparta en FB, y forzará a FB a actualizar instantáneamente la caché de su página. Esta fue una herramienta para salvar vidas. Puede encontrarlo en http://developers.facebook.com/tools/lint/

  3. Con respecto a la herramienta URL Linter, tenga en cuenta que cada variación de una URL se almacena en caché por separado en Facebook, por lo que "www.example.com" no es lo mismo que "example.com". Además, las mayúsculas únicas también se almacenan, por lo que "ExampleOne.com" no es lo mismo que "exampleone.com". (Esto generó mucha confusión entre mi cliente y yo cuando me pareció que el caché se había actualizado correctamente y el cliente afirmó que no estaban viendo las actualizaciones. Resulta que estaba mirando exampleone.com y había usado Linter para actualizar el caché, pero estaban viendo exampleOne.com que no había enviado a Linter. Como resultado, terminé enviando bastantes variaciones de la URL a Linter solo para cubrir las bases).

  4. El consejo de WyrdNEXUS de usar la etiqueta de enlace image_src es acertado. Esto le permite estar seguro de que FB está raspando la mejor imagen posible para su página. Existen algunas pautas diferentes sobre las especificaciones que debe tener el archivo de imagen, pero he usado con éxito una imagen cuadrada de 128px y también he visto una imagen de 130x97. Aquí está la documentación oficial de Facebook de http://developers.facebook.com/docs/reference/plugins/like/ :

    Las imágenes deben tener al menos 50 píxeles por 50 píxeles. Las imágenes cuadradas funcionan mejor, pero puede usar imágenes hasta tres veces más anchas que altas.

    Obviamente, FB cambiará el tamaño de una imagen grande por usted, pero casi siempre obtendrá mejores resultados si lo cambia usted mismo de antemano.

  5. Con respecto al enlace de Mike Cooper al artículo de eHow, evite usar el paso # 1 en ese artículo. Fue un consejo válido cuando se escribió el artículo y cuando Mike publicó el enlace, pero ahora es mejor usar la herramienta URL Linter para obtener una vista previa de cómo se verá su página cuando se comparta. Al usar Linter, no hará que FB almacene en caché una copia (potencialmente) incorrecta de la página antes de tener la oportunidad de modificarla.

OneRuler
fuente
Estuve luchando durante días y no tenía mi miniatura actualizada correctamente. La herramienta Facebook Linter resolvió inmediatamente mi problema: ¡consiguió que Facebook actualizara su caché! ¡Hurra!
Hady
Muchas gracias por esa herramienta linter. Algunas publicaciones en mi blog mostraban imágenes, otras no a pesar de ser un sitio basado en bases de datos. ¡Poner la URL de la página ofensiva en el Linter de URL lo obligó a almacenar en caché la imagen! ¡Woo-HOO!
kristina childs
4
La herramienta de pelusa cambió de nombre. ahora es solo debug : developers.facebook.com/tools/debug - por lo que puedo decir, esta es la versión tl; dr de todo esto: ¡ solo usa la herramienta!
cregox
11

Para cambiar el título, la descripción y la imagen, debemos agregar algunas metaetiquetas debajo de la etiqueta principal.

PASO 1: agregue metaetiquetas debajo de la etiqueta principal

<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

SIGUIENTE PASO: Haga clic en el siguiente enlace https://developers.facebook.com/tools/debug

Agregue su URL en el cuadro de texto (por ejemplo, http://www.test.com/ ) donde mencionó las etiquetas. Haga clic en el botón DEPURAR.

Está hecho.

Puede verificar aquí https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

En la URL anterior, u = el enlace de su sitio web

DISFRUTA !!!!

Gaurav123
fuente
No publique exactamente la misma respuesta a varias preguntas: o no es una buena opción para todas o las preguntas son duplicadas que deben marcarse / cerrarse como tales.
kleopatra
Hola Cleopatra, estaba pensando en publicar la respuesta para ayudar a los demás. Creo que tu punto es totalmente válido. Yo me ocuparé de esto. Gracias amigo
Gaurav123
@ Gaurav123 el enlace de prueba está muerto. Sin embargo, lo comprobé enviándome un mensaje a mí mismo en Facebook. ¡Muchas gracias por la respuesta tan útil!
gsamaras
2

En realidad, si ya intentaste vincular esa página en Facebook ANTES de agregar el enlace "image_src", Facebook seguirá usando la copia en caché anterior y ni siquiera verá tus cambios. Intente modificar la URL eliminando o agregando "www", o duplique su página para probarla.

Cachondo
fuente
1

He notado que Facebook no toma miniaturas de sitios web si comienzan con https, ¿es ese quizás tu caso?

raRaRa
fuente
1

Tuve el mismo problema y descubrí que la etiqueta de cierre de mi cabeza estaba en el lugar equivocado

Diego
fuente
0

Pregunta anterior, pero recientemente parecía tener el mismo problema con las imágenes en miniatura de mi enlace que no se muestran en las actualizaciones de estado en Facebook. Publico para muchos clientes y esto es relativamente nuevo.

A FB parece que ya no le gustan las URL largas: si usa un acortador de URL como goo.gl o bitly.com, la miniatura de su enlace / publicación aparecerá en su actualización de FB.

karen kouf
fuente
0

Intente usar algo como esto:

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

Parece funcionar bien en Firefox siempre que use una ruta completa a su imagen.

El problema es que se desplaza verticalmente hacia abajo por alguna razón. La imagen es de 200 x 200 como se recomienda en algún lugar que leí.

usuario2494810
fuente
Tengo la intención de publicar el código de una etiqueta de enlace que no se publicó porque soy estúpido. Lo siento.
user2494810
-1

Si usó algún complemento para seo, primero verifique la configuración del complemento de seo. Luego, averigüe la configuración de Noindex si Habilitar medios para Noindex y luego deshabilítelo.

Milon Patowary
fuente