Making Your Angular Application SEO-Friendly with Angular Universal

Are you struggling to make your Angular application SEO-friendly? You are not alone! The initial release of Angular made it difficult for search engine crawlers to index client-side rendered pages. But, the release of Angular Universal has bridged the gap between client-side and server-side rendering, making it easy to create SEO-friendly applications.

In this article, we will discuss Angular Universal, how it works, and how you can use it to make your Angular application SEO-friendly.

What is Angular Universal?

Angular Universal is a server-side rendering (SSR) solution for Angular. It renders your application on the server-side before it gets to the client-side, hence making it SEO-friendly. With Angular Universal, your application gets indexed by search engines, crawlers, and other third-party tools.

How Does Angular Universal Work?

Angular Universal works by rendering your Angular application on the server-side using Node.js. It runs your application just like a browser but on the server, creating static HTML pages that can be crawled and indexed by search engines.

Here is how Angular Universal works:

1. The user requests a page from your Angular application.
2. The server loads the requested page.
3. Angular Universal renders the page on the server-side and sends the HTML response to the client.
4. The client receives the response and displays the page.

How to Implement Angular Universal in Your Application?

Implementing Angular Universal is easy. Here are the steps:

1. Install @angular/platform-server using npm.

  
  npm install --save @angular/platform-server
  

2. Next, create a new file named app.server.module.ts in your application’s root directory.

  
  touch app.server.module.ts
  

3. Edit the app.server.module.ts and import the necessary modules.

  
  import { NgModule } from '@angular/core';
  import { ServerModule } from '@angular/platform-server';
  import { AppModule } from './app.module';
  import { AppComponent } from './app.component';

  @NgModule({
    imports: [
      AppModule,
      ServerModule
    ],
    bootstrap: [AppComponent],
  })
  export class AppServerModule { }
  

4. Export your app.server.module.ts in your app.module.ts file.

  
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppComponent } from './app.component';
  import { AppServerModule } from './app.server.module'; 

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule.withServerTransition({appId: 'my-app'}),
      AppServerModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

5. Now, create a file named server.ts in your application’s root directory.

  
  touch server.ts
  

6. Add the following code in the server.ts file.

  
  import 'zone.js/dist/zone-node';
  import { ngExpressEngine } from '@nguniversal/express-engine';
  import * as express from 'express';
  import { join }  from 'path';
  import { AppServerModule } from './src/app/app.server.module';

  const app = express();

  const PORT = process.env.PORT || 3000;
  const DIST_FOLDER = join(process.cwd(), 'dist');

  app.engine('html', ngExpressEngine({
    bootstrap: AppServerModule
  }));

  app.set('view engine', 'html');
  app.set('views', join(DIST_FOLDER, 'browser'));

  app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
  app.get('*', (req, res) => {
    res.render('index', { req });
  });

  app.listen(PORT, () => {
    console.log(`Node server listening on http://localhost:${PORT}`);
  });
  

7. In your package.json file, add the following commands.

  
  "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
  "serve:ssr": "node dist/server"
  

8. Run the following command to build and serve the application.

  
  npm run build:ssr
  npm run serve:ssr
  

9. Finally, check your application’s URL in the browser. The rendered HTML should be visible in the page source.

Advantages of Using Angular Universal

1. SEO-friendly: With Angular Universal, your application becomes more SEO-friendly.

2. Improved performance: With server-side rendering, users receive content faster, which leads to improved performance.

3. Better accessibility: Server-side-rendered pages are more accessible as they can be read by assistive technologies.

4. Better social media sharing: Server-side rendered pages work well with social media sharing tools as they provide metadata for search engine crawlers.

Conclusion

In this article, we covered Angular Universal and how it can help make your Angular application SEO-friendly. We’ve also discussed how Angular Universal works and how to implement it in your application. Building SEO-friendly applications can be challenging, but with Angular Universal, you can solve this problem with ease.