我对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>
任何的想法?
Facebook忽略了JavaScript,你必须确保标签在初始源中可见。有不同的方法来解决这个问题,例如:
我认为可以通过反应服务器端渲染实现,请检查它非常简单,并在页面渲染之前加载所有元数据