Rails

Twitterカードを設定してみた(感謝を言葉にする! 2回目)

ちょっとしたご質問

皆さん、TwitterでURLをツイートしたり、slackでURLを投稿すると、URL先がサムネイル表示される現象、見たことはありますか?

例えば、こちら↓

スクリーンショット 2018-04-04 11.09.49.png

※slackにて撮影
※発生した現象=URLを投稿しただけで、URL先の縮小見本が出現

この現象、「Twitterカード」を設定すると再現できると教えて貰いましたので、以下にレポートします!

Twitterカードの実装で感謝したい皆様

@ysk_proさん
→Twitterカードを紹介していただきました!webサービス「Jobmiru」も面白いので、ぜひ見てください!

まどぎわさん
→Twitterカードの表示設定について、「サービス紹介」と「詳細ページ」の2パターンに使い分けする方法を紹介してくださってます。コードが勉強になります!

サルワカくん
→設定方法まとめを紹介してくださってます!分かりやすい!感謝!

Ruby on Railsへの実装

それでは、実装体験の紹介です。

・準備したもの
→リリースしている自分のアプリ

・以下ファイルのheadタグ内に、コードを追加

→「../views/layouts/application.html.erb」

略
<head>
略
  <meta name="twitter:card" content='summary' />
  <meta name="twitter:site" content='@meiboo_net' />
  <meta property="og:url" content='https://www.meiboo.net/' />
  <meta property="og:title" content='オンライン名簿アプリ「MEIBOO」' />
  <meta property="og:description" content='脳の外部化を通して、情報化社会への適応を支援します。' />
  <meta property="og:image" content='https://www.meiboo.net/assets/ai_nakayoshi-e82329a2a52eaeb34fc327f76d0708f014c099bd35ec98caa4cb5e05a6bb958f.png' />
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
略

※サルワカさんの3.Twitterカードの使い方より、content='summary' は「カードの種類」を指定している箇所で、'summary'に代わって、'summary_large_image'を選択する事も可能、とのお話ですね。

・次はデプロイ

・Twitter公式サービスのCard Validatorページで挙動を確認

スクリーンショット 2018-04-04 10.55.28.png

・Twitterカードが設定できた事を把握して完了!(これだけ!)

※ちなみに、slackでも、以下の通り、サムネイルが出現しました。

スクリーンショット 2018-04-04 11.00.44.png

Ruby on Railsへの仮実装(helper経由編)

まどぎわさんのhelperコードも勉強したかったので、ローカル環境にて、ちょっとだけ記述

・以下ファイルのheadタグ内に、コードを追加

→「../views/layouts/application.html.erb」

略
<head>
略
<% twitter_card = get_twitter_card_info() %>
  <meta name="twitter:card" content=<%=twitter_card[:card]%> />
  <meta name="twitter:site" content=<%=twitter_card[:site]%> />
  <meta property="og:url" content=<%=twitter_card[:url]%> />
  <meta property="og:title" content=<%=twitter_card[:title]%> />
  <meta property="og:description" content=<%=twitter_card[:description]%> />
  <meta property="og:image" content=<%=twitter_card[:image]%> />
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
略

・以下ファイルの任意の場所に、コードを追加

→「../helpers/application_helper.rb」

  def get_twitter_card_info()
    twitter_card = {}
    twitter_card[:url] = 'https://www.meiboo.net/'
    twitter_card[:title] = 'オンライン名簿アプリ「MEIBOO」'
    twitter_card[:description] = '脳の外部化を通して、情報化社会への適応を支援します。'
    twitter_card[:image] = 'https://www.meiboo.net/assets/ai_nakayoshi-e82329a2a52eaeb34fc327f76d0708f014c099bd35ec98caa4cb5e05a6bb958f.png'
    twitter_card[:card] = 'summary'
    twitter_card[:site] = '@meiboo_net'
    twitter_card
  end

私のアプリには公開できる詳細ページがないため、こちらのコードはお蔵入りですが、無事に値を渡せると嬉しいですね。

と言う事で、今回の体験は以上です!感謝!!