Welcome to this insightful article to get a brief idea on optimizing an Angular website for SEO.
I trust you are an SEO or a webmaster who is recently interacting with an Angular website and facing issues to make it compliance for SEO.
Don’t worry, I was confused at first, and gone through various processes, wasted too much time and then got the formula to optimize an Angular website for SEO.
In case you don’t know, Angular is a popular framework developed on JavaScript and helps in building dynamic, single-page applications (SPAs).
As Angular is based on JavaScript framework, it helps in creating interactive and dynamic websites. Because of the dynamic in nature and providing interactive features, the user experience lift up on websites.
But, if you have been an SEO and worked with JavaScript before, you must have a clear idea that JavaScript impacts SEO in a number of ways.
For example, if a website uses JavaScript to load content, it can make it harder for search engines to crawl and index that content.
And when JavaScript is used to create links, these links can’t not be picked up by search engines and so the navigational menu, if created using JavaScript.
However, even if Angular websites have heavy JavaScript, but you will face little more challenges while making it SEO friendly comparing to only JavaScript websites.
The Biggest Challenge
One of the biggest challenges of SEO on Angular websites is that search engines have difficulty crawling and indexing dynamic, client-side rendered content.
So what do I mean by client-side rendered content. when a request is sent to the server, the server doesn’t execute all the codes in the server, in fact leaves it to the browser where the codes dynamically populates.
This is because when a search engine crawls a website, it sends a request to the server for the HTML of a page. And as it’s rendered on a browser, the search engine doesn’t get what it was supposed to get from the server.
On a traditional server-side rendered website, the server will respond with the complete HTML of the page, including all of the content.
But when it’s an Angular website, the initial HTML sent by the server is typically minimal and does not include the full content of the page. Instead, the content is loaded and rendered on the client-side using JavaScript i.e., on the browser.
Thus, search engines may not be able to fully crawl and index the content on an Angular website.
And if the website is not crawl-able by search engines, forget ranking the website for your favourite keywords.
Why Am I Writing this?
Why I’m writing this article, well.. I recently experienced a website which was built on custom HTML and was ranking for good number of keywords resulting in a decent amount of traffic around 8,000+ a month.
Then, the website was revamped with a new design which looks great compared to the old one. However, the new website was built on Angular.
Once the website was ready, everyone is happy while interacting with the website except me. The traffic dropped suddenly by 80% in just a month, pages got deindexed from search engine and many more.
So what I did and how I recovered the website traffic, what was my approach. Let’s discuss, we are running out of time.
First thing first, research and go through case studies available on the internet. Here, I started learning new SEO things for Angular website, and believe me, it was fun as well as frustrating for me to explain the challenges to the developers.
What was my approaches, let’s start.
Server-side rendering (SSR)
Angular website renders on the client side, thus when the search engine sends request to server, it can’t get the HTML rendered website.
So, if I will make the rendering in the server itself, then it will help search engines get the HTML rendered website from the server itself and crawling could become smoother and improve the scope of getting indexed.
By this process, the full content of the page is included in the initial HTML, making it easier for search engines to crawl and index the page.
What was the challenges that I came up here. I’m having no experience of coding or development of Angular, thus begged the developer to do it. And then it became the hot debate of the week, lots of arguments, justifications, blah blah blah, but finally I made them understand the issue and the importance of it and they agreed to do that.
As you know, I’m not a developer so I can’t exactly brief the guidance to make an Angular website enabled for server side rendering, but can suggest the article which I shared with my developer.
If you are a developer then just go through this step by step guide, and if you are an SEO, make sure you send it to the developer. The developer won’t be happy though, but justify the importance of it.
Alternative Option of SSR: Prerendering
Prerendering is almost similar to server side rendering, however I haven’t used it as SSR done the job for me.
So what happens in prerendering. With prerendering, the initial HTML of a page is generated on the server and cached, so that it can be quickly sent to search engines and other crawlers.
This can help ensure that search engines are able to see the full content of the page and index it properly.
Again, here I would do the highest possible help to you by sharing the article which will guide your developer to make it happen. Here it is, click here to get the steps to make your website enabled for prerendering.
Even after the SSR was enabled, there was indexing and caching issues. Following these steps I make the indexation much faster for the website:
- Regularly updated the sitemap.xml and submitted it.
- Force submit the URLs.
- Used IndexNow to index faster on multiple search engines.
- Link the page from already indexed pages.
- Build backlinks for these pages.
META Tags Is Also A Challenge in Angular Websites
As Angular is a SPA (single page applications), the Meta tags you use for one page are same for all the pages.
The development team told me at first that it’s not possible to show different Meta tags for different pages.
I was shocked to listen this, I mean there are thousands of websites already built on Angular and serving different Meta tags for each page. Why we can’t?
I already guessed that the developer is angry on me as I made him work for things which he never want to do. Thus such types of justification.
Believe me, I had another article from Angular developer guide ready to share with the developer. Here’s what I shared with the developer on the process of importing Angular Meta Services which helped in different Meta tags for each pages.
This is not the end my friend, there are many more. Hop down and see what else are there.
Page URL Structure (URL Slug)
You know it very well, how important URL slug is for SEO. With Angular websites forget the URL slugs, all the pages will load in one URL.
How search engines will differentiate each pages, only Meta Tags isn’t enough. You just need to tell the developer, that it’s possible to show different URLs for different angular pages. They will look for the module from Angular and import it to make this happen.
But if your developer is unwilling to do the research and asks you for a weeks timeline, don’t worry. I’m here, check this help guide from Angular, and share with your developer.
He might be furious by now, because the developer working for my project was running away from me.
Horrible Loading Time
Let’s talk about the next point which gave me a headache, the loading speed. Despite of so many rich interactive features the angular sites takes much time to load.
You won’t believe me, but the angular site I was working with resulted a loading time of 31 second. At first, I didn’t believe it and thought my system’s connectivity could be the reason.
But as an SEO, we are not limited to one tool. I checked in multiple tools and the loading speed was near to 30 seconds.
The TTFB (time to first byte) was not good, the First Meaningful Paint was horrible and in some tools the result didn’t come either because of timeouts.
The development team was again disturbed by my so called justifications. Obviously they will, their job is to make the application ready without any bug. And to make it SEO friendly if you are running behind them for this and that, they will avoid you for sure.
However, I convinced the developer and he worked on it. And reduced the speed to 7 seconds, which is way better than the old time taken to load the website.
However, it’s recommended to use a CDN to improve the loading speed, but I haven’t used that. It’s always a welcome optimization tactic.
Installing Google Tag Manager
How easy it when you work on a PHP or HTML site and placing the tag manager code on the website. Just a matter of time and if you know basic HTML, you can make it happen as well, simple copy and paste in <head> and <body>.
Have you tried that on Angular website? If not then you are saving a lot of time.
In Angular, if you follow just the copy paste of tag manager code then you lost it. You test and test again, but no data will be there, not a single spike.
Without the GTM or GA, how hard it will be to track the progress, how your website is performing. All the hard work you have been doing for the website, must have some insights. At last, everyone has to track how the website is working, finding top pages, tracking events and many more KPIs that helps you define the SEO tasks.
Guide your developer with this Github codes that will help him doing what you want to make him to do.
That’s All! What’s Next?
These were the major challenges that I faced working with an Angular website. And everyone will face as these are not previously available by default. You have to implement all these by taking the right action as motioned above.
Once these are fixed, you can follow the other SEO processes to improve the overall SEO of the website. To mention some of those, here is a list just for your reference.
Sitemap: Ensure that you have a sitemap both the XML and HTML.
Schema.org Structured Data: add structured data to your website using schema.org and make the search engines understand the content of your pages better.
Distribute Heading Tags: Never forget to use proper heading tags (H1, H2, H3, etc.) to structure the content on the website. It helps search engines and users in better readability.
Internal Linking: Being an SEO you have better idea how beneficial internal linking are.
At last I must say optimizing Angular websites for SEO requires a multifaceted approach that includes techniques such as mentioned above which I have leveraged to make the website more approachable in terms of SEO.
Let me know whether it worked for you, and if not I will be happy to help. Have your queries lined up in the comments below and I will take each one of them to make sure you get your Angular website ready and running for SEO.