后端开发教程 - Java、Spring Boot 实战 - msg200.com
让您的网站可在 Twitter、Facebook 等平台上使用社交媒体卡片
开放图谱
元标签
在哪里？
卡片图像最佳实践
我怎么知道它有效？
我们都希望自己的网站在 Twitter、Facebook 以及各种社交媒体渠道上被分享。无论是包含博客和个人资料的自建网站，还是为他人搭建的网站，我们都珍视这些宝贵的点击量，因此，为了吸引用户点击我们的链接，我们需要让它们看起来美观又吸引人。
我们不仅可以分享一个无法充分表明页面内容的裸链接，还可以将其变成一张漂亮的卡片，代表我们网站每个页面的内容。
开放图谱
几年前，Facebook 授予我们Open Graph协议，让我们能够将链接转化为精美丰富的图表对象，轻松便捷地进行分享。Open Graph 使用元标签与我们的网站进行通信，并获取我们想要在卡片中显示的信息。您可以在Open Graph 协议网站上了解更多信息。
它们不仅适用于 Facebook，还被广泛使用，适用于 Twitter、LinkedIn、Pinterest 和更多社交媒体平台。
元标签
为了构建卡片，我们必须通过元标签传递所需的数据。我们有很多元标签，您可以在这里找到它们。但如果我们要讨论那些能够让我们的卡片看起来更美观的基本元标签，那么我们必须提到以下 4 个必需的标签：
-
og:title您选择的标题
-
og:type无论是网站还是视频或音频，...等等。
-
og:image您想要在卡片上显示的图像，我们稍后会讨论其
尺寸和最佳实践 -
og:url您希望在卡片中显示的 URL
在哪里？
一旦我们在 HTML 结构中打开 head 标签，我们就可以包含我们想要的所有元标签。
<head>
<meta property="og:title" content="I am a title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="IamAUrl.yes" />
<meta property="og:image" content="imageURL.cool" />
</head>
卡片图像最佳实践
选择图片应该取决于页面内容本身。每张卡片图片应该代表每个页面，而不是所有网站页面的通用图片。如果是博客文章，我们可以添加文章的封面图片；如果是电商商品，我们可以添加商品的图片，等等。
建议尺寸
- 完美契合：1200x628
- 允许的最小尺寸为 200x200
- 最大尺寸 8MB
如果图片小于 600x315，则不会显示为全宽大图片。它将以较小的尺寸显示在侧面。
您可以在Facebook 的官方文档中了解更多信息
叽叽喳喳
- 官方并没有明确规定最佳尺寸，但经过一番谷歌搜索后，发现 1200x628 也适用于大型摘要卡
- 允许的最小尺寸：300x157
- 允许的最大尺寸：4096x4096
- 最大尺寸：5MB
Twitter 有自己的元标签，可供进一步自定义。您可以在Twitter 官方文档中找到所有相关信息。
要使用其中任何标签，必须添加 2 个标签：
-
twitter:title -
twitter:card
我要重点介绍的是twitter:card元标签。卡片有两种视图可供选择，具体视图取决于你赋予该标签的值。
您可以将其设置为：
- 概括
<meta name="twitter:card" content="summary">
- 摘要大图
<meta name="twitter:card" content="summary_large_image">
- 完美契合：1200x627
- 最小允许宽度：200px
我怎么知道它有效？
社交媒体网站不会让我们对此一无所知。每个网站都提供了一个工具，让我们可以查看进度并验证卡片，而不会有任何意外。
现在，我们拥有了让我们的网站在社交媒体上看起来精彩的一切！
用您最喜欢的网站卡片向我@R_anaEm发送消息并展示您自己的卡片！
文章来源：https://dev.to/ranaemad/make-your-website-social-media-card-able-on-twitter-facebook-and-more-35la