社交分享的默认网站图片

Question

社交分享的默认网站图片

有没有办法设置我在Facebook上分享我的网站时出现的默认图像？我注意到Facebook通常会从网站上获取第一张图片以用作缩略图.

Answer 1

你需要设置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">

Run Code Online (Sandbox Code Playgroud)

有关更多信息,请查看文档

@Rossco你需要[清除facebook的缓存](https://developers.facebook.com/tools/debug/)你的网站. (7认同)
我用这种方式,它仍然从我的网站挑选一个随机图像？ (3认同)
@MindaugasJačionis根据[linked-in](https://developer.linkedin.com/docs/share-on-linkedin)所有你需要的是`og:image`标签,也许你现在看到的图像是缓存,缓存将持续长达7天. (3认同)
-1; 它不是*"facebook image meta tag"*,它是[基本上所有社交媒体网站]支持的协议(/sf/answers/2034754081/).这篇文章让我觉得这种方法特定于Facebook,但进一步的研究表明情况并非如此. (3认同)

Answer 2

小智 8

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

Run Code Online (Sandbox Code Playgroud)

图像大小应至少为200px X 200px

Answer 3

ful*_*ull 6

Facebook的服务器将"刮"你的网站,寻找人们分享时使用的图像.如果要指定要使用的图像,请将其放在<head></head>网站的部分中:

<meta property="og:image" content="http://url-to-your-image.png">

Facebook可能已经缓存了之前随机图像的副本.要让Facebook再次获取:

https://developers.facebook.com/tools/debug/

Answer 4

Mar*_*ery 5

设置og:image在<head>这样的HTML文档：

<meta property="og:image" content="http://example.com/ogp.jpg" />

Run Code Online (Sandbox Code Playgroud)

这是开放图谱协议的一部分，至少受到以下社交媒体网站的尊重：

Facebook（请参阅https://developers.facebook.com/docs/sharing/webmasters/#images）
Twitter（请参阅https://dev.twitter.com/cards/getting-started#opengraph）
LinkedIn（请参阅https://developer.linkedin.com/docs/share-on-linkedin）
Google+（请参阅https://developers.google.com/+/web/snippet/）
Pinterest（请参阅https://developers.pinterest.com/docs/rich-pins/reference/）

（...可能还有更多。）

除了在上面设置标签外，您可能还需要：

清除社交媒体平台页面图像的缓存版本（例如，通过使用平台的开发人员工具），以便您可以立即看到更改。例如，您可以在https://developers.facebook.com/tools/debug/为Facebook执行此操作
使用http://ogp.me/#structured中描述的语法，添加其他“结构化属性”以指定诸如图像的宽度或高度之类的内容。Facebook在https://developers.facebook.com/docs/sharing/best-practices#images将其描述为“最佳实践” 。

Answer 5

Séb*_*EMY 5

这是我的解决方案,它运作良好:

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

Run Code Online (Sandbox Code Playgroud)

您可以使用Facebook Debug网站进行测试.

归档时间：	11 年，10 月前
查看次数：	70555 次
最近记录：	7 年，7 月前