Angular SEO - Make Angular Web Apps Discoverable

Introduction

Wondering where you can learn about Angular SEO and build Angular SEO friendly app? We are here to help you. A few days back we received a query on how to make an Angular application SEO friendly and that made us write this tutorial.

Topics covered in this tutorial:

What is Angular SEO?
Why Angular SEO and why is it important?
Two approaches to making your app SEO friendly:
➡ Setting Titles and Metadata
➡ Using Angular Universal
Github Repository of the demo application

What is Angular SEO?

SEO means Search Engine Optimization. It is used to get your Web application on top of the user’s search list on search engines. In order to get your application on one of the top searches, there are certain things we need to add to our application which we would discuss in detail further in our blog.

What is the Importance of Angular SEO?

Searchers put their trust in search engines for giving the best results possible and reaching one of the top spots on search results gives your application a reliable approach. SEO helps you increase your online visibility and online traffic to your web application. It also increases the chances to provide the services for your website to a greater number of people

Why settle for better when you have the best?
Contact Bacancy and hire Angular developer from us to build a high-performance application. We assure you of the dedication of our top-notch developers and code quality.

How to Build Angular SEO Friendly App?

Following are the ways you can make your Angular website SEO friendly. Let’s discuss them in detail.

1. Setting Titles and Metadata

Angular provides a Meta service for changing titles and metadata on web applications. Search Engine crawls through this data to give effective search results. There are various meta service methods-

updateTag()
addTag()
removeTag()
getTag()
addTags()
getTags()
removeTagElement()

Angular also checks the duplication of meta tags, If a meta tag already exists it will not allow you to add it.

Create a Standard Angular Application with meta service

Step 1

Create a new Angular application with the following command

ng new angular-meta-service

Run the application with the following command

ng serve

After serving the application you can see it on http://localhost:4200/, now check the view source of the web page. There are no major contents in tag.

Step 2

Add meta in providers of app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule, Meta } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule, AppRoutingModule ],
  providers: [ Meta ], bootstrap: [AppComponent]
})
export class AppModule { }

To add a new tag we use the addTag() method in Angular, let’s implement addTag() in app.components.ts.

import { Component } from '@angular/core';
import { Meta } from "@angular/platform-browser";
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-universal';
 
  constructor(private metaService:Meta){
    this.addTag();
  }
 
  addTag(){
    this.metaService.addTags([
      { name: 'description', 
        content: 'Article Description' 
      },
      { name: 'robots', content: 'index,follow' },
      { property: 'og:title', content: 'Content Title' }
   ]);
  }
}

Step 3

Create a build with the following command

npm run build

You can see we have description, robots, and og:title added in tag below.

2. Angular Universal

Angular Universal is an SSR that benefits you from both server-side and client-side rendering in one app. Server-side Rendering (SSR) is a modern technique to convert a Single Page Application (SPA) running in the browser into a server-based application. Visit our tutorial SSR with Angular Universal to learn more.

Create a Standard Angular Application with SSR

Step 1

Create a new Angular application with the following command

ng new angular-universal

Run the application with the following command

ng serve

After serving the application you can see it on http://localhost:4200. Now, check the view source of the web page

You can see there is no content between < app - root > < / app - root > because we haven’t implemented SSR yet.

Step 2

Add @nguniversal/express-engine to the application with the command

ng add @nguniversal/express-engine

Some files will be added to the project after the successful execution of the above command

There will be changes in the package.json file as follows

Step 3
Create a build with the following command

npm run build:ssr

Check if SSR is implemented successfully by serving the build with the following command.

npm run serve:ssr

Check the source of the page again, if we have content in between app-root tag then we successfully implemented SSR.

Github Repository: angular-seo

Feel free to clone the repository and play around with the code. Here’s the source code: angular-seo

So, this was about what is Angular SEO and how can you build Angular SEO friendly app. Here, we have discussed two approaches. You can try anyone that suits your Angular application best.

Conclusion

Do you like to explore in-depth Angular technology? YES? Okay, then we have got something for you! Visit the Angular tutorials page and add our blogs to your daily routine to learn more! We are here to help you with your queries. Write us back if you have any questions, suggestions, or feedback.

The Core Concept of Angular: Infographic

Learn core concepts of AngularJS Framework

Download Now

Build Your Agile Team

Hire Skilled Developer From Us

Subscribe for
weekly updates

What Makes Bacancy Stand Out?

Technical Subject Matter Experts
500+ Projects Completed
90% Client Retention Ratio
12+ Years of Experience

Navigating client's requirement with precision is what our developers' focuses on. Besides, we develop to innovate and deliver the best solutions to our clients.

get in touch

Related Blogs

July 11, 2023

AngularJS

15 Best AngularJS Development Tools to Know in 2023

By : Reynal Dsouza

Quick Summary: The blog covers a well-curated list of top AngularJS Development Tools. Discover a handpicked selection that will empower your development process and elevate...

June 14, 2023

AngularJS

Steps to Dockerize Angular Apps With Docker Containerization

By : Ritwik Verma

Quick Summary: As technological advancements take a step further to change our daily lives. Every business owner strives for faster, more efficient, and more effective...

May 15, 2023

AngularJS

The Need for OpenAI Image Creation API in Angular Applications

By : Ritwik Verma

Quick Summary: AI or Artificial Intelligence is the new dawn of the evolution of human intellect with the potential to revolutionize the world. Whether it...