SEO for Angularjs Website

If you’re building single-page apps that use hash routing or the History API, you might be using a JavaScript framework to do so.

One of the most popular frameworks is Angular.

Angular allows you to quickly build, and deploy single-page apps and helps you and your team be productive doing so.

But what do you need to make sure your Angular apps are discoverable in search?

How do you handle SEO for angularjs website?

In this blog, we will cover a few important basics to making sure your Angular app can be found by your users by a search, and how you can make the experience even better with Angular Universal.

Also read: seo tools for beginners

How to do SEO for Angularjs Website?

Let’s start by looking at a typical Angular app.

While your Angular app and Angular projects might be different in size, content, and complexity, there’s a lot that all Angular applications have in common.

For example, we will start by creating a fresh Angular app using the CLI.

First, we should make sure that we have a more or less recent version of the Angular CLI installed.

Once we have established that, we can create a new Angular app.

This creates a basic Angular app that we will use to learn more about the fundamental SEO concepts.

Let’s take a look at our application now.

Right now, our web app only has one page so far. That adds one more and sets up the route to it.

How to optimize SEO meta title & description for angularjs website?

Now it’s time to look a little closer at our web app. The first thing that stands out is that we have the same title for both routes. But they are about very different things.

Note:- It’s always a good practice to have a descriptive title that sets the expectations for what the page is about.

So let’s fix this.

Angular provides us with the title service to retrieve and set the title.

In our app component, we can extend the constructor to get a reference to the title service, and then use it within the constructor to set the title to something more appropriate.

Note that we can change the title later on as well. But crawlers might not pick it up then.

We will discuss techniques to make sure that the crawler sees the title and our content properly later.

Now, let’s look at a sample search result.

Also read: check google ranking for keywords

There’s one more thing here that we should provide the description snippet.

This snippet is generated from the meta description tag.

Like the title, this description should be specific to the individual pages and reflect what the user can expect when they click on the search result.

Let’s add some descriptions to our pages now.

Similar to the title service, Angular also has a meta service that we can use.

It allows us to create or read meta text on the page.

We are interested in adding a description tag.

So we get a reference to the meta service and add a description tag with a meaningful description like this.

Descriptions don’t have a limitation in how long they can be, but we will pick an excerpt if necessary. For instance, to accommodate for limited screen space on a mobile device.

Also read: local seo strategy 2021

How to improve speed of crawling and indexing in angularjs?

If your web app has content that changes frequently, you might notice that it can take quite a while for search engines to pick it up.

Some might not even show your content at all.

We suggested using Rendertron or Puppeteer to handle this.

And with Angular, there’s a simpler option of using Angular Universal.

Angular Universal runs our app on the server and delivers static HTML to the clients.

This often results in a speed improvement as well.

The Angular app continues to work as usual, and as you would expect, because it then also runs your JavaScript code in the browser, to give users the normal experience when using your Angular app.

To set up Angular Universal for our web app, we add the universal module and generate a Universal App based on our existing web app.

Then we need to make sure the server runs the Universal App.

If you use Express for your server site, you can use the express engine to do so.

Now, we start the server and can see the difference in the HTML that is sent from the server to the client.

Here is the version before we used Angular Universal. And here it is after we added Angular Universal.

Users and crawlers now get the content faster and without needing JavaScript.

It’s not always this easy, but at least for our sample, this Angular web app is now discoverable in search and fast.

So in this way, you can do an SEO for Angularjs website.

How do you do the SEO for your angularjs website or app? And if you have any alternative method, then please let us know in the comment section below.

If you liked this article, please don’t forget to share it.

FAQs

Can we do SEO for Angular website?

Yes, definitely but you have to implement angular universal.

Can Google crawl Angular?

Yes, but implementation of angular universal is compulsory otherwise it would be hard to get pages indexed.

How do I make my Angular site SEO friendly?

Create a New Angular App, Install Angular Universal and update your project files, Test your app, Add Angular SEO – Meta Services.

Leave a Comment

%d bloggers like this: