Chapter 14.2☕ 12 min read

SEO for Angular — Meta Tags, Open Graph, Sitemap

SEO = Google ko samjhao tumhara page kya hai

01Why SEO Matters

Why SEO Matters for Angular Apps

Angular is a Single Page Application (SPA) — one HTML file, content loaded by JavaScript. Google can execute JS now, but it's slower and less reliable than static HTML.

Without SEO: your page doesn't appear in search results. Even if Google indexes it, ranking will be poor without proper meta tags.

With SEO: your page ranks higher, gets more organic traffic, and social shares look good.

02Meta & Title Service

Meta and Title Service (Built-in)

private title = inject(Title);
private meta = inject(Meta);

this.title.setTitle('Hyderabadi Biryani | Best Biryani in Hyderabad');
this.meta.updateTag({
  name: 'description',
  content: 'Order authentic Hyderabadi biryani online...'
});
this.meta.addTag({
  property: 'og:image',
  content: 'https://example.com/biryani.jpg'
});

Call these in ngOnInit of every page component. "Title aur Meta = page ka Aadhaar card — Google pehchan ta hai"

03Open Graph

Open Graph — Social Media Preview

When someone shares your link on WhatsApp, Facebook, or Twitter, Open Graph tags control the preview:

<meta property="og:title" content="Hyderabadi Biryani">
<meta property="og:description" content="Order now...">
<meta property="og:image" content="https://example.com/biryani.jpg">
<meta property="og:url" content="https://example.com/biryani">
<meta property="og:type" content="website">

"Open Graph = share preview — WhatsApp pe link share karo toh dikhe"

Image should be 1200x630px for best preview. Test with Facebook Sharing Debugger.

04Sitemap & Robots

Sitemap and Robots.txt

sitemap.xml — tells Google all your pages. robots.txt — tells Google what to crawl.

For SPA: generate sitemap with all routes. Place in src/ folder so Angular copies to dist/.

"Sitemap = Google ka map — ye sab pages hai, crawl karo"

Use online sitemap generator or build script to auto-generate from your routes array.

05Structured Data

Structured Data (Schema.org)

JSON-LD in your pages for rich search results:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Restaurant",
  "name": "Paradise Biryani",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "1200"
  }
}
</script>

"Structured data = extra info — Google search mein stars dikhao"

Use Google's Rich Results Test to verify.

Key Takeaways

Title and Meta services set unique tags per page
Open Graph controls social media previews
Sitemap + robots.txt guide Google crawling
Structured data enables rich search results
SSR is essential — meta tags are server-rendered

Previous14.1 — SSR Setup 📋 All Chapters Next Chapter14.3 — PWA & Service Workers →