skip to Main Content

I am using react Js and I want to insert script tag for SEO purpose in my website. Please refer to the below code and possibilities of achievement:

custom Script

<script type='application/ld+json'> 
    {
        "@context": "http://www.sample.org",
        "@type": "sampleBusiness",
        "name": "test",
        "url": "https://www.example.in",
        "logo": "https://www.example.in/img/logo1.png",
        "image": "https://www.example.in/img/logo1.png",
        "description": "This is for test purpose only and shall not be used elsewhere!",
        "address": {
            "@type": "sampleAddress",
            "streetAddress": "John Doe, #27, common street, developer house",
            "addressLocality": "Test/Development",
            "addressRegion": "TestRegion",
            "postalCode": "testData",
            "addressCountry": "DeveloperContry"
        },
        "email": "hop(at)example.in",
        "telephone": "someexample"

    }
</script>

I’m trying something like this to add, but it won’t work:

render : function() {
    return (
        <script>
            {{
        "@context": "http://www.sample.org",
        "@type": "sampleBusiness",
        "name": "test",
        "url": "https://www.example.in",
        "logo": "https://www.example.in/img/logo1.png",
        "image": "https://www.example.in/img/logo1.png",
        "description": "This is for test purpose only and shall not be used elsewhere!",
        "address": {
            "@type": "sampleAddress",
            "streetAddress": "John Doe, #27, common street, developer house",
            "addressLocality": "Test/Development",
            "addressRegion": "TestRegion",
            "postalCode": "testData",
            "addressCountry": "DeveloperContry"
        },
        "email": "hop(at)example.in",
        "telephone": "someexample"

    }}
        </script>
    )   
}

2

Answers


  1. It’s not common to include script tag in React – your script will not get executed when react is rendering it, as it’s dynamically placed into dom.

    You may try react-helmet library which is probably doing what you need: https://github.com/nfl/react-helmet

    There is possibility to include it by including Helmet and using snippet:

     script={[
       {"type": "application/ld+json", "innerHTML": `{ "@context": http://schema.org" }`}
     ]}
    
    Login or Signup to reply.
  2. If your app is rendered on the client side, adding this script to the dom on the client, would not help you much with SEO. Because search engine crawlers will not see it. So instead of rendering it within the app, add it to the html page outside the app.

    I am guessing you have an .html file like the following with the root dom element of your app. Include your script like this.

    <!doctype html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Your app</title>
      </head>
      <body>
        <script>
          // Content of your script here
        </script>
        <div id="root"></div>
        <script src="/static/bundle.js"></script> <>
      </body>
    </html>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search