SEO basics for Rails developers

Search engine optimization (SEO) is the process of optimization of a website, which main purpose is to make it more visible among results from search engines (such as Google). There are tons of practices, tricks and tips that can be applied to improve a website in terms of SEO. Lets start with some basics.

It’s all about the phrases

Most people want to improve their position on search engines in terms of specific phrases. For instance, company selling their products would want to position their website for keywords including name and brand of their products. Obviously, the more unusual products, the easier it is to position it. Before starting any work, we have to understand that we do not position the whole website for a specific group of keywords. The best practice, in my opinion, is to create so called “Landing Pages”, which are pages created for a particular topic to position it for a specific search engine.

Add a sitemap

You should also start creating sitemaps, as soon as possible, if you haven’t done that yet. What are sitemaps? As www.sitemaps.org states: “Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling.”. This way Google and other search engines will crawl our websites much faster. They will also reach deep to the pages that might have been skipped otherwise. Although there are plenty of Rails gems (such as: sitemap_generator, rails-sitemap or dynamic_sitemaps) that help developers to generate sitemaps, I strongly recommend to do it yourself. Here is a simple sitemaps controller example:

class SitemapsController < ApplicationController
  SHOW_CACHE_EXPIRATION = 1.hour
  layout :false
  before_filter :init_sitemap

  def index
    @articles = Article.all
  end

  private

  def init_sitemap
    headers['Content-Type'] = 'application/xml'
    shopikon_expires_in SHOW_CACHE_EXPIRATION, public: true
    @sitemap = Sitemap.new
  end
end

And a simple view for such action:

xml.instruct! :xml, version: '1.0'
xml.tag! 'sitemapindex', 'xmlns' =>
"http://www.sitemaps.org/schemas/sitemap/0.9" do

  @articles.each do |article|
    @sitemap.add_link
    xml.tag! 'sitemap' do
      xml.tag! 'loc', path_to_article
    end
  end
end

And that’s it! If you create sitemaps yourself, you have full control over it’s content. It is worth mentioning that Google (or other crawlers) will most likely visit all pages that are linked from pages listed inside sitemap. If you want to avoid it, you can blacklist them using robots.txt or with the following tag included in <head> section: <meta name="robots" content="noindex">.

Making your content discoverable with Landing Pages

Another good idea it to point to LPs (Landing Pages) via some kind of sidebar or internal ads. This way crawlers will crawl it much faster. The purpose of those landing Pages is to lure users and Google to our site. Landing Pages should include some kind of access points/navigation to other sites. So let’s say my website features bicycles, and I want to position it for “The best bicycles” phrase (or keywords “best”, “bicycles”), I have to create a landing page which is about “The best bicycles”. In many cases those landing pages are articles, news, blog posts, product details sites, or any other websites that are covering one topic at a time. The point is, that they should include some unique and valuable content such as a good article covering the subject, and/or some good photos if possible. Search engines, especially Google, are quite good at identifying artificial content or duplicated website content.

The first step is to form a proper URL of our landing page, or to come up with a good pattern for all of our future landing pages. The URL needs to be short and readable. It needs to include our phrase to indicate straight away what the website is about. Let’s say that we agree that our landing pages are articles on our blog. Our URL should be similar to this one:

http://www.amberbit.com/a/best-bicycles or http://www.amberbit.com/a/the-best-bicycles

The “/a/” represents article, so if it’s a blog post is should be “domain/bp/blog-post-title”. If it’s a product details page it should be “domain/p/product-name”. The most important thing is that the part after “/a/” should be unique and it should identify website content. Why “/a/” instead of “/article/” someone might ask? Assuming that Google take care of URL formats, we want to have only meaningful words in it(such as domain and slug - which is representation of our topic). Additional important tip is to replace all special characters, underscores for all the article titles, with the hyphens(“-”). For unknown reasons, Google treats them much better than underscores. Below is a simple Rails routing for such LPs:

get 'a/:slug', slug: /[a-z-]+\w+/i, to: 'articles#show', as: :article

# assuming you are using all generated actions
resources :articles, except: :show

Now that we know what do, we want the next step is how to do it. Let’s start with the meta data of our website. It has to include title tag, which in our example should look like this:

<title>The best bicycles</title>

The next one, is meta tag with description of this specific landing page. It should be a sentence or two about the content of the page. It’s recommended length is something between 150-160 characters, since most search engines truncate it automatically to 160 characters. A good practice is also to end it with a “call to action” - something like “Read more on Amberbit!”.

<meta content="Are you interested in bicycles? Do you like Mountain
biking? Or maybe chillin sunday ride over the park?. Read more on
AmberBit!" name="description">

The important thing about those two HTML tags is that they have to be unique through all of our landing pages. Google Webmaster Tools or other SEO tools such as Raven Tools always points to them while evaluating/crawling website. I’ll try to cover the benefits of using those tools in one of my next articles.

Simplicity is the key to success

Content should be simple without any super complicated JavaScript or CSS stylesheets. The whole website should be as simple as possible. If you want to have sophisticated website with super CSS/JavaScript effects it’s fine. Just don’t bring it to the landing pages. They need to be as light as possible. Best practise it to have a separate set of assets for them, optimised and cut off anything that is not necessary. Landing pages are like a bait for the potential users. It should lure them into your website. Later on user should navigate to other pages which don’t have to be super fast. A really good tools to measure the speed of your website are http://www.webpagetest.org and Google Page Speed. I’ll talk a bit more about it along with Google Webmaster Tools next time. The main purpose of having super fast landing page is to reduce bounce rate as much as possible. What is bounce rate? It’s a percentage of users that visits our website and bounce back (clicked browser back button), instead of staying on it or navigating through it. Search engines are really sensitive about that - especially Google. The main reasons of big bounce rate is slow content. This way user is irritated and leaves our page before he can even see our content. This is especially common with the mobile devices and mobile internet access.

Your content should be served first

Move your JavaScript to the bottom of the document. This way it won’t withhold the browser for rendering the content.

Move your CSS to the top of the document. The first TCP packet of content that your browser is downloading equals to 1460 bytes. If this packet includes everything it need to start rendering the content, it totally will! It should not only include link to your CSS files (since it’s not recommended to use internal CSS styling) but also DNS prefetch tags. What are these? They are simple links with hrefs to all of external domains/services that we use on our website. If you use Amazon S3 or CloudFront for hosting your assets, or just images, add dns-prefetch tag so that the browser could identify it much faster and so that it won’t have to wait for it later on. An example of such tag:

<link rel="dns-prefetch" href="http://cdn.mydomain.com">

If you use Google Analytics you should also add it to dns-prefetch:

<link rel="dns-prefetch" href="http://www.google-analytics.com">

Switch on HTTPS

I suggest to always include full protocol in the links since later on it’s much easier to switch to HTTPS if needed. By the way, you should enable HTTPS protocol for your web site if you want to be higher in the ranking. The good idea is to redirect requests from HTTP to HTTPS with proper status 301. Thankfully, Rails has this functionality built-in .

Final words

So how to optimize your JavaScript/CSS? How to properly use images? Or what is this whole website responsiveness? Are there any other tools that you can use? If you are interested in it or anything else let me know using comments below this article. I’ll try to talk about the subject more next time, so stay tuned.

Post by Paweł Sobolewski

Paweł works at AmberBit since spring of 2005. He works with range of technologies spanning from Ruby and JavaScript to Elixir.