SlideShare uma empresa Scribd logo
1 de 22
Baixar para ler offline
Angular
Universal:
How to Build
Angular SEO
Friendly App?
Introduction
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


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?
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?
updateTag()
addTag()
removeTag()
getTag()
addTags()
getTags()
removeTagElement()
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-
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: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.
Angular Universal How to Build Angular SEO Friendly App.pdf
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.
Thank You!
https://www.bacancytechnology.com/

Mais conteúdo relacionado

Semelhante a Angular Universal How to Build Angular SEO Friendly App.pdf

Angular - Chapter 3 - Components
Angular - Chapter 3 - ComponentsAngular - Chapter 3 - Components
Angular - Chapter 3 - ComponentsWebStackAcademy
 
AngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIAngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIEric Wise
 
Angularjs2 presentation
Angularjs2 presentationAngularjs2 presentation
Angularjs2 presentationdharisk
 
Angular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive FormsAngular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive FormsDigamber Singh
 
Angular Project Report
 Angular Project Report Angular Project Report
Angular Project ReportKodexhub
 
The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS OrisysIndia
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to AngularjsGaurav Agrawal
 
Progressive Web Application by Citytech
Progressive Web Application by CitytechProgressive Web Application by Citytech
Progressive Web Application by CitytechRitwik Das
 
Angular Introduction By Surekha Gadkari
Angular Introduction By Surekha GadkariAngular Introduction By Surekha Gadkari
Angular Introduction By Surekha GadkariSurekha Gadkari
 
Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshareSaleemMalik52
 
ANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 schANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 schkannikadg
 
Angular2 with type script
Angular2 with type scriptAngular2 with type script
Angular2 with type scriptRavi Mone
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS BasicsRavi Mone
 
Introduction To Angular 4 - J2I
Introduction To Angular 4 - J2IIntroduction To Angular 4 - J2I
Introduction To Angular 4 - J2INader Debbabi
 

Semelhante a Angular Universal How to Build Angular SEO Friendly App.pdf (20)

Angular - Chapter 3 - Components
Angular - Chapter 3 - ComponentsAngular - Chapter 3 - Components
Angular - Chapter 3 - Components
 
AngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIAngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPI
 
Angular IO
Angular IOAngular IO
Angular IO
 
Angularjs2 presentation
Angularjs2 presentationAngularjs2 presentation
Angularjs2 presentation
 
Angular
AngularAngular
Angular
 
Angular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive FormsAngular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive Forms
 
Resolver in Angular
Resolver in AngularResolver in Angular
Resolver in Angular
 
Angular Project Report
 Angular Project Report Angular Project Report
Angular Project Report
 
The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
 
Progressive Web Application by Citytech
Progressive Web Application by CitytechProgressive Web Application by Citytech
Progressive Web Application by Citytech
 
Angular Introduction By Surekha Gadkari
Angular Introduction By Surekha GadkariAngular Introduction By Surekha Gadkari
Angular Introduction By Surekha Gadkari
 
Ng-init
Ng-init Ng-init
Ng-init
 
Ng-init
Ng-init Ng-init
Ng-init
 
Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshare
 
ANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 schANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 sch
 
Angular2 with type script
Angular2 with type scriptAngular2 with type script
Angular2 with type script
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
Angular js slides
Angular js slidesAngular js slides
Angular js slides
 
Introduction To Angular 4 - J2I
Introduction To Angular 4 - J2IIntroduction To Angular 4 - J2I
Introduction To Angular 4 - J2I
 

Mais de Katy Slemon

Data Science Use Cases in Retail & Healthcare Industries.pdf
Data Science Use Cases in Retail & Healthcare Industries.pdfData Science Use Cases in Retail & Healthcare Industries.pdf
Data Science Use Cases in Retail & Healthcare Industries.pdfKaty Slemon
 
How Much Does It Cost To Hire Golang Developer.pdf
How Much Does It Cost To Hire Golang Developer.pdfHow Much Does It Cost To Hire Golang Developer.pdf
How Much Does It Cost To Hire Golang Developer.pdfKaty Slemon
 
What’s New in Flutter 3.pdf
What’s New in Flutter 3.pdfWhat’s New in Flutter 3.pdf
What’s New in Flutter 3.pdfKaty Slemon
 
How Much Does It Cost To Hire Full Stack Developer In 2022.pdf
How Much Does It Cost To Hire Full Stack Developer In 2022.pdfHow Much Does It Cost To Hire Full Stack Developer In 2022.pdf
How Much Does It Cost To Hire Full Stack Developer In 2022.pdfKaty Slemon
 
How to Implement Middleware Pipeline in VueJS.pdf
How to Implement Middleware Pipeline in VueJS.pdfHow to Implement Middleware Pipeline in VueJS.pdf
How to Implement Middleware Pipeline in VueJS.pdfKaty Slemon
 
How to Build Laravel Package Using Composer.pdf
How to Build Laravel Package Using Composer.pdfHow to Build Laravel Package Using Composer.pdf
How to Build Laravel Package Using Composer.pdfKaty Slemon
 
Sure Shot Ways To Improve And Scale Your Node js Performance.pdf
Sure Shot Ways To Improve And Scale Your Node js Performance.pdfSure Shot Ways To Improve And Scale Your Node js Performance.pdf
Sure Shot Ways To Improve And Scale Your Node js Performance.pdfKaty Slemon
 
How to Develop Slack Bot Using Golang.pdf
How to Develop Slack Bot Using Golang.pdfHow to Develop Slack Bot Using Golang.pdf
How to Develop Slack Bot Using Golang.pdfKaty Slemon
 
IoT Based Battery Management System in Electric Vehicles.pdf
IoT Based Battery Management System in Electric Vehicles.pdfIoT Based Battery Management System in Electric Vehicles.pdf
IoT Based Battery Management System in Electric Vehicles.pdfKaty Slemon
 
Understanding Flexbox Layout in React Native.pdf
Understanding Flexbox Layout in React Native.pdfUnderstanding Flexbox Layout in React Native.pdf
Understanding Flexbox Layout in React Native.pdfKaty Slemon
 
The Ultimate Guide to Laravel Performance Optimization in 2022.pdf
The Ultimate Guide to Laravel Performance Optimization in 2022.pdfThe Ultimate Guide to Laravel Performance Optimization in 2022.pdf
The Ultimate Guide to Laravel Performance Optimization in 2022.pdfKaty Slemon
 
New Features in iOS 15 and Swift 5.5.pdf
New Features in iOS 15 and Swift 5.5.pdfNew Features in iOS 15 and Swift 5.5.pdf
New Features in iOS 15 and Swift 5.5.pdfKaty Slemon
 
Choose the Right Battery Management System for Lithium Ion Batteries.pdf
Choose the Right Battery Management System for Lithium Ion Batteries.pdfChoose the Right Battery Management System for Lithium Ion Batteries.pdf
Choose the Right Battery Management System for Lithium Ion Batteries.pdfKaty Slemon
 
Ruby On Rails Performance Tuning Guide.pdf
Ruby On Rails Performance Tuning Guide.pdfRuby On Rails Performance Tuning Guide.pdf
Ruby On Rails Performance Tuning Guide.pdfKaty Slemon
 
Uncovering 04 Main Types and Benefits of Salesforce ISV Partnerships.pdf
Uncovering 04 Main Types and Benefits of Salesforce ISV Partnerships.pdfUncovering 04 Main Types and Benefits of Salesforce ISV Partnerships.pdf
Uncovering 04 Main Types and Benefits of Salesforce ISV Partnerships.pdfKaty Slemon
 
Unit Testing Using Mockito in Android (1).pdf
Unit Testing Using Mockito in Android (1).pdfUnit Testing Using Mockito in Android (1).pdf
Unit Testing Using Mockito in Android (1).pdfKaty Slemon
 
Why Use React Js A Complete Guide (1).pdf
Why Use React Js A Complete Guide (1).pdfWhy Use React Js A Complete Guide (1).pdf
Why Use React Js A Complete Guide (1).pdfKaty Slemon
 
Why Use Ruby on Rails for eCommerce Project Proven Case Study.pdf
Why Use Ruby on Rails for eCommerce Project Proven Case Study.pdfWhy Use Ruby on Rails for eCommerce Project Proven Case Study.pdf
Why Use Ruby on Rails for eCommerce Project Proven Case Study.pdfKaty Slemon
 
Bacancy’s CCS2CON is Now Charging Compliant with Top Indian EVs.pdf
Bacancy’s CCS2CON is Now Charging Compliant with Top Indian EVs.pdfBacancy’s CCS2CON is Now Charging Compliant with Top Indian EVs.pdf
Bacancy’s CCS2CON is Now Charging Compliant with Top Indian EVs.pdfKaty Slemon
 
How to Integrate Google Adwords API in Laravel App.pdf
How to Integrate Google Adwords API in Laravel App.pdfHow to Integrate Google Adwords API in Laravel App.pdf
How to Integrate Google Adwords API in Laravel App.pdfKaty Slemon
 

Mais de Katy Slemon (20)

Data Science Use Cases in Retail & Healthcare Industries.pdf
Data Science Use Cases in Retail & Healthcare Industries.pdfData Science Use Cases in Retail & Healthcare Industries.pdf
Data Science Use Cases in Retail & Healthcare Industries.pdf
 
How Much Does It Cost To Hire Golang Developer.pdf
How Much Does It Cost To Hire Golang Developer.pdfHow Much Does It Cost To Hire Golang Developer.pdf
How Much Does It Cost To Hire Golang Developer.pdf
 
What’s New in Flutter 3.pdf
What’s New in Flutter 3.pdfWhat’s New in Flutter 3.pdf
What’s New in Flutter 3.pdf
 
How Much Does It Cost To Hire Full Stack Developer In 2022.pdf
How Much Does It Cost To Hire Full Stack Developer In 2022.pdfHow Much Does It Cost To Hire Full Stack Developer In 2022.pdf
How Much Does It Cost To Hire Full Stack Developer In 2022.pdf
 
How to Implement Middleware Pipeline in VueJS.pdf
How to Implement Middleware Pipeline in VueJS.pdfHow to Implement Middleware Pipeline in VueJS.pdf
How to Implement Middleware Pipeline in VueJS.pdf
 
How to Build Laravel Package Using Composer.pdf
How to Build Laravel Package Using Composer.pdfHow to Build Laravel Package Using Composer.pdf
How to Build Laravel Package Using Composer.pdf
 
Sure Shot Ways To Improve And Scale Your Node js Performance.pdf
Sure Shot Ways To Improve And Scale Your Node js Performance.pdfSure Shot Ways To Improve And Scale Your Node js Performance.pdf
Sure Shot Ways To Improve And Scale Your Node js Performance.pdf
 
How to Develop Slack Bot Using Golang.pdf
How to Develop Slack Bot Using Golang.pdfHow to Develop Slack Bot Using Golang.pdf
How to Develop Slack Bot Using Golang.pdf
 
IoT Based Battery Management System in Electric Vehicles.pdf
IoT Based Battery Management System in Electric Vehicles.pdfIoT Based Battery Management System in Electric Vehicles.pdf
IoT Based Battery Management System in Electric Vehicles.pdf
 
Understanding Flexbox Layout in React Native.pdf
Understanding Flexbox Layout in React Native.pdfUnderstanding Flexbox Layout in React Native.pdf
Understanding Flexbox Layout in React Native.pdf
 
The Ultimate Guide to Laravel Performance Optimization in 2022.pdf
The Ultimate Guide to Laravel Performance Optimization in 2022.pdfThe Ultimate Guide to Laravel Performance Optimization in 2022.pdf
The Ultimate Guide to Laravel Performance Optimization in 2022.pdf
 
New Features in iOS 15 and Swift 5.5.pdf
New Features in iOS 15 and Swift 5.5.pdfNew Features in iOS 15 and Swift 5.5.pdf
New Features in iOS 15 and Swift 5.5.pdf
 
Choose the Right Battery Management System for Lithium Ion Batteries.pdf
Choose the Right Battery Management System for Lithium Ion Batteries.pdfChoose the Right Battery Management System for Lithium Ion Batteries.pdf
Choose the Right Battery Management System for Lithium Ion Batteries.pdf
 
Ruby On Rails Performance Tuning Guide.pdf
Ruby On Rails Performance Tuning Guide.pdfRuby On Rails Performance Tuning Guide.pdf
Ruby On Rails Performance Tuning Guide.pdf
 
Uncovering 04 Main Types and Benefits of Salesforce ISV Partnerships.pdf
Uncovering 04 Main Types and Benefits of Salesforce ISV Partnerships.pdfUncovering 04 Main Types and Benefits of Salesforce ISV Partnerships.pdf
Uncovering 04 Main Types and Benefits of Salesforce ISV Partnerships.pdf
 
Unit Testing Using Mockito in Android (1).pdf
Unit Testing Using Mockito in Android (1).pdfUnit Testing Using Mockito in Android (1).pdf
Unit Testing Using Mockito in Android (1).pdf
 
Why Use React Js A Complete Guide (1).pdf
Why Use React Js A Complete Guide (1).pdfWhy Use React Js A Complete Guide (1).pdf
Why Use React Js A Complete Guide (1).pdf
 
Why Use Ruby on Rails for eCommerce Project Proven Case Study.pdf
Why Use Ruby on Rails for eCommerce Project Proven Case Study.pdfWhy Use Ruby on Rails for eCommerce Project Proven Case Study.pdf
Why Use Ruby on Rails for eCommerce Project Proven Case Study.pdf
 
Bacancy’s CCS2CON is Now Charging Compliant with Top Indian EVs.pdf
Bacancy’s CCS2CON is Now Charging Compliant with Top Indian EVs.pdfBacancy’s CCS2CON is Now Charging Compliant with Top Indian EVs.pdf
Bacancy’s CCS2CON is Now Charging Compliant with Top Indian EVs.pdf
 
How to Integrate Google Adwords API in Laravel App.pdf
How to Integrate Google Adwords API in Laravel App.pdfHow to Integrate Google Adwords API in Laravel App.pdf
How to Integrate Google Adwords API in Laravel App.pdf
 

Último

Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 

Último (20)

Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 

Angular Universal How to Build Angular SEO Friendly App.pdf

  • 3. 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 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:
  • 5. 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.
  • 6. What is the Importance of Angular SEO?
  • 7. 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.
  • 8. How to Build Angular SEO Friendly App?
  • 9. updateTag() addTag() removeTag() getTag() addTags() getTags() removeTagElement() 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-
  • 10. 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
  • 11. 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.
  • 12. 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 { }
  • 13. 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'] })
  • 14. 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' } ]); } }
  • 15. Step 3 Create a build with the following command npm run build:ssr
  • 16. 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.
  • 19. 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.
  • 21. 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.