html - Twitter 卡片图像模糊

标签 html twitter blogger facebook-opengraph twitter-card

上周末,我在我的 Blogger 博客上安装了 Twitter 卡片,但是,当我在 Twitter 上发布一个帖子的链接时,预览图像似乎有点模糊。

https://twitter.com/DailyNickNews/status/986395296350527488

https://twitter.com/DailyNickNews/status/986395007216209920

https://twitter.com/DailyNickNews/status/986394831470637056

当我在新标签页中打开图片时,我得到一个 URL,例如

https://pbs.twimg.com/card_img/986394838189924352/9Nw874O_?format=jpg&name=600x314

但是,显示的实际图像尺寸要小得多。在上面的例子中,图像是 392x205。

我使用的代码是:

<b:comment> Twitter Cards for Blogger XML </b:comment>
<meta expr:content='data:view.featuredlmage ? &quot;summary_large_image&quot;: &quot;summary&quot;' name='twitter:card'/>
<meta content='https://4.bp.blogspot.com/-qANmiWyhUFg/WtPAtPo65NI/AAAAAAAA5Yw/CJoYJyvpUKMrKEGHxtj0vTLS_x9AJWyDQCLcBGAs/sl600/nickelodeon-logo-nick.png' property='og:image/>
<meta content='@ Daily NickNews' name='twitter:site'/>
<meta content='@ Daily NickNews' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl.canonical' name='twitter:domain'/>
<meta expr:content='data:view.url.canonical' name='twitter:url'/>
<meta expr:content='data:view.title' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription ? data:view.description : &quot;&quot;' name='twitter:description'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredlmage' name='twitter:image:src'/>
</b:if>

我是 Twitter Cards 的新手,不知道要更改什么。顶部的 META 标签已经写着“summary_large_image”。

我已经尝试将最后一个 META 标记的值从 twitter:image:src 更改为 twitter:image,但是,没有任何改变。

最佳答案

问题出在数据标签 data:view.featuredlmage 上,它获取通过帖子编辑器设置的图像大小。为保证推特抓取的图片尺寸始终是最大的,修改代码如下-

<meta expr:content='resizeImage(data:blog.postImageUrl,1600)' name='twitter:image:src'/>

关于html - Twitter 卡片图像模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49947659/

相关文章:

javascript - SyncFusion JS 图表 - 工具提示行为错误

css - 如果我嵌入一条推文,渲染的推文已经带有硬编码的内联样式,这会弄乱原始边距

css - 定义 Blogger 模板设计器变量

javascript - 在博客中将谷歌字体添加到我的博客时,标题部分出现错误

javascript - HTML5 在 index.html 中导入外部本地 html 文件

html - 删除导航栏和标题之间的空间

javascript - 不将数组中的图像添加到 div 背景

cocoa - 如何以编程方式在 Twitter 中设置我的头像?

javascript - 如何动态创建推文按钮?

javascript - JavaScript 中的博客页面密码加密