Madogiwa Blog

主に技術系の学習メモに使っていきます。

Ruby on Rails:自作アプリをTwitterカードに対応させる

Railsで作ったアプリケーションをTwitterカード対応させる手順をメモしておきますφ(..)

Twitterカードとは下記のようなものです:D

twitter.com

単純にURLリンクを貼る貼るよりも、より多くの情報を伝えることが出来ますね!

手順

前提

今回は、詳細ページでは各ページに対応したTwitterカードを、その他ではサービスを紹介するTwitterカードを表示させるような対応を想定していますφ(..)

詳細ページ moook.herokuapp.com

サービス紹介 moook.herokuapp.com

実装メモ

概要

Twitterカードに対応させるには、ページのhead内にmetaタグを埋め込む必要があります。各metaタグの意味については、下記のサイトが参考になりました!

saruwakakun.com

実装手順

metaタグを各ページに埋め込む

Twitterカードに対応するのは、各ページにTwitterカード用のmetaタグを埋め込む必要があるため、今回はapplication.html.erbに埋め込むことにしました。

<!DOCTYPE html>
<html>
  <head>
    <!-- 省略 -->
    <% twitter_card = get_twitter_card_info(@page ? @page : nil) %>
    <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>
  <body>
  <!-- 省略 -->

metaタグに設定する情報を取得するメソッド

metaタグに埋め込む値はapplication.html.erbに直接記述しても良いのですが、今回はページ詳細とその他でmetaタグに設定する値を変更するので、application_helper.rbで設定値を取得するようにしてみました。

ページ詳細画面(pageに値が設定されていれば)であれば、pageに値が設定され、それ以外ではnilとなるようにapplication.html.erbので実装しているため、Twitterカードの出し分けが出来るようになっていますφ(..)

  def get_twitter_card_info(page)
    twitter_card = {}
    if page
      twitter_card[:url] = page.url
      twitter_card[:title] = 'Moookからオススメページのお知らせ'
      twitter_card[:description] = "タイトル:#{page.name}、タグ:#{page.tag_list.join(',')}"
      twitter_card[:image] = set_page_img(page.image_src)
    else
      twitter_card[:url] = 'https://moook.herokuapp.com/pages'
      twitter_card[:title] = 'Webページ更新管理ツール「Moook」'
      twitter_card[:description] = 'いつもの更新いつもの更新確認、Moookを使えばお気に入りのページの更新を見逃しません。'
      twitter_card[:image] = 'https://raw.githubusercontent.com/Madogiwa0124/Moook/master/app/assets/images/favicon.png'
    end
    twitter_card[:card] = 'summary'
    twitter_card[:site] = '@Madogiwa_Boy'
    twitter_card
  end 

以上ですφ(..)