Developing SEO Friendly Application Using Angular

In this blog, we will learn how to makeAngular projects SEO-friendly.SEO is one of the most important things for a web application. I know you may have questioned whether we can use search engine sitemaps. Angular is a single-page application and browser rendered (by default)which loads the content dynamically in one HTML file. Whenever search engines search the website, they only see one HTML file which is the main HTML file, hence it will fail to make the website SEO friendly.

So whenever you want to make angular SEO friendly you can use this functionality of angular. In this functionality, we are converting Angular projects frombrowser rendering to server-side rendering.

Challenges I Face On Angular Without SSR

• Content invisible for bots - Angular does not reload the pages unless the user does so. It doeschange the metadata of the pages dynamically which is entirely Javascript based.Basically, Search engine crawlers are not supported Javascript changes files. Due to this Angular failed to render the right content or metadata.
• Loading speed limitation -Another significant limitation of Angular apps that makes them SEO- friendly is speed. Angular apps are easy to scale, user-friendly, and powerful. Most angular sites first load blank screens for some odd seconds before rendering the actualhome page.
• Getting only one preview- Whenever I share any page of my project to any social media platform, it only shows the default angular page preview. We are updating the meta and title on the page dynamically, however it does not show changes on social media networks.

The Solution To Make Angular Apps SEO-Friendly

Dynamically Rendering

The Major limitation for Angular websites regarding SEO is that it fetches data via API calls and doesn't have many HTML files for google to crawl. An easy solution to this problem is to make a dynamic rendering tool that can help to create static HTML files which can be easily crawlable, and consumable.

Setup titles and metadata

Search engine crawlers collect data from the titles and metadata available on the web page. For adding metadata and title dynamically, we need to use Meta, Title from @angular/platform-browser.Inject Meta and title in the component where you want to title and meta data.

import { Component } from "@angular/core";
import { Meta, Title } from "@angular/platform-browser";

@Component({
selector: 'app-movie',
templateUrl: './movie.component.html'
})
export class MovieComponent {
constructor(
private _Title: Title,
private _Meta: Meta
) {

this._Title.setTitle('From Movie Component ...');
this._Meta.updateTag(
{ name: 'og:title', content: "From Movie Component ..." }
);
this._Meta.updateTag(
{ property: 'og:thumbnail', content: 'https://assets.snappages.site/global/assets/theme/church/children_02.jpg' }
);
this._Meta.updateTag(
{ property: 'og:url', content: 'https://assets.snappages.site/global/assets/theme/church/children_02.jpg' }
);
this._Meta.updateTag(
{ property: 'og:image', content: 'https://assets.snappages.site/global/assets/theme/church/children_02.jpg' }
);
}
}

The above code will update the data of the title and of all meta tags.

Angular Universal or Server Side Rendering

A normal Angular application executes or runs in the browser, and renderspages in the DOM as per theresponse to the user's actions. Angular Universal (server-side rendering) executes on the server, generating individual static application pages thatget bootstrapped on the client side. Itmeans that the application renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

Implement Angular Universal or Server Side Rendering

​​1) Create New Angular App

ng new project_name --style=scss --routing=true

2) Install Angular Universal

ng add @nguniversal/express-engine --clientProject project_name

When we run the above command, it creates some files and also makes updates in some files inside the "src" folder.

index.html // <-- app web page
main.ts // <-- bootstrapper for client app
main.server.ts // <-- * bootstrapper for server app
style.css // <-- styles for the app
app/ … // <-- application code
app.server.module.ts // <-- * server-side application module
server.ts // <-- * express web server
tsconfig.json // <-- TypeScript base configuration
tsconfig.app.json // <-- TypeScript browser application configuration
tsconfig.server.json // <-- TypeScript server application configuration
tsconfig.spec.json // <-- TypeScript tests configuration

3) Test application

npm run build:ssr && npm run serve:ssr

Conclusion

Server-side rendering in angular makes the browser SEO-friendlyand decreases the page load time. When we share any angular server-side rendered page on social media, it displays the preview of that page, loads images, and displays titles.

At Oodles ERP, we provide end-to-end ERP application development services to help enterprises sail through their routine operational complexities. To learn more about our custom ERP application development services, reach out at [email protected].