Railsアプリでmetaタグ＆OGP設定をする方法

f:id:creat4869:20190815170003p:plain

Railsアプリを作成した時、

『SEO対策しないとな～』
『OGP設定してないからSNSに記事をあげた時、アイキャッチが表示されないじゃん！やらないと！』

となったので、その時に行った手順を残していこうと思います。

SEO対策って？

SEOというのは、『検索エンジン最適化』のことをいいます。
簡単に説明すると、自分のサイトをネットで検索した時の結果順位を上位にする対策のことです。

ユーザーはネットで検索した時、上位にあるサイトから開いていきますよね？
なので、よりたくさんの人に自分のサイトを周知してもらうためには、
SEO対策をしてサイトの順位を上げることが重要になってくるわけです。

できるだけ順位を上げるために必要な設定としてページのmetaタグ設定が必要になります。

OGP設定って？

OGPを簡単に説明すると、
SNSなどで自分のサイトの記事をシェアする時に、
そのページのタイトルやアイキャッチなどの情報を正しく伝えるためのHTML要素のことです。

最近、SNSで記事をシェアしようとする時、
勝手にURLではなく、アイキャッチが表示されたりしますよね？
あれはシェアしようとしている記事にちゃんとOGP設定がされているから表示されるのです。

逆にOGP設定がされていない記事をシェアしようとすると、
画像やタイトルは表示されません。

たとえばtwitterでだれかのつぶやきを見た時、
『URLしか載っていないつぶやき』と『アイキャッチとタイトルが表示されているつぶやき』だと
どちらのURLを開きたいと思いますか？？

やはりタイトルなどが載っているほうが、
どのような記事か分かりやすいですし開きたくなるものです。

このようにSNS等で自分の作成したサイトを拡散したいと思っている方は、
OGP設定がとても重要になってきます。

SEO対策とOGPの重要性を知ったところで、
さっそく設定の方法を説明していこうと思ます＾＾

metaタグ設定手順

SEO対策とOGP設定をどうようにするかというと、
簡単にいうとmetaタグを使用します。
headの中に記述する要素ですね。

どこかのページを適当に開いて、
右クリックで『ページのソースを表示』をしてみてください。
head内にmetaという要素がたくさんあります。

この全てがSEO対策に必要、OGP設定に必要なわけではありませんが、

<meta name="description"～
<meta property="og:title"～

といった記述はこの二つに該当する要素です。
上がSEO対策のコードで、下がOGP設定のコードです。
このように、設定するにはいくつかコードを記述する必要があります。

では今回はRailsアプリ内で、設定する手順を書いていきます。

Gemfile記述

gem 'meta-tags'

上記を記述したら、bundle installします。

app/helpers/application-helper.rb内記述

application-helper.rbファイル内に以下を記述します。

module ApplicationHelper
  def default_meta_tags
    {
      site: 'サイト名',
      title: 'タイトル',
      reverse: true,
      separator: '|',
      description: 'ディスクリプション',
      keywords: 'キーワード',
      canonical: request.original_url,
      noindex: ! Rails.env.production?,
      icon: [
        { href: image_url('favicon.ico') },
        { href: image_url('icon.jpg'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/jpg' },
      ],
      og: {
        site_name: 'サイト名',
        title: 'タイトル',
        description: 'ディスクリプション', 
        type: 'website',
        url: request.original_url,
        image: image_url('ogp.png'),
        locale: 'ja_JP',
      },
      twitter: {
        card: 'summary_large_image',
        site: '@ツイッターのアカウント名',
      }
      fb: {
        app_id: '自身のfacebookのapplication ID'
      }
    }
  end
end

上記で日本語で書かれているところは、ご自身のサイト等の情報をいれてください。
favicon.icoやicon.jpg、ogp.pngといった画像の記述があるかと思いますが、
こちらはご自身で作成した画像の名前を入れてください。
画像の置き場所は、通常通りのapp/assets/images内に入れるとOK。

サイズとしては、

ファビコン→32×32px
apple用アイコン→180×180px
OGP画像→1200×630px

が標準です。

metaタグ出力

metaタグを出力するために、
app/views/layouts/application.html.erbのhead内に以下の記述を追加します。

<head>
  <%= display_meta_tags(default_meta_tags) %>
</head>

こちらはさきほど、app/helpers/application-helper.rb内に記述した
デフォルトのmetaタグが表示されるようにするためのコードです。
ページごとにタイトルやアイキャッチなどの情報は違うと思うので、
metaタグはページにより変わります。

しかしページごとに設定していなくても、
設定していないページではこのデフォルトのmetaタグ情報が勝手にこれで表示されるようになります。

では、個別にページのmetaタグを設定したい場合はどうするのか。
そちらを今から説明します。

ページごとに違うmetaタグを設定する方法

さきほどのデフォルトの表示をするためのコードは記述したままにしておき、
違うmetaタグを入れたいページのhtml.erbファイルの一番最初に以下のように記述を入れます。

<% set_meta_tags title: 'タイトル', description: 'ディスクリプション' %>

こちらはheadの中に記述しなくても大丈夫です。
そもそもapp/views/layouts/application.html.erbファイル内で
共通のheadを使用している場合が多いと思います。
なので個別のページの場合は、headのコードがファイル内に存在しないと思いますので、
ファイルの一番最初に記述します。

今回は例として、タイトルとディスクリプションだけ変更しましたが、アイキャッチやキーワードなど変更したいものを同様に記述すれば
そこだけ変更されます。
上書きされるということですね。

確認したい場合は、ネットでページを開き、
右クリックで『ページのソースを表示』をクリックして確認します。
設定したmetaタグがたくさん増えていると思います。

これでmetaタグでのSEO対策とOGP設定はできました＾＾