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
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
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.
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);
});
}
}
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