在您的网站上安装 Twitter 卡的 5 种简单方法

所以你知道在 Twitter 上，当有人发布到他们网站的链接时，Twitter 会创建一个包含缩略图、标题、描述和目标页面 URL 的框？ 这真的很常见。 它使标准链接帖子在时间线上更加明显，它展示了一些关于链接目的地的信息，并鼓励更多的用户交互。

那是一张推特卡。 具体来说，它是网站摘要卡，是可以集成到网站中的几种类型的 Twitter 卡之一。 还有哪些其他类型？

• 如前所述，摘要卡是网站的预览。 这是从元信息中提取的自定义图像和文本，可确保用户在单击您的链接时看到的内容的良好预览。
• 摘要卡（带有大图）……与摘要卡相同。 老实说，我不知道为什么会有差异。 单击每个链接并查看预览的推文，看看我的意思。 我想在 Twitter 最新的重新设计之前，它们可能看起来有所不同，但今天一切看起来都像是一张大图像卡。
• 球员卡不应与棒球卡或其他运动卡混淆。 它们本质上是大型图像卡，除了图像是某种形式的动画媒体。 根据它们的显示方式，它们可能是扩展为媒体的小型预览和描述框，或者只是准备播放的媒体本身。 通常这些是嵌入式视频，例如 YouTube 视频，尽管 webms 越来越受欢迎。
• 应用卡片是从应用商店页面提取数据以创建自定义应用推广窗口的框。 它显示了推文中链接的应用程序的重要细节，以及一个 CTA 按钮，让用户立即安装该应用程序。

Twitter卡过去要复杂得多。 曾经有用于图片库、产品和其他一些选项的特定类型的卡片，但 Twitter 已经删除了它们。 如果你想留恋，你可以在这里看到他们的样子，只是不要太执着； 你今天不能做。

Twitter卡片的基础知识

如果您想为每个页面指定单独的代码，则每个网站或至少每个网页只能拥有一种 Twitter 卡。 大多数人选择基本的大图像摘要卡并将代码放在他们网站模板的标题中，因此它会显示在每个页面上。 某些网站（例如 YouTube）会将播放器卡片放在其标题中。 这里的主要内容是，您在给定页面上的标题元数据中只能有一组卡片信息。

卡片在它们可以传达的数据方面非常强大。 您可以让卡片自动知道谁创建了内容以及谁拥有该页面，即使两者不同，也可以同时知道。 您可以指定要加载的媒体，可以指定名称和跟踪代码等等。 事实上，你可以阅读这个页面来了解你可以专门用于卡片的属性。 您还可以绑定 Open Graph 属性以获得更可靠的数据。

我今天要在这里做的是告诉您如何将 Twitter 卡片添加到您的网站。 我不会介绍每一个属性——Twitter 文档已经足够好了——我只会给你简要介绍如何为各种 CMS 做这件事。

在我们开始之前； 对于每种安装方法，您都需要验证。 为确保您做对了，一旦您启用了卡片，请将 URL 复制到此验证器。 这将告诉您该卡是否真的有效。

1：WordPress

WordPress 可能是实现 Twitter 卡片的最简单平台，因为有很多不同的方法可以做到这一点，包括几乎内置的方法。

推荐的实现 Twitter 卡片的方法是使用官方的 Twitter 插件。 您可以像安装任何其他插件一样安装它，然后您可以从那里自动生成您的 Twitter 卡片。 它还支持共享和推文/关注按钮、嵌入式推文处理和用于分析跟踪的简码。 您可以在此处阅读文档并在此处下载插件本身。

如果您不想使用官方 Twitter 插件，或者您在托管 WordPress.com 上，则可以使用 Jetpack。 在 Jetpack 中，您希望找到共享部分并对其进行配置。 将有一个 Twitter 部分，您可以在其中授权您的 Twitter 帐户访问您的网站。

第三种选择是使用 JM Twitter Cards 插件。 这个插件由 Julien Maury 开发，增加了 Twitter 卡与一些基本设置的兼容性。 您可以选择让它使用您页面上的第一张图片而不是特色图片，您可以预览您的 Twitter 卡片渲染，并且您可以在创建帖子时为每个帖子自定义卡片。 要配置插件，请导航到侧边栏并单击管理仪表板中的插件面板。 选择卡片类型，然后用您的 Twitter 帐户、您的网站帐户、描述长度以及您想要添加的任何其他内容填写其余的框。

如果这些都不符合您的需求，或者您已经碰巧拥有它，Yoast 的 WordPress SEO 也可以处理 Twitter 卡片。 在您的管理面板中，导航到 SEO 并单击“社交”部分。 那里有一个 Twitter 选项卡，您可以在其中将您的 Twitter 用户名添加到框中。 不幸的是，我上次读到，Yoast 只支持摘要卡； 如果您想要其他类型的卡片，则需要更高级的插件。

2：棒棒糖

Tumblr 是一个非常受欢迎的博客平台，许多人没有意识到它已经变得如此多产。 Tumblr 网络不仅限于标有 .tumblr.com 的博客； 事实上，一些大牌网站正在使用 Tumblr 作为基础架构。 一旦你有一个自定义域，它就像任何其他后端架构一样。 或者是吗？

事实上，Tumblr 的架构不像 WordPress 那样可扩展或可定制。 您必须使用一些自定义代码才能在您的博客上实现特定的自定义 Twitter 卡片。 您可以在 Quora 上 Dan Leveille 给出的答案中阅读代码及其背后的描述。

这里值得注意的是，此代码是手动自定义卡片所必需的； 不需要简单地有摘要卡。 Twitter 已经将 Tumblr.com 列入白名单，以便在链接发布时自动生成卡片，因此除非您想要具有特定数据的特定卡片，或者您使用的是自定义域，否则您可以使用默认实现的内容。 如果您的 Tumblr 网站有自定义域，或者您想要 Twitter 无法自然获取的数据，我只会求助于他的代码。

3：博主

在 Blogger 博客上安装 Twitter 卡片归结为您的模板。 我会给你一般的说明，但如果你的网站模板与规范相差太大，你必须根据我给你的线索自己弄清楚。

始终建议您在篡改模板之前备份模板，以防万一。 转到您的仪表板，单击模板，然后单击备份按钮以保存其副本以供以后恢复。

接下来，单击博客模板实时预览下方的“编辑 HTML”按钮。 在该代码中，运行搜索“<b:includable id='post' var='post'>”。 将该行保留在原处，但将以下内容直接粘贴到其下方：


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


显然，您需要自己编辑上面的数据。 将@yourname 更改为您的 Twitter 用户名，将 www.yoursite.com 更改为您的站点 URL，并确保其准确无误。

当然，您可以根据需要自定义此代码。 如果您更喜欢不同类型的卡片，请将第一行更改为“摘要”以外的内容，并将其余代码调整为您需要的数据。

如果我上面粘贴的代码不起作用，这是我从中获取的页面。 您可以仔细检查以确保我正确复制了它，或者您确实复制了它，并且您可以在那里检查以防它已更新并且我的帖子未反映更新。 说起来，如果它不起作用，请告诉我。 我会尽力修复它。

4：Joomla

Joomla 与 WordPress 有很多共同点，因为它是一个强调通过扩展进行定制的 CMS，而不是像 Tumblr 或 Blogger 这样具有美容增强功能的有限平台。 因此，您可以通过多种不同的方式使用不同的Joomla 扩展来实现 Twitter 卡片。

Tweet Cards 是大多数人可能更喜欢的一种扩展。 它可以免费下载和使用，它可以将 Twitter 卡片添加到您基于 Joomla 的网站中。 而已; 配置没有什么花哨的，它的功能或实现没有什么特别之处，它只是按照它在锡上说的做。

第二个选项是专业扩展 Open Graph 和 Twitter Card Tags。 这是一个更强大的扩展，可以为 Twitter 和 Facebook 添加标签。 它有很多自定义选项来选择您想要的帖子的特定图像和数据。 Facebook 与 Open Graph 的集成非常棒，此外，它还为 Twitter 和 Google 在敲门时添加了额外的元数据。 唯一的缺点是，作为专业扩展，这个会花费你。 不过，它很便宜； 许可证只需 7 欧元。 如果愿意，您可以购买额外的支持，但说实话； 这只是元数据，对于害怕代码的人来说，这是一项美化的复制和粘贴工作。 你不需要支持。

我为您提供的第三个选项是使用 TEXTman，这是一个前端帖子编辑器，用于在 Joomla 网站上创建和发布您的文章。 您无需为 Twitter 卡进行任何配置即可工作； 只需使用 TEXTman 作为您的编辑器，它就会自动带来该功能。 这里的缺点是它也是一种专业工具，而且价格昂贵得多。 由于它是一个完整的文本编辑器和相关工具，因此它是一个添加了多个扩展的大许可证。 订阅所有内容的费用为 99 美元，或者仅 TEXTman 本身以及有限的支持和更新许可证费用为 40 美元。 如果你想要的只是 Twitter 卡，那就太贵了。

最后，当然，您可以使用下面或本文中描述的方法手动实现它们。

5：自定义内容管理系统

我已经在上面的代码中发布了元数据的示例。 无论您使用什么架构，这基本上与您粘贴到站点标题中的代码相同。 根据您的站点需要调整内容并将代码复制到您的站点标题中。 它在哪里并不重要，只要它位于站点顶部的 <head> 和 </head> 标记之间。

不要忘记自定义标签。 您需要注意的主要是卡片、站点、创建者和域标签。 这些应该填写您想要的卡片类型、您的网站和内容创建者的 Twitter 句柄以及您的域的 URL。 然后在实施更改后验证卡。

如果您的卡在验证后仍然无法使用，您应该阅读 Twitter 的故障排除指南。 您可能会在几秒钟内修复某个简单的错误。