TOP BLOG Rails| SEO|

『Rails』 SEO対策 OGP設定!gem meta-tagsで設定しよう

どうも皆さん@ちょめこです。

このブログサイトは初学者の僕が独学で
Ruby on Railsで作ったブログサイトです。
間違っている所もあるかもしれません。
あくまで参考程度にしていただけたらなと思います。
何かありましたらお問い合わせか、Twitterよりご連絡下さい。



meta-tagって何?


前回の記事で少し説明したmeta-tagの説明をします。

meta-tagsとは、SEO対策のうちの1つで絶対設定した方がいいものです。

これを設定することでサイト名やタイトル名の他

OGP設定や、Google検索に載せたくないページを設定することができます。

僕のブログサイトももちろん設定しています。

Google


これはOGP設定した後のGoogle検索上で出た僕のサイトになります。

他にもフェイスブックのOGPやTwitterのOGPも設定できます。

TwitterでのOGPはこんな感じになっています。
Twitter

いいね少ないけど気にしないで下さいね...。

これから伸びっから....違う記事で....w

とまーこんな感じの設定ができちゃうのでぜひやってみて下さい!



ここから導入するやり方


まずは参考にした記事を貼らせていただきます。

参考記事はこちら


Gemfileに追加をします。
gem 'meta-tags'

お決まりの〜
bundle install

次に設定ファイルの生成をします。

bin/rails g meta_tags:install

そしたらconfig/initializers/meta_tags.rb というファイルが出来上がり、ここを編集することで調整できます。

デフォルトの設定のままでも良い方はこのまま触らないでもいいと思います。

# frozen_string_literal: true

# Use this setup block to configure all options available in MetaTags.
MetaTags.configure do |config|
  # How many characters should the title meta tag have at most. Default is 70.
  # Set to nil or 0 to remove limits.
  # config.title_limit = 70

  # When true, site title will be truncated instead of title. Default is false.
  # config.truncate_site_title_first = false

  # Maximum length of the page description. Default is 300.
  # Set to nil or 0 to remove limits.
  # config.description_limit = 300

  # Maximum length of the keywords meta tag. Default is 255.
  # config.keywords_limit = 255

  # Default separator for keywords meta tag (used when an Array passed with
  # the list of keywords). Default is ", ".
  # config.keywords_separator = ', '

  # When true, keywords will be converted to lowercase, otherwise they will
  # appear on the page as is. Default is true.
  # config.keywords_lowercase = true

  # When true, the output will not include new line characters between meta tags.
  # Default is false.
  # config.minify_output = false

  # When false, generated meta tags will be self-closing (<meta ... />) instead
  # of open (`<meta ...>`). Default is true.
  # config.open_meta_tags = true

  # List of additional meta tags that should use "property" attribute instead
  # of "name" attribute in <meta> tags.
  # config.property_tags.push(
  #   'x-hearthstone:deck',
  # )
end

ちなみに僕はデフォルトのままやっていきました。

OGPの設定


OGPは、SNSのタイムライン上でURLがシェアされたときとかに表示されるやつです。

記事のタイトルやサムネイルが出てくるやつですね!

OGP(オープングラフプロトコル)って言うらしいです。

このOGPで見栄えがよくなれば集客にも繋がるので、必ず設定しましょう!


デフォルトのmeta-tagsの設定


僕が設定したものはこちら。

app/helpers/application_helper.rbにて設定

def default_meta_tags
    {
      site: 'PGMG',
      title: 'トップページ',
      reverse: true,
      charset: 'utf-8',
      description: '初学者がRuby on Railsで製作 ご訪問ありがとうございます。​こちらは初学者の僕が独学で勉強して製作したブログサイトになります。僕が勉強した事や、このBlogサイトのUPDATE(デザインや機能追加)する度に記事に残して少しでも同じ初学者の力になれればいいなと思います。そして自分自身もどんどん成長していきたいのでどんなことでもいいです、助言していただければ嬉しいです。',
      keywords: 'Rails,Ruby,プログラミング',
      canonical: request.original_url,
      separator: '|',
      icon: [
        { href: asset_pack_url('media/images/favicon.ico')},
        { href: asset_pack_url('media/images/meta_tags.png'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/jpg' },
      ],
      og: {
        site_name: :site,
        title: :title,
        description: :description,
        type: 'website',
        url: request.original_url,
        image: asset_pack_url('media/images/chomeko blog....jpg'),
        local: 'ja-JP',
      },
      twitter: {
        card: 'summary',
        site: '@chomeko3o',
        image: asset_pack_url('media/images/twitter_icon.png'),
        width: 100,
        height: 100
      }
    }
  end

1つずつ説明していきますが、僕も初めてな為間違っていたらすいません!!!!

参考程度にどうぞ。

  •  site: 'PGMG',
サイト名になります。そのまんまですねw

  • title: 'トップページ',
僕はrootに設定してるTOPページをデフォルトの設定にしているのでトップページとしました。

  • reverse: true,
トップページ|PGMGって並べてくれます。

  •  charset: 'utf-8',
文字コードの設定です。

  • description:
説明文になります。
トップページの説明を書きました。

  •  keywords:
キーワードを「,」区切りで設定
'Rails,Ruby,プログラミング'の3つをキーワードにしてみました。
4〜5までがいいらしいです。

  • canonical:
優先されるurlの指定。


  •  separator:
ページ名とサイト名の区切りを設定してます。

  •  icon:
favicon、apple用アイコンの設置です。
ファビコンとはブックマークすると左端にあるアイコンのことです。

デフォルトのogの設定
  • site_name: :site,
サイト名を上で設定したサイト名

  •  title: :title,
上記に同じ

  • description: :description,
上記に同じ

  • type: 'website',
OGPのtypeを指定します。
何個かありますが、websiteが無難っぽい?

  • url: request.original_url,
上記に同じ

  •  image: asset_pack_url('media/images/chomeko blog....jpg'),
デフォルトの画像

  •  local: 'ja-JP',
リソースの言語を設定

デフォルトのTwitter:OG設定
  •  card: 'summary',
TwitterOGPの種類を指定
他にも種類があるので、自由に変えてみてください。

  •  site: '@chomeko3o',
自分のTwitterアカウント名

  •  image: asset_pack_url('media/images/twitter_icon.png'),
デフォルトの画像

  •  width: 100,
    height: 100
幅と高さの指定
これがあった方がいいってのをどこかで見たw

超ザックリと説明してみましたw

ググればいっぱい情報が出るのでわからない部分はググりましょう!w

ハマったポイント


僕は画像の保存場所をwebpackerで下記のようにしている為(slimですいませんw)
= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

画像をJavaScript/images内に入れています。

それだからか画像の呼び出しでimage_urlが使えませんでした。

半日くらいここで悩みましたが、結果このような呼び出しで解決しました。

asset_pack_url('media/images/twitter_icon.png')

参考記事ではimage_urlで指定していますが、それだとerrorになリます。

試行錯誤の上無事解決できた時は超きもちよかったw

設定も終わったらapplication.html.rbのhead内に1行追加
<%= display_meta_tags(default_meta_tags)%>

application.html.rbにtitleタグをすでに設定してる場合は、削除してくださいとのことです。

そしてこれはmeta-tagsの設定をデフォルトで指定しています。

先ほど色々設定した物をapplication.rbで全てに反映させています。

でもこのままだと、どのページも一緒のOGPになってしまいますよね!

なので、ページ毎に設定し直さなきゃいけません。

詳細記事(show)を例にやってみます。

showのviewで一番上にset_meta_tagsを追加します。
<% set_meta_tags title: @blog.title , description: @blog.body.to_s.gsub(/\r\n|\r|\n|\s|\t/, ""), og:{image: image_url(url_for(@blog.image))}, twitter:{image: image_url(url_for(@blog.image))}%>

set_meta_tagsを追加することで、先ほどの
<%= display_meta_tags(default_meta_tags)%>

これが上書きされるようになります。

なので今回は、titleに@blog.titleを

descriptionに@blog.bodyで記事内容を

.to_sメソッドで文字列に変換しています。

-----9月15日追記----------

さらに追加でこれを付け足しました。

gsub(/\r\n|\r|\n|\s|\t/, "") 

HTMLを除去するメソッドで、正規表現を指定して無に置換しています。

これをしないとdescriptionがうまく表示されないバグがありました。
--------------------------------

OGでの画像をサムネ用に

og{image:image_url(url_for(@blog.image))},

画像の呼び出しでここも半日くらい悩んだところです。

image_urlが使えませんでした。

サムネ用の画像はこのブログではactive storageでアップロードしているからなのか?

image_url(url_for(@blog.image))

このような呼び出し方を探しました。

正直これが正しい呼び出し方なのかわかりません。

ググってもあまり的確な情報が見つけれなかったので、正しい呼び出し方がわかる方がいたらこっそり教えて欲しいです!

この呼び出し方でも画像が表示されているので一応大丈夫っぽいですが....

これはTwitter用のサムネ画像です

twitter:{image: image_url(url_for(@blog.image))}%>

ここも同じくこの呼び出し方で対処しています。

これで詳細記事毎にtitleと説明文そしてサムネがここに上書きされて表示されます。

<%= display_meta_tags(default_meta_tags)%>

Google検索に載せたくないページ


最後に検索に載せたくないページの設定をしていきます。

お問い合わせフォームなどに設置したらいいらしいです。
<% set_meta_tags noindex: true %>

これをHTMLで表示すると
<meta name="robots" content="noindex">

このようになっています。

こうすることで検索エンジンにそのページのコンテンツをインデックス化しないように指示できます。

ザックリと説明すると検索で表示させないようにします。

この設定は忘れないようにしましょう。

これで一通りの説明は以上になります。

自分はまだわからない所や、わからない事が多いいので本当にこれが正しいのかはわかりません。

参考程度に見て下さい!

また、間違った所や修正した方がいい所がありましたら、Twitterやお問合せより優しくやさーしく教えて下さい。

よろしくお願いします。





これだけの記事なのに3時間くらいかかってるちょめこでした!!!!!

またね!!!!!


ランキング参加中〜♫ ポチッと!

ブログランキング・にほんブログ村へ
戻る