#madewithangular

[web-mobile-applications-blog]

Overcoming Angular SEO Issues Associated with AngularJS Framework

AngularJS is a javascript-based web application framework that provides dynamic functionality to extend HTML and enhance user-experience of a website by creating “single page applications,” or SPAs. Although this platform can be beneficial for user interaction and increased conversion rates, it can be challenging for a search engine optimization strategy and might significantly impact organic search traffic.

What is AngularJS?

AngularJS is like other javascript-based web platforms, such as Ember and Backbone, because it loads data asynchronously to the browser and executes primarily on the client-side as the user interacts with elements of the web page.

This provides increased flexibility with web presentation, especially when compared to using static HTML or dynamic template driven pages. SPAs serve data to the browser – where much of the processing happens – without the need to constantly reload the page after every user action.

As with most javascript programming, the major challenge comes down to the ability to render indexable content and internal navigation or links into the HTML code of the page, so search bots can crawl and index it.

What makes this even more confusing, is that AngularJS was created by Google, so the simple association with the search giant fuels the perception that it’s SEO friendly. However, it can completely hide your page content from the search engines and tank your organic search traffic.

Who is using it?

The first version of Angular was officially released in 2012, but has gained quite a bit of momentum over the last year, especially with enterprise-level clients. According to BuiltWith, 942 of the top 10,000 sites (ranked by traffic from Quantcast) are now using Angular. This is up dramatically from 731 sites only a year ago.

Examples of large websites that are now using Angular, in some fashion, include:

Walmart Grocery

The Guardian

CVS Pharmacy

Weather.com

VEVO

Land’s End

A larger list can be found at MadeWithAngular.

Why is AngularJS so great?

The Angular platform is great for creating dynamic web pages that users can interact with in real time. SPAs are very effective at decreasing bounce rate and keeping visitors on the site longer, which can increase conversion. AngularJS is very useful in situations where there are a variety of data, images, or other elements that need to change quickly within the web page.

Optimizing how users interact with your products can lead to more conversions and increased revenue.CLICK TO TWEETAn example of where this could impact user experience significantly would be a clothing retail website. This type of site sells a variety of products that come in many different options. They sell shirts, pants, shoes and other products that come in different colors, sizes, patterns, and other options that need a visual presentation on the website to sell effectively. It’s important to retail clothing consumers want to see what they are buying before they complete the purchase.

Using static HTML or standard template-driven dynamic sites would require serving a different webpage or reloading the page content to render each option. With AngularJS, all of these options can be preloaded, using ng-show and ng-hide, to allow the customer the ability to change the visual representation just by hovering the mouse over each option. The customer could hover over the desired color and style in real time to visualize the actual product to aid them in making a decision.

For this reason, it’s easy to see how increasing the speed in which the user can interact with products on the website could lead to much higher conversion rates and increased revenue.

What is the problem with AngularJS?

As mentioned, the major challenge with any javascript programming always comes back to indexable content. Search engines have historically been challenged by sites that serve content via javascript. Google has become much more proficient with their ability to crawl and index javascript, and have even deprecated their previous recommendation to make AJAX crawlable. However, they are still not always reliable. The other search engines are even further behind with this ability.

Google still has trouble indexing certain aspects of javascript, especially Angular.CLICK TO TWEETBartosz Góralewiczto conducted an interesting study that tested Google’s capabilities with indexing various javascript based platforms. They created webpages using several popular frameworks:

AngularJS 1

AngularJS 2

React

Ember

jQuery

Vue

Javascript

They concluded that although Google has made significant progress, they still have challenges with indexing certain aspects of javascript, especially Angular.

How bad can it be?

A well-known healthcare company released Angular on the e-commerce section of their website in 2015 for a significant number of product pages. The goal was to roll the many similar pages, that varied only in color or size, into a single product page using Angular to show the various product options. This is the cached version showing what was actually rendered in the HTML on each of their product pages when Google indexed the pages.

The result was a +40% drop in organic search traffic from the previous year. For a site this size, it can equate to hundreds of thousands of dollars or more in lost revenue.

How to overcome SEO issues with AngularJS

Search engines still need to see the content and elements of the page in the source code to guarantee that it will be indexed correctly. One current solution is to consider using a pre-rendering platform, such as Prerender.io. This is middleware that will crawl your web page, execute all javascript files, and host a cached version of your Angular pages on their content delivery network (CDN). When a request is received from a search engine bot it will show them the cached version, while the non-bot visitor will be shown the Angular page.

This may sound like cloaking, but Google has confirmed that it is not. It has also been stated by Google that as long as your intent is to improve user experience, and the content that’s available to the visitors is the same as what’s presented to Googlebot, you will not be penalized.

Never leave the indexing of your site in the hands of the search engines.CLICK TO TWEET

Check the rendering of your web pages

Be aware of how your web pages render for search engines. Here are a few tools that can help:

Browseo – This is a great tool that not only renders the elements of the page, but also lists out total word count, internal and external links, and important <head> content such as HTML title, meta description and keywords, Twitter and Facebook tags, and a SERP preview.

Fetch as Google – From search console, you can run any page on your website to see what Google sees.

Search engine index – Check the most recent cached version of a web page by doing a “site:[domain]” query with Google or Bing. In the search results, locate the drop down caret at the end of the URL and click the and select “cache” in Google and “cached page” in Bing. This will show what the bot found with the last crawl of your web page.

Angular v4 – The latest version of Angular has been released, and it looks very promising for technical search engine optimization purposes. This version includes Angular Universal, which provides the functionality to generate all of the HTML of a page at a given point and can be deployed to static HTML or a CDN.

Final thoughts…

Google continues to advance with the ability to crawl and index javascript, and the fact that they are “all in” with Angular shows that they will overcome it at some point. However, they explicitly state “… our rendering engine might not support all of the technologies a page uses.” They recommend adhering to “progressive enhancement” principles, which emphasizes focus on core web page content first, and other layers and features secondarily. This shows that they are not quite there yet.

The most important lesson that we have learned in our years of providing technical SEO services, is to never leave the indexing of your site in the hands of the search engines. Be in control of how your web pages render. We are very confident that with Google 100% committed to Angular it will be a very valuable platform to make websites more user-friendly, just make sure that you don’t sacrifice your valuable organic search traffic while it is still evolving.

Ref:http://www.verticalmeasures.com/search-optimization/overcoming-angular-seo-issues-associated-with-angularjs-framework/