Introduction
Angular is a high-powered JavaScript framework that has been adopted by developers around the globe due to its capability to build largescale, highly performant web and mobile applications. Even though it is a highly sought-after framework, it doesn’t spare a developer from difficulties that they come across while developing with Search Engine Results Page(SERP) in mind. Angular and SEO require quite a bit of working around to go hand in hand to result in a successful web application on all fronts.
How search works- SEO
If you are not familiar, Search Engine Optimization or SEO is a fundamental step to marketing online. It simply refers to improving your website’s quality to appear higher in search results, thereby increasing the probability of more traffic. Search engines use bots to crawl websites, collect information and put them in an index. When people search for something, the search engine pulls out sites related to the topic and displays websites relevant to the topic.
Frameworks and Search
Most Websites are coded using JavaScript to support a user’s interaction with the page. The Googlebot can navigate through JS, but for a comprehensive crawling of your site, certain things must be taken care of. Implementing SEO-friendly URLs, Meta tags, etc., is necessary for proper indexing and subsequent ranking.
Angular and Search
For the search engine to include Angular-based sites, JavaScript needs to be rendered from the code. For an average search engine, as the code becomes more complex, the harder it is for it to render the JS.
Angular web (single page) runs on the client side, which in simple terms, means that the first thing that is loaded on launching a web page is just its HTML shell. The bot accesses the content of your website only when the JS is rendered. Without the JS properly loaded, the visibility of your Angular site in the Search Engine Results Page (SERP) is highly affected.
Angular is mostly used for developing single page applications (SPAs). SPAs do not store data in their source. As mentioned earlier, these are rendered on the client side.
Here, when a user interacts with the site, the API extracts data from a general interface. This is not ideal, as bots obtain content from the source. Hence there is no actual content to be crawled by the bots.
Here’s a compilation of a few ways by which you can make your SPA developed using Angular SEO-friendly.
Optimizing Angular for SEO
Unique URL
Single Page Applications developed using Angular are rendered on the client side. Hence even when content is updated, there is no request being made to the server to do so. This, in turn, means that the URL does not always exactly represent the new content displayed on the page. The search engines cannot index the new content as it does not always exist in the URL.
Solution
A function called PushState() can update the URL based on the content requested:
| Let stateObj = { Foo: “bar” }; History.pushState(stateObj, “page 2”, “bar.html”); |
Angular Universal
Angular Universal is support provided by Angular to render Angular applications in advance when the user first launches your site. Angular Universal is your best bet for improved Angular SEO. Angular Universal’s Server Side Rendering (SSR) makes content available to bots for crawling.
Angular Universal uses the TransferState API to transfer content from the server used for rendering to the browser. The application layer is preserved, while the second layer takes care of the rendering. The Architecture of Angular Universal is as follows:
Angular Universal can generate a file representing a Node server called server.ts file. An isomorphic application is derived from this process- one in which rendering takes place on the server end while navigation takes place on the client end.
Manual Prerendering using Command Line
To install the prender
Now, for prerendering your application:
First, use the following command on the project:
Use guess parser to determine the application routes. A prerender builder allows developers to specify the routes of those pages of the site that they would like to render in advance. This builder can be found in the angular.json file of your website.
For example:
| “prerender”: { “builder”: “@nguniversal/builders:prerender” “options”: { “browserTarget”; “universal-app:build:production”, “serverTarget”: “universal-app: server :production” “routes”: [ “/”, “/about-us” ” /contact-us” ] } “configurations”: { “production”: {} } |
Meta Tags
Meta Tags are the text that describes the content of a website or webpage, and this can be found in the source code and on the webpage as well. These tags assist the search bots in effectively comprehending the contents of a page by adding more context. This elevates your SEO and increases your chances of ranking higher in the SERP. But adding meta tags is not child’s play when you’re developing an Angular website.
Title and Meta Services
The Meta tag services provided by Angular are very much like that the ones you find in HTML.
Here’s a list of some commonly used Meta Services by Angular:
| Meta Tags | Description |
| addTag() | To include one meta Tag |
| updateTag() | Updates meta Tag in Angular Component |
| getTags() | For getting HTML Element for any specified meta selector |
| removeTag() | For removing meta tag for any specified selector. |
| removeTagElement() | For removing meta tag for a specified HTML Element |
| addTags() | To include more than one meta tag in angular component. |
Setting up Title and Meta Services
To set up Meta Services, first Angular Universal is needed. You can import Angular Meta service from the app/app.component.ts file of Angular Universal app. The service lets you add fields such as robots, keywords, date and viewport.
To import Angular Meta Service:
Run the command:
import { Meta } from ‘@angular/platform-browser’;
Then inject private metaTagService: Meta in the constructor and use addTags() for configuration of the given HTML meta attributes:
| @Component ({ selector: ‘app-root’, templateUr1: ‘./app.component.htmI’, styleUrls: [‘ ./app.component.css’] }) export class AppComponent implements OnInit { constructor( private metaTagService: Meta ) { } ngOnInit() { this.metaTagService.addTags([ { name: ‘keywords’, content: ‘Angular SEO, Angular Universal’ }, { name: ‘robots’, content: ‘index, follow’ }, { name: ‘author’, content: ‘Ronak Patel’ }, { name: ‘viewport’, content: ‘width=device-width, initial-scale=1’ }, { name: ‘date’, content: ‘2021-05-17′, scheme: ‘YYYY-MM-DD’ }, { charset: ‘UTF-8’ } ]); } } |
SEO Title and Meta Description
Title, Meta can be imported from @angular/platform-browser . Add the following code to app/components/add-car/add-car components.ts file
Import { Title, Meta } from ‘@angular/platform-browser;
| @Component({ selector: ‘app-add-car’, templateUrl: ‘-/add-car.component.htmI’, styleUrls: [‘ ./add-car.component.css’] }) export class AddCarComponent implements OnInit { title = ‘Add Car – Angular Universal Car App’; constructor( private titleService: Title, private metaTagService: Meta ) { } ngOnInit() { this.titleService.setTitle(this.title); this.metaTagService.updateTag( {name: “description*, content: “Add car template’ ) ); } } |
Conclusion
Angular SEO can be daunting as the framework is designed to deliver performant apps, not easily visible applications. By implementing the above mentioned optimization methods, we can manipulate an Angular SPA to rank higher in the SERP. Manoeuvring through the framework and its rigid structure is not easy, but it isn’t impossible. Always remember to update your framework to the latest version and optimize your code accordingly.
The post Boost Your SEO with Angular Universal: The Ultimate Guide appeared first on NINTRIVA.
