All around the web, everyone is talking about Angular, be that Angular JS or Angular2. The prodigy kid is taking over the internet and for a fact. All the react framework are considerably improving the user experience. They bring huge platforms such as YouTube for example to the next level.

Yet, as everything good in life must have at least a downside, right?

The SPAs guarantee a better user-experience, yet they tend to make SEOs wonder what they’ve done wrong in this life. There is a huge paradox of Angular platforms. Despite a better loading speed and the overall experience, it seems that from an SEO point of view Angular still has a lot to learn. In itself, it’s quite normal for this type of framework. Discuss this matter with your development team before the implementation phase.

Angular is maintained by Google and other individuals, so it should be perfect for Google’s crawlers. The irony is that Angular websites are harder to be found/indexed by crawlers. This happens due to the difference between the way in which the crawlers work and the JS structure of Angular.

The main problems reported when using Angular are:

1. Secondary pages not crawled

Googlebot and other crawlers rely on HTML and CSS in their indexing and crawling activity. Google claims that their bots can crawl JavaScript, yet evidence has shown that SPA framework really puts those crawlers to the test.

Reports from SEOs show that SPAs frameworks tend to put problems when it comes to secondary pages. While it’s true that SPAs refer to the single-page apps, most of the websites don’t rely on just one page.

So, as long as you’re using Angular for single page websites and apps, your website’s SEO still has some hope.

2. Analytics problems

As in the case of the previous problem, it’s all a matter of HTML/CSS vs JavaScript. Usually, an HTML response triggers a pageview. This is then recorded by the platform and shown to the SEO or the general analytics user. We’ve seen on several occasions that the Analytics will only record the main page while leaving the others.

HOW TO FIX ANGULAR SEO PROBLEMS

First of all, the solutions may differ depending on the website. Still, there are a few general solutions that may fix your Angular SEO problems. Here there are:

1. LIST THE PAGES TO BE SUBMITTED

This may sound a bit weird, but your SEO specialist may use this little trick to help your website’s SEO. This is SEO 101. In order to be sure that your platform will be indexed, make sure that your sitemap is visible to the crawlers. Makes perfect sense, right?

This little piece of advice is part of what all SEOs out there will tell you.

2. USE GOOGLE TAG MANAGER

Another piece of advice pulled right out from the SEO 101.

Adding Google tags makes part of all SEOs daily life, so why wouldn’t your do it for you Angular website? A particular thing to keep in mind when optimizing Angular is to implement Angulartics, a web analytics JS app. You’ll have pageview tracking fully adapted for your platforms. It is compatible with Google Analytics and basically solved lots of the problems we’ve mentioned before.

3. HIRE A SOMEONE SPECIALIZED IN ANGULAR TO FIX YOUR SEO PROBLEMS

Captain obvious, right?

An Angular specialist will know how to fix your SEO problems depending on the website’s profile and usage.

The first approach should include a look at the isomorphic JavaScript and the isomorphic rendering. We won’t insist on this in this post, as it will be dealt with in another future article.

Among the so-called technical solutions is Prerender.

Prerender is a middleware that allows your Javascript website to be crawled by search engines by providing the static HTML of the page when a request is made.

In other words, when the crawler comes, the prerender will give HTML data. This allows the crawler to do its job just like in the case of non-Angular platforms. This is a solution for a rather small presentation website. For bigger and more complex platforms, this solution may not work that well, as it may increase the page loading speed. Pay great attention and talk to a specialist before installing this middleware.

If you still have access to a team of developers, or if you haven’t yet finished the development, your Angular devs may find a custom solution using PhantomJS or SlimerJS.  Basically, this type of solution may tell the server to convert JS data to HTML and to submit it to the crawler once a request has been made. We’ve tried to do a custom solution of this type, and while it worked, it was a great challenge for our devs.

Install prerender or any other custom solution. Then go to the console and crawl the website, as you would usually do in the case of an error or change on your platform.

4. FETCH AS GOOGLE AND CRAWL WEBSITE

Sometimes the simplest solutions are the easiest. If your SEO is surprised by this little piece of information, maybe you should look for a new SEO.

Make sure that you have your sitemap completed, that you are using tag manager and that your content is optimized for your user’s queries.

When crawling the website, you may notice that there are some errors or problems.

Best aspect: this is a great opportunity for you to notice, fix and prevent these errors.

Not so great aspect: if you don't notice these errors, this may result in a disaster for your website.

After all that, in some cases, you may notice that it’s just too much of a hassle to continue with Angular. In this case, a change and a return to basics may be advisable for your platform. While we like what Angular brings to the community, we must admit that sometimes it’s just not working.

Again, our main focus as a digital agency is to offer the best experience for both the client and the user.

If you have some experience with SEO for Angular, don't hesitate to share it with us in the dedicated comment section.