SEO and Social Meta Tags

Server rendering puts real HTML in the response, which crawlers can index without running JavaScript.

SSR and SEO

Without SSR:
  Browser receives empty HTML → JavaScript runs → Content appears
  Crawler sees empty HTML → Poor SEO

With SSR:
  Server renders complete HTML → Browser receives content → Hydration
  Crawler sees complete HTML → Good SEO

Title and Meta Services

import { Meta, Title } from '@angular/platform-browser';

@Component({
  selector: 'app-product-detail',
  template: `<h1>{{ product.name }}</h1>`,
})
export class ProductDetailComponent implements OnInit {
  constructor(
    private title: Title,
    private meta: Meta,
    private productService: ProductService,
  ) {}

  ngOnInit(): void {
    this.productService.getProduct(this.id).subscribe(product => {
      this.title.setTitle(product.name);
      this.meta.updateTag({ name: 'description', content: product.description });
      this.meta.updateTag({ property: 'og:title', content: product.name });
      this.meta.updateTag({ property: 'og:description', content: product.description });
      this.meta.updateTag({ property: 'og:image', content: product.imageUrl });
    });
  }
}

Title Service

this.title.setTitle('Product Name — My Store');
this.title.getTitle(); // Read current title

Meta Service

// Add or update a meta tag
this.meta.updateTag({ name: 'description', content: 'Page description' });

// Add Open Graph tags
this.meta.updateTag({ property: 'og:title', content: 'Page Title' });
this.meta.updateTag({ property: 'og:description', content: 'Page Description' });
this.meta.updateTag({ property: 'og:image', content: 'https://example.com/image.jpg' });
this.meta.updateTag({ property: 'og:url', content: 'https://example.com/page' });

// Remove a meta tag
this.meta.removeTag('name="description"');

Open Graph tags control the preview card shown when a URL is shared on social platforms.

Open Graph Tags

<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page Description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="My Site">

Twitter Card Tags

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page Description">
<meta name="twitter:image" content="https://example.com/image.jpg">

Dynamic Meta Tags per Route

export const routes: Routes = [
  {
    path: 'products/:id',
    component: ProductDetailComponent,
    resolve: { product: productResolver },
    title: 'Product Detail',  // Angular 14+ route title
  },
];

SEO Checklist

• Unique title per page (50-60 characters)
• Unique meta description per page (150-160 characters)
• Open Graph tags for social sharing
• Twitter Card tags
• Canonical URLs
• Structured data (JSON-LD)
• Semantic HTML (h1, h2, h3)
• Alt text on images
• Fast page load (SSR helps)