Is Angular Search Engine Friendly? 🤔

Server-side rendering (SSR) with Angular Universal 15 💡

Photo credit: web.dev

The answer is NO. This article will help you understand the benefits of using Angular Universal for SEO and how to integrate it into an existing Angular application.

A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. For SEO, the Googlebot crawler needs to crawl the site content. But, Angular uses concepts of SPA which removes all crawlable content from the page’s actual code, unlike a traditional HTML page which contains all website content (SPA will only include the basic page structure).

What is Angular Universal and how it is important for SEO?

Angular Universal allows server-side rendering and it is much more SEO-friendly than traditional client-side rendering. Here, search engine crawlers can see the fully rendered version of the application, which can lead to higher search rankings and more traffic to the site.

How to integrate Angular Universal?

1️⃣ Use the below command to add the necessary package and files to allow the Node.js Express web server to compile the HTML pages with Universal based on client requests.

ng add @nguniversal/express-engine

Package and new files will be added after this command execution. Please see the reference image below (sample commit):

File changes after adding the Universal package

2️⃣ To start rendering your application with Universal on your local system, use the following command:

npm run dev:ssr

Now, what is the difference between “ng serve” & “npm run dev:ssr” ?

“ng serve” will allow you to build, serve your application, and rebuild on file changes. Also, it is fast compared to the SSR command. But, it will not render the complete page content in the browser.

Please see the below page source content for reference:

Page source view with “ng serve” command

“npm run dev:ssr” is similar to “ng serve”, which offers live reload during development, but uses server-side rendering. Here, the complete content will be loaded on the page which helps the SEO.

Page source view with “npm run dev:ssr” command

Also, a few other npm SSR commands will automatically be added to package.json file. Please see the details here.

How does the Universal works in Production?

Use the prerender command in production mode to pre-render the application and the build artifacts can then be deployed to the production server.

npm run prerender --production

If we have multiple routes defined in the application, we can define these routes in angular.json file and pre-render them (ex: index.html, home.html, about.html, …).

"prerender": {
  "options": {
    "routes": [
      "/",
      "/home",
      "/about"
    ]
  }
}

Check this sample production deployed application for reference (right-click on the page and select the ‘View Page Source’ option).

In conclusion, Angular Universal is a powerful framework that can help developers create fast, scalable, and SEO-friendly web applications. With server-side rendering, improved performance, and accessibility, it is an excellent choice for building modern web applications.

Good Luck 🤞

I hope this article and the source code in GitHub will help you.

If you are interested, check out my blog on Angular to learn more about the basics of Angular.