Learn Angular SEO fundamentals. Set up page titles, meta descriptions, Open Graph tags, canonical URLs, robots.txt, and XML sitemaps for better search rankings.
🔹 Why SEO Fundamentals Matter in Angular
Before diving into advanced strategies like Angular Universal or prerendering, you need to get the basics right.
Even a perfectly rendered page won’t rank well if it has:
- Missing or duplicate titles
- Poor meta descriptions
- No canonical tags
- Incorrect robots.txt setup
These fundamentals form the foundation of SEO in Angular.
🔹 Setting Dynamic Page Titles in Angular
Search engines display the title tag as the clickable headline in SERPs.
Example: Setting the Title Dynamically
// Import Angular Title service
import { Title } from '@angular/platform-browser'
import { Component, OnInit } from '@angular/core'
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
})
export class HomeComponent implements OnInit {
constructor(private titleService: Title) {}
ngOnInit(): void {
this.titleService.setTitle('Home | Angular SEO Guide');
}
}
👉 Best Practices:
Keep titles under 60 characters.
Use primary keywords at the beginning.
Make each page title unique.
🔹 Adding Meta Descriptions
Meta descriptions influence click-through rate (CTR) in Google search results.
Example: Adding Meta Tags in Angularimport { Meta, Title } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
})
export class AboutComponent implements OnInit {
constructor(private meta: Meta, private title: Title) {}
ngOnInit(): void {
this.title.setTitle('About Us | Angular SEO Guide');
this.meta.addTags([
{ name: 'description', content: 'Learn more about our Angular SEO strategies and solutions.' },
{ name: 'keywords', content: 'Angular SEO, SEO in Angular, Angular Universal' },
]);
}
}
👉 Best Practices:
Keep descriptions under 160 characters.
Include a call-to-action (CTA) like “Learn more” or “Get started”.
Avoid duplicate meta descriptions across pages.
🔹 Open Graph & Twitter Meta Tags (Social Sharing)
When users share your site on Facebook, LinkedIn, or Twitter, Open Graph & Twitter tags define how the link preview looks.
Example: Adding Social Meta Tags
this.meta.addTags([
{ property: 'og:title', content: 'Angular SEO Guide' },
{ property: 'og:description', content: 'Master SEO in Angular with step-by-step tutorials.' },
{ property: 'og:image', content: 'https://example.com/assets/seo-banner.jpg' },
{ property: 'og:url', content: 'https://example.com/angular-seo' },
{ name: 'twitter:card', content: 'summary_large_image' },
]);
👉 Benefits:
Better click-through rates on social media.
Improves brand visibility.
🔹 Canonical URLs in Angular
Canonical tags prevent duplicate content issues by telling Google which URL is the “main version”.
Example: Adding a Canonical Tag
import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';
constructor(@Inject(DOCUMENT) private dom: Document) {}
setCanonicalURL(url?: string) {
let link: HTMLLinkElement = this.dom.querySelector("link[rel='canonical']") || this.dom.createElement('link');
link.setAttribute('rel', 'canonical');
link.setAttribute('href', url || this.dom.URL);
this.dom.head.appendChild(link);
}
👉 Use canonical tags for:
Pages with query parameters
Duplicate routes (/home vs /)
Content that exists in multiple categories
🔹 Robots.txt for Angular
The robots.txt file tells search engines which parts of your site they can or cannot crawl.
Example: Basic robots.txt
User-agent: *
Disallow: /admin/
Allow: /
Sitemap: https://example.com/sitemap.xml
👉 Tips:
Don’t block important pages.
Always include a sitemap link.
🔹 XML Sitemap in Angular
A sitemap helps search engines discover all your pages.
You can generate a sitemap using Node.js scripts or tools like:
Sitemap Generator
Angular Universal with Express server
🔹 Final Thoughts
In this blog, we covered the SEO fundamentals in Angular:
Setting dynamic titles
Adding meta descriptions & keywords
Open Graph & Twitter tags
Canonical URLs
Robots.txt & sitemaps
👉 These are the building blocks of Angular SEO.
In the next blog, we’ll explore Angular Routing & SEO—how to make clean URLs, fix 404 pages, and avoid duplicate content.