RailsでSEOとメタタグ設定を完全ガイド！title・description・OGPをview_componentで管理する方法
生徒
「Railsアプリで検索結果に表示されるタイトルや説明文って、どこで設定すればいいんですか？SEOって大切って聞きました。」
先生
「SEOはとても大切ですね。titleタグやdescriptionタグを適切に設定すると、検索エンジンにページ内容が分かりやすく伝わります。最近はview_componentを使ってメタタグ管理を一元化する方法も人気ですよ。」
生徒
「view_componentってUIの部品を作るイメージでしたが、メタタグにも使えるんですか？」
先生
「はい、タイトルやOGP画像をまとめて管理できるので、ビュー（ERB・Haml・Slim）の整理にも役立ちます。では基本から見てみましょう。」
1. SEOのためのメタタグとは？初心者にも分かる基礎
WebサイトのSEO（検索エンジン最適化）では、ページ情報を伝えるためのメタタグがとても重要です。特に検索結果に表示されるtitleやdescription、SNSで共有されたときに表示されるOGPタグは欠かせません。
RailsではこれらをHTMLの
内に書きますが、ページが増えると毎回設定するのが大変になってしまいます。そこで、view_componentを使ってまとめて管理する仕組みを作ると、とても便利になります。2. titleタグとdescriptionタグをRailsで設定する
まずは基本のtitleとdescriptionです。これらは検索エンジンが最初に見る情報であり、どんな内容のページなのかを伝えるための「名刺」のような役割を持っています。
<title>ページのタイトル</title>
<meta name="description" content="ページの説明文">
このように直接書いても良いのですが、多くのページに共通して使うので、繰り返しを書くのは非効率です。そこでview_componentを活用します。
3. OGPタグとは？SNSでの見た目を決める大事な仕組み
OGP（Open Graph Protocol）はSNSでURLが共有された際の情報を決める仕組みです。設定していないとランダムな画像やテキストが表示されてしまい、見た目が悪くなってしまいます。
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="説明文">
<meta property="og:image" content="画像URL">
Railsではこの記述もview_componentで共通化できます。特にOGP画像は同じ画像を使う場合が多いため、コンポーネント化するメリットが大きいです。
4. view_componentでメタタグをまとめて管理する
view_componentは再利用可能なUI部品を作るための仕組みですが、HTMLのhead部分も部品化できます。
# app/components/meta_tags_component.rb
class MetaTagsComponent < ViewComponent::Base
def initialize(title:, description:, image:)
@title = title
@description = description
@image = image
end
end
<!-- app/components/meta_tags_component.html.erb -->
<title><%= @title %></title>
<meta name="description" content="<%= @description %>">
<meta property="og:title" content="<%= @title %>">
<meta property="og:description" content="<%= @description %>">
<meta property="og:image" content="<%= @image %>">
このように定義することで、個別ページから呼び出すだけでメタタグが設定できるようになります。
5. ビュー（ERB・Haml・Slim）での呼び出し方法
view_componentはどのテンプレートエンジンでも同じ呼び出し方です。ERBなら次のように使います。
<%= render MetaTagsComponent.new(
title: "記事タイトル",
description: "説明文が入ります。",
image: asset_path("ogp.png")
) %>
HamlでもSlimでも構造は同じで、renderメソッドでコンポーネントを呼ぶだけです。これにより、アプリ全体のメタタグ設定が統一されます。
6. レイアウトファイルで共通化する仕組み
Railsのレイアウト（application.html.erb）は、全ページに共通する構造を管理する場所です。ここにview_componentを組み込むことで、必要なページだけメタタグを上書きできます。
<head>
<%= render @meta_tags if @meta_tags %>
</head>
コントローラ側で次のように設定すれば、ページごとのメタタグ表示が可能です。
@meta_tags = MetaTagsComponent.new(
title: "記事タイトル",
description: "ページの説明文",
image: asset_path("ogp.png")
)
この仕組みを使うと、SEO対策を全ページへ簡単に適用でき、管理も楽になります。
7. SEOに強くなるためのメタタグ設計のコツ
初心者がSEO対策を行うときは、まずtitle、description、OGP画像の三つを整えることが重要です。ページ内容が明確に伝わるタイトル、ユーザーが興味を持つ説明文、SNSで魅力的に見える画像を設定するだけで、検索結果のクリック率が大きく変わります。
Railsではview_componentを使ってメタタグを共通化することで、設定漏れを防ぎ、アプリ全体の質を高めることができます。
