How to Add a Custom Slug for Pages in Ruby on Rails

Custom slugs help make URLs clean, descriptive, and more SEO-friendly. Adding custom slugs for pages in Ruby on Rails can improve user experience and make it easier for search engines to understand your page content. In this guide, we’ll walk through how to create and customize slugs for your Rails pages.

Why Use Custom Slugs?

Custom slugs create a more readable and SEO-friendly URL structure, which can benefit both users and search engines. Instead of using a default URL like /pages/1, you can use a descriptive slug such as /pages/about-us. This approach:

  • Improves click-through rates by providing context about the page.
  • Boosts SEO by making URLs keyword-rich.
  • Enhances user experience with clean, memorable links.

Steps to Add Custom Slugs in Ruby on Rails

1. Set Up a Slug Column in Your Database

To begin, add a slug column to the model where you want to enable custom slugs. If you want to add a slug for a Page model, follow these steps:

  1. Generate a migration to add a slug column:rubyCopy coderails generate migration AddSlugToPages slug:string
  2. Run the migration:rubyCopy coderails db:migrate

This step adds a new column named slug to the pages table, which will store the custom slugs.

2. Update the Model to Use the Slug

Next, modify the Page model to save and retrieve records by the slug instead of the default id. Here’s how to do it:

  1. Install the friendly_id gem by adding it to your Gemfile:rubyCopy codegem 'friendly_id'
  2. Run bundle install to install the gem.
  3. Update the Page model to configure friendly_id:rubyCopy codeclass Page < ApplicationRecord extend FriendlyId friendly_id :title, use: :slugged end

By setting friendly_id :title, use: :slugged, Rails will automatically generate a slug based on the title attribute of the page. You can replace title with any other attribute that makes sense for your project.

3. Modify Routes to Use Slugs

To make sure that Rails uses slugs in URLs, adjust your routes. In config/routes.rb, add the following route for the pages resource:

rubyCopy coderesources :pages, param: :slug

By using param: :slug, Rails will expect slug as the identifier rather than id.

4. Update Controller to Find Records by Slug

In the PagesController, update any find method to locate records by the slug parameter instead of id. For example:

rubyCopy codeclass PagesController < ApplicationController
  def show
    @page = Page.friendly.find(params[:slug])
  end
end

This code ensures that Rails finds and displays pages based on the slug rather than the numeric ID, aligning with the clean URL structure.

5. Generate and Manage Slugs Automatically

To automatically create or update slugs when the title changes, add a callback in the Page model:

rubyCopy codeclass Page < ApplicationRecord
  extend FriendlyId
  friendly_id :title, use: :slugged

  def should_generate_new_friendly_id?
    title_changed?
  end
end

The should_generate_new_friendly_id? method will update the slug whenever the title is modified.

Testing Your Custom Slug Implementation

Once you’ve completed the steps, test the new slug feature by creating or updating a page record in your Rails application. Check that the URL now displays a custom slug instead of the numeric ID, and verify that the page loads correctly.

Benefits of Using Custom Slugs in Ruby on Rails

Improved SEO

Search engines value clean URLs with relevant keywords, which can improve search rankings and visibility.

Enhanced User Experience

Descriptive slugs provide more context, making it easier for users to understand what each page is about before clicking.

Increased Credibility

URLs that use custom slugs instead of numbers look more professional and trustworthy, which can boost your site's credibility.

Need Help Implementing Custom Slugs?

If setting up custom slugs in Ruby on Rails seems complex, I can assist with implementing this feature in your project. Feel free to reach out, and let’s work together to create a cleaner, SEO-friendly URL structure for your Rails application!