SEO対策として、Railsのmeta-tagsを設定するために、
GitHub - kpumuk/meta-tags を使ったやりかたです。
Gemのインストール
Gemfileに下記を追加して、bundle install
# https:
gem 'meta-tags'
書き方
以下の様にset_meta_tagsして、<%= display_meta_tags %>場合のシンプルな例です。
<% set_meta_tags :title => ‘Member Login’ %>
Member Login
<% set_meta_tags :site => ‘Site Title’, :title => ‘Member Login’ %>
Site Title | Member Login
<% set_meta_tags :site => ‘Site Title’, :title => ‘Member Login’, :reverse => true %>
Member Login | Site Title
Open Graph
Open Graphの設定は下記のように行います。
書き方
set_meta_tags
:title => 'item AAAA',
:og => {
:title => "Member Login",
:type => 'website',
:url => 'https://www.sample.com/',
:site_name => 'SITE',
:description => '説明アアアア',
:image => 'https://www.sample.com/logo.jpg'
}
}
とすると、下記のようになります。
<meta content="product" property="og:type" />
<meta content="https://www.sample.com/" property="og:url" />
<meta content="SITE" property="og:site_name" />
<meta content="説明アアアアア" property="og:description" />
<meta content="https://www.sample.com/logo.jpg" property="og:image" />
typeは色々とあるようなので、ページに適宜指定してください。
詳しくは、下記のページを参照ください。
https://developers.facebook.com/docs/reference/opengraph
ちなみに、topページには
website を商品ページには、
productを指定したりしています。
app_idの取得
それから、facebookのapp登録をして、app_idを取得します。
Appの登録は下記より行ってください。
https://developers.facebook.com/apps
登録したapp_idをもとに、meta-tagにapp_idも設定します。
<meta property="fb:app_id" content="111111111111111" />
※ 111111111111111部分に取得した、app_idを指定
設定の確認
Open Graphの確認は下記から確認できます。
https://developers.facebook.com/tools/debug/og/object/
summaryカード
上記のOpen Graphの設定を行っておくと、Twitter Cardsの指定が、かなり簡単になります。
<%
set_meta_tags :site => 'RESTIR リステア',
:reverse => true,
:og => {
・・・・・・
}
:twitter => {
:card => 'summary',
:site => '@twitter_id',
}
%>
twitterのcardとsiteを指定すれば、あとの画像や説明は、Open Graphから取得してくれます。
Productカード
Productカードの設定サンプルは下記です。
Open Graphが未設定な状態を想定して書きました。
brand_name = 'BrandA'
item_name = 'ItemA'
set_meta_tags
:title => 'item AAAA'
:twitter => {
:card => 'product',
:site => '@twitter_id',
:domain => 'www.sample.com',
:title => "#{brand_name} - #{item_name}",
:description => '説明AAAAA',
:image => ['http://www.sample.com/item-img.jpg',
{ :width => 207,
:height => 234
},
],
:label1 => 'BRAND',
:data1 => brand_name,
:label2 => 'PRODUCT NAME',
:data2 => item_name
}
とすると、下記のようなタグが発行されます。
<meta content="product" property="twitter:card" />
<meta content="@twitter_id" property="twitter:site" />
<meta content="www.sample.com" property="twitter:domain" />
<meta content="BrandA - ItemA" property="twitter:title" />
<meta content="説明AAAAA" property="twitter:description" />
<meta content="http://www.sample.com/item-img.jpg" property="twitter:image" />
<meta content="BRAND" property="twitter:label1" />
<meta content="BrandA" property="twitter:data1" />
<meta content="PRODUCT NAME" property="twitter:label2" />
<meta content="ItemA" property="twitter:data2" />
imageに指定する画像サイズは160 x 160pxが推奨されています。
imageのwidthとheightを指定すると、縦横比を維持してくれるようです。
GitHubの公式サイトをみると下記のようにしてしていますが
:image => {
:_ => "http://example.com/1.png",
:width => 100,
:height => 100,
}
下記のように指定した方が、きれいにタグが生成されました。
:image => ["http://example.com/1.png",
{
:width => 100,
:height => 100,
}
]
その他
SEOの効果出て欲しいです。
経過を見守ります。
参考サイト
