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

时间:2018-11-28 03:01:57

标签: reactjs facebook-opengraph meta-tags

我将og meta标签添加到了我的网站中,打开检查器时可以看到它们,但是当我进入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.c​​om上打开检查器,则可以看到标签正确显示

但是Facebook调试器告诉我 '缺少以下必需属性:og:url,og:type,og:title,og:image,og:description,fb:app_id'

我想念什么吗?我感谢朝着正确方向的推动

1 个答案:

答案 0 :(得分:0)

这是一个非常简单的解决方案,使我花了很长时间才意识到。元标记出现在检查器中,而不出现在Facebook调试器中的原因是因为这些元标记是在客户端添加的,而Facebook搜寻器从未看到过它们。您可以通过打开页面源而不是检查器来进行检查。

如果将元标记移动到index.html页面,则它们将显示。

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