Angular SEO Done Right with Server-Side Rendering [Live Demo]

Google's JavaScript crawling & rendering is still a somewhat obscure issue.

Contradictory statements and experiments are found all over the web.

So what does this mean?

As a developer, you NEED to optimize sites built with popular JS frameworks for SEO.

With that in mind, here's the third part of our ongoing JavaScript Frameworks SEO issues series:

1. Building a prerendered Vue.js app
2. Applying React SEO with Next.js.
3. Here, I'll be tackling Angular SEO.

More precisely, we'll be crafting a server-rendered Angular e-commerce SPA using Universal.

Here are the steps we'll use to achieve this:

1. Setting up an Angular project.
2. Creating Angular components.
3. Enabling e-commerce functionality on our SPA.
4. Using Universal to make our Angular app SEO-friendly

This should be fun!

Why bother with Angular SEO? Isn't Angular Google-backed?

Angular is an open source JS framework developed by Google engineers in 2010.

It's great to complete your headless stack or any JAMstack for that matter. But it still shares common SEO issues known to JavaScript frameworks.

JS single-page apps add content to pages dynamically with JavaScript. This isn't optimal for SEO: crawlers most likely won't run the JS code, thus not encountering the actual content of the page.

→ Read the full post & technical tutorial here