html - tamaño - Imagen de sitio web predeterminada para compartir en redes sociales
insertar imagen html url (5)
¿Hay alguna manera de establecer una imagen predeterminada que aparece cuando comparto mi sitio web en Facebook? Me di cuenta de que Facebook usualmente busca la primera imagen del sitio para usarla como una miniatura.
Debes establecer la metaetiqueta de la imagen de Facebook:
<meta property="og:image" content="http://example.com/logo.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
Para obtener más información, consulte los docs
Esta es mi solución, funciona bien:
<head>
<!--FACEBOOK-->
<meta property="og:image" content="https://www.website.com/logo.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.website.com/"/>
<meta property="og:title" content="Website title" />
<meta property="og:description" content="Website description." />
<head>
Puede hacer una prueba con el sitio de depuración de Facebook .
Establezca una og:image en el <head> de su documento HTML de esta manera:
<meta property="og:image" content="http://example.com/ogp.jpg" />
Esto es parte del Open Graph Protocol, respetado al menos por los siguientes sitios de redes sociales:
- Facebook (ver https://developers.facebook.com/docs/sharing/webmasters/#images )
- Twitter (ver https://dev.twitter.com/cards/getting-started#opengraph )
- LinkedIn (ver linked-in )
- Google+ (ver https://developers.google.com/+/web/snippet/ )
- Pinterest (ver https://developers.pinterest.com/docs/rich-pins/reference/ )
(... y probablemente mucho más)
Además de configurar la etiqueta anterior, es posible que también desee:
- Borre la versión almacenada en caché de la página de la red social (por ejemplo, utilizando las herramientas de desarrollo de la plataforma), para que pueda ver el cambio reflejado inmediatamente. Por ejemplo, puede hacer esto para Facebook, en https://developers.facebook.com/tools/debug/
- Agregue "propiedades estructuradas" adicionales para especificar cosas como el ancho o alto de la imagen, usando la sintaxis descrita en http://ogp.me/#structured . Esto se describe como una "mejor práctica" en Facebook en https://developers.facebook.com/docs/sharing/best-practices#images .
Los servidores de Facebook ''arañarán'' su sitio web en busca de una imagen para usar cuando la gente lo comparta. Si desea especificar qué imagen usar, colóquela en la sección <head></head> de su sitio web:
-
<meta property="og:image" content="http://url-to-your-image.png">
Facebook puede haber guardado en caché una copia de la imagen aleatoria anterior. Para que Facebook vuelva a buscar:
<meta property="og:image" content="http://example.com/lamb-full.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">
El tamaño de la imagen debe ser de al menos 200px X 200px