読者です 読者をやめる 読者になる 読者になる

人生のヒント

私が経験したことが、誰かの人生のヒントになればと願い書きます。

Ruby On RailsでのOGPの設置方法

スポンサーリンク

OGPとは、The Open Graph protocolの略で、TwitterやFacebookなどのSNSで共通の機能です。

URLを投稿した時にOGP記述をSNS側が読み取り、タイトルやイメージなどが表示されます。

↓例えば、TwitterでURLを記述して投稿するとこんな感じのカードが出てくるようにできます。

f:id:hinthint:20160827112715p:plain

このような表示になることのメリットは、目立って、ユーザのクリックを誘導率を高めることです。

 

今回は、Ruby On Railsでこの機能を使えるようにする設定方法について執筆します。

参考にしたのは、下記URLです。

http://webdesign.practice.jp/ogp-facebook-twittercards

 

1.設定

app/views/layouts/application.html.erb ファイルを下記のように書き替えます。

<head>~</head>タグの間に書きます。

metaタグのcontent=に値を書きます。ここは、変数を使って、ページごとに変化させることをおすすめします。

  <meta property="og:title" content="タイトル" />
  <meta property="og:url" content="http://<%= request.host %><%= request.fullpath %>" />
  <meta property="og:description" content="詳細を書きます。" />
  <meta property="og:site_name"  content="サイト名" />
  <meta property="og:image" content="画像のURLを書きます。" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="twitter:card" content="summary">
  <meta property="twitter:site" content="@[Twitter ID]">

 

下記コマンドで記述を反映させます。

 $ /etc/init.d/unicorn restart

 

 

2.動作確認

Twitterでの確認

1.下記URLにTwitterアカウントでログインします。

https://cards-dev.twitter.com/validator

 

2.空欄に確認するURLを入力し、「Preview card」をクリックします。

f:id:hinthint:20160827115756p:plain

3.Cardが表示されたら、動作確認完了です。

f:id:hinthint:20160827115955p:plain

注意:http://IPアドレス/usersというような表記では表示されず、

http://FQDN/usersというような表記で表示されました。

ドメイン設定を予め完了させておきましょう。

 

 

Facebookでの確認

1.下記URLにFacebookアカウントでログインします。

https://developers.facebook.com/tools/debug

 

2.URLを入力し、「デバッグ」をクリックします。

f:id:hinthint:20160827120554p:plain

 

3.Cardが表示されたら、動作確認完了です。

f:id:hinthint:20160827120704p:plain

 

 

3.まとめ

Ruby On RailsでもOGPの設置をすることで、更にSNSを有効に活用できるようになります。