Twitter 无法读取 SSR vue.js 应用程序上的元标记答案

【问题标题】：Twitter cannot read meta tags on a SSR vue.js appTwitter 无法读取 SSR vue.js 应用程序上的元标记
【发布时间】：2020-01-19 09:32:16
【问题描述】：

我正在尝试在网站上实现 vue ssr，但我遇到了一个主要问题......虽然我的 ssr 似乎正在工作（当我在没有激活 js 的情况下进入我的页面时，我收到了完全渲染的html，包含所有预取数据），Twitter 无法读取我的元标记...

我的网址是https://testsite2.slickteam.fr/job/developpeur-fullstack-js-java（网站尚未完全运行，仍在开发中，但 ssr 正在运行，并且此页面上提供了元标记）。有元“twitter:description”、“twitter:title”、“twitter:image”等，但是当我使用 Twitter 卡验证器工具 (https://cards-dev.twitter.com/validator) 和这个 url 进行测试时，它显示“INFO: Page fetched成功警告：未找到元标记”。

我在使用 Linkedin 时遇到了同样的问题，但 Facebook 似乎运行良好......

有人知道什么可能导致 Twitter 无法读取我的元标记吗？

我正在使用 vue-server-renderer 包，在 nginx 后面有一个 express nodejs 服务器。

谢谢

【问题讨论】：

您的 SSR 设置工作不正常。如果我访问您提供的网址，我会收到一个没有任何元标记的 HTML 文件。显然它们被插入到客户端。有趣的是，Facebook 似乎能够处理在客户端插入的元标记。您能告诉我们您是如何生成元标记的吗？
感谢您的回复@MarcRo，但您确定您没有收到元标记吗？当我执行curl -s -A Twitterbot https://testsite2.slickteam.fr/job/developpeur-fullstack-js-java | grep twitter 时，我可以看到，除此之外还有这个标签：<meta data-vue-meta="ssr" name="twitter:title" content="Developpeur Fullstack JS/JAVA – Slickteam">
@MarcRo 我知道开发工具，它显示我的元标记在那里......看起来我们没有收到相同的内容......
@MarcRo 当然，正如我所说，我还尝试卷曲此网址：我正在接收元标记。这是我收到的完整内容，我从我的网络开发工具选项卡粘贴：pastebin.com/ggwLX0fi
找到了解决方案，它是我的 http 响应中缺少的标头。我在下面发布了解决方案。感谢您调查此问题！

标签： node.js express vue.js twitter server-side-rendering

【解决方案1】：

http 响应不包含Content-Type: text/html 标头。

在express js服务器中，解决方案很简单，在发送响应前添加这一行：

response.set('Content-Type', 'text/html');

【讨论】：