Google Bot Crawling on Angularjs Site with HTML5 Mode Routes

Google bot cannot fetch AngularJS site in html5 mode

It seems that adding angularjs-viewhead and generating titles for each subpage solved the problem.

How Google crawls Angular-based apps with HTML5 urls

According to the google specs, You should use

foo.com/choose?_escaped_fragment_=hashfragment.

But As mentioned here, you don't seem to need hashfragment and the equal sign part since your url is already mapped on your Django server side. So, get rid of it and give it a try.

Your final url should look like this: foo.com/choose?_escaped_fragment_.

Hope it helps!

Crawl ng-view in angular js

Your site is using # urls (eg http://luxtest.tk/#/kontakti) - Google bot will not see these as separate pages. You have two options:

  • enable HTML5 mode for your routes.
  • implement Google's ajax crawling process.

Switching to HTML5 mode is easier if you can set your hosting up appropriately to point all url's at the index.html page. Switching to HTML5 mode is done in the config for the app:

    angular.module('test', [])

.config(function($locationProvider) {
// use the HTML5 History API
$locationProvider.html5Mode(true);
});

Google indexing of my AngularJS application

The Google crawler does execute javascript on the pages that it crawls. With AngularJS, there are a few steps you have to take to make sure that your application is getting crawled and indexed properly.

HTML5 Mode

You must use html5 mode.

Webserver Setup

For the html5 mode to work properly, you must configure your webserver so that requests to directories that don't exist get rewritten to index.html.

Sitemap

Google does not properly follow links in angularjs apps yet, therefore you must create a sitemap for all of your routes. This sounds like a pain to do, however, with proper build processes this can be a very automated process. (gulp, grunt, etc.)

Cons

This of course only applies to the google crawler. Other search crawlers such as Bing may not support javascript applications yet, though I wouldn't be surprised if this changes over the next year or two (if it hasn't already.)

Other considerations

One commonly missed problem with indexing angular apps is things like pagination and content that shows up after clicking a button. If these actions do not change the url, google will not crawl it. For example, say you have a page with a table using pagination and it has 3 pages. Google will only crawl the first page unless each page has a different url route such as /table/page/1 /table/page/2 /table/page/3

How do search engines deal with AngularJS applications?

Update May 2014

Google crawlers now executes javascript - you can use the Google Webmaster Tools to better understand how your sites are rendered by Google.

Original answer

If you want to optimize your app for search engines there is unfortunately no way around serving a pre-rendered version to the crawler. You can read more about Google's recommendations for ajax and javascript-heavy sites here.

If this is an option I'd recommend reading this article about how to do SEO for Angular with server-side rendering.

I’m not sure what the crawler does when it encounters custom tags.



Related Topics



Leave a reply



Submit