With every year passing, we often hear search critics and enthusiast predicting the death of SEO. However, each time they are proven wrong. Many have also predicted that voice search is the future. With the advent of smart speakers, we are already seeing YoY growth with respect to Voice search. As per the stats from ComScore, it is believed that 50% of searches will be voice by 2020.
The primary strength of AngularJS lies in its ability to generate single page applications (SPAs).
As opposed to the traditional way of loading websites, SPAs create a more seamless navigation experience. They ensure that the pages being loaded are responsive, efficient, and easily accessible. More so, SPAs also provide a well-crafted template for the developers to test, optimize, and customize their websites. In layman terms, SPAs are just one single page as it loads the entire site when a user first lands on a page. Instead of loading a new page each time, the site will dynamically update a single HTML page as the user interacts with the site.
There is one thing which hinders the effective use of this framework, it is the incompatibility between AngularJS and SEO. The site activity of AngularJS based pages is tough to track because they remain hidden from both, the visitors and the web crawlers. Most crawlers tend to rely on CSS/HTML data to interpret a website’s content. If that HTML content is veiled under different web scripts, crawlers have nothing to index to and release in the search results.
Here are a few best practices which will enable you to perform SEO for AngularJS:
The first step towards rectifying the Angular JS and SEO issue is to prepare a detailed list of all the pages on your website. Even though this process sounds tedious, it is a necessity. Having a list of pages will provide you with a ready reference to consult while your site is getting indexed. Moreover, an all-inclusive list also helps in predicting every problem that might arise when it encounters an SPA.
Prerender is the best way to forge an inextricable link between Angular JS and SEO. It first renders your website on to a virtual browser and then serves the HTML content directly to the web crawlers. This enables the user’s SPA experience to be quick and dynamic. More so, even the crawlers can easily find the indexable content and display it organically in the search results! For smaller sites i.e. up to 250 pages, the Prerender service is available for free. However, the larger sites are required to pay a nominal fee per month for its usage.
This can get tricky but you may have to discuss this with the developer and tell them to configure your web server to serve HTML-page for Google Bots. You need to create static HTML snapshots, especially for search engines. There are several other ways of doing this in AngularJS.
Configure Google search console in order to use a feature which will let you see your site just as the Google-bot saw it during a crawl. This feature is called ‘Fetch as Google’. Generally, it provides two options. If you merely ‘Fetch’, it will return an HTTP response which contains a complete source code of the page. But if you ‘Fetch and render’, along with the usual HTTP response, you will also receive a screenshot of the page as a visitor would see it. If your site has still not been indexed, you can simply use the ‘Request indexing’ tab to have Google list it in the search results.
As an SEO consultant one needs to explain to the developers that pages rendered to the user and google bots should be same. Often when rendering you would witness that a bot sees a blank page and a user see a separate version of the site. Need to ensure both user and bot are able to see the exact same version of the page.
Browseo – Use an online tool called Browseo and simulate how Google bot would render your page.
Another biggest challenge with SPA is to correctly track pageviews data in Google Analytics. Here, instead of using a traditional Google Analytics tracking code, you’ll need to install Analytics using an alternative method as explained in the Angular JS documentation by Google.
Another method that works is to use a plugin called Angulartics. This will replace standard page view events with virtual pageview tracking.
SPAs dynamically load HTML content, these virtual pageviews are recorded based on user interactions with the website, which tracks the same user behaviour similar to traditional Analytics. There are other methods using Google Tag Manager “State Change” event triggers. An interesting implementation guide has been explained at Lunametrics(Now Bounteous) on best practices for implementing Google Tag manager and Google analytics for AngularJS websites
Use a search engine (Google, for instance) to check for the latest version of your web page. When the search results are displayed, select ‘cache’, which is usually placed at the end of the URL. This will show you what the Google-bot found when it last crawled through your page. Search engine index can be used as a tool for review after the initial linking has been completed. Install Google Analytics to make this process easier.
Performing SEO on Angular JS framework based websites is a tricky task which can be successfully accomplished with a little bit of skill and innovation. The next journey would be to understand working concepts of AngularJS to point out specific SEO inputs to the developers. Each day has been a learning curve while doing SEO for an AngularJS website and there are still many uncharted territories to tread while working with the standalone web application.