Angular Open Graph Meta Tags: SSR with Angular Universal and Meta Service

The Angular OG tag problem

Angular is a client-side framework by default. When social crawlers fetch an Angular SPA, they receive a near-empty HTML shell. JavaScript-injected <meta> tags are invisible to these bots, so your link previews show blank titles and no images.

The solution is Angular Universal (now built into Angular 17+ as @angular/ssr), which pre-renders your app on the server. Combined with Angular's Meta and Title services, you get fully rendered OG tags in the server response.

Using Angular's Meta and Title services

Angular provides Meta and Title services in @angular/platform-browser. Inject them into your component and call updateTag():

// app/home/home.component.ts
import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent implements OnInit {
  constructor(private meta: Meta, private title: Title) {}

  ngOnInit() {
    this.title.setTitle('My Angular Site');
    this.meta.updateTag({ name: 'description', content: 'My site description.' });
    this.meta.updateTag({ property: 'og:title', content: 'My Angular Site' });
    this.meta.updateTag({ property: 'og:description', content: 'My site description.' });
    this.meta.updateTag({ property: 'og:image', content: 'https://example.com/og.jpg' });
    this.meta.updateTag({ property: 'og:url', content: 'https://example.com' });
    this.meta.updateTag({ property: 'og:type', content: 'website' });
    this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
  }
}

Enabling Angular Universal (SSR)

Without SSR, your Meta service calls only run in the browser and crawlers won't see them. Add Angular Universal to an existing project:

# Angular 17+
ng add @angular/ssr

# Older Angular (16 and below)
ng add @nguniversal/express-engine

# Build and serve SSR
npm run build:ssr
npm run serve:ssr

After adding SSR, Angular renders the app on the server for the first request. OG tags set via the Meta service will appear in the raw HTML sent to crawlers.

Dynamic OG tags from a route resolver

For dynamic content, load page data via a resolver and set meta tags in the component after the data arrives:

// blog-post.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Meta, Title } from '@angular/platform-browser';

@Component({ selector: 'app-blog-post', templateUrl: './blog-post.component.html' })
export class BlogPostComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private meta: Meta,
    private title: Title,
  ) {}

  ngOnInit() {
    const post = this.route.snapshot.data['post'];
    this.title.setTitle(post.title);
    this.meta.updateTag({ property: 'og:title', content: post.title });
    this.meta.updateTag({ property: 'og:description', content: post.excerpt });
    this.meta.updateTag({ property: 'og:image', content: post.coverImage });
    this.meta.updateTag({ property: 'og:url', content: `https://example.com/blog/${post.slug}` });
    this.meta.updateTag({ property: 'og:type', content: 'article' });
    this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
  }
}

Common Angular OG tag pitfalls

• No SSR: tags set in the browser are invisible to crawlers. Angular Universal is mandatory for social previews to work.
• Using addTag instead of updateTag: addTag creates duplicate meta elements on navigation. Always use updateTag.
• Relative image URLs: og:image must be an absolute HTTPS URL.
• Not cleaning up on destroy: for SPAs with client-side navigation, reset or update meta tags in ngOnDestroy to avoid stale data leaking to other routes.

Verify your Angular OG tags

After deploying with SSR enabled, use curl -A "Twitterbot" https://yoursite.com to confirm meta tags appear in the server response. Then test with these tools:

• Twitter/X Card Validator
• LinkedIn Post Inspector
• Facebook Sharing Debugger
• OGFixer — live preview across Twitter, Slack, Discord