我如何添加缩略图到我的网站，以便当有人在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?

本文关键字：链接 分享 Facebook Twitter 图像 显示图 显示 添加 何添加 略图 便当      更新时间：2023-09-26

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

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

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

这些被称为推特卡片，基本上，你在你的页面上添加<meta>标签来告诉推特在他们上面显示什么。

我想你要找的卡片应该是这样的:https://dev.twitter.com/cards/types/summary-large-image

下面是一个片段，其中包含如何工作的示例(取自文档):

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

与Twitter一样，他们也提供了一个可以验证和预览的页面:https://developers.facebook.com/tools/debug/

希望有帮助!

Facebook将查找

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

你可以在facebook上使用这个元标签。我希望它也能与其他网站一起工作

相关文章：