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.

  • React - Unhandled Rejection (TypeError): Cannot read property 'city' of undefined

    I'm currently developing a website where Team information is retrieved as:

     {
            "name": "team1",
            "location": {
                "city": "Milan",
                "country": "ITALY"
            },
            "score": 56250,
        },
    

    I'm trying to access team location as this.state.team.location.city , when I log it in console is shown correctly but Unhandled Rejection (TypeError): Cannot read property 'city' of undefined is shown in the website.

    Any hint or help will be greatly appreciated.

  • CORS error on JSON parse when parsing Object full of strings

    I believe there is a JS fundamental I have forgotten, cause I keep running into this error and working around it. However, I have run into a wall this time.

    I keep getting this CORS error from React when I try to JSON.parse() an object. What has me stumped is that I thought CORS errors where only thrown on requests. In my case, I am simply trying to parse a stringified string from my state.

    <Image className="vendor-man-image col" src={JSON.parse(this.state.sample).thumb} thumbnail />
    

    The object to be parsed looks like this:

    {
      "title":"Annotation-2020-07-08-144803.png",
      "image":"https://some-link",
      "medium":"https://some-link",
      "thumb":"https://some-link",
      "delete":"https://some-link"
    }
    

    Edit: I failed to mention, my object has already been stringified. The stringified version is what is being returned from an API.

  • Change URl without page refresh NEXT.JS

    I am developing a ecommerce store using NEXT.JS and Redux. So in product listing page, I have sorting select dropdown with Price Low to High, Price High to Low and New Arrivals. Upon selecting this option, I want to change the URL without page refresh and API call should occure. I have tried using below code, but it is not working and page is reloading.

    function sortBy(value) {
        router.replace({
            pathname: '/products/'+slug,
            query: { sort: value }
        })
    
        dispatch(fetchproducts(slug, sort));
    }
    

    The above code just refresh the current page and appending sort param to URL.

    So is it possible to do it without page refresh like in Flipkart.

  • Subdomain isn't being indexed by Google

    So I have a website that has a subdomain. The main one is already indexed by Google, but the subdomain isn't. I already added the Sitemap but it still doesn't work. Here is some proof why this is weird.Image 1 (It is in Spanish but it basically says it isn't indexed)

    After this I click on Try published URL and it says this message.

    Image 2

    As you can see, it says there are no errors and that it is available for Google. If it is indexed, and selected as canonical, it can appear in the search results of Google.

    I already selected it as canonical too. And then clicked on "Request Indexation", but it doesn't work.

    Does anyone have any idea how I can get it accepted indexed in Google? Thanks a lot

  • How to give 'more' link direct answer url to FAQPage schema

    I have a FAQPage with microdata. acceptedAnswer the body has a lengthy paragraph, hence the Google search reduced the content length and added a 'more' link to the page. FAQ positioned at the bottom of the page and I would like to know if there is a way to provide http://myshop.com/#seo_faq_1 to the more anchor tag.?

    here is my markup:

    <div itemscope itemtype="https://schema.org/FAQPage">
    
        <div id="seo_faq_1" itemscope itemprop="mainEntity"
             itemtype="https://schema.org/Question">
            <h3 itemprop="name">Question 1</h3>
            <div itemscope itemprop="acceptedAnswer"
                 itemtype="https://schema.org/Answer">
                <div itemprop="text">
                    Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada.
                </div>
            </div>
        </div>
        <div id="seo_faq_2" itemscope itemprop="mainEntity"
             itemtype="https://schema.org/Question">
            <h3 itemprop="name">Question 2</h3>
            <div itemscope itemprop="acceptedAnswer"
                 itemtype="https://schema.org/Answer">
                <div itemprop="text">
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada.
                </div>
            </div>
        </div>
    </div>
    
    

    Rich Result Preview: https://search.google.com/test/rich-results?utm_campaign=sdtt&utm_medium=message&id=5iFpLih5Wp28XETTlDCOUg&view=search-preview

  • Is there any tool in seo to check duplicate urls in sitemap

    I am creating sitemap dynamic in which I have more than 19000 urls but many duplicate urls are added. Is there any tool through which we can find duplicate urls and remove it.