Gemのインストール
Gemfileに下記を追加して、bundle install# https://github.com/kpumuk/meta-tags
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" />詳しくは、下記のページを参照ください。
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" />設定の確認
Open Graphの確認は下記から確認できます。https://developers.facebook.com/tools/debug/og/object/
Twitter Cards
summaryカード
上記のOpen Graphの設定を行っておくと、Twitter Cardsの指定が、かなり簡単になります。<%
set_meta_tags :site => 'RESTIR リステア',
:reverse => true,
:og => {
・・・・・・
}
:twitter => {
:card => 'summary',
:site => '@twitter_id',
}
%> 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のwidthとheightを指定すると、縦横比を維持してくれるようです。
GitHubの公式サイトをみると下記のようにしてしていますが
:image => {
:_ => "http://example.com/1.png",
:width => 100,
:height => 100,
}:image => ["http://example.com/1.png",
{
:width => 100,
:height => 100,
}
]その他
SEOの効果出て欲しいです。経過を見守ります。
0 件のコメント:
コメントを投稿