Twitter URL预览卡未显示图像
我正在尝试获取< meta/>
在我的网站上设置的标签,以便在发布指向我的网站的链接时,诸如Facebook和Twitter之类的社交媒体网站显示了预览卡,但是我可以't twitter在预览卡中显示图像。
该网站是 https://spiriteddrive.club 和< meta/< meta/> 标签并且已设置为如下:
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@spirited_drive"/>
<meta name="twitter:creator" content="@spirited_drive"/>
<meta property="twitter:domain" content="spiriteddrive.club">
<meta property="twitter:url" content="https://spiriteddrive.club">
<meta name="twitter:title" content="Spirited Drive">
<meta name="twitter:description" content="A crowdsourced online database of the world's best driving roads.">
<meta name="twitter:image" content="https://cdn.spiriteddrive.club/images/banner-twitter.jpg">
<meta name="twitter:image:alt" content="Banner logo image for Spirited Drive">
<meta property="og:title" content="Spirited Drive"/>
<meta property="og:description" content="A crowdsourced online database of the world's best driving roads."/>
<meta property="og:url" content="https://spiriteddrive.club"/>
<meta property="og:image" content="https://cdn.spiriteddrive.club/images/banner-twitter.jpg"/>
<meta property="og:image:alt" content="Banner logo image for Spirited Drive"/>
<meta property="og:site_name" content="Spirited Drive"/>
<meta property="og:type" content="website"/>
<meta property="article:published_time" content=""/>
<meta property="article:modified_time" content=""/>
<meta property="article:author" content=""/>
<meta property="profile:username" content=""/>
这些标签是生成服务器端的,而不是在客户端JavaScript中,因此Twitter的刮板不应该有任何问题。
我在Twitter的卡预览验证器中尝试了它 https://cards-dev.twitter.com/validator 但是即使输出是
INFO: Page fetched successfully
INFO: 30 metatags were found
INFO: twitter:card = summary_large_image tag found
INFO: Card loaded successfully
直接发布到Twitter时也缺少图像,图像也总是缺少的,但是在Facebook Card Tester中显示良好: https://develovelers.facebook.facebook.com/tools/tools/debug/?q=https; >
我的图像最初是2:1,但后来有人建议使用1200x630,所以我尝试了,但仍然没有。
I'm trying to get <meta/>
tags set up on my website so that social media sites such as Facebook and Twitter show a preview card when posting a link to my site, but I can't get twitter to show an image in the preview card.
The website is https://spiriteddrive.club and the <meta/>
tags and have set up as follows:
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@spirited_drive"/>
<meta name="twitter:creator" content="@spirited_drive"/>
<meta property="twitter:domain" content="spiriteddrive.club">
<meta property="twitter:url" content="https://spiriteddrive.club">
<meta name="twitter:title" content="Spirited Drive">
<meta name="twitter:description" content="A crowdsourced online database of the world's best driving roads.">
<meta name="twitter:image" content="https://cdn.spiriteddrive.club/images/banner-twitter.jpg">
<meta name="twitter:image:alt" content="Banner logo image for Spirited Drive">
<meta property="og:title" content="Spirited Drive"/>
<meta property="og:description" content="A crowdsourced online database of the world's best driving roads."/>
<meta property="og:url" content="https://spiriteddrive.club"/>
<meta property="og:image" content="https://cdn.spiriteddrive.club/images/banner-twitter.jpg"/>
<meta property="og:image:alt" content="Banner logo image for Spirited Drive"/>
<meta property="og:site_name" content="Spirited Drive"/>
<meta property="og:type" content="website"/>
<meta property="article:published_time" content=""/>
<meta property="article:modified_time" content=""/>
<meta property="article:author" content=""/>
<meta property="profile:username" content=""/>
These tags are generated server-side, not in client-side JavaScript so Twitter's scraper shouldn't have any problem seeing them.
I tried it in Twitter's card preview validator here https://cards-dev.twitter.com/validator
but the image is always missing even though the output is:
INFO: Page fetched successfully
INFO: 30 metatags were found
INFO: twitter:card = summary_large_image tag found
INFO: Card loaded successfully
Image is also missing when posting direct to Twitter, however it shows fine in the Facebook card tester: https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fspiriteddrive.club
My image was originally 2:1, but then someone on SO suggested 1200x630 so I tried that but still nothing.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
嘿,当我遇到同样的问题时,我找到了您的问题。
尝试添加
href =“ https://cdn.spiriteddrive.club/images/banner-twitter.jpg”
沿/或content =“ https://cdn.spirited.club/images /banner-twitter.jpg“
它对我有用。
如果有帮助,请接受答案:)
Hey I found your question as I was having the same issue.
Try adding
href="https://cdn.spiriteddrive.club/images/banner-twitter.jpg"
along/orcontent="https://cdn.spiriteddrive.club/images/banner-twitter.jpg"
It worked for me.
Accept as answer if it helps :)