SEO tricks to boost Rails application’s Google ranking

 

You might be able to develop the greatest Ruby on Rails web application in the world… But is anyone going to find it?

The time is changing. Now your clients not only want well coded websites but they also need higher Google ranking for their website. In this blog, I intend to address how SEO can be done in RoR framework. Below are few techniques that can be used to improve website ranking.

Enable Server-side Compression

Website loading time plays an important role in Google Algorithm. The faster a web page loads, the better ranking it has on Google. Server-side compression is a simple way to speed up your website loading.

To implement this we need to add the following lines in nginx configuration file. Inside http block of your configuration file add the below lines.

I have used the most basic set of options for enabling Server-side compression. To see the full list of options you can visit this link. Lets see each option one by one.

  • gzip on: It enables or disables compression of responses.
  • gzip_types: It enables compression for specified file types. Responses with the “text/html” type are always compressed. To specify all file types you can use “*”.
  • gzip_min_length: It sets the minimum length of a response that will be compressed. The default is 20 bytes.

Enable browser caching

The first time someone comes to your website, they have to download the HTML document, stylesheets, javascript files and images before being able to use your page. This could take a lot of time. We can reduce the time taken by enabling caching at browser side.

We can implement this by setting Expires Header for resource requested from server side. Expires Header tells the browser whether a resource on a website needs to be requested from the server or if it can be fetched from the browser’s cache.

Add the below lines in your nginx configuration file to enable Expires Header for your response.

Minimize HTTP Requests

According to Yahoo, 80% of a Web page’s load time is spent downloading the different resources of the page: images, stylesheets, scripts etc. An HTTP request is made for each one of these elements, so the more page components, the longer it takes for the page to render.

According to KISSmetrics:

47% of consumers expect a webpage to load in two seconds or less, and 40% abandon a website that takes more than three seconds to load.

There are various methods present for reducing the number of HTTP requests. Some of them are:

  • Move JavaScript files out of the head section in HTML page.
  • Use CSS sprites

Now we will walk through on how to use CSS sprites to reduce number of external requests:

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests.

You can create sprite image using any online sprite generation tool like this. After creating sprite image we can use the CSS background-size and background-position property to use specific part of images.

Then in your html file you can use images as given below. The data-uri for image will be provided by the sprite generation tool.

In the above example I had created a CSS Sprite for my 3 images on a page (Logo, Car, Bike). Then using the CSS properties we have used part of images to display on our page.

Hide Server Signature

A server signature is the public identity of your web server and contains sensitive information that could be used to exploit any known vulnerability.

You can check if your server signature is ON by making a curl request as shown below:

If your output headers show server version then you need to add the below options inside the http block of your nginx configuration file to hide it.

Adding title and meta tags to your application

You can set default meta tags in application.html file of your application present inside app/views/layouts/ directory.

Inside head tag of your html file add the below lines:

The above code will set the default title and meta tags for your all pages for your application. To render page specific title and meta tags use the method given below:

Then in your car.html page you can replace the default title and meta tags like this:

What am I missing here? Let me know in the comments and I’ll add it in! Thanks for reading.

1 thought on “SEO tricks to boost Rails application’s Google ranking”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s