Overcoming Angular SEO Issues Associated with AngularJS Framework
What is AngularJS?
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.
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.
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 Tweet
An 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?
- AngularJS 1
- AngularJS 2
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
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.
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.
About Jim Bader
Jim brings over 15 years of search engine optimization and Ecommerce experience to the team as our Senior Director of SEO. He has held a variety of SEO leadership positions, with agencies and managing successful in-house teams for companies including CVS Health and Choice Hotels International.
Best Practices for Creating Goals in Google Analytics
Apr 24, 2018
The Weekly Measure: SEO Questions, Email Mantras & We Won a Ton of Awards!
Apr 20, 2018
Content Marketing Best Practices You Should Be Following in 2018
Apr 19, 2018
Vertical Measures Honored During 2018 AZIMA TIM Awards
Apr 17, 2018