Cómo usar la metaetiqueta 'og' (Open Graph) para compartir en Facebook

118

Facebook recupera todas las imágenes de mi sitio.

Quiero compartir solo una imagen que está en esa página.

Escuché sobre la ogmetaetiqueta, pero no sé cómo ponerla.

Vignesh Babu MD
fuente

Respuestas:

355

Utilizar:

<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

Complete el content = "..." de acuerdo con el contenido de su página.

Para obtener más información, visite 18 metaetiquetas que toda página web debería tener en 2013 .

CarlosPinedaT
fuente
¿Sabe si la authoretiqueta debe tener el nombre del autor o un enlace a la URL de un perfil?
tobek
Creo que ambos son posibles. Si desea que su imagen de perfil esté en el lado izquierdo de su publicación en la página de búsqueda de Google, debe proporcionar el enlace a su perfil de Google +.
jurihandl
metaetiqueta authorsignifica autor del sitio web o autor del artículo actual (ejemplo en uso en artículo de blog)?
LuiGi
¿Es esta una buena ejecución? ¿Google / Facebook / Twitter no encontrará errores con esto?
Jeromie Devera
2
1) Facebook leerá la etiqueta <meta name = "author"> y la mostrará en la vista previa cuando alguien comparta una página 2) Facebook ahora tiene soporte para <meta property = "article: author"> (detalles en giannopoulos.net/ 2015/06/20 /… ) y mostrará un enlace a su perfil de Facebook (si realmente pone un enlace a él en el artículo: autor) 3) Google ahora busca datos enriquecidos en forma de lo que llama "Rich Snippets" ( developers.google.com/structured-data )
MarkG
41

Facebook usa lo que se llama el protocolo Open Graph para decidir qué cosas mostrar cuando compartes un enlace. La OGP mira su página e intenta decidir qué contenido mostrar. Podemos echar una mano y decirle a Facebook qué debe tomar de nuestra página.

La forma en que lo hacemos es con og:metaetiquetas.

Las etiquetas se parecen a esto:

  <meta property="og:title" content="Stuffed Cookies" />
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
  <meta property="og:description" content="The Turducken of Cookies" />
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

Deberá colocar estas o metaetiquetas similares en el <head>de su archivo HTML. ¡No olvide sustituir los valores por los suyos!

Para obtener más información, puede leer todo sobre cómo Facebook usa estas metaetiquetas en su documentación. Aquí está uno de los tutoriales de allí: https://developers.facebook.com/docs/opengraph/tutorial/


Facebook nos brinda una pequeña herramienta excelente para ayudarnos a lidiar con estas metaetiquetas: puedes usar el depurador para ver cómo Facebook ve tu URL e incluso te dirá si hay problemas con ella.

Una cosa a tener en cuenta aquí es que cada vez que realice un cambio en las metaetiquetas, deberá enviar la URL a través del depurador nuevamente para que Facebook borre todos los datos almacenados en caché en sus servidores sobre su URL.

Lix
fuente
Veo etiquetas html en mi descripción, ¿sabe cómo solucionarlo?
Neil
28

Construí una herramienta para la metageneración. Preconfigura entradas para Facebook, Google+ y Twitter, y puedes usarlo gratis aquí: http://www.groovymeta.com

Para responder un poco más a la pregunta, las OGetiquetas (Open Graph) funcionan de manera similar a las metaetiquetas y deben colocarse en la sección HEAD de su archivo HTML. Consulte las mejores prácticas de Facebook para obtener más información sobre cómo usar las etiquetas OG de manera efectiva.

Louis Otto
fuente
1
Gracias @Mogsdad, he ampliado mi respuesta en consecuencia.
Louis Otto
1
Enlace roto, desafortunadamente!
Vincent Sels