方法

若希望实现 Twitter Card 效果,须满足三个条件:

  • Twitter 可以访问您的网站(不超时);
  • Twitter 可以爬取您的网站内容(不在 Robot.txt,不是黑名单);
  • 网站设置了 Twitter Card 元数据;

前两个条件,例如,腾讯云的 COS 无法被 Twitter 访问;Gitee 的图无法被爬取(Robot.txt)。

第三个条件设置方法为,在 部分(Header 之后,主体之前,写图标,元数据的地方),也就是主题文件的 Head.ejs 中,添加以下内容:

<%- open_graph() %> 

这是 Hexo 内置的 Open Gragh 调用方式。Image 属性生成条件为:当 Posts 中有图片链接时,每一个图片链接会被加入到 og:image 中,第一个链接是 Twitter:image,Image 类型是 summary。

Update,2021-08-14 更精确的控制:

<% if (page.headimg) {%>
<%- open_graph({twitter_card: "summary_large_image", twitter_id: "",image:page.headimg})%>
<% }else{ %>
<%- open_graph({twitter_card: "summary", twitter_id: ""})%>
<% } %>

下面一部分代码似乎渲染不出来,不清楚是怎么回事。我用图片:

测试地址

友情链接