在代码中而不是在 html 页面中静态插入 facebook 元标记无法按预期工作

Question

我遇到了一个关于 Facebook 元标记的奇怪问题。'

当我将它们直接添加到 html 页面以及当我 post 我的页面 url 到 facebook 时，facebook 能够读取我页面中的元标记：

  <meta property="og:image" content="https://s3.amazonaws.com/test/58474 
 4/mobile/scott_plus_malcolm.jpg">

  <meta id="testtttt33" property="og:url" content="....story/100749714">
  <meta property="og:type" content="article">
   <meta property="og:title" content="2222222222222222222222">

然而，当我在 React 应用程序中执行相同操作时，如下所示：

    componentWillMount(){
    var head = document.getElementsByTagName("head")[0];
    head.insertBefore(createMetaTag("fb:app_id","204184740523601"), head.firstElementChild);
    head.insertBefore(createMetaTag("og:description","xxxxx"), head.firstElementChild);
    head.insertBefore(createMetaTag("og:title","xxxx"), head.firstElementChild);
    head.insertBefore(createMetaTag("og:type","article"), head.firstElementChild);
    head.insertBefore(createMetaTag("og:url","/story/100749714"), head.firstElementChild);
    head.insertBefore(createMetaTag("og:image","https://s3.amazonaws.com/resized.images.stg2.xxx.com/584744/mobile/scott_plus_malcolm.jpg"), head.firstElementChild);
    console.log("wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww");
    console.log(head);
}


 export function createMetaTag(property,content) {
    var meta = document.createElement('meta');
    meta.property = property;
    meta.setAttribute('property', property);
    meta.content = content;
    return meta;
}

另外值得注意的是，我也已经尝试了以下但没有得到任何结果：

                <Helmet>
                    <meta id="testtttt1112" property="og:image" content="https://s3.amazonaws.com/resized.images.stg2.xxxx.com/584744/mobile/scott_plus_malcolm.jpg"/>
                    <meta id="testtttt2223" property="og:url" content="https://stg3.xxxxx/story/100749714"/>
                    <meta id="testtttt3334" property="og:type" content="article"/>
                    <meta id="testtttt5555" property="og:title" content="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>
                    <meta id="testtttt6666" property="og:description" content="wwwwwwwwwwwwwwwwwwwww dddddddddddddddddddd gggggggggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhhhhhhhhhh"/>
                    <meta id="testtttt7777" property="fb:app_id" content="xxxxxxxxx"/>
                </Helmet>

有什么想法吗？

Answer 1

我认为可以通过 React 服务器端渲染来实现，请检查它非常简单，并在页面渲染之前加载所有元数据

Answer 2

Facebook 忽略 JavaScript，您必须确保标签在初始来源中可见。有不同的方法可以解决这个问题，例如：

SSR - 服务器端呈现（例如，Next.js）
https://prerender.io/

在代码中而不是在 html 页面中静态插入 facebook 元标记无法按预期工作

inserting facebook meta tags in the code rather than statically in html page does not work as expected

facebook

facebook-graph-api

reactjs