CODEWITHSUNDEEP
javascriptreactjsmeteorreact-router
Plavookac
Plavookac

Reputation: 420

React.js - Dynamic canonical url for each page

I am using Vulcan.js for my website and by default, it has set for all pages canonical url to point to homepage. Now I want to set canonical to point to page url for each page.

Vulcan use React Helmet for making head tags, if that means something to you. It also uses React Router.

This is current code that I have:

  import React, { PropTypes, Component } from 'react';
  import Helmet from 'react-helmet';
  import Header from './Header.jsx';


  const canonical = window.location.href;  // this don't work, says ReferenceError: window is not defined



  const Layout = ({children}) =>

    <div className="wrapper" id="wrapper">

      <link rel="canonical" href={canonical} />

      <Header/>

      <div className="main">

        {children}

      </div>


    </div>

  export default Layout;

So the error that I got is:

ReferenceError: window is not defined

I am not pro at React.js, so I can't figure this out alone. But I think it is easy solution for someone who is more experienced than me.

Any help would be appreciated.

Upvotes: 2

Views: 10592

Answers (2)

Ruta
Ruta

Reputation: 81

I must say that the approach of 'const canonical = window.location.href' is not how you should define your canonical url. One thing what canonical url does it says to search engine bots that THIS is the REAL url of the page, it is not always the same as the one that user came in with. If you use url rewrites and there are more than 1 way to get into the page, this approach will cause you problems, because the canonical (which should be one) will be set to the user typed value (or wrong link from somewhere inside your page, or else...). Another thing is that canonical url is used to redirect user from the page he came in, if it doesn't look the same, for example try to go to https://www.gsmarena.com/apple_iphone_7-8064.php and then change the id from '8064' to '8858' - see what happens with the url! You should have a common canonical urls generator for your pages, which could solve the full url by using some strict data of the page (phone id for example) and you should also redirect users to canonical url if they came with another url. More info: https://support.google.com/webmasters/answer/139066?hl=en

Upvotes: 1

Plavookac
Plavookac

Reputation: 420

Ok, so now I know that the problem is because the window will always be undefined on the server side.

However, there is another solution.

I asked for help on Vulcan slack also, and here is the GitHub commit with fix.

Upvotes: 0

Related Questions