reactjs - 我的网站打开图元标记未显示在开发人员 Facebook 调试器中
问题描述
我将 og 元标记添加到我的站点中,当我打开检查器时可以看到它们,但是当我转到 facebook 调试器时,它告诉我我缺少刚刚添加的所有标记。
该代码使用 MetaTags 包。
<MetaTags>
<title>Find Their Gifts</title>
<meta name="description" content="The personality quiz that suggests gifts based on the results" />
<meta name="keywords" content="find their gifts, gift quiz, gift personality quiz, gift finder" />
<meta property="fb:app_id" content="349573132258777" />
<meta property="og:title" content="Find Their Gifts: The Personality Quiz Gift Finder" />
<meta property="og:image" content="https://www.findtheirgifts.com/metaimage.png" />
<meta property="og:image_secure" content="https://www.findtheirgifts.com/metaimage.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.findtheirgifts.com/" />
<meta property="og:description" content="The personality quiz that suggests gifts based on the results. Find gifts that they really want." />
</MetaTags>
如果您在 findtheirgifts.com 上打开检查器,您可以看到标签已正确显示
但 facebook 调试器告诉我“缺少以下必需属性:og:url、og:type、og:title、og:image、og:description、fb:app_id”
我错过了什么吗?我感谢任何朝着正确方向的推动
解决方案
这有一个非常简单的解决方案,我花了很长时间才意识到。元标签出现在检查器中,但没有出现在 Facebook 调试器中的原因是元标签是在客户端添加的,Facebook 爬虫永远不会看到它们。您可以通过打开页面源而不是检查器来检查这一点。
如果您将元标记移动到 index.html 页面,它们就会显示出来。
如果您需要元标记是动态的,您将需要深入研究一些更复杂的解决方案。但这些不变的标签是我试图完成的全部。
推荐阅读
- python - 传递参数时 Django URL 出错
- java - 保存有 2 个其他实体链接的实体/java spring hibernate
- r - 在 R 中为 NLP 创建海量 DTM
- unity3d - 为什么我的 Unity 画布上的所有 text mesh pro (tmp) 都是相同的颜色
- r - 如何将 R 中的时间序列与重叠日期相结合并从第一个时间序列中消除重叠日期
- c - 为什么我必须使用结构取消引用运算符而不是仅仅强制转换
- excel-formula - Excel;查找案例开始/停止时间是否出现在设定的时间间隔内
- php - 在 PHP 表单的 onClick 事件中动态添加“ID”
- javascript - 新 - TypeError: undefined is not a Function
- javascript - 将鼠标悬停在导航栏的内容上会导致整个栏展开