Making Your Angular Application SEO-Friendly with Angular Universal
Published: 2023-05-25 15:00:01

## 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.