Angular SEO: How to Make Search-Friendly Pages

The Angular framework is a structural javascript-based framework for web applications. It is used to create dynamic web pages with content rendered via web services. Angular is very developer-friendly and has been around for several years, accumulating a powerful community of tools and utilities, including Angular CMS tools, backend frameworks, and more.

JavaScript frameworks like Angular are constantly adapting and improving to keep up with the demands of the search engines and crawlers scouring the web. Maybe, you already use common SEO techniques, but the results could be better. Or perhaps, your current CMS isn't being updated as often as it should resulting in a dip in overall site performance.  

The answer to your woes, however, could be a transition or upgrade to Angular Universal, a bundle created to make Angular applications more SEO-friendly. Version 11 and above of Angular include libraries allowing you to edit and execute meta tags. You can even configure Angular Universal to pre-render the data as it's starting up. 

Applications built using the Angular framework are called Single Page Applications (SPAs) because of the way they function. An Angular application, once loaded, renders other pages dynamically without reloading the web pages all over again. This experience is delivered with the power of the Angular javascript framework. It dynamically modifies the pages by running javascript code or by loading only the required content. This gives the user a smooth experience without waiting for a reload to happen. However, Angular sites can suffer from adverse effects on their search engine optimization (SEO) from using the framework.

On your end, it's essential to code metadata so search engines will understand and process it effectively. Along with this task, there's also the need to beat out competitors who are doing the exact same thing.

In this article, we'll articulate how Angular applications need special SEO treatment, and we provide some specific deployment instructions to facilitate good Angular SEO. 

Understanding search engine crawlers and SEO

Before we address the solution, let us understand how the search engine crawlers (or bots) actually work. Search engines around the world crawl through your websites to understand the pages and the end goal of your business. For this, the crawlers read through the metadata of the pages such as the title, description, image tags, and categories. This metadata needs to be different for every page to allow search engines to understand each page's intent.  

A search engine bot reaches a specific page, finds the hyperlinks on the page, reads the metadata on the page, and starts traversing through the hyperlinks. It keeps repeating this process on your website until it is unable to find any new links. During this process, the bot downloads the static content of your website and understands the page. Thus, it becomes important to maximize the details of each page in the metadata and static content.

Most pitfalls in regards to SEO are related to the fact that not all search engines work the same way. Bing, Yahoo, and some lesser-known engines like DuckDuckGo do not work effectively with Angular's standard rendering process, meaning that your URLs won't receive the indexing you need in order to rank.

The first thing to load when your app runs is the HTML shell, a script written to render and populate the specified content. The unique metadata inside your pages isn't accessed by the client's browser or any crawlers until after the JavaScript is rendered. This lag strongly affects the effectiveness and efficiency of the SEO techniques you've integrated. The same goes for social media bots that collect summary cards for display inside their interfaces. Switching from standard rendering to server-side rendering can help solve this issue. However, the main pitfall here that we are correcting is Angular’s standard rendering process.

If Google is the only search engine you care about, you still don't have a solid guarantee that standard JS-rendered content will be effective because any kind of third-party software can interfere. If you use on-page actions, for example, Googlebot can be tripped up and slowed down. The same goes for elaborate JS code Google considers too "expensive" to run. These obstacles can cause your content to slow down.

SEO for conventional web applications

SEO has become one of the most important investments for any online business today. In the past, the web applications being developed were fairly simple and contained mostly static pages. These pages contained all the required information pre-coded into them. As web application development evolved, we entered an era of dynamic content rendering where the content for the web pages is stored somewhere and fetched as needed. 

There are several ways to do this:

Server-side rendering (SSR)

To reduce the number of server requests and round trips for data collecting and templating on the client side some turn to SSR. Server-side rendering means that an application has the ability to convert HTML files on the server into fully rendered HTML pages for the client. First, the web browser submits a request for information from the server, then the server instantly responds by sending a fully rendered page to the client.

Partial indexing and missing content are very unlikely to occur with SSR. Unlike client-side rendering, SSR has fewer crawl-budget-related SEO and page speed issues. One of the major drawbacks of SSR is that third-party JavaScript rarely functions with it. 

Client-side rendering (CSR)

Content is rendered in the browser, not the site's server when using client-side rendering. This is the rendering method that is used by default when using a JavaScript framework. 

Because it lowers the server load, it's the most dependable and scalable method to offer dynamic webpages for the website owner. This adds milliseconds to seconds to the load time, which can result in longer than desired wait times for users. As resources become accessible, search bots must return to the site to render the JavaScript. This second wave of indexing may take a long time.

Dynamic Rendering (DR)

Dynamic rendering means that you are sending content generated on the client-side to the user and rendering the content generated on the server-side, i.e. the HTML files to the bots, who will produce the HTML pages and the content seen by the user. One of its benefits is that crawling and indexing your content is possible without the requirement for Google to run JavaScript. Another advantage is that re-rendering content for humans and bots saves developers time and resources. It also solves problems with the crawl budget that is linked to page speed. Google can crawl more pages on the site this way. However, interactive features that need JavaScript are still beneficial to human visitors. 

One drawback of dynamic rendering, however, is the need to monitor for unwanted discrepancies between the user experience and the SSR version of each page.

While each method has its downside, keep in mind that other factors will affect speed and response. The specific hosting service, bandwidth, location, and device you use will also have an effect on speed and performance. Assess the quantity of your content, the power of your equipment and staff, and your traffic level in order to determine which rendering method is best for your unique situation. 

Due to the lack of sophisticated client-side rendering frameworks in the past, server-side rendering of pages was the trend. There were numerous languages and frameworks to handle the same. For instance, PHP, Java, Spring, NodeJS with Handlebars, and other frameworks render the pages in advance and send only the plain HTML content to the frontend. 

This approach ensures that the page has the right meta tags and all the content rendered before it is received by the search engine crawler. Thus, conventional web applications were practically simple when it came to SEO. However, they surely had a downside of longer loading times. With low-end servers, processing thousands of requests for pages became difficult. This brought frontend frameworks like Angular into the picture.

SEO for Single Page Applications (SPAs)

A single page application is a concept where the application base layout is loaded only once and the rest of the pages and components are loaded only as needed. This is made possible with the power of Javascript that dynamically decides what content is required, fetches the data, and renders it in the desired format. 

Angular SEO: Developing search-friendly pages

Before we begin building a working Angular SEO solution, let us start by creating a blank Angular JS application. 

ng new seo-friendly-app

The command creates a fresh Angular JS application where we will create a simple home page and blog page, render some content on the blog page using ButterCMS APIs and make them SEO-friendly. 

Let’s start by creating pages and routes for the same. Execute the below commands in the terminal to create your home and blog pages. 

ng g c pages/home --skipTests=true
ng g c pages/blog --skipTests=true

This will create the components and import them into the app.module.ts file. Now, add the pages to the routing module to allow us to route to these pages. Modify your app-routing.module.ts file.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { BlogComponent } from './pages/blog/blog.component';
const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path:'blog',
    component: BlogComponent
  },
  {
    path:'**',
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

The above code maps the respective components with their routes and sets HomeComponent as the default component. Now, modify the app.component.html file to contain only a single line of code. 

<router-outlet></router-outlet>

Finally, run the application using the below command and check to ensure that your application is set up correctly. Once the command goes through, you can hit the URL localhost:4200 to ensure things are set up fine. You should see the text “home works!”.

ng serve

Now let us add a header that allows us to navigate through the pages. Create a header component using the below command.

ng g c header --skipTests=true

Next, modify the content of the header.component.html to contain the navigation elements. 

<div>
<a [routerLink]="['home']">Home</a>
</div><div>
<a [routerLink]="['blog']">Blog</a>
</div>

Finally, you have a complete application where you have two pages and a simple unstyled navigation that allows you to move between the pages. Now, let us analyze this application from an SEO perspective. Right-click on the browser and select “View page source”. You should be able to see how the search engine crawlers would see your page without Javascript. The code looks like the below snippet. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SeoFriendlyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>

Now, navigate to the blog page and perform the same action and notice the page content. It is similar. This includes the page title as well as body. This is because Angular modifies your DOM using javascript. 

npm install --save buttercms

import * as Butter from 'buttercms';
export const butterService = Butter('your_api_token');

import { Component, OnInit } from '@angular/core';
import { butterService } from '../../services/butter-cms.service';
@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {
  posts:any[];
  constructor() {
    this.fetchPosts();
  }
  private fetchPosts() {
    butterService.post.list({
      page: 1,
      page_size: 10
    })
      .then((res) => {
        console.log('Content from ButterCMS');
        console.log(res);
        this.posts = res.data.data;
      });
  }
  ngOnInit() {
  }
}

<div *ngIf="posts!=undefined">
<div *ngFor="let post of posts.data">
  <hr>
  <h1>{{post.title}}</h1>
  <div [innerHTML]="post.body"></div>
</div>
</div> 

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

Implementing pre-rendering for Angular applications

With the upgrades in Angular, now it comes with a standardized solution to pre-rendering as well. The process is quite simple. We would leverage the Angular Universal package to support pre-rendering of the pages. To add the Angular universal package, execute the below command with the project name that you used while creating your Angular app.

ng add @nguniversal/express-engine --clientProject seo-friendly-app

This will create some files within the project and configure your project to support pre-rendering using a NodeJS server. In order to run this, execute the below command.

npm run build:ssr && npm run serve:ssr

This command compiles, builds your static pages, places them in the dist folder and serves them by running a NodeJS server. With this, we have greatly improved our Angular SEO by ensuring that our application is built in an SEO-friendly manner and all its content is dynamically rendered. 

Validating your SEO-friendly Angular SPA

To validate the implementation, you can go to the browser and view page source for each page. Now, you will be able to see that the browser renders the exact HTML content as you would expect it to. With this, we established our implementation of a simple unstyled blog with an SEO-friendly rendering on Angular framework. With ButterCMS, you can do a lot more like dynamically fetching the SEO tags, meta descriptions, and even the page content itself. Check out our Angular API documentation to learn more.