1

What I have is a react.js (javascript served) frontend single page web app with several 'pages'. This site provides people with a way to win money (by playing a simple guessing game) while I take a cut from the advertising which is served. The users are coming, but the ads are non-existent.

I understand that the adsense crawler is different from the google bot crawler and my site is not being crawled properly as it just sees the index.html as it does not seem to execute any javascript.

So do I need to place the javascript adsense provides to be approved inside my app to be served on certain pages and if so, do I just put it on one to be approved or multiple?

Any comments or feedback will be greatly appreciated as I am starting to think I will have to recreate this in a more static framework :(

  • It's generally a good practice to have your website enabled so that it can work without javascript, but that said, Google/Bing support dynamic websites, use URL fragments. – Simon Hayter Jul 17 '18 at 21:23
  • Any update on this.. I have same problem, my website mypleaks.com/# is single page application. and google web crawler not working on it and adense not showing ads on it even through my adense account is approved. – Raj Bhatia Oct 5 '18 at 11:38
2

In terms of getting the page to index the old fashioned way, you'll need to set up separate views from your server, so it has something to find when requested.

For example, my React app, like most/all React apps, is based on a single view, Index(), which is sent to the client side and then everything from that point on is client-side Javascript.

But, for example, if I refresh a page beyond the home page, I get a 404 error.

e.g. www.mysite.com/index refreshes fine,

but www.mysite.com/page gives a 404, because the server only knows about www.mysite.com/index.

To fix this, make separate pages on the sever side, but have them return the main Index page. Something like this

public ActionResult Index()
{    
    return View('index');
};

public ActionResult Page()
{
    return View('index');
};

(This is how it would be done in C#. Other servers/languages would be quite similar, I'm sure)

Note how both requests return the same page. Upon loading, the React router looks at the URL and completes the job. Or at least, it did for me.

So if I request www.mysite.com/page, the server will give me index (the main entry point that React requires to get started), but since page is written in the URL, React works from that and navigates accordingly when it can. I'm still quite new to React myself, so I don't know what exactly is going on under the covers, but it works.

This way, Google crawlers can use separate URLs and see different final results.

As for getting adsense to work, this is new to me. I'm about to have a go at implementing it myself. The following may be of help: https://stackoverflow.com/questions/43922455/using-google-adsense-with-react-react-router

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.