Scully and meta description

Scully is a static site generator for Angular projects. If you want to create a blog with scully, please read this official document first. Adding blog support

Purpose

To use the description in frontmatter in the markdown articles as an SEO meta tags.

---
title: "Awesome article"
description: "beep beep... description... beep..."
published: true
---

# Awesome article

ScullyRouteService

If you have just added blog support, articles are rendered by ScullyContentComponent component with BlogComponent. To access the frontmatter, we can use ScullyRoutesService. First, we need to get the current ScullyRoute using getCurrent() method.

export class BlogComponent implements OnInit {
  blog$ = this.srs.getCurrent();

  constructor(private srs: ScullyRoutesService) {
  }

  ngOnInit() {
    this.blog$.subscribe((b) => {
      console.log(b.title);
      console.log(b.description);
    });
  }
}

After you get these meta data, you can update <meta> tag in index.html in next step.

SEOService

To update <meta> tags, We can use @angular/platform-browser. I added the following service.

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

@Injectable({ providedIn: 'root' })
export class SEOService {
  siteName = "TANB EXPRESS";

  constructor(private title: Title,
              private meta: Meta) {
  }

  updateTitle(title?: string) {
    let titleString = this.siteName;
    if (title) {
      titleString = title + " - " + this.siteName;
    }
    this.title.setTitle(titleString);
  }

  updateOgDescription(desc: string) {
    this.meta.updateTag({ property: 'og:description', content: desc })
  }

  updateDescription(desc: string) {
    this.meta.updateTag({ name: 'description', content: desc })
  }
}

Next, using this SEOService, I update BlogComponent as follows:

export class BlogComponent implements OnInit {
  blog$ = this.srs.getCurrent();

  constructor(private seo: SEOService,
              private srs: ScullyRoutesService) {
  }

  ngOnInit() {
    this.blog$.subscribe((b) => {
      this.seo.updateTitle(b.title);
      this.seo.updateOgDescription(b.description);
      this.seo.updateDescription(b.description);
    });
  }
}

Conclusion

We can update meta desciprtion using @angular/platform-browser, and also title tag. We can access a frontmatter from ScullyRoute, you can also create an articles list page with titles and desciprtions using ScullyRouteService. Please see official sample blog source code for your reference. sample-blog