html - Twitter 网站没有开放图标签？

Question

我正在尝试获取 url 预览(对于支持它们的网站)以显示在我正在处理的项目中。我最近注意到 Twitter 网址不再有开放图元标记。我期待 og:title、og:description 等等，如果我没记错的话，它曾经存在于所有 twitter 链接中。
例如。如果我看到此链接的页面来源:twitter.com/DalaiLama/status/1274998376338124800
除了 og:site_name 之外，我没有看到 og 元数据。我也没有看到任何 twitter:title 或相应的内容。我错过了什么？
更新:所以原来查看源代码没有显示 og:title，但我确实在 Chrome 的“检查”菜单下看到了它。这是否意味着 JS 实际上拥有它而不是 HTML(它也只显示 og:title 而不是其他字段)？这是预期的吗？

Answer 1

Twitter 使用客户端渲染 (CSR) 在浏览器中生成 HTML
直接查看源码不会显示任何相关<meta>标签或实际页面 HTML 内容，因为它们都是在 React 中使用 JavaScript 在客户端浏览器上动态生成的(即 CSR:客户端渲染)。事实上，HTML 源代码将包含一个 stub ，其中包含“我们检测到您的浏览器中禁用了 JavaScript。您想继续使用旧版 Twitter 吗？”。这可以通过打开开发人员工具并在页面加载/呈现期间查看“元素”选项卡或在没有 JavaScript 模拟的情况下下载页面来验证。
但是，为了改进各种著名网络爬虫的搜索引擎优化 (SEO)，Twitter 将改为返回服务器端渲染 (SSR) HTML 内容(其中确实包含 <meta> 标签)。这使爬虫不必模拟 JavaScript 来查看页面，而只爬取原始 HTML 内容。 Twitter 根据提供的 User-Agent HTTP Header 识别爬虫.服务器端渲染通常是比将 HTML 渲染卸载到客户端上更昂贵的操作，这可能是 Twitter 选择客户端渲染作为默认行为的原因。
绕过 User-Agent接收服务器端渲染 (SSR) HTML 的白名单
各种著名的网络爬虫都被 Twitter 列入白名单，以接收服务器端呈现的 HTML。 通过欺骗User-Agent自己请求中的HTTP Header，可以绕过白名单，接收服务器端渲染的包含相关<meta>的HTML标签 (是否推荐这是一个完全不同的主题)。对于程序化 HTTP 请求，检查是否支持更改 User-Agent HTTP Header在您的 HTTP 库中 - 大多数重要的库都支持此功能。whatismybrowser.com有一个 list of well known web-crawler User-Agent headers ;其中一些网络爬虫被列入白名单(但不一定全部)。在撰写本文时，以下是一些有效的用户代理:

Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)

Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)

facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)

Mozilla/5.0 (compatible; Discordbot/2.0; +https://discordapp.com)