【问题标题】:Twitter Cards Images Are BlurryTwitter卡片图像模糊
【发布时间】:2018-10-01 12:37:49
【问题描述】:

上周末,我在我的 Blogger 博客上安装了 Twitter Cards,但是,当我在 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,但是没有任何改变。

【问题讨论】:

  • Twitter 优化的是大小,而不是质量;不要期望太多。推荐的最小尺寸(上次我检查;它可能已经改变)是 600x314,最佳是 1200x628。偏离这些比例会导致尺寸调整和质量下降。
  • 我认为这可能是问题所在。有没有办法让 Twitter 使用缩略图链接到的原始图像?

标签: html twitter blogger facebook-opengraph twitter-card


【解决方案1】:

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

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

【讨论】:

  • 嗨@Prayag Verma,我已经更新了代码,但质量没有改变。不过现在奇怪的是,我在 Twitter 上获得了多种卡片选项。它们要么显示为没有照片的小卡片、有照片的小卡片,要么显示为低图像质量的正常卡片。我使用的代码是3.bp.blogspot.com/-ZG3RL4d6cPw/Wtt-UZdNfZI/AAAAAAAA5h8/…
  • 嗨@Slimer,您可以尝试使用数据标签data:blog.postImageUrl 而不是data:view.featuredlmage,看看是否有效。我已更新答案以反映此更改
  • 嗨@Prayag Verma,它成功了! :) 非常感谢你的帮助! :)
猜你喜欢
  • 2017-12-22
  • 2022-12-14
  • 2022-07-17
  • 2018-02-05
  • 2018-09-08
  • 2021-08-26
  • 2011-01-18
  • 2015-06-10
  • 1970-01-01
相关资源
最近更新 更多