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.
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.
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:
Otherwise:
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! 😀
Top comments (1)
Thank you for the great article.
Btw add the loading animation instead of using
loadingtext. LOL.