Do you consider SEO in your AngularJS application?
25/03/2017 5:05 AM by
Search Engine Optimisation (SEO) with a Single Page Application (SPA) needs consideration like any other Framework to ensure it is SEO friendly. Becuase AngularJS manages your routing and URLs it is important to be aware of the differences in making an AngularJS SPA SEO friendly.
If you ignore your SEO in an Angular SPA you may not have your pages indexed by Google and lose your ranking with SEO. If your pages are not being rendered to Googles bots when they crawl your site, Google can not see your pages and it is like they do not exist.
The only way to be sure your Angular SPA will be crawled and indexed properly by Google Bots is to intercept all their requests and serve them HTML you pre-render on the server.
It is not enough to just use hashes in your URLs (e.g., www.example.com/index.html#mystate, where #mystate is the hash fragment) or hope Google can crawl and Angular application correctly. You can read more here Guide to AJAX crawlin g for webmasters and developers
. There are several libraries to help pre-render your code available on the internet.
- Figure: How to configure your site to pre-render HTML for Google bots.
Besides pre-rendering HTML to get your AngularJS Single Page Application (SPA) SEO friendly you can apply the following practices:
Enable html5Mode for AngularJS outing
This will remove the hashtagged-URLs by default for pretty URLS, using the pushState feature that newer browsers have, which still falls back to the hashbang method if pushState isn't available. To enable html5Mode in AngularJs read more scotch.io
Creating a sitemap
Web crawlers usually discover pages from links within the site and from other sites. Sitemaps supplement this data to allow crawlers that support Sitemaps to pick up all URLs in the Sitemap and learn about those URLs using the associated metadata. Using the Sitemap protocol does not guarantee that web pages are included in search engines, but provides hints for web crawlers to do a better job of crawling your site. More information at sitemap.org
Enriching your app with meta information
This step ensures your search results are represented in a meaningful and predictable way. Dynamically changing the meta tags content in the head section of the page can also help google find and represent you in their search results.
For more information and a demo see this blog: weluse.de
You can inspect what HTML Google renders with Webmaster Tools, it is also an excellent source of information.
- Here’s what you need to know to ensure your website is crawled correctly by Google in general regardless of if your application is a SPA: Introduction to SEO and Google Tools – Craig Bailey [FireBootCamp]
Do you feel this rule needs an update?