Programming SEO

Ruby on Rails SEO tips and tricks

Estimated reading time: 4 minutes

A Ruby on Rails (RoR) application isn’t too SEO friendly straight out of the box. There needs to be some customisation to make your application more search engine friendly. When optimized correctly, a RoR application can perform extremely well in the search results. Unlike installing a WordPress theme and adding some content, you will have complete control over the structure and content on your website. In this post we will cover on-page SEO for your RoR application. I am going to assume that your RoR application has been developed in Ruby on Rails 4. The topics will include:

  • Titles content display
  • SEO friendly URL structures
  • HTML title tags
  • Meta descriptions
  • Responsive design

Titles content display

Optimizing your pages to have a report-like structure is always ideal and doing this in RoR is extremely easy. To maximize the potential for each page, plan how the content is going to be structured. Blogs are good examples of an application that is easy to optimize. However, not all of us are making blogs with RoR and in fact, you probably should just use WordPress for that. Making sure you plan the page layout before implementing functionality can help you prepare for the uncertainties of user-generated content. Having the user put in a title, that you can wrap in<h1> tags and a description will help your on-page SEO. GitHib is a nice example of a well optimized RoR application. If we look at the profile, we can see that the user’s name and username is wrapped in <h1> tags. Such as:

<h1 class="vcard-names">
      <span class="vcard-fullname" itemprop="name">Tom Nagle</span>
      <span class="vcard-username" itemprop="additionalName">tomanagle</span>
</h1>

SEO friendly URL structures

Possibly the most annoying part of an out of the box RoR application is the user of the ID as the unique identifier in the URL. Luckily, this is easily fixed with the friendly_id gem. After we add the gem to our Gemfile we can run bundle install and start using it. There are several ways to use the gem, but the best way will result in a hyphenated URL that has no ID. In this example, I will be using a content type called posts. We need to add a slug to our posts by creating a migration file with:

rails g migration add_slug_to_posts slug_string

Then run:

rake db:migrate

In our posts model we will add the following:

extend FriendlyId 
friendly_id :title, use: :slugged

In our posts_controller we will need to change:

def set_post
  @post = Post.find(params[:id])
end

To:

def set_post
  @post = Post.friendly.find(params[:id])
end

The problem with this is, if we already have posts, they won’t have a slug applied to them. We can fix this by entering into the rails console and typing:

Post.all.each(&:save)

HTML title tags

The title tag is problematic because it is automatically defined in the views/layouts/application as a static string. We want to make this dynamic and be able to hook into it with our different views. There are several ways to do this, but we want the cleanest way that will result in the least amount of code in each view. We will start by making a helper method in app/helpers/application_helper.rb

def title(page_title)
  content_for (:title) { page_title}
end

This helper method is universal and can be hooked into in any view that you like. We will need to display the results of the helper method in out application layout by changing the title tags to:

<title><%= yield :title %></title>

Next, tell the helper method what you want the title to be with:

<% title @post.title %>

Meta descriptions

Implementing the meta description will be exactly the same as the title tag. If we are going to be generating our own content, the best way to deal with the meta description is to generate a migration that adds a new field to the post for your discretion. This is because if you grab the description from the post body, you have less control over its length. However, we are going to assume that the content is user generated and therefore we have no control over its length. Implement a helper method for the description with:

def description(meta_description)
  content_for (:description) {meta_description}
end

Output this in out application layout with:

<meta name="description" content="<%= yield :description %>">

The tell the helper method what that view’s description should be with:

<% description truncate(@rat.description, lenth: 160) %>

Responsive design

In February of 2015, Google announced that responsive design would be counted as a ranking signal. The change now affects all searches on mobile devices in every language and country. So, making your RoR application mobile friendly is going to affect your organic traffic for mobile devices. There are several ways to make your application, or any website, mobile friendly. The first is to create your own style sheets that have media queries and resize content bases on the size of the device. The other option is to use a framework such as Bootstrap or Zurb’s Foundation. Both have well maintained Ruby Gems that can be used in your applications. Which one you choose is simply a matter of preference, both are mobile-first 12 column grid systems with different syntax. Each of the frameworks has a very detailed guide on how to install them, then you can continue to use the framework in your views.

RoR SEO tricks

Use a sitemap gem such as sitemap or dynamic_sitemaps to submit your website’s content to search engines.

Implement breadcrumbs with the gretel gem for improved internal link structure and usability.

Use i18n – Internationalization if your website is not in English. This can be achieved with config/locales/xx.yml and setting the local in the application controller.

 

Top