Suffering from disapproved Google ads for your Angular website? Well you came to the right spot to solve all your Google adsense issues using prerender.io
Why are my Google Ads not approved even though my site is working perfectly?
Angular is not really best friends with SEO and therefore google in general. The problem is that Angular serves a single page with no content. All the content is pulled in dynamically. This works perfectly for visitors of your website but bots really hate empty pages.
You have to understand that search engines like Google, Bing, Baidu and Yandex have to spend a ton of cash on bots exploring the whole internet. They don’t have time to wait until your dynamic page is loaded. Ain’t nobody got time for that! An html page with all content ready to go, is what those bots are looking for.
Bots do not only visit your website to end up on their search engine but also to validate and monitor your website if you are using ads. And that solves the mistery: a google ad bot visits your site and sees an empty page and your ad will be disapproved as there is no content. It’s also possible that you configured something wrong on your server so that bots visiting your site get a 404 or 500 error when visiting, which will also cause the ad to be disapproved.
How to fix disapproved google ads?
So how do we make life easier for the bots? It’s pretty crazy but we will have to setup a server that visits our website and waits until the content/html is loaded and cache that resulting html page somewhere. Whenever one of the search bots is visiting our website we serve this cached html page instead of the dynamic Angular page.
One important thing we need to figure out is whether our website is visited by a bot or by normal visitor. To do that we need to look at the user agent. A normal (human) visitor will have a user agent describing the browser he or she is using:
Mozilla/5.0 (platform; rv:geckoversion) Gecko/geckotrail Firefox/firefoxversion
Bots on the other hand will identify themselves:
Googlebot
To make this work we need to use a platform like Prerender.io which can prerender dynamic pages and cache them. It consists of a middleware layer which is just some kind of interceptor logic that you have to install on the server that is hosting your Angular application to route traffic from bots to the prerender service and normal visitors to the regular Angular site.
if visitor is bot then route to cached prerendered version of the website else route to dynamic Angular website
Once this is setup you have to configure all the bots user agents. It’s a bit tricky as prerender.io has some predefined user agents in their code but not the ones used by google adsense. So make sure to configure all following user-agent in prerender.io:
Googlebot APIs-Google AdsBot-Google-Mobile AdsBot-Google Googlebot-Image Googlebot-News Googlebot-Video Mediapartners-Google AdsBot-Google-Mobile-Apps
More info on google crawlers and user agents. And here a list of user agents for all type of crawlers (baidu, yandex, bing, …). This is pretty helpful to make sure your site is ranked on search engines in China for example.
If you use the asp.NET MVC version of prerender.io then you will see following in the source code:
private IEnumerable GetCrawlerUserAgents()
{
var crawlerUserAgents = new List(new[]
{
"googlebot", "yahoo", "bingbot", "yandex", "baiduspider", "facebookexternalhit", "twitterbot", "rogerbot", "linkedinbot",
"embedly", "quora link preview", "showyoubot", "outbrain", "pinterest/0.",
"developers.google.com/+/web/snippet", "slackbot", "vkShare", "W3C_Validator",
"redditbot", "Applebot", "WhatsApp", "flipboard", "tumblr", "bitlybot",
"SkypeUriPreview", "nuzzel", "Discordbot", "Google Page Speed", "x-bufferbot"
});
if (_prerenderConfig.CrawlerUserAgents.IsNotEmpty())
{
crawlerUserAgents.AddRange(_prerenderConfig.CrawlerUserAgents);
}
return crawlerUserAgents;
}
In the web.config you will have a prerender config section. One attribute is crawlerUserAgents which allows you do add extra user agents which should be identified as bots.
<prerender token="[YOURTOKEN]" crawlerUserAgents="Googlebot,APIs-Google,AdsBot-Google-Mobile,AdsBot-Google,Googlebot-Image,Googlebot-News,Googlebot-Video,Mediapartners-Google,AdsBot-Google-Mobile-Apps" extensionsToIgnore="xml"> </prerender>
It’s also worth noting that you don’t prerender .xml documents to avoid issues with sitemap.xml. Looking at the source code it seems that most other irrelevant extensions are been excluded already:
private IEnumerable<String> GetExtensionsToIgnore()
{
var extensionsToIgnore = new List<string>(new[]{".js", ".css", ".less", ".png", ".jpg", ".jpeg",
".gif", ".pdf", ".doc", ".txt", ".zip", ".mp3", ".rar", ".exe", ".wmv", ".doc", ".avi", ".ppt", ".mpg",
".mpeg", ".tif", ".wav", ".mov", ".psd", ".ai", ".xls", ".mp4", ".m4a", ".swf", ".dat", ".dmg",
".iso", ".flv", ".m4v", ".torrent"});
if (_prerenderConfig.ExtensionsToIgnore.IsNotEmpty())
{
extensionsToIgnore.AddRange(_prerenderConfig.ExtensionsToIgnore);
}
return extensionsToIgnore;
}
So I hope that demystifies the whole Angular, prerender and google ad combination and all the issues that you might encounter.
Feel free to drop a comment below if it worked for you or if you have any further questions.