why in react js showing index.html tags for seo if we navigating to other pages?

I am new in react js trying to set SEO for website but it's showing me index.html tags first after that what ever i set in tag that showing below in the head tag i want show only particular meta tags for that page...how to do that in react js please help me out....

enter image description here

enter image description here

1 answer

  • answered 2019-11-14 05:01 kiranvj

    In React the most preferred way to do SEO is using react-helmet

    Try react-helmet to set your SEO tags in react app.

    Also remove all SEO from index.js

    The code is pretty straight forward.

    import React from "react";
    import {Helmet} from "react-helmet";
    
    class Application extends React.Component {
      render () {
        return (
            <div className="application">
                <Helmet>
                    <meta charSet="utf-8" />
                    <title>My Title</title>
                    <link rel="canonical" href="example.com" />
                </Helmet>
                ...
            </div>
        );
      }
    };
    

    Features for React helmet

    • Supports all valid head tags: title, base, meta, link, script, noscript, and style tags.
    • Supports attributes for body, html and title tags.
    • Supports server-side rendering.
    • Nested components override duplicate head changes.
    • Duplicate head changes are preserved when specified in the same component (support for tags like "apple-touch-icon").
    • Callback for tracking DOM changes.