我的网站开放图元标记未显示在开发人员 Facebook 调试器中

Question

我将 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 调试器告诉我 'The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id'

我错过了什么吗？我感谢任何朝着正确方向的推动

Answer 1

这是一个非常简单的解决方案，我花了太长时间才意识到。元标记出现在检查器中而不出现在 Facebook 调试器中的原因是元标记是在客户端添加的，而 Facebook 爬虫永远看不到它们。您可以通过打开页面源而不是检查器来检查这一点。

如果您将元标记移动到 index.html 页面，它们将会显示。

如果您需要动态的元标记，您将需要深入研究一些更复杂的解决方案。但这些不变的标签正是我想要完成的。

我的网站开放图元标记未显示在开发人员 Facebook 调试器中

My websites open graph meta tags are not showing up in developers facebook debugger

meta-tags

facebook-opengraph

reactjs