SEO for JavaScript SPA frameworks

By
StartxLabs

Date
28-11-17

"
SEO for JavaScript SPA frameworks"

As search engines don’t recognise JS and do not run JS while crawling websites. So spa frameworks like ReactJS or Angular lacks in building SEO focused apps/websites. We are trying here to give a solution using Phantom.js which is a headless browser kit.

Note:We will not cover Phantoms.js basics. We hope that you have some prior info about phantomjs. You can refer to there official PhantomJS site

For the Project we will be using Webpack as a package bundler. You can also use Gulp for that, it's just a personal choice. Express js Server , Phantom for Pre-rendering the Data and Reactjs irrespective of React you can use any JS frameworks like Angular or ViewJS library like Vue.js and for routing React Router. For specific versions please view package.json file.

Meta tags exist at the head of HTML page.These are only visible to search engines.meta stands for metadata i.e, data about the data of your page. These tags helps your website to get noticed to search engine crawlers and helps website to appear in search results .

1. Required Meta Tags : These are some of the meta tags which are usually necessary/ basic to use.

2. Robots.txt: Robot is a text file which gives instructions to crawlers to index their website including their web pages.

Robot visits website URL and find

User-agent: *

Disallow: /

USER AGENT:* It means robots are allowed to visit all the pages of the site.

DISALLOW:/ Means Robots are restricted to index the particular directory.

3. Sitemaps

A sitemap is an XML file which allows Google webmaster to fetch the data to inform search engines that website URL is available for crawling.

4. Humans.txt

It is a text file which contains all information regarding people who all have taken good contributing initiatives to build the website.

5. Google Search Console

Google Search Console is a free service offered by Google that helps you monitor and maintain your site's presence in Google Search results.By using GSC, you able to see how Google view your site and optimize its performance in the search result. You can read the tutorial on Google Search here: Google search console and for more insightful readings you can also visit this blog.

6. Google Analytics: Google Analytics is a freemium web analytics service offered by Google that tracks and reports website traffic. Well, this is also not in our scope of this tutorial. You can learn how to turn insights into action here.

7. Schema.org

So, well these are some terminologies which are required to get started with any SEO focused projects.

Maybe you have heard of Prerender.io. Some of the Firms use it for SEO and for apps performance. Prerender also uses Phantomjs for the code to be prerendered.What I mean by using the word prerender; all it has to with Client Side Rendering and Server Side Rendering.

Let’s take a glance what is the Main Difference between Client Side Rendering and Server Side Rendering.

Now, that you have understood the main reason why do have to use Phantomjs for Javascript Frameworks. Given Below is the sample express route which takes three params req, res, next.

1. Request contains all the data, from where the request is coming from.

So, this is how you can implement SEO for Single Page Application (SPA) in javascript. Hope you like this tutorial and we would like to hear from you if you have any queries or you have implemented the other way around.