Index Your Single Page App for SEO
After few days without any news I come back with many ideas of article on different subjects. First of them how to let google and other search engines visit your application when this one is develop with some frameworks like angular, backbone, ember… Those kind of frameworks are really helpful to significantly improve the user experience but horrible when you want to index your pages for seo.
First we have to know how search engines works… To be simple they will just download the page associated to one url and after they will parse this page to detect you text, your links etc… So in our case, this page will return all the time the same content. Try to execute the curl command on your website and you will understand what google index.
There is different way to try to improve a bit this like using pushState or use your url with !# instead of # but those solutions are not really perfect.
And now thanks to technologies like phantomjs you can crawl this kind of application (and test it also ;)) and one solution is to use this technology to navigate in your application then when the page is fully loaded save it as static page like that when the search engine will ask for this page you will render the page with all the content already loaded. This is the perfect way but it’s a bit complicated to do it and it take long time and as a developer we should be lazy so after some research I found prerender.io.
This service will help you in 3 steps:
- Submitting your url to create the html version of your fully loaded page.
- Link this page to your application like that search engines will have access on it.
- Cache those pages to ensure quick delivery.
Only one problem left, the time to recreate your pages… You can select in there pricing how often you want to refresh all your pages but because they are cool they even let you recreate one page using the api so like that you can refresh your cache every weeks per example and when you need (because someone post something in your application) you can just call the api and you will have your page in cache.
There is many other services to do that but this one is pretty cool because there goal is really to simplify your work and not only to get money from you because first there is a free plan (like others similar services) and also because you can access to there source code and develop your own prerender engine and they even say you can refresh your cache from the api when you want so you don’t need to buy the most expensive plan but of course you will have to develop a bit more so after that you are really free to decide what you want.
Note: This post is about SEO but also for social networks when you share one link, social networks will not be able to read data added using ajax like metadata of your content (ex: Opengraph with Facebook or Pinterest or Twitter cards)