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

问题描述 投票:0回答:2

我对facebook meta标签有一个奇怪的问题。

当我将它们直接添加到html页面时,当我将我的页面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">

但是,当我在反应应用程序中执行相同操作时,如下所示:

    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>

任何的想法?

reactjs facebook facebook-graph-api
2个回答
0
投票

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


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.