Creating a Multi-page Landing Website with Angular Universal

Creating a multi-page landing website is a common goal for developers aiming to deliver fast, SEO-friendly, and dynamic web experiences. Angular Universal provides a powerful solution by enabling server-side rendering (SSR) for Angular applications, which significantly improves performance and search engine indexing. This article guides you through the essential steps to build a multi-page landing website using Angular Universal.

Understanding Angular Universal

Angular Universal is a technology that allows Angular applications to be rendered on the server before being sent to the client. This results in faster initial load times and better SEO, as search engines can crawl fully rendered pages. Universal works by running Angular on a Node.js server, generating static HTML content for each route.

Setting Up Your Angular Universal Project

Start by creating a new Angular project or using an existing one. To add Universal support, run:

ng add @nguniversal/express-engine

This command installs the necessary packages and updates your project files. Next, generate server-side files with:

ng generate universal --clientProject your-project-name

Creating Multiple Landing Pages

To create a multi-page website, define multiple routes in your Angular routing module. For example:

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
];

Creating Components for Each Page

Generate components for each landing page:

ng generate component home

ng generate component about

ng generate component contact

Optimizing for SEO and Performance

Use Angular Universal to generate static HTML for each route during build time. This improves SEO and load times. Implement meta tags and descriptive content in each component to enhance search engine visibility.

Deploying Your Multi-Page Website

Build your project using:

npm run build:ssr

Then, deploy the server bundle to a Node.js hosting environment such as Heroku, Vercel, or your own server. Ensure your server is configured to serve the correct routes and static assets.

Conclusion

Using Angular Universal to create a multi-page landing website offers significant benefits in speed, SEO, and user experience. By following these steps—setting up Universal, defining routes, creating components, and deploying—you can build a dynamic, efficient multi-page site that meets modern web standards.