Basically: don’t worry about the SEO, leave that to us. You just focus on making good content.
What Google can actually crawl vs what they claim is up for debate. Based on my experience, here is what I’ve seen Google be able to crawl and read:
Content in Initial Page Load
How to Render AngularJS Like Googlebot
Historically SEO’s looked at the source code of a page to determine if content on a page was indexable. If it’s in the source code, then you should be fine. With sites that rely heavily on AngularJS, oftentimes, much of the content will not actually be in the source code. Given Google’s improvements in AngularJS indexation, this means that you can no longer rely on the source code to evaluate the AngularJS indexing performance of a site. If you want to see if content is indexable, you can load the page and then right click and select inspect element BEFORE clicking on anything on the page. This will typically be the same content and sourcecode that Google is able to render.
Why None of This Matters
You may have notice how up until this point we have talked exclusively about Google. While Google commands the majority of the market share in the US, there are still other significant players. In the US, Bing is most notable with an alleged third of the market share (Microsoft properties + Yahoo search). If you operate in Russia, Yandex has 60% of the market. Similarly in China, Baidu holds about 80% of the market share.
While Comscore claims that Bing powers a third of searches in the US, most sites I’ve seen range between 5% and 15% depending on the industry. It is unacceptable to forfeit even 5% of your traffic because you’ve decided to use Angular. You need a solution to ensure that your SEO performance does not decrease simply because you are rendering content in Angular.
The Key to AngularJS SEO
The key to Angular SEO is prerendering – or creating an HTML snapshot to be served in the source code rather than relying on Google and other search engines to be able to properly render your Angular webpages. This will solve the issue of Google not being able to index content that is “locked” behind a click and will allow Google to fully index AngularJS content on your site.. Further, this will enable other search engines (Bing, Yandex, Baidu) to see any content on your page. When you are prerendering your pages, you should be able to look directly in the source code and see your content rather than needing to use the inspect element functionality of Chrome.
While pre-rendering your content is critical, another important component of AngularJS SEO is making sure that your pages have a user (and search engine!) friendly URL. This means avoid the hash garbage in your URLs (ex: site.com/#/page) – which is one of the options for rendering URLs in Angular. To setup pretty / SEO friendly URLs, you will want to leverage the $routeProvider
and $locationProvider to set your routing to HTML5 mode.
As a follow up to URLs, make sure that you are generating XML sitemaps that include your canonical URLs and that they are all submitted in Google Search Console (and Bing Webmaster Tools). This will help ensure that search engines can find and crawl all of your important URLs.
How to Pre-render Your Pages for Angular SEO
If you want to deliver a pre-rendered version of your AngularJS pages for SEO, you want to make sure you are using Angular2 rather than the initial version of AngularJS. This is because, like React, Angular2 supports server side rendering. This will allow you to easily turn on prerendering to create HTML snapshots for SEO.
There are several guides to setting up Angular Universal / server side rendering to create your HTML snapshot:
If for whatever reason you don’t want to use Angular2 / Universal, you will need to roll your own pre-rendering through something like phantom.js. If you want to use a service to do most of the heavy lifting for you, you can use something like prerender.io, but you’ll still need dev support to integrate with your platform.