SEO for JavaScript SPA frameworks

By StartxLabs
Date 28-11-17
SEO for JavaScript SPA frameworks
" 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.

 

You can also clone the Project from the repo : React SEO Sample


 

Before we began setting up the project, let’s go through some key points or terminologies to be known for any SEO focused Project’s

1.  Meta Tags

    1. Required Meta Tags

    2. Social Meta Tags

    3. Progressive Web Apps Meta tags  

    4. Robots.txt

    5. Sitemaps

    6. Humans.txt

    7. Google Search Console

    8. Google Analytics

    9. Schema.org

   10. Content focused on Keywords (Google Keywords / Google Tags Manager )


 

1. Meta Tags :

 

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.

          1. <title>{{pageTitle}}</title>

          2. <meta charset="utf-8">

          3. <meta name="description" content="{{description}}">

          4. <meta name="keywords" content="{{keywords}}">

          5. <link rel="author" href="https://plus.google.com/{{googlePlus}}" />

          6. <link rel="canonical" href="{{pageUrl}}" />

 

   2. Social Meta Tags : Social Meta tags are used to associate you Social Profiles to the Websites. For further reference you can visit  this link  : Open Graph

 

  3. Progressive Web Apps Meta Tags :  These tags are used for comprehensive details about your app. Like theme-color, icons fors  various devices ranging from various sizes, creating manifest.json files.

 

You can look up this Repo.It has all the tags jotted down in one place.

Meta manifest


 

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.

Now, Let’s begin setting up our environment. You can also clone pre-built sample project: React SEO sample

Project Arch:

 

 

How does it Work :

 

 Components:

    1. AppRoutes.js : The Main component of Router is defined.

    2. Detail.js : Subcomponent of Home.

    3. Home.js : Main component open on ’/’.

    4. Layout.js : Component contains all other components.

    5. NotFoundPage : Component renders when 404 error.

 

Static:

    1. css : Contains css file

    2. js : Contains bundles.js file

    3. index.html : Html file contain main div. (Input File.)

 

Views:

    1. app-client.js : React render component.

    2. routes.js : Routing component.

    3. index.js : Express and Phantom server.

 

How does it work ?

 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.

    2. Response contains the Data and Routes which is to be rendered.

    3. next()passes control to the next matching route.

app.get('/*', function (req, res, next) {



var agent = req.useragent.source;   //From where the request is coming from. (Browser or Bot)

//checking bot here. If it is a bot then render via phantom.



if ((lodash.includes(agent, 'googlefeedfetcher')||(lodash.includes(agent, 'Soso')||(lodash.includes(agent, 'Baidu')||(lodash.includes(agent, 'Yandex')||(lodash.includes(agent, 'yandexbot')||(lodash.includes(agent, 'msnbot')||(lodash.includes(agent, 'bingbot')||(lodash.includes(agent, 'googleplusshare')||(lodash.includes(agent, 'exabot')||(lodash.includes(agent, 'Bing')||(lodash.includes(agent, 'Google') || lodash.includes(agent, 'facebookexternalhit') || lodash.includes(agent, 'Facebot')) && req.useragent.isPhantomJS === false) {

//sent request to render via phantom

return renderHtmlPhantom(req, res, next);

}

else {

//sent request to render at client browser. This Request is from browser.

return next();

}



});

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. 

You can always drop a message here

Looking for an App or website development agency . Get a free quote by contacting us today!

subscribe to startxlabs

startxlabs