2012-07-23 29 views

Respuesta

36

Facebook usa lo que se llama Open Graph Protocol para decidir qué cosas mostrar cuando comparte un enlace. El OGP mira su página e intenta decidir qué contenido mostrar. Podemos echarle una mano y en realidad decir Facebook qué llevar de nuestra página.

La forma en que lo hacemos es con etiquetas og:meta.

Las etiquetas se ven algo como 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"> 

Tendrá que colocar estas o parecidas etiquetas meta en la <head> de su archivo HTML. ¡No olvides sustituir los valores por los tuyos!

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


Facebook nos da un pequeño gran herramienta que nos ayuda cuando se trata de estas etiquetas meta - se puede utilizar el Debugger para ver cómo Facebook ve su URL, y es Incluso te diré si hay problemas con eso.

Una cosa a tener en cuenta aquí es que cada vez que realice un cambio en las etiquetas meta, tendrá que alimentar la URL a través del Debugger nuevamente para que Facebook borre todos los datos almacenados en sus servidores URL.

+0

Estoy viendo etiquetas html en mi descripción, ¿sabes cómo evitar esto? – Neil

330

Uso:

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

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

Para obtener más información, visite 18 Meta Tags Every Webpage Should Have in 2013.

+0

¿Sabe si la etiqueta 'author' debe tener el nombre del autor o un enlace a la URL de un perfil? – tobek

+0

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

+0

meta tag 'autor' significa autor del sitio web o autor del artículo actual (ejemplo de uso en artículo de blog)? – LuiGi

27

Creé una herramienta para meta generación. Se preconfigura entradas para Facebook, Google+ y Twitter, y se puede utilizar de forma gratuita aquí: http://www.groovymeta.com

Para responder a la pregunta un poco más, OG etiquetas (Open Graph) etiquetas funcionan de manera similar a las etiquetas meta, y debe ser colocado en la sección HEAD de tu archivo HTML. Consulte Facebook's best practises para obtener más información sobre cómo usar las etiquetas OG de manera efectiva.

+1

Gracias @Mogsdad He ampliado mi respuesta en consecuencia. –

+0

Enlace roto, por desgracia! –

Cuestiones relacionadas