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 Choose Angular?

Angular is a widely-used framework for building large-scale web applications, particularly Single Page Applications (SPAs). It’s known for creating dynamic, seamless user experiences by allowing pages to load without reloading. Companies like Forbes, Xbox, and BMW rely on Angular for front-end development. However, while Angular excels in building scalable and user-friendly web apps, SEO optimization can be challenging due to its heavy reliance on JavaScript. To ensure the app’s success, it should be optimized for both user experience and search engine visibility.

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 is it Important to Make Your Website ‘Crawler-Friendly’?

Making a website ‘crawler-friendly’ is essential for ensuring that search engines can easily discover, index, and rank your content. Search engine crawlers, also called spiders, robots, or bots, are programs designed to scan websites, analyze their content, and add them to the search engine’s index. This process enables search engines to better understand your company’s goals and connect your content with relevant user queries.

A crawler-friendly website is structured in a way that allows these bots to efficiently access and interpret the content. If a website is not optimized for crawlers, important pages may be overlooked, or content may be misinterpreted, leading to lower visibility in search results. This can negatively impact a website’s traffic and overall online presence, as users may have difficulty finding the site through organic search.

Ensuring a website is crawler-friendly involves several practices, such as optimizing site architecture, using proper URL structures, and including metadata that guides search engines. By making it easier for crawlers to index your site, you can improve your search rankings, driving more traffic, conversions, and overall business success.

Angular SEO Challenges

Optimizing Angular applications for search engines presents unique difficulties due to the framework’s reliance on client-side rendering. These challenges can significantly impact a website’s visibility and ranking on search engines, making it crucial to address them effectively:

1. Content Invisible for Bots

Angular applications don’t reload pages unless explicitly directed and can dynamically change metadata using JavaScript, but this reliance on JavaScript poses challenges for search engine crawlers. Since Angular apps fetch content dynamically through API calls rather than storing it in the source code, crawlers often can’t access or index the content, which is typically only visible to users.

This lack of crawlable content in the HTML source code can hinder the visibility of Angular apps in search results, leading to SEO issues. Additionally, the absence of server-side rendering in Angular further complicates efforts to optimize for search engines.

2. 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 report– 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.

3. Meta Tags and Dynamic Content

Managing meta tags and other SEO-related metadata in an Angular application can be complex due to its dynamic nature. While meta tags can be updated dynamically as users navigate the site, search engines may not always capture these changes if JavaScript is disabled. This makes it challenging to ensure that each page has the appropriate metadata for search engine indexing.

4. URL Structure and Routing

Angular applications often use client-side routing, which can result in URLs that are not easily understood by search engines. Improperly configured routing can lead to issues with indexing and crawling, as search engines might not recognize or correctly navigate through the dynamic routes of a single-page application.

5. Server-Side Rendering Integration

Integrating server-side rendering with Angular applications, such as using Angular Universal, can help address some SEO challenges by delivering pre-rendered HTML to search engines. However, this integration adds complexity to the development process and may require additional configuration to ensure that both server-side and client-side rendering are properly managed.

6. JavaScript Dependency

Since Angular applications depend on JavaScript to function, any issues with JavaScript execution can impact how content is rendered and indexed. If a search engine or user’s browser has JavaScript disabled or encounters errors, the content may not be displayed correctly, affecting both SEO and user experience.

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. Dynamic Rendering

The primary SEO challenge for Angular websites is that they rely on API calls to fetch data, resulting in fewer HTML files for search engines to crawl. A simple solution is to use a dynamic rendering tool to generate static HTML files that web crawlers can easily index. You can then configure your web server to direct crawlers to these pre-rendered pages, while human visitors continue using the normal Angular website. However, this approach doesn’t solve the issue of speed, which will be addressed later in the blog.

2. 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() {
  }
}

After implementing dynamic changes, you’ll notice that titles and metadata update as users navigate, but the page source remains unchanged, meaning this only works if JavaScript is enabled. To solve this, pre-rendering sends the rendered content directly to users. However, while dynamic rendering addresses SEO issues, it doesn’t resolve loading speed, and pre-rendering has its own limitations. Both challenges can be overcome with Angular Universal.

3. 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?

Angular Universal improves SEO and user experience by pre-rendering HTML and CSS on the server, allowing users to see content quickly and reducing load times. After serving the pre-rendered content, the browser loads the full client-side Angular application, which takes over to provide the dynamic features of a Single Page Application (SPA). This approach balances fast initial load times with the functionality of a SPA but adds some complexity by combining server-side and client-side rendering.

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

4. Implementing Lazy Loading

Lazy loading is a technique in Angular that defers the loading of certain parts of your application until they are needed. This not only improves the initial load time of your app but also enhances SEO by ensuring that crawlers can quickly access the most important content first. By optimizing the order in which content is loaded, you can improve both user experience and search engine rankings. In Angular, you can implement lazy loading by setting up routes for the modules that should be lazy-loaded.

/// app-routing.module.ts
const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

In this code, the FeatureModule is loaded only when the user navigates to the /feature route, which optimizes the load time.

5. Using Prerendering

Prerendering is the process of generating static HTML files for specific routes at build time. This allows search engines to crawl content more effectively since the HTML is available upfront. Prerendering can be particularly useful for content-heavy pages or landing pages that are critical for SEO. Angular’s @angular/platform-server package can be used to achieve this.

// angular.json
"architect": {
  "build": { ... },
  "prerender": {
    "builder": "@angular-devkit/build-angular:prerender",
    "options": {
      "routes": ["/", "/about", "/contact"]
    }
  }
}

This configuration prerenders the routes "/", "/about", and "/contact" during the build process, ensuring that search engines can access the content easily.

6. Utilizing Server-Side Rendering (SSR)

Server-Side Rendering (SSR) with Angular involves rendering your application on the server instead of the client. This makes your content accessible to search engines immediately, improving SEO performance. SSR also enhances the overall user experience by reducing load times, especially on slower networks or devices.

// app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

This code sets up an Angular app for SSR, ensuring that the content is rendered on the server and is SEO-friendly.

7. Generating Sitemap and Robots.txt

Creating a sitemap and a well-configured robots.txt file can help search engine crawlers index your Angular app more efficiently. A sitemap lists all the pages you want to be crawled, while robots.txt can control which parts of your site should be crawled or ignored, helping direct search engines to the most valuable content.

User-agent: *
Disallow: /admin/
Sitemap: https://yourwebsite.com/sitemap.xml

This robots.txt file tells search engines not to crawl the /admin/ directory and provides the location of the sitemap.

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 skilled 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.

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