Question

关于facebook meta标签，我遇到了一个奇怪的问题。'

当我将它们直接添加到html页面时，以及当我将页面网址发布到facebook时，facebook都可以读取页面中的meta标签：

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

  <meta id="testtttt33" property="og:url" content="https://stg3.dev- 
  tj.news/story/100749714">
  <meta property="og:type" content="article">
   <meta property="og:title" content="2222222222222222222222">

但是，当我在react app中执行以下操作时：

    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","https://stg3.dev-xxx.news/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 meta标签无法按预期工作

2 个答案: