How to Make Angular SEO Friendly Website with Angular Universal?

There are many server-side and client-side rendering JavaScript frameworks available for developers to make efficient web applications. Picking the right framework for your project needs can be daunting and challenging. Choosing the wrong framework can also affect the project’s ability to meet deadlines and client expectations. Angular is one such open-source and full-stack Top-JavaScript framework used to make Single Page Applications, Web Apps, and Hybrid Apps. Google maintains and supports Angular.

Why Angular?

Most clients and developers are drawn to Angular because it acts as a complete toolkit that can help developers build large-scale applications. Top companies like Forbes, Xbox, BMW, and others use Angular for their front-end development requirements. Angular is primarily used to build Single Page Applications.

Angular apps are called Single Page Applications, as when an Angular application loads, it renders other pages dynamically without reloading the web pages repeatedly. This is made possible with Angular’s robust framework that dynamically modifies the pages by running JavaScript codes or loading only the specific content. This helps users get a seamless experience without needing to wait for the pages to reload.

By now, it is pretty understandable that Angular is very user-friendly. It helps create impressive, fully functional, scalable web app solutions. This means it should be one of the best choices for your app development requirements, right? Well almost! For any app to be efficient in getting maximum results, it needs to be user-friendly and SEO-friendly.

Angular is generally looked down upon for its SEO limitations. Before we understand the challenges with Angular and SEO, it will help us to revise what SEO is and why we should care in the first place.

Why should you make your website ‘search engine crawler friendly?

Search engine crawlers are also called spiders, robots, or bots. These are programs or scripts that browse pages on the web to read the pages they visit for adding them to their search engine’s index. This activity is essential as search engine crawlers indexing your website’s content help popular search engines read your content and understand your company’s end goal. Search engines better match your content to the user query it gets from users when they search for something. The easier it is for search engine crawlers to index your content, the more likely your website will rank on the top search results for your services. This will help you drive better traffic to your website, hence increasing chances of conversion and overall success.

Angular SEO Challenges

1. Angular SEO Challenges – Content Invisible for Bots

We know Angular doesn’t reload pages unless explicitly told to do so from what we read about Angular above. It does support changing metadata of the web pages dynamically, but that is entirely based on JavaScript. Search engine crawlers aren’t a big fan of JavaScript. Due to this, Angular apps can fail in rendering the right content or their metadata. Most of the user’s content can see on an Angular website or Angular app; the bots can’t see it as they fetch data from the source. And Angular doesn’t store data on the source. Single Page Applications call content via API connections; this removes all crawlable content from the page’s actual code. Most websites are based on HTML, which has all the website content; in contrast, SPAs only keep the basic page structure. The wordings appear through a dynamic API call. Hence, there is no actual HTML code in the source code that Google crawlers can crawl.

2. Angular SEO Challenges – Loading Speed Limitation

Another significant challenges of Angular apps that makes them less SEO-friendly is speed. Angular apps are scalable, user-friendly, and robust. What they aren’t generally is speed optimized. Most angular sites load as blank screens for a couple of odd seconds before rendering the home page. This leads to visitors bailing out the website before even reaching it or experiencing it.

As per a study conducted by Statisitcbrain – an average person’s attention span is only 8 seconds. So if you don’t captivate the user’s attention in this attention span, you are likely to see more bounce rates, which again negatively impacts the SEO rankings.

How to Make Angular SEO friendly?

Fortunately, there are workarounds and solutions for solving this SEO conflict with Angular apps. Angular is one of the most popular front-end JS technology, so they have realized these limitations and have some effective solutions in place for you to have a website that is both user-friendly and SEO friendly. Let us see the possible solutions of getting your Angular website SEO friendly:

1. Angular SEO – Dynamic Rendering

As we discussed above, the major limitation for Angular websites regarding SEO is that it fetches data via API calls and doesn’t have many HTML files for google to crawl. An easy workaround to this problem can be to make use of a dynamic rendering tool that can help you create static HTML files that the web crawlers will be easily able to consume and index. After this, you can configure your webserver to direct search engine crawlers to the pre-rendered pages, and the human visitors will be redirected to the normal Angular website. Problem solved, right? Not quite. We still haven’t addressed the issue of speed with this solution. We will address this later in the blog.

2. Angular SEO – Setting titles and Metadata

Search engine crawlers fetch data from all the titles and metadata available on the web page. For adding metadata and modifying the page title dynamically in your Angular app, all you need to do is leverage these Angular modules.

Go to your home.components.ts file and update it with the following changes:

import { Component, OnInit } from '@angular/core';
import { Meta,Title } from '@angular/platform-browser';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private meta: Meta,private title: Title) {
    this.meta.addTags([
      {name: 'description', content: 'Home page of SEO friendly app'},
      {name: 'author', content: 'buttercms'},
      {name: 'keywords', content: 'Angular, ButterCMS'}
    ]);
    this.setTitle('Home Page');
  }
  public setTitle( newTitle: string) {
    this.title.setTitle( newTitle );
    }
  ngOnInit() {
  }
}

Once these changes are made, observe the tile on the browser tab. It will change dynamically as the user navigates through the pages. And if you inspect the code in the browser console, you will find the corresponding metadata attached. However, the page source content is still the same. This means that if JavaScript is permitted, we get to create dynamic titles and metadata but not in its absence. So we need to find a way to take this content of the rendered page and send it to users. This is known as pre-rendering.

Now we have discussed two solutions so far, and one still doesn’t solve the issue of loading speed, and the other has the limitation of pre-rendering. We can solve both these issues with Angular Universal.

3. Angular SEO – Understanding Angular Universal

What is Angular Universal?

Angular Universal is a technology provided by Angular for rendering your Angular Applications on the server.  This tool allows the server to pre-render your Angular application when the user visits your website for the first time. There are many SEO benefits of leveraging Angular Universal. It also helps improves the overall performance and accessibility of your Angular web app.

How does Angular Universal Work?

As we mentioned above, when we use Angular Universal, we render the HTML and CSS files shown to the users ahead of time. We can implement this during the build time or also on the fly-on server once the user requests the page. By doing this, the user will be served with the HTML and CSS file initially, enabling them to see some content on the website as they visit. With server-side rendering, we are solving the issue of long load times that can throw visitors off when they visit an Angular website. However, this is only half the story. With a server-side rendered HTML, we also will ship a normal client-side Angular Application to the browser. The client-side application will take over the page, and then the app would work like your regular single-page application with the runtime rendering happening on the client-side.

How to implement Angular Universal?

Step 1 – Create a New Angular App

Create a new Angular app using the command:

ng new project-name --style=scss

Step 2 – Install Angular Universal and update your project files

Make use of Angular Schematics for adding Angular Universal to your project with a single command:

ng add @nguniversal/express-engine --clientProject project-name

When you run the command in step 2, your Angular app creates and updates these files in your application:

CREATE src/main.server.ts (298 bytes)

CREATE src/app/app.server.module.ts (318 bytes)

CREATE tsconfig.server.json (325 bytes)

CREATE server.ts (2015 bytes)

UPDATE package.json (2110 bytes)

UPDATE angular.json (5247 bytes)

UPDATE src/main.ts (432 bytes)

UPDATE src/app/app.module.ts (359 bytes)

Step 3 – Test your app

One of the most important aspects of any app development project is to test your app. Once you have done all the steps mentioned above correctly, test your app with this command:

npm run build:SSR && npm run serve:SSR

Angular Universal – The Pre-Rendering Tool for Angular SEO

Now that we know how to use Angular Universal, we should focus on how to use it as a pre-rendering tool for SEO purposes. Angular Universal is known as the server-side rendering tool that allows Angular developers to pre-render Angular applications when the user visits your website for the first time. There are many SEO, accessibility and performance benefits of server-side rendering.

Angular Universal – Pre-Rendering Process

Start by running prerender command – npm run prerender on the project and use guess-parser to guess the application’s routes. Each route is pre-rendered in HTML and that HTML file gets saved as its own directory in dist/<project name>/browser/. The prerender builder is present in angular.json in your Angular application/website. This builder has a routes option that allows developers to specify the routes of the app pages that they want to pre-render.

"prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "universal-app:build:production",
            "serverTarget": "universal-app:server:production",
            "routes": [
              "/", 
              "/about-us",
              "/contact-us"
            ]
          },
          "configurations": {
            "production": {}
          }
        }

If there many app pages that you want to pre-render but don’t want to add routes manually, you can change the routes option to the routesFile option.  The routesFile option allows developers to point to a relative url containing all the predefined routes for all the pages you want to pre-render during build time. This file can be filled with the desired routes using script or any other method.

/
/about-us
/contact-us

pre-render-routes.txt

"prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "universal-app:build:production",
            "serverTarget": "universal-app:server:production",
            "routesFile": "./pre-render-routes.txt"
          },
          "configurations": {
            "production": {}
          }
        }

angular.json with routesFile option

Angular SEO – How to insert Meta Tags for Angular Website?

Meta tags are text snippets that describe the contents of a web page. Meta tags don’t appear only in page source code and not on the web page itself. They function as content descriptors that assist search engines understand the relevance and context of a web page to better comprehend its information. This is a very important SEO practice to get your website rank well on search engines. When you build your Angular Websites, you would need to insert meta tags too, for ranking better than your competitors. Adding meta tags to Angular websites can be a little tricky if you’re new to Angular. Let us break it down for you:

Angular SEO –  Meta Services

Angular offers Title and Meta services. These tags are similar to how your HTML meta tags would look like. The meta feature of Angular belongs to a class family. Angular has provision for various meta services to read, update, add and remove HTML meta elements.

These are the various Meta services Angular provides:

Setting Meta Tags and SEO Title in Angular SEO

1. Importing Angular Meta Services

As we discussed earlier, for any Angular SEO practice, we set up Angular Universal app. Once you are done setting up your Angular Universal app, go to app/app.component.ts file and import Angular Meta service. This Angular Meta service allows Angular developers to add robots, keywords, date, viewport and charset in an Angular App. Import Angular Meta Services using this line of code:

import { Meta } from '@angular/platform-browser';

Once you get done using this, inject the  private metaTagService: Meta in the constructor and leverage Angular Meta services’ addTags() method for configuring the following HTML meta attributes:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  constructor(
    private metaTagService: Meta
  ) { }

  ngOnInit() {
    this.metaTagService.addTags([
      { name: 'keywords', content: 'Angular SEO, Angular Universal' },
      { name: 'robots', content: 'index, follow' },
      { name: 'author', content: 'Ronak Patel' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'date', content: '2021-05-17', scheme: 'YYYY-MM-DD' },
      { charset: 'UTF-8' }
    ]);
  }
}

2. Adding SEO Title and Meta Description in your Angular Component

Next, we will focus on setting the meta description and SEO title for our Angular Universal app. For this, we first import Title, Meta from @angular/platform-browser. For this, you need to go to app/components/add-car/add-car.component.ts file and then add the following code there:

import { Title, Meta } from '@angular/platform-browser';
@Component({
  selector: 'app-add-car',
  templateUrl: './add-car.component.html',
  styleUrls: ['./add-car.component.css']
})
export class AddCarComponent implements OnInit {
  title = 'Add Car - Angular Universal Car App';
  constructor(
    private titleService: Title,
    private metaTagService: Meta
  ) { }
  ngOnInit() {
    this.titleService.setTitle(this.title);
    this.metaTagService.updateTag(
      { name: 'description', content: 'Add car template' }
    );
  }
}

Now, we have defined the SEO title and declared it using setTitle() method inside the ngOnInit lifecycle hook. Next, we also declared the Meta description in Angular using Meta’s updateTag() method.

Wrapping it up with a quick Angular SEO Checklist!

These are the top ways to implement Angular SEO practices to make your Angular websites and Angular web apps SEO friendly. There are many benefits of using Angular for your app development projects! You can make use of this Angular SEO checklist to ensure your Angular app is SEO friendly:

• Analyze and study the existing architecture and functionality of the app.
• Check previous SEO functionalities (if any).
• If the app is a legacy app, update the Angular version.

It is always a good practice to regularly update your application with the latest Angular version for taking advantage of the newest improvements available in the more recent versions. Once you update the app to the latest version of Angular, ensure to:

• Make necessary changes to the app as per the update.
• Apply SEO-friendly changes in the app root file.
• Enable Angular SSR load by leveraging Angular Universal.
• Tally SEO configuration with business requirements.