How to Add Meta Tags in Ruby on Rails 7: From the Controller and View
September 24, 2024
Meta tags play a crucial role in SEO, social sharing, and providing rich link previews when your website is shared on platforms like Facebook, Twitter, or LinkedIn. In Ruby on Rails, managing meta tags is straightforward, and you can do it in multiple ways. This guide will walk you through how to add meta tags in two different approaches: from the controller and from the view.
Step 1: Install the meta-tags Gem
To make the process of adding meta tags more efficient, Rails offers the meta-tags gem. First, add the gem to your Gemfile:
gem 'meta-tags'
Run bundle install to install it:
bundle install
Once installed, you can use it in both controllers and views to set meta tags dynamically for each page.
Method 1: Setting Meta Tags in the Controller
Setting meta tags in the controller is a clean and organized way to manage meta information for each page. It keeps the logic out of the view and centralizes the handling of SEO-related data in one place.
Example: Default Meta Tags in the ApplicationController
You can set up default meta tags for your entire application by defining them in the ApplicationController. This will ensure that basic meta tags are present on every page, and you can override them for specific pages when needed.
Step 1: Define Default Meta Tags
In the ApplicationController, add a before_action to set default meta tags:
class ApplicationController < ActionController::Base
before_action :set_meta_tags
def set_meta_tags
set_meta_tags default_meta_tags
end
def default_meta_tags
{
site: 'The url shortener app',
title: 'dryurl',
reverse: true,
separator: '|',
description: 'dryurl.com - The ultimate URL shortener app. Combine simplicity with performance. dryurl offers powerful analytics, custom branding, and seamless link management.',
keywords: 'url shortener, analytics, custom branding, qr-code, link management',
canonical: request.original_url,
noindex: !Rails.env.production?,
icon: [
{ href: image_url('favicon.ico') },
{ href: image_url('icon.png'), rel: 'apple-touch-icon', sizes: '180x180' }
],
og: {
site_name: 'dryurl.com - The url shortener app',
title: 'dryurl',
description: 'Start shortening and tracking your URLs today with dryurl!',
type: 'website',
url: request.original_url,
image: image_url('icon.png')
}
}
end
end
Step 2: Customize Meta Tags in Specific Pages
For individual pages, you can override the default meta tags by customizing them in the controller actions. For instance, here’s how you can modify the meta tags for an "About" page:
class PagesController < ApplicationController
def about
set_meta_tags title: 'About dryurl',
description: 'Learn more about dryurl - the ultimate URL shortener app combining simplicity with powerful analytics, custom branding, and seamless link management.',
keywords: 'about, dryurl, url shortener, link management, analytics',
og: {
title: 'About dryurl',
description: 'dryurl offers URL shortening with powerful analytics and custom branding. Learn more on our About page.',
url: request.original_url,
image: image_url('icon.png')
}
end
end
This approach keeps your views clean and makes it easy to manage meta information across different controllers.
Method 2: Setting Meta Tags in the View
While setting meta tags in the controller is a great approach, there may be cases where you prefer to set meta tags directly in the view. This is useful when your meta data is highly specific to a particular page's content or when you want more granular control over the meta tags in the view template itself.
Example: Adding Meta Tags in the View
Step 1: Define Meta Tags in the View
In your view file, you can directly call the set_meta_tags method. For instance, in the about.html.erb file of the "About" page, you can add custom meta tags like this:
<% set_meta_tags title: 'About dryurl',
description: 'Learn more about dryurl - The ultimate URL shortener app combining simplicity with powerful analytics, custom branding, and seamless link management.',
keywords: 'about, dryurl, url shortener, link management, analytics',
canonical: request.original_url,
og: {
title: 'About dryurl',
description: 'Learn more about dryurl and its powerful URL shortening and analytics capabilities.',
url: request.original_url,
image: image_url('icon.png')
} %>
<h1>About dryurl</h1>
<p>dryurl is a leading URL shortener app that lets you shorten, manage, and track your links with ease.</p>
<p>Discover how dryurl can simplify your link management needs.</p>
Step 2: Use Meta Tags for Specific Pages
For any other page, you can follow the same pattern and place the meta tags directly in the corresponding view file. For example, for a "Contact" page, you might have:
<% set_meta_tags title: 'Contact dryurl',
description: 'Contact dryurl for support or any inquiries about our URL shortener services.',
keywords: 'contact, dryurl, support, inquiries, url shortener',
canonical: request.original_url,
og: {
title: 'Contact dryurl',
description: 'Reach out to dryurl for any support or questions about our URL shortener services.',
url: request.original_url,
image: image_url('icon.png')
} %>
<h1>Contact dryurl</h1>
<p>For any inquiries, reach out to our team at dryurl and we’ll be happy to assist you!</p>
When to Use Each Method?
1. Use the Controller Method When:
- You want to manage meta tags centrally for each controller or action.
- You prefer to keep meta information logic out of the views.
- You want to define default meta tags for all pages and override them only when necessary.
2. Use the View Method When:
- You need to add meta tags that are highly specific to the content of a particular view.
- You prefer to have control over the meta information directly in the view template.
- The meta tags vary significantly from one page to another, making it more convenient to define them in the view itself.
Conclusion
Both methods of setting meta tags—via the controller or directly in the view—are powerful ways to manage SEO, social sharing, and link preview data in your Ruby on Rails application. By using the meta-tags gem, you can efficiently handle meta tags dynamically, ensuring that every page has the appropriate meta information, improving both user experience and search engine visibility.
- Controller Method: Ideal for centralized, reusable meta tag logic.
- View Method: Great for granular, page-specific control over meta tags.
Choose the method that best suits your needs or even combine both approaches to get the best of both worlds!