1. 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.
2. 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.
3. How to Build Angular SEO-Friendly App?
==> Two approaches to making your app SEO friendly:
➡Setting Titles and Metadata
➡ Using Angular Universal
=> here I am explaining only one method which is setting Titles and Metadata :
>> 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 effecti effective search results. There are various meta-service methods-
- updateTag()
- addTag()
- removeTag()
- get Tag()
- addTag()
- getTags()
- removeTagElement()
Angular also check 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 a tag.
<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <title>Angulal rMetaService</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="styles.31d6cfe@d16ae931b73c.css"> <style ng-transition="serverApp"></style> </head>
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 :
<!DOCTYPE html>
<html
lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml"
>
<head>
<meta charset="utf-8" />
<title>CloudEvents Portal</title>
<meta name="description" content="Microsoft Azure Connected Learning Experience (CLX) is an experiential training program that sets a trajectory for aspiring learners and working professionals to be Azure experts." />
<meta name="image" content="https://cloudlabseventsdev.blob.core.windows.net/subpartnerlogos/banner_2.png"/>
<meta property="og:title" content="Microsoft Azure Certification Exams" />
<meta property="og: description" content=" Microsoft Azure Connected Learning Experience (CLX) is an experiential training program that sets a trajectory for aspiring learners and working professionals to be Azure experts." />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://cloudlabseventsdev.blob.core.windows.net/subpartnerlogos/banner_2.png"/>
<meta property="og:url" content="https://clx-qa.cloudlabs.ai" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<base href="/" />
<link rel="icon" id="appIcon" type="image/x-icon" href="favicon.ico" />
<link
rel="stylesheet"
type="text/css"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
</head>
<===================================== END =============================================>
