如何确保链接支持 Twitter 预览？答案

【问题标题】：How to insure links support Twitter preview?如何确保链接支持 Twitter 预览？
【发布时间】：2014-10-23 13:04:05
【问题描述】：

首先，请注意，我搜索了一个 SocialMediaStackExchange 来提出这个问题，但似乎没有。

这就是我想知道的。向 twitter 发布推文时，如果是 youtube 链接或特定网站的链接，则 twitter 将显示 Expand 功能，用户可以单击该功能在 Twitter 界面中预览媒体内容。

有谁知道这是否由 Twitter 决定，或者我是否可以通过某种方式更改我的网站以启用 Twitter 上的预览？

我想这样当我在推特上发布一篇博客文章时，人们可以预览文章的第一部分内容。这是一个示例：（只需添加链接，显示预览内容）在这种情况下，它是 InfoWorld 上的一篇文章。

Twitter 上有一个链接解释了扩展内容，但没有说明如何实现。 https://blog.twitter.com/2012/experience-more-with-expanded-tweets

【问题讨论】：

标签： twitter preview

【解决方案1】：

您可能想查看“Twitter Cards”。它们的设置非常简单。您在页面标题中添加几行代码，验证您的网站（自动化过程），然后就可以离开了。

例如，这里是我的一条带有“预览”内容的推文https://twitter.com/edent/status/516544061495193601

额外的 HTML 代码只是：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@edent">
<meta name="twitter:site" content="@edent">
<meta name="twitter:title" content="Tim Berners-Lee and the Freedom of The City">
<meta name="twitter:description" content="Last week, I had the privilege of being invited into the Guildhall to watch Tim Berners-Lee receive the Honorary Freedom of the City.  I was one of a dozen bloggers and tweeters asked to live tweet th">
<meta name="twitter:image:src" content="https://shkspr.mobi/blog/wp-content/uploads/2014/09/TimBL-Least-Well-Dressed-435x375.jpg">
<meta name="twitter:image:width" content="280">
<meta name="twitter:image:height" content="150">

不同风格的卡片有不同种类的预览 - 视频、图片、应用安装等。

【讨论】：

另外，您可以在以下位置测试/验证预览：cards-dev.twitter.com/validator
如果我在网页中插入以下代码，页面代码是否仍然可以视为 100% 免费（如语音）？

【解决方案2】：

另外，我要指出一件重要的事情。对于twitter:image meta，它的内容参数必须是绝对路径，而不是相对路径。否则将无法正常工作。

<meta name="twitter:image content="/resource/img.jpg"/> //will not work
<meta name="twitter:image content="https://yourdomain.com/resource/img.jpg"/> //will work

【讨论】：