A typical site contains three basic elements. HTML which creates content, CSS used to make layout, design, and visual effects and JavaScript, which is used to create a personalized user-interactive experience on your website. However, historical Googlebot hasn’t been able to index JavaScript pages. A few years ago, a scaled-up version of JS, Angular was launched and ever since people have been able to perform Angular SEO. In this guide, you will learn how to make your Angular Site Indexable.
What is AngularJS?
AngularJS is a client-side JavaScript framework which is used to develop dynamic website interaction. It was originally started as a project in Google, but now it is one of the most popular open-source JS frameworks. Angular JS can change basic static HTML to dynamic HTML. It does so by adding built-in attitudes and components. Many coders use it to create custom attributes using simple JavaScript on their website. Here are some well-known websites which are built using Angular JS – Paypal, Netflix and Spideygames.
Why is AngularJS So Great?
Angular is a Google created JS where each of its tools was created in an interconnected way. It is better than anyone else because:
- Angular acts as a mediator and manages the MVC component on its own. Developers don’t need to write codes to connect components.
- Data models in it are plain old JS objects (POJO) and don’t require unnecessary setter and getter function. This makes your coder cleaner and much easier to edit them.
- Angular allows user of Directives(<accordion></accordion>, <grid></grid>, <lightbox></lightbox>, etc.) in HTML.
- Developers can code DOM manipulation insider directive and not in “view”.
All these features make code simpler and lesser, and your website is dynamic and user-interactive.
What are SEO Issues with AngularJS Framework?
As we have seen, Angular website give a better user experience and easier to develop. Hence Angular SEO is required to index the site on search engines. However, it has some problem:
- Indexing:- Search engine finding it difficult to index any content that require a click to load. This means any content on your website, which is accessible by click such as expanding container will not be index.
- Link Equity:- Although Google has pioneered finding links in AngularJS however, they are unable to pass equity (PageRank) through links.
- Redirection – Google tends to pass significantly more equity in one Angular link than another. This vagueness affects the redirect link you use.
- SEO – Angular is generally a part of Single Page Application (SPA). SPA allows content to be updated on your page without making any page request back to the server. These requests are populated using Asynchronous JavaScript, and XML (AJAX) calls. Hence, the URL visible in the browser doesn’t represent all the content on screen. This is more of SEO problem as search engines want to index content that appears regularly on the page.
Hence Angular and SEO doesn’t go hand in hand!
What is Client-Side Rendering?
This is a recent rendering method which relies on JS being executed on the client-side (browser) via a JS framework like Angular. In it, the client initially requests a source code which has little indexable HTML. Then a second request is made for aa .js file that contains the entire HTML in JavaScript as strings. This delivers a more efficient and incredible fast boot using Angular. For this reason, you need to develop your website as Angular SEO friendly so have substantial SEO and website user interaction.
What Google Say about Crawling an Angular Website?
Google believes that it has the ability to crawl an Angular Website, and it has done so in the past. They strictly warn people to create an Angular universal SEO website; otherwise, it would it difficult to index the pages.
Recently, at Google I/O it was announced that web crawler would be using that can render over 1000 features. This makes Angular and SEO a much better fit.
How to Overcome SEO issues with AngularJS?
Now that we have seen what Angular is and what makes it great and what are the problem you face. It’s time we guide you on how you can overcome Angular SEO issues:
1. Server-Side Rendering:- Server-Side Rendering which is also known as SSR, is a popular technique that has the ability to render the java application on the server and then sending a fully rendered page to the client. We suggest you use Angular2 as it supports server-side rendering. This will allow you to turn on prerendering to create HTML snapshots for SEO easily.
Server-Side Pros:-
1. Make the content crawlable
2. Improve the page loading speed
3. Good for SEO
2. Prerendering:- The key to Angular SEO is prerendering i.e., creating an HTML code to be served in the source code. This will reduce the reliance on Search engine like Google to be able to render your Angular webpages properly. This will solve the major issue of search engines not being able to index content that is loaded by a click. Hence the Angular JS webpage could fully index content on your website. This solution works for not only Google but other search engines as well.
In simple terms, your website will render in a virtual browser and act as a static HTML content to web crawlers. From an SEO viewpoint, as user experience fast and dynamic website which have indexable content. Hence Pre-rendering is important for both Angular and SEO. You can achieve pre-rendering using Prerender tool.
3. Fetch as Google: This Google feature allows you to enter a URL from your website and then fetch it as Googlebot would do while crawling. Another feature “Fetch” will return an HTTP response from your page and you can see the page source code as Google bot sees it. While “Fetch and Render”, will return the HTTP response and a screenshot of the page as a site visitor would see it.
This is an important step as even with Prerender Angular site, Google can find it difficult to display your website. Using these features, you can preview how your site appears to search engines and visitor. You can make changes in their response before submitting to web crawlers.
4. URL Structure: Another aspect of making an Angular SEO friendly website is making sure that all your pages have a user and search engine friendly URL. This means that you should avoid using “#” in your URLs. This help in creating SEO-friendly URLs, you can create them by leveraging the $routeProvider and $locationProvider to set your routing to HTML5 mode.
5. XML Sitemaps: After creating a uniform URL structure, you need to generate XML sitemaps. This is a long and tedious process as creating a comprehensive list of all the pages that include your canonical URLs can take hours and even days. However, it is worth the work as it gives you’re a reference to all your work which you can later refer to in case of Angular and SEO issues. Once completed, you can submit in Google Search Console. This will make it easy for Google to find and crawl all of your URLs.
Conclusion
This is a very lengthy process, and you need to be very careful in working on each step. As even a single wrong step can lead your page to be unindexed. However, once all your pages are index. You will have a website which has a strong SEO and personalized user interaction. This is very rare to find in most sectors.
