DEV Community

loading...

Angular 9 and SEO - Setting up Meta Tags

Lorna Watson
Software Engineer & Mentor from Leeds, UK. Easy-going, keen learner & motivated by all-things dev. โœจ
ใƒปUpdated on ใƒป2 min read

Admittedly, I've not looked much into SEO previously but have been aware it can really boost your site stats. I'd say I have a very basic understanding of what it is. Before deploying my first site, I knew I had to do some research to ensure from a SEO perspective, at least, that it was good. This blog post illustrates how I've been able to setup meta tags with Angular 9 and with that I'm sure there are a lot of ways to do this, but this worked best for me and quickest.

Approach

My approach was the following:

  • Include meta tags in index.html apart from title and URL as these (in my case) change per page viewing
  • Create service class with a method to update tags (title, URL)
  • Call method

Initial tags in index.html

There are no title and URL tags on this page, as they're both changed dynamically using the new service I created.
Alt Text

Create service

My first step was to create a new service ~/ClientApp/src/core/meta-data-service.ts and add the following code. In short, I have a single method that updates both titles and URLs in meta tags.
Alt Text

Call update method

Last step is to ensure the relevant components are extending from the new service class, that way we can call the method. For every page that isn't the homepage, I call the method like so:
Alt Text

Otherwise:
Alt Text

Summary

How do I know if it's worked? I loaded up the site with the Elements window open in Chrome DevTools and as I change between pages I can see the initial tags there and also the title and URL tags changing retrospectively.

I hope this has been useful and appreciate any feedback, thank you! ๐Ÿ˜€

Repo

Discussion (1)

Collapse
longlch profile image
longlch

Thank you for the great article.
Btw add the loading animation instead of using loading text. LOL.

Forem Open with the Forem app