Angular SEO: 7 checks and how to fix them

These are the Angular-specific checks RankCLI runs, and the fix for each one in Angular's own idiom. Angular renders on the client by default, which is where most of its SEO problems come from.

7 checks

2 rated error

spa

Client-rendered by default

Run all of these against your own site, free and without an account:

npx @rankcli/cli audit -u https://your-site.dev

Where Angular makes SEO harder

•Client-side rendering by default
•Heavy initial bundle size
•Complex SSR setup (Angular Universal)
•Zone.js can cause performance issues

The checks

error

ANGULAR_NO_UNIVERSAL

Angular app without Universal (SSR)

Client-side Angular apps send empty HTML to crawlers.

Add Angular Universal for SSR:

ng add @angular/ssr

This adds server-side rendering to your Angular app.

error

ANGULAR_NO_TITLE_SERVICE

Not using Title/Meta services

Angular has built-in services for managing title and meta tags.

Use Title and Meta services:

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

@Component({...})
export class ProductComponent {
  constructor(
    private title: Title,
    private meta: Meta
  ) {}

  ngOnInit() {
    this.title.setTitle('Product Name | Your Site');
    this.meta.updateTag({ name: 'description', content: 'Product description' });
    this.meta.updateTag({ property: 'og:title', content: 'Product Name' });
  }
}

warning

ANGULAR_LAZY_LOAD_MISSING

Routes not lazy loaded

Loading all modules upfront increases initial bundle size.

Use lazy loading for routes:

const routes: Routes = [
  {
    path: 'products',
    loadChildren: () => import('./products/products.module')
      .then(m => m.ProductsModule)
  },
  // Or with standalone components
  {
    path: 'about',
    loadComponent: () => import('./about/about.component')
      .then(m => m.AboutComponent)
  }
];

warning

ANGULAR_PRERENDER_MISSING

Static routes not prerendered

Static pages should be prerendered at build time.

Configure prerendering in angular.json:

{
  "projects": {
    "your-app": {
      "architect": {
        "prerender": {
          "options": {
            "routes": ["/", "/about", "/contact"]
          }
        }
      }
    }
  }
}

Run: ng run your-app:prerender

notice

ANGULAR_CHANGE_DETECTION

Using default change detection

OnPush change detection improves performance significantly.

Use OnPush for components:

@Component({
  selector: 'app-product',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `...`
})
export class ProductComponent {}

warning

ANGULAR_LARGE_BUNDLE

Large initial bundle detected

Bundle over 500KB significantly hurts performance.

Enable build optimizer:

// angular.json
"optimization": true,
"buildOptimizer": true

Analyze bundle:

ng build --stats-json
npx webpack-bundle-analyzer dist/your-app/stats.json

Remove unused dependencies

notice

ANGULAR_NO_IMAGE_DIRECTIVE

Not using NgOptimizedImage

Angular 15+ has built-in image optimization.

Use NgOptimizedImage directive:

import { NgOptimizedImage } from '@angular/common';

@Component({
  imports: [NgOptimizedImage],
  template: `
    <img ngSrc="/hero.jpg" width="1200" height="630" priority />
  `
})

Check your own Angular site

280+ checks including every one above. No signup, nothing leaves your machine.

Run a free audit