Twitter-Card 元标签问题答案

【问题标题】：Twitter-Card Meta Tag IssueTwitter-Card 元标签问题
【发布时间】：2019-08-13 14:35:03
【问题描述】：

当您在浏览器和开发者工具中查看源代码时，您可以看到 Open Graph 和 Twitter 的所有元标记。我检查了 Facebook 调试器，除了一些规范问题外，我对结果相当满意。

我还将上述 URL 插入第三方 Open Graph Debugger： http://debug.iframely.com/ Open Graph、Twitter 甚至其他的所有标签都返回正面。

为什么 Twitter 的 Card Validator 又回来了

INFO:  Page fetched successfully
INFO:  9 metatags were found
ERROR: No card found (Card error)

关于如何让 Twitter 正确显示的任何见解？

【问题讨论】：

【解决方案1】：

我认为您可能正在阻止或重定向 Twitterbot 代理。

我用curl伪造了Twitterbot代理：

curl -A 'Twitterbot' https://www.halleonard.com/viewpressreleasedetail.action?releaseid=10261 -o ~/Desktop/what-twitterbot-sees.html

这就是您的服务器返回的内容：

如您所见，有 10 个元标记（如果您排除 <meta charset> 一个），这是卡片验证器所指示的，根本没有 <meta name="twitter:*"> 标记。

如果您可以设置自定义用户代理字符串，则可以使用浏览器进行重现。谷歌浏览器可以做到这一点：

我很确定在您的网络服务器级别或您的应用程序代码中存在某种重定向规则。

根据developer.twitter.com，我使用的用户代理字符串是正确的：

Twitter使用Twitterbot的User-Agent（有版本，如Twitterbot/1.0）

【讨论】：

我们已经修改了 robots.txt，Twitterbot 可以访问网站上的每个页面。我们将此添加到文件中：“用户代理：Twitterbot Disallow：”
您好，在发布之前检查了您的 robots.txt 文件；它对我来说也很好。我的建议是，问题可能存在于您堆栈的另一层。 Nginx 也许？关键是，当我使用浏览器访问您的网站时，我确实看到了您的推特卡，当我使用 curl 和假代理访问时，我得到了不同的响应。我一定会检查的。
我们进行了一些更改，我可以看到出现在 Google 跟踪代码管理器脚本之前的 9 (10)。您是说所有这些 OG/Twitter 标签都需要在 Google 跟踪代码管理器初始化之前？
我怀疑 GTM 是这里的罪魁祸首（尽管老实说我不能 100% 排除）。如果我是你，我会检查你的 Web 服务器配置或应用程序代码。也许您正在根据某些条件主动重定向流量。如果没有额外的上下文，您的问题很难解决。在这个阶段我只能给你一些提示。
@Murphy1976 我可以通过在 Chrome 中设置自定义用户代理字符串来重现相同的错误。查看更新的答案

【解决方案2】：

我使用 w3c 验证器检查了您的源代码。

似乎没有正确安装谷歌标签管理器：您必须将 google tag manager (noscript)（第 10:13 行）移动到 body 部分的顶部，并将其从 head 部分中完全删除。

以及（更具体的）在您的标签管理器页面中（如附件）

【讨论】：

【解决方案3】：

由于您选择了twitter:card 类型，因此出现错误。您忘记添加 twitter:image 内容。这两个都应该添加。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="ADD IMAGE URL">

【讨论】：

在您链接的文档页面上，它说twitter:image 不是必需的。 Twitter 还会查找该页面上存在的 Open Graph 标签。
我说不应该，所以尝试添加twitter:image 标签并检查它是否适合您。同一页还说，Below are the suggested minimum properties for the Summary Card with Large Image including title, description, and image.
从 OP 看来，问题似乎与标签本身无关。正如他们所提到的，这在所有验证工具中都可以正常工作，除了来自 Twitter 的验证工具。因此，Twitter 对网站的看法肯定存在问题。另请注意，该错误与未找到图像无关。不是卡本身。如果只有图像丢失，Twitter 肯定会更具体地说明错误。