【Ruby on Rails】meta-tagsを使ってサイトのmetaタグを設定する方法

【Ruby on Rails】meta-tagsを使ってサイトのmetaタグを設定する方法

こんにちは、nishi_talk(@nishi_talk)です。
今回はrailsのmeta-tagsの設定方法とSEO対策をした方法をご紹介します。



設定したときの環境

ruby 2.2.8
Rails 5.1.6

インストール

まずはGemfileに以下の記述してパッケージをインストールします。

# メタタグ機能
gem 'meta-tags'
bundle install

meta-tagsの設定

/config/locales/ja.ymlにサイトやアプリケーションのデフォルトの設定を記述します。

meta_tags:
  base:
    site: サイトのタイトル
    description: サイトのディスクリプション
    keywords:
      - キーワード1
      - キーワード2



/app/controllers/concernsに以下の新規ファイル作成します。
今回は例としてmeta_taggable.rbという名前で作成します。

meta_taggable.rbに以下の記述を追加します。

module MetaTaggable
  extend ActiveSupport::Concern

  include ActionView::Helpers::AssetUrlHelper

  included do
    before_action :prepare_meta_tags
  end

  private

  def prepare_meta_tags(options = {})
    base = t('meta_tags.base')

    site = base[:site]
    description = base[:description]
    title = t("meta_tags.titles.#{controller_name}.#{action_name}", default: '')
    image = image_url('ogp.png')
    image = options[:image].presence || image_url('ogp.png')

    defaults = {
      site: site,
      title: title,
      description: description,
      keywords: base[:keywords],
      canonical: request.url,
      og: {
        url: request.url,
        title: title.presence || site,
        description: description,
        site_name: site,
        type: 'article',
        image: image
      },
      twitter: {
        card: 'summary',
        site: '@ツイッターのアカウント名',
        title: title.presence || site,
        description: description,
        image: image
      }
    }

    options.reverse_merge!(defaults)

    set_meta_tags(options)
  end
end

/app/controllers/application_controller.rbに以下の記述を追加します。

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  include MetaTaggable
end

metaタグの出力

/app/views/layouts/application.html.erbに以下の記述を追加します。

<%= display_meta_tags reverse: true %>

未経験からでもエンジニアにはなれる!

中堅の年代になり、最近よくどうやってエンジニアになったんですか?と聞かれる機会が多くなりました。私は転職組で未経験からエンジニアになりました。 そこら辺のストーリーは「未経験からWebデザイナーになった経緯を紹介」で書いているのでそちらをご覧ください。

当時はWebの技術を教えてくれるスクールがあまりなく、私はWebの勉強は独学で勉強し転職したのですが、今はスクールの数も多くなっていてオンラインで受講できるところも増えてきました。

もし私が未経験でエンジニアを目指すなら活用したいスクールを紹介してますので興味ある方はぜひ参考にしてくだいさい!

tech boostオンライン

tech boostはエンジニアに特化したキャリアサービスを展開しているBranding Engineerが運営するオンラインプログラミングスクールです。

エンジニアに特化したキャリアサービスを展開しているからこそのカリキュラムを実現しています。 また、転職サポート付きでスクール卒業後もキャリアも安心です。

オンラインスクールだからいつでもどこでも受講可能!これからプログラミングを学びたい方、エンジニアにキャリアチェンジを考えている方に、 特にオススメのサービスです。

初めてプログラミングを学ぶなら「tech boostオンライン」

CodeCamp(コードキャンプ)

オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスです。高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。

講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。

多くの受講生が、現役エンジニアの手厚いマンツーマン指導によって確実にプログラミングを習得し、キャリアアップ・転職・独立起業などの目標を実現しています。

プログラミングのオンラインスクールのCodeCamp

DMM WEBCAMP

転職を本気で考えている方向けのプログラミングスクールです。転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです!

プログラミング未経験者でも安心のサポート体制をご用意しており、特に受講者アンケートでは『サポート体制がしっかりしていて魅力的』、『転職を保証していただいていることで安心』というレビーが多くしっかとしたサポートを提供しています。

実務に近い実践的なカリキュラムで、DMM WEBCAMPはチーム開発など、実務により近い実践的カリキュラムを導入しているため、転職先・就職後にいち早く活躍できるスキル・経験を積むことができます。

受講者満足度90%以上のプログラミングスクール【DMM WEBCAMP】

Udemy

私の周りの現役のエンジニアの人も活用しています。基礎をしっかり固めたい方や、実践向けの配信など幅広く解説している動画が豊富にアップされているので活用するのはオススメです。

習得したいスキル(プログラム言語)が明確で、年収アップのために学習している方やAI・機械学習を学んでスキルアップを目指しているエンジニアの方に支持されているます。

1講座あたり数千~数万円程度で実践的なスキルアップを経済的でオススメです。

【Web開発初心者向け!】Web開発入門完全攻略 充実の18時間コース