How to Implement SEO While Working With Angular

By Jean Pierre Alejandria – Angular Developer at Santex

Angular is one of the best frameworks that you can use for building mobile and desktop web applications. Unlike other libraries like React which still require external projects to fill in the gaps, Angular is a full-fledged, standalone framework. It provides tools for every aspect of building a large application; including view manipulation, server-side connection, and routing.

However, Angular uses client-side rendering when building single page applications. This can create some difficulties when you want to implement SEO (search engine optimization) for your application. The web crawlers of search engines cannot see either the structure or the content of the application. This means the search engine won’t index the application correctly and it won’t rank highly in the Search Engine Results Page(SERP).

Why SEO is important

SEO is a key element in a sustainable online marketing strategy. This Fort Collins internet marketing firm says that it brings organic traffic to your web application without you having to pay for every additional click. High organic ranking is a competitive advantage that gives your web application both visibility and credibility. This is especially true for B2C businesses where the end user usually enters a search query looking for the product or service.

What Google has to say

On the one hand, Google says that its crawlers can index script-driven sites, reading them like modern browsers. On the other hand, Google’s Webmaster Central Blog has some statements that contradict this assertion. For instance:

“Sometimes things don’t go perfectly during rendering, which may negatively impact search results for your site.”

“Sometimes the JavaScript may be too complex or arcane for us to execute, in which case we can’t render the page fully and accurately.”

Another thing that needs to be considered is that Google isn’t the only search engine. Other search engines like Bing and Yahoo also attract significant search queries and they should also be kept in mind when figuring out an SEO strategy while using Angular.

Angular’s default content

This is how crawlers of search engines see the index file of a common Angular application.

In the image above, the element can be seen in place of the content. Thanks to Angular’s dynamism, it stays in charge of inserting the content of the application. This means the actual content cannot be perceived by the crawler.

Implementing server-side rendering with Angular Universal

To overcome this lack of visibility of the content, we have to find the easiest way to implement server-side rendering. This will ensure that the complete HTML structure and content is available to web crawlers when JavaScript code is pre-executed on the server.

Angular Universal is a tool that can generate static application pages on the server through server-side rendering and transfer this content from the server to the browser using the TransferState API. Using Angular Universal keeps the application layer intact while adding a second element in the rendering layer. This generates the DOM as a string that is served as a response to the browser’s request.

Angular Universal generates the server.ts file for us. This file represents a Node server. This results in an Isomorphic application which is an application that renders on the server at the entry point (server.ts) and navigates in the client for subsequent interactions. Here are the major benefits of using server-side rendering with Angular:

• Fast pre-rendered landing, thanks to server-side rendering
• Dynamic navigation, thanks to execution in the client

Dynamic navigation is achieved with the process of rehydration. At the time that the content from the server is presented, the client content is loaded in the background to replace the server’s content at a later stage.

Adding Angular Universal with @ngtoolkit/universal

Developers can prepare an application to work with Angular Universal by using the Angular CLI and tuning some configurations. However, there is a much easier approach available; use the package @ng-toolkit/universal.

First, we add the package using the Angular CLI :

$ ng add @ng-toolkit/universal
Next, we build our application :
$ npm run build:prod
And then we run it :
$ npm run server
This time, when we access our application, we will be able to view the complete content of the HTML.

As a result, web crawlers are now able to view the content of the application and index it correctly. This means your application will now be able to rank higher on Google and other search engines.
Conclusion
Angular may not be the best choice if you want to build a static application that is SEO-friendly. However, as seen in this article, Angular does offer a suitable tool to implement server-side rendering. This allows your application to achieve fast landing and be SEO-friendly.
Moreover, you may have already built your application in Angular to leverage its capacitance and dynamism. But effective SEO has now become a priority. In such a scenario also, Angular Universal provides the perfect solution.