Ad

Inserting Facebook Meta Tags In The Code Rather Than Statically In Html Page Does Not Work As Expected

- 1 answer

I am having a strange issue regarding to the facebook meta tags.'

when I add them directly to the html page and when I post my page url to facebook, facebook is able to read through the meta tags in my page:

  <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">

However when I do the the same in react app as follows:

    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;
}

Also it is noteworthy that I already tried the following as well but did not get anywhere:

                <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>

Any idea?

Ad

Answer

Facebook ignores JavaScript, you HAVE to make sure the tags are visible in the initial source. There are different ways to solve this, for example:

Ad
source: stackoverflow.com
Ad