如何向我的网站添加缩略图，以便当有人在 Twitter 或 Facebook 上分享链接时，它会显示图像和链接？答案

【问题标题】：How do I add a thumbnail to my website so that when someone shares a link on Twitter or Facebook it shows the image and the link?如何向我的网站添加缩略图，以便当有人在 Twitter 或 Facebook 上分享链接时，它会显示图像和链接？
【发布时间】：2015-08-20 05:50:08
【问题描述】：

如何向我的网站添加缩略图，以便当用户将链接分享到 Twitter 或 Facebook 时，它会以 HTML 和 Javascript 显示带有图像的链接？所以我真正想要的是，当用户在任何社交媒体上分享我网站的链接时，旁边会出现一个缩略图。

我在下面放了我想要的链接。

https://twitter.com/Medium/status/634152899132592128

【问题讨论】：

显示你的代码到目前为止你尝试了什么？
对不起，我不知道从哪里开始。

标签： javascript html css web hyperlink

【解决方案1】：

这些被称为 twitter 卡，基本上，您将 <meta> 标签添加到您的页面，以告诉 Twitter 在它们上显示什么。

我认为您正在寻找的卡类型是这样的： https://dev.twitter.com/cards/types/summary-large-image

这是一个 sn-p 示例，其中包含其工作原理（取自文档）：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

他们甚至为您提供验证和预览卡片的服务：
https://cards-dev.twitter.com/validator

对于 Facebook，<meta> 标签是不同的，这里也有很好的记录： https://developers.facebook.com/docs/sharing/best-practices#tags

与 Twitter 一样，它们还提供了一个页面，您可以在其中验证和预览： https://developers.facebook.com/tools/debug/

希望有帮助！

【讨论】：

它显示“警告：未列入白名单”。我该如何解决这个问题？
@user3675276 似乎需要将带有视频的卡片列入白名单才能工作。这应该可以帮助您获得批准：dev.twitter.com/cards/troubleshooting#approval

【解决方案2】：

Facebook 会寻找

<meta property="og:image" content="http://weekendtrails.com/screenshot.png" />

你可以在 facebook 上使用这个 meta 标签。我希望它也适用于其他网站

【讨论】：