A website built with AngularJS loads all of its content on a single page. Its template remains unchanged, only the copy reloads to display the information a visitor requested.
I admit that the concept is fabulous. Having a single page application means almost instantaneous loading time - not to mention, easier development and fewer code errors to fix.
There is one problem, though – Optimizing AngularJS for SEO.
Angular apps serve content on the client-side. Because of that, they strip a page from all the elements Google needs to crawl and index to rank a page.
Can SEOs do anything about it, or should they give up and leave any AngularJS pages on the site unoptimized?
No, absolutely not! For one, you can actually optimize AngularJS. Granted, it requires some technical SEO know how, but it can be done.
Before I tell you more about it, let's take a look at the basics first.
What is AngularJS?
Unlike HTML, for example, an Angular-based website doesn’t store individual pages as separate files. Instead, it loads the content user requests in a single application.
For that reason, these web properties are often called Single Page Applications (SPAs.)
In practical terms, the difference means that, instead of rendering a new page every time a user clicks requests information, all interaction with the content happens on the same page through AJAX calls.
Why use AngularJS?
Building websites with the Angular framework has three main benefits.
- Content loads much faster on a single page application since there is no need to load a new HTML code every time. This results in far better user experience.
- As a result of the above, developers make fewer mistakes, resulting in fewer users encountering problems when browsing the site. Technical teams don’t have to spend time revisiting their code to fix mistakes. A win-win scenario for everyone.
Unfortunately, however, Angular presents nothing more than major challenges for SEO.
Why is AngularJS So Challenging for SEO?
For one, by calling content via API connections, the single-page technology removes all crawlable content from the page’s actual code.
Unlike a traditional, HTML page containing all website content, a SPA will only include the basic page structure. The actual wording, however, appears through a dynamic API call.
For SEO, the above means that a page contains no actual HTML in the source code. As a result, all the elements Google would crawl are not there.
Moreover, search engines cannot cache SPAs either. The two visuals below illustrate this problem well. The top one shows what a user sees when visiting an Angular page. The other presents the actual content Google can access and crawl.
What the user sees:
What Google caches:
A stark difference, isn’t it?
For users, the page works like any other. They can navigate the site easily. They can access, read and interact with the information.
Google, on the other hand, sees hardly anything on the page. Certainly, not enough to even index it properly.
That’s the challenge SEOs face with Angular apps. Such applications lack everything that’s needed to rank them well.
Luckily, there’s good news, too.
How to Optimize AngularJS Applications for Google Crawling
There are three ways to do this.
The first one is to use a pre-rendering platform. Prerender.io, for example. Such a service would create cached versions of the content and render it in a form a Googlebot can crawl and index.
Unfortunately, it could prove a short-lived solution. Google can depreciate it easily, leaving the site without an indexable solution again.
The second solution is to modify SPA elements to render it as a hybrid between client- and server-side. Developers refer to this method as Initial Static Rendering.
In this method, you can leave certain elements, critical for SEO – title, meta description, headers, somebody copy and so on – on the server-side. As a result, those elements appear in the source code and Google can crawl them.
Unfortunately, once again, the solution might prove insufficient at times.
There is a viable option, however. It involves using Angular Universal extension to create static versions of pages to be rendered server-side Needless to say, these are indexable by Google fully, and there’s little chance that the technology will be depreciated any time soon.
How to Prepare for Server-Side Rendering with the Angular Universal Extension
Below is a brief overview* of the process from the Angular’s official site. Before going through the process, though, I’d recommend moving to a controlled testing environment.
Prepare your app by modifying both the app code and its configuration.
Add a build target, and build a Universal bundle using the CLI with the @nguniversal/express-engine schematic.
Set up a server to run Universal bundles.
Pack and run the app on the server.
The result? A cached page that looks like this:
Granted, it’s not visually striking. A user wouldn’t see it, though. The search engine, however, would find all the information it needs to crawl and index the page properly, which is exactly your objective.
AngularJS offers incredible opportunities to improve user experience and cut the development time. Unfortunately, it also causes serious challenges for SEO.
For one, single-page applications contain no code elements required to have the content crawled and indexed for rankings.
Luckily, SEOs can overcome it with three options:
Using a pre-rendering platform, like Prerender.io
Creating an AngularJS and HTML hybrid called Initial Static Rendering.
Using Angular Universal extension to create static versions of the site for crawling and indexing - and that’s the option I’d recommend.