Twitter 推特卡片验证程序错误:没有找到卡片(卡片错误),即使我有元标记

Twitter 推特卡片验证程序错误:没有找到卡片(卡片错误),即使我有元标记,twitter,facebook-opengraph,share-open-graph,Twitter,Facebook Opengraph,Share Open Graph,我遵循本教程将社交媒体卡添加到我的网站: 但是,我的url仍然会在twitter卡验证程序中返回: INFO: Page fetched successfully INFO: 5 metatags were found ERROR: No card found (Card error) 我可以看到我有所有的元标记,那么会有什么问题呢 搜索引擎优化组件: 从“React”导入React 从“道具类型”导入道具类型 从“反应头盔”导入{Helmet} 从“盖茨比”导入{useStaticQue

我遵循本教程将社交媒体卡添加到我的网站:

但是,我的url仍然会在twitter卡验证程序中返回:

INFO:  Page fetched successfully
INFO:  5 metatags were found
ERROR: No card found (Card error)
我可以看到我有所有的元标记,那么会有什么问题呢

搜索引擎优化组件:

从“React”导入React
从“道具类型”导入道具类型
从“反应头盔”导入{Helmet}
从“盖茨比”导入{useStaticQuery,graphql}
函数SEO({description,lang,meta,image:metaImage,title}){
const{site}=useStaticQuery(
图形ql`
质疑{
场地{
站点元数据{
标题
描述
关键词
作者
网址
啁啾
脸谱网
}
}
}
`
)
const metaDescription=description | | site.sitematadata.description
常量图像=
metaImage&&metaImage.src
?`${site.sitemata.url}${metaImage.src}`
:null
返回(
)
}
SEO.defaultProps={
朗:`en`,
meta:[],
说明:``,
}
SEO.propTypes={
description:PropTypes.string,
lang:PropTypes.string,
meta:PropTypes.arrayOf(PropTypes.object),
标题:PropTypes.string.isRequired,
图像:PropTypes.shape({
src:PropTypes.string.isRequired,
高度:PropTypes.number.isRequired,
宽度:需要PropTypes.number.isRequired,
}),
}
导出默认搜索引擎优化
gatsby-config.js

const{isNil}=require(“lodash”)
常量mapPagesUrls={
索引:“/”,
}
module.exports={
站点元数据:{
标题:《游隼占星术》,
描述:`占星术博客,星座,世俗,历史占星术,出生图咨询。`,
关键词:[
“占星术”,
“占星家”,
“十二生肖”,
“标志”,
“白羊座”,
“金牛座”,
“双子座”,
“癌症”,
“狮子座”,
“处女座”,
“天秤座”,
“天蝎座”,
“人马座”,
“摩羯座”,
“水瓶座”,
“双鱼座”,
“占星术”,
“预测”,
“平凡的”,
“出生图”,
],
作者:`Pedro Coelho`,
url:“https://www.peregrinastro.com",
网站语言:“英语”,
推特:“@peregrinatro”,
facebook:“百富勤”,
},
插件:[
`盖茨比`,
{
解析:`gatsby源文件系统`,
选项:{
名称:`images`,
路径:`${uu dirname}/src/images`,
},
},
`盖茨比变压器,
`盖茨比,
{
解析:`gatsby插件清单`,
选项:{
名称:`gatsby starter default`,
短名称:`starter`,
起始url:`/`,
背景颜色:“663399”,
主题颜色:“663399”,
显示:`minimal ui`,
图标:`src/images/favicon.png`,//此路径相对于站点的根目录。
},
},
{
解析:`gatsby source strapi`,
选项:{
APIRL:`https://astrobeats-cms.herokuapp.com`,
queryLimit:10000,//默认为100
contentTypes:[`article`、`category`、`author`],
//如果使用单个类型,请将它们放置在此数组中。
},
},
{
解析:“盖茨比源文件系统”,
选项:{
名称:“字体”,
路径:`${uuuu dirname}/src/font/`,
},
},
{
解析:“盖茨比插件网页字体加载器”,
选项:{
谷歌:{
家庭:[“Merriweather”、“蒙特塞拉特”、“拉托:100300400700900”],
},
},
},
{
解析:“盖茨比插件反应svg”,
选项:{
规则:{
包括:/assets/,
},
},
},
`盖茨比变压器,
`盖茨比,
{
解析:`gatsby源文件系统`,
选项:{
名称:`images`,
路径:`${uu dirname}/src/images/`,
},
},
],
}

你能分享你的SEO组件以及你的
gatsby config.js
?@FerranBuireu我已经把它们添加到了帖子中。问题是,虽然你有5个元标记,但你没有所有的标记,也没有Twitter或Open Graph的正确标记。如果使用浏览器的查看源代码查看页面,则不会看到任何twitter或og标记,但这些标记位于页面的最终代码中。我猜您正在使用JavaScript在浏览器中构建页面,但是Twitter等不会构建页面来查找标记。您必须在初始html文件中提供标记(在顶部附近,在样式和脚本部分之前–WhatsApp不会下载您的整个文件)。实际上,所有og和twitter标记都会显示在中,但在最后,我检查了所有必要的标记。好的,我运行了一个curlURL-v-a推特机器人,发现推特的爬虫程序没有看到任何标签。根据twitter的说法:“你的页面是否在加载后添加标签,例如使用JavaScript(例如Angular、Meteor、Google tags Manager)?爬虫程序和验证程序无法执行JavaScript,标签必须是静态的。”,那么我该如何解决这个问题,因为SEO组件可能会使用JavaScript生成标签?