SEO

Your application includes a pre-configured SEO service for managing meta tags, Open Graph data, Twitter cards, and Schema.org structured data. Follow the steps below to configure and use it effectively.

Setup Instructions

1. Configure Default SEO Values

Open the config.ts file in your project root.
Set the following required values:

const config = {
  appName: "DevRocket", // Your application name
  appDescription: "The Angular + NestJS boilerplate for building web applications.", // Short description
  domainName: "devrocket.ai", // Your domain name (no https:// or trailing slash),
  // other fields
};
 
export default config;

These values will be used as default SEO tags for all pages.

2. Add SEO Tags to Pages

Use the updateMetaTags method from the SeoService to set custom SEO tags for individual pages without rewriting all tags.

Example: Adding Custom SEO Tags

import { Component, OnInit } from '@angular/core';
import { SeoService } from './services/seo.service';
 
@Component({
  selector: 'app-terms',
  templateUrl: './terms.component.html',
})
export class TermsComponent implements OnInit {
  constructor(private seoService: SeoService) {}
 
  ngOnInit(): void {
    this.seoService.updateMetaTags({
      title: 'Terms and Conditions | DevRocket',
      description: 'Review the terms and conditions of DevRocket.',
      canonicalUrlRelative: '/terms',
      openGraph: {
        title: 'Terms and Conditions | DevRocket',
        description: 'Detailed terms and conditions for DevRocket.',
        image: 'https://devrocket.ai/og-image.png',
      },
      twitter: {
        creator: '@devrocket',
        image: 'https://devrocket.ai/twitter-image.png',
      },
    });
  }
}

3. Add Structured Data

To improve your website's visibility on search engines and enhance search results, use the renderSchemaTags method to inject Schema.org structured data.

Example: Adding Structured Data

import { Component, OnInit } from '@angular/core';
import { SeoService } from './services/seo.service';
 
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent implements OnInit {
  constructor(private seoService: SeoService) {}
 
  ngOnInit(): void {
    this.seoService.renderSchemaTags();
  }
}

The renderSchemaTags function automatically uses values from config.js to generate structured data.

4. Generate a Sitemap [TODO]

5. Claim Your Domain on Google Search Console

Visit Google Search Console.
Add your domain and verify ownership to improve indexing.

Features

Dynamic Meta Tags

Automatically sets <title> and <meta> tags using default or custom values.

Open Graph and Twitter Cards

Optimize your pages for social media sharing.

Schema.org Structured Data

Enhance visibility with structured data for better search engine understanding.

With these steps, your application is now equipped with a fully integrated and customizable SEO service. For further optimizations, explore advanced SEO practices.

SEO

On this page