How Do Search Engines Deal With Angularjs Applications

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.

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

Make AngularJs crawlable for search engines

I think it's much better practice these days to use HTML5 history.pushState, and thus provide a unique URL for every page.

More information here.

AngularJS / AJAX app and search engine crawlers

As of May 2014 GoogleBot now executes JavaScript. Check WebmasterTools to see how Google sees your site.

http://googlewebmastercentral.blogspot.no/2014/05/understanding-web-pages-better.html

Edit: Note that this does not mean other crawlers (Bing, Facebook, etc.) will execute Javascript. You may still need to take additional steps to ensure that these crawlers can see your site.

Enable SEO for AngularJs (1x) website

There is no such way of "enabling SEO". It depends on the way you make your website, lots of different factors actually (content, text in links, backlinks).

I'm using Angular 1.6 aswell, and, no worries, GoogleBot can render javascript. Maybe use the /#!/url to try to render without redirecting.

No need for online prerendering services. I'm using a Grunt task to generate snapshots : grunt-ng-html-snapshot.

This link is a good way to start. But beware: the Grunt task used is not the good one.

To share on social media you need to use Open Graph for Facebook (and something different for Twitter). Note that the social medias crawlers can't read javascript and that you will need to serve the snapshots for these crawlers (from your .htaccess). You don't need to serve a snapshot for GoogleBot.

An example of .htaccess (i'm far from being good at this but this is what i use) :

RewriteCond %{HTTP_USER_AGENT} (facebook|bot|spider|whatsapp) [NC]
RewriteCond %{HTTP_USER_AGENT} !googlebot [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}/resources/snapshots/%{REQUEST_URI}.html [QSA,L,R=301]

Where resources/snapshots/ is the directory containing the snapshots

---

Related Topics