如何自定义在社交媒体网站上发布网站 URL 时显示的图像答案

【问题标题】：How to customize the Image shown when posting a URL of a website on Social Media sites如何自定义在社交媒体网站上发布网站 URL 时显示的图像
【发布时间】：2018-05-20 08:29:37
【问题描述】：

我已经看到，当我们放置一个网站的 url 时，该 URL 会出现一个图像。示例包括社交媒体网站，如 Google+、Facebook、Instagram。我需要知道如何将这样的图像添加到我的网站。是否应该应用某个标签或脚本来显示该图像？

当我分享我的网站链接时，我没有得到这样的链接。我需要知道为什么以及如何去做。

【问题讨论】：

标签： html url sharing

【解决方案1】：

OG 标签被这些社交网站使用如下：

网站信息 OG 标签开始

<meta property="og:site_name" content="$site_name" />
<meta property="og:url" content="$site_url" />
<meta property="og:type" content="website" />
<meta name="title" property="og:title" content="$the_title" />
<meta name="image" property="og:image" content="$site_logo"/>
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<meta name="description" property="og:description" content="$site_description" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" description="@username" />
<meta name="twitter:title" content="$the_title" />
<meta name="twitter:description" content="$site_description" />
<meta name="twitter:image:src" content="$site_logo">
<meta name="twitter:domain" content="$site_url">

网站信息OG标签结束

【讨论】：

【解决方案2】：

将以下标签添加到您需要共享的页面的 HTML 代码的 <head> 部分：

<link rel="image_src" href="{image}" />
<meta name="twitter:image" property="og:image" content="{image}" />

并将{image}替换为页面图片的URL。

当您添加标签时，社交媒体网站仍然可以共享没有图像的页面。这是因为网站缓存页面数据。您需要等待缓存被清理或手动清理（某些网站，例如 Facebook，提供了这种可能性；这是另一个问题的主题）。

【讨论】：

@TheBangBandit 没有。它至少在 Facebook、Twitter、VK.com、OK.ru、Skype、Telegram、Mail.ru、Google+ 和 WhatsApp 中有效。