Railsで作ったアプリケーションをTwitterカード対応させる手順をメモしておきますφ(..)
Twitterカードとは下記のようなものです:D
単純にURLリンクを貼る貼るよりも、より多くの情報を伝えることが出来ますね!
手順
前提
今回は、詳細ページでは各ページに対応したTwitterカードを、その他ではサービスを紹介するTwitterカードを表示させるような対応を想定していますφ(..)
詳細ページ moook.herokuapp.com
サービス紹介 moook.herokuapp.com
実装メモ
概要
Twitterカードに対応させるには、ページのhead
内にmeta
タグを埋め込む必要があります。各meta
タグの意味については、下記のサイトが参考になりました!
実装手順
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
以上ですφ(..)