Adding Social Media Tags in Angular

To improve SEO (Search Engine Optimization) on my webpage I have created a service, which adds the title and tags for social media and web crawlers. These tags provide an image, description and title when a link to a website is posted on social media or even in messaging apps. They also help the search engine to index the page. 

The most important things to do for SEO is to provide a unique title and a description for each separate page. This sounds natural if you work in most frameworks, but single page applications like angular often have just one title by default. To show the title and description in the browser I have written a service: 

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

@Injectable({
  providedIn: 'root'
})
export class SEOService {
  constructor(private title: Title, private meta: Meta) { }


  updateTitle(title: string) {
    this.title.setTitle(title);
    this.meta.updateTag({ property: 'og:title', content: title });
    this.meta.updateTag({ name: 'twitter:title', content: title });
  }

  updateUrl(url: string) {
    this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
    this.meta.updateTag({ property: 'og:url', content: url });
    this.meta.updateTag({ property: 'og:type', content: 'website' });
    this.meta.updateTag({ property: 'twitter:url', content: url });
    this.meta.updateTag({ property: 'twitter:domain', content: 'furcino.com' });
  }

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

  updateKeywords(keywords: string) {
    this.meta.updateTag({ name: 'keywords', content: keywords });
  }

  updateImage(image: string) {
    this.meta.updateTag({ property: 'og:image', content: image });
    this.meta.updateTag({ name: 'twitter:image', content: image });
  }

}

Now I just call the functions in the component in ngOnInit(). Don't forget to implement OnInit and add the SEOService in the constructor:

@Component({
  selector: 'app-inflation-calculator',
  ...
})  
export class InflationCalculatorComponent implements OnInit, ... {

  constructor(private seoService: SEOService, ...) {
    
  }
  
  ngOnInit() {
    this.seoService.updateTitle('Inflačná kalkulačka');
    this.seoService.updateDescription('Toto je inflačná kalkulačka...');
    this.seoService.updateKeywords('inflácia, štatistiky, rozsah, kalkulačka');
    this.seoService.updateImage('https://furcino.com/assets/logo.png');
    this.seoService.updateUrl('https://furcino.com/grafyatak');
  }
  
  ...
}

I have used the metatags from https://www.opengraph.xyz/. It seems to do the trick. I have already done some preparation by adding the title, description, keywords and images to every article on my website in the database and read this information from the JSON object that represents my articles and projects.

All of this also works with Angular Universal. When you prerender your pages so crawlers can index your website, all these meta tags and the title are included in the generated HTML files.

This should hopefully improve the traffic a little. However, if there is a problem, I will still learn something new and have something to write about. Thank you so much for reading! I will get back to you when I have enough data to asses the situation.