Modern SEO Techniques
Recently, Blibli.com pages are moving to Client-side Rendering (CSR). It means we will fetch data asynchronously using AJAX call and the browser will render it based on response data from server.
The opposite of the above method is the conventional way of Server-side Rendering (SSR). This method tells the web server to fetch data from data servers then write down all the html codes, letter by letter to the output stream and can be read plain-ly by the user (view html source).
SSR can be said as the safest method there is to make sure a web crawler (google, bing, etc) can read the page correctly and parse the text as-is from our web server.
However, as time went by, we had so many interactions in the client-side, with JS, and usually data are loaded without requiring page refresh/reload. This way of interaction is comfortable for user, yet we are worried that crawlers won’t spare any resource to execute our client script and wait for the result from server, not to mention rendering it in their browser.
Article from google webmaster [1] and independent test from [2] show that we can now be sure that CSR will get indexed well as long as we follow rules from the crawler (in this case Google).
Here are what we learned from our journey migrating to CSR.
[TL;DR]
* Support Chrome ≤41
* Clean URL
* Update your Meta in the client
* Support Social Media Sharing
* Responsive Design
Support Chrome ≤41
Make sure your page can run well on chrome 41. Try to render the page in webmaster tool.
You can transpile your code with babel to ES2015, or target it to chrome version 41.
Clean URL
Do not use “#” or “#!” in the URL.
In the past, before the arrival of history API [4] in the browser, “#!” was the absolute solution for Single Page Application (SPA). SPA page will need no reload/refresh of the page to change the content. There were no option in the old browser to do that other than adding “#” in the URL.
Now, if you open the code:
They are exactly the same code. Client script will read the URL and determine what data should be fetched from server.
Update your Meta in the client
We updated our meta (keywords, title, descriptions) using Vue-Meta plugin [3]. They are easy to use because we only need to add hook metaInfo() .
We also added JSON+LD support that will enrich content crawling:
Support Social Media Sharing
Social media crawler, unfortunately has no client side rendering support, hence we need to prescribe a different approach. We have to return fully rendered site to them. But, it’s not a full blown page, only tags used by the crawler. For example, [5] will have different output when accessed with TwitterBot user agent:
Responsive Design
Mobile, mobile and mobile are the trends nowadays. So we start to develop things to be well displayed in mobile first, then stretch it for desktop.
In the past, we went for Adaptive design because we thought it will reduce data load in mobile users. However, that’s not what we found. Codes’ footprint are basically not that different between desktop and mobile, even though we did double the work and double the code files to implement on both.
Therefore, we moved to responsive design to reduce our workload. We also use feature of code-splitting from webpack that can load codes asynchronously, so we can pick which UI component to load based on current environment (mobile/desktop).
Google loves “mobile-friendly” pages. So, instead of making two unrelated codes, we better optimize for mobile first then desktop will follow.
You can search about google’s preference of mobile-friendly page, but here are some articles discussing it [8][9]. I quote:
What Google Says…
“Starting April 21 2015, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”
You can read more here [6] on the difference of Responsive vs Adaptive.
Regarding webpack code splitting will be discussed in future story, but you can catch up here [7].
We Are Hiring for Blibli.com Bandung and Jakarta
Interested on tweaking web and worked with the cutting edge technology? Come and join us Blibli.com Frontend Engineers. We are also opening office in Bandung.
Submit your CV here https://www.blibli.com/page/karir/
You can contact me directly Hidayat Febiansyah through email hidayat.febiansyah@gdn-commerce.com
Conclusions
To summarize, we are embracing new era of SEO where CSR is fully supported (at least by Google).
We are very welcome for questions and suggestions for Blibli.com page in the future.
References
[1] https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html, September 2018
[2] https://centrical.com/test/google-json-ld-and-javascript-crawling-and-indexing-test.html , September 2018
[3] https://github.com/declandewet/vue-meta, September 2018
[4] https://caniuse.com/#feat=history , September 2018
[5] https://www.blibli.com/p/gigabyte-gv-n108tgaming-oc-11gd-geforce-gtx-1080-ti-gaming-graphic-card-11-gb-gddr5x/ps--IDH-16956-01091 , September 2018
[6] https://medium.com/r/?url=https%3A%2F%2Fcss-tricks.com%2Fthe-difference-between-responsive-and-adaptive-design%2F , September 2018
[7] https://medium.com/js-dojo/3-code-splitting-patterns-for-vuejs-and-webpack-b8fff1ea0ba4 , September 2018
[8] https://www.businessnewsdaily.com/7808-google-search-ranking-mobile.html , September 2018
[9] https://creativewebideas.co.nz/google-loves-mobile-responsive-websites/, September 2018
