如何将 Twitter 卡片元标签添加到您的博客

2025-06-10

如何将 Twitter 卡片元标签添加到您的博客

对于那些最近没怎么看我博客的朋友，我正在把我的网站从 WordPress 迁移到基于 VueJS 构建的静态网站生成器Gridsome。在使用像 WordPress 这样成熟的博客平台时，很多事情我都习以为常。在 WordPress 中，当我创建新的博文并在 Twitter 上分享时，我能看到博文的精美显示，而不仅仅是一个链接。

对大多数人来说，这似乎不是什么大事，但如果没人看，那写点东西又有什么意义呢？在像 Twitter 这样的社交媒体平台上，参与度至关重要，而 Twitter 卡片（以及一般的图片）已被证明可以提高参与度。在本文中，我将告诉你什么是 Twitter 卡片，以及如何在你的博客中添加 Twitter 卡片元标签。

什么是 Twitter 卡

在深入探讨如何在博客中添加 Twitter 卡片的技术细节之前，我们有必要先了解一下 Twitter 卡片究竟是什么。我目前还没有在网站主页上设置任何 Twitter 卡片。在坐下来写这篇文章之后，我意识到我应该解决这个问题。如果我在 Twitter 上分享我的主页链接，它看起来是这样的。

没有卡片的 Twitter

很无聊吧？不管我说什么，你都不会忍不住点开那个链接。

这是我刚刚在 Twitter 上发布的一篇最新博客文章的链接。

Twitter 卡片

在这种情况下，您可以看到一个格式良好的卡片，其中包含摘要和图片。现在我承认图片可能需要一些修改，因为有些文字挤到了侧面，但您明白我的意思了。我认为这是一个非常好的附加功能，您只需几行代码就可以立即添加到您的博客中。

什么是元标记

如果您熟悉 HTML，那么您很可能之前就遇到过元标记。元数据是关于数据的数据（信息）。这意味着元标记提供了有关 HTML 文档的元数据。元数据不会显示在页面上，但可以被机器解析。这意味着它不会显示出来，但它会存在于页面源代码中。

元标记在 HTML 文档的头部定义，包含以下属性：

属性 价值 描述
字符集 字符集 规定 HTML 文档的字符编码
内容 文本 给出与 http-equiv 或 name 属性关联的值
http-equiv 内容类型
默认样式
刷新		 为内容属性的信息/值提供 HTTP 标头
姓名 应用程序名称
作者
描述
生成器
关键字
视口		 指定元数据的名称

这是元标记的示例。



<head>
    <meta name="description" content="Welcome to my website!">
</head>
Enter fullscreen mode Exit fullscreen mode

元标签用例

既然您已经了解了元标记，那么了解它们的用途可能对您有所帮助。以下是一些您可能已经遇到过的元标记示例。



<head>
  <meta charset="UTF-8">
  <meta name="description" content="Welcome to my website!">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="Dan Vega">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Enter fullscreen mode Exit fullscreen mode

如果您做过任何类型的搜索引擎优化（SEO），您可能遇到过元描述。

元描述是一段最多约 155 个字符的摘要（HTML 中的一个标签），用于概括页面内容。搜索引擎通常在搜索词出现在描述中时才会在搜索结果中显示元描述，因此优化元描述对于页面 SEO 至关重要。

大多数元标记只不过是名称和内容，事实上，如果您愿意，您可以创建自己的元标记。



<meta name="msg" content="hello meta tags"/>
Enter fullscreen mode Exit fullscreen mode

虽然这是有效的语法，但实际上没有任何作用。如果你要编写一些程序来扫描 HTML 并查找这个特定的元标记，那么包含它是有意义的，否则它就毫无用处。

将 Twitter 卡片添加到您的博客或网站

既然您对元标签有了更多的了解，那就让我们将这些知识运用到 Twitter 卡片中吧。您需要设置的第一个元标签是 twitter:card 元标签。



<meta name="twitter:card" content="summary_large_image" />
Enter fullscreen mode Exit fullscreen mode

此标签可以具有以下值之一

在我的案例和之前博客文章中展示的例子中，我使用的是summary_large_image。如果与示例卡片进行比较，其他标签的含义就一目了然了。我要强调的是，务必确保为 twitter:image 标签提供要使用的图片的完整路径。

这是我在该博客文章中使用的所有标签及其外观。


 html
<head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:description" content="How to create your first npm package and publish it." />
  <meta name="twitter:title" content="Creating your first npm package" />
  <meta name="twitter:site" content="@therealdanvega" />
  <meta name="twitter:image" content="https://www.danvega.me/assets/static/npm_cover.bd64798.eced3da.png" />
  <meta name="twitter:creator" content="@therealdanvega" />
</head>
Enter fullscreen mode Exit fullscreen mode

与 Twitter 卡片链接

如果您想了解有关可以创建的不同类型的卡片以及所有选项的更多信息，请阅读文档。

Twitter 卡验证器

如果您遇到 Twitter 卡片显示不正确的问题，可以尝试测试一下。您可以使用 Twitter 卡片验证器，输入要测试的 URL，然后查看结果以及一些调试信息。我在这里发布了另一篇博文，现在可以预览我的 Twitter 卡片的显示效果了。

Twitter 卡验证器

结论

我在本文开头提到过，我正在将我的网站从 WordPress 迁移到 Gridsome。如果您对我如何在博客中添加 Twitter 卡片感兴趣，请告诉我。如果您还对如何为其他社交网络添加类似的元标签感兴趣，可以研究一下开放图谱 (Open Graph)，或者直接告诉我您想看另一篇相关的文章。

快乐编码

丹

本文最初发布在我的博客https://www.danvega.dev/blog上。如果您觉得这篇文章有趣，请考虑订阅我的新闻通讯或在Twitter上关注我。

鏂囩珷鏉ユ簮锛�https://dev.to/therealdanvega/how-to-add-twitter-card-meta-tags-to-your-blog-4iei
Devto 翻译
PREV
我的新博客文章工作流程
NEXT
欢迎主题 - v73