🦓

[Rails]リンクプレビュー

2023/08/01に公開

Rails

metainspector

tech

はじめに

投稿に単純にURLリンクを貼るより、リンクカードがより多くの情報を伝えることが出来ます。
metainspectorを使ってリンク先のプレビューを実装していきます。

環境

Rails 7.0.4.3
ruby 3.2.1

gemをインストールする

Gemfile

gem 'metainspector'

bundle install

メタデータ

メタデータはウェブページに関連する情報のことです。例えば、ウェブページのタイトル、説明、作成者、公開日、および画像などが含まれます。
早速Metainspectorを試してGoogleのメタデータを取得してみます。

irb(main):014:0> @metadata = MetaInspector.new('google.com')
=> 
#<MetaInspector::Document:0x0000000112b071c0
...
irb(main):015:0> @metadata.url
=> "http://www.google.com/"
irb(main):016:0> @metadata.title
=> "Google"
irb(main):017:0> @metadata.description
=> "世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。"                                                                     
irb(main):018:0> @metadata.meta_tags
=> 
{"name"=>{"description"=>["世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。"], "robots"=>["noodp"]},                     
 "http-equiv"=>{"content-type"=>["text/html; charset=UTF-8"]},              
 "property"=>                                                               
  {"twitter:title"=>["2023 FIFA女子ワールドカップ"],                        
   "twitter:description"=>["試合を応援しよう！#GoogleDoodle"],              
   "og:description"=>["試合を応援しよう！#GoogleDoodle"],                   
   "twitter:card"=>["summary_large_image"],                
   "twitter:site"=>["@GoogleDoodles"],                     
   "twitter:image"=>                                       
    ["https://www.google.com/logos/doodles/2023/2023-womens-world-cup-july-31-6753651837110157-2xa.gif"],
   "og:image"=>["https://www.google.com/logos/doodles/2023/2023-womens-world-cup-july-31-6753651837110157-2xa.gif"],
   "og:image:width"=>["1200"],                             
   "og:image:height"=>["440"],                             
   "og:url"=>["https://www.google.com/logos/doodles/2023/2023-womens-world-cup-july-31-6753651837110157-2xa.gif"],
   "og:type"=>["video.other"]},
 "charset"=>[nil]}
irb(main):019:0> @metadata.meta['og:image']
=> "https://www.google.com/logos/doodles/2023/2023-womens-world-cup-july-31-6753651837110157-2xa.gif"

ヘルパーメソッドを作成する

リンク先のメタデータを取得するためにヘルパーメソッドを作成します。

app/helper/link_preview_helper.rb

require 'metainspector'

module LinkPreviewHelper
    def fetch_metadata(url)
      if url.present?
        begin
          page = MetaInspector.new(url)
        
          title = page.title
          description = page.description
          url = page.url
          image_url = page.meta['og:image']
          favicon_url = page.images.favicon
        
          { title: title,
            description: description,
            url: url,
            image_url: image_url,
            favicon_url: favicon_url }
        rescue StandardError => e
          Rails.logger.error "Error fetching metadata: #{e.message}"
          { title: 'Error', description: 'Failed to retrieve metadata', image_url: nil, favicon_url: nil }
        end
      end
    end
end

コントローラーを編集する

ヘルパーメソッドを読み込んで実行させます。

app/controllers/ideas_controller.rb

class IdeasController < ApplicationController
    include LinkPreviewHelper
...
    def show
       @metadata = fetch_metadata(@idea.url) if @idea.url.present?
    end
end

ビューに表示させる

app/views/ideas/_idea.html.erb

<% if @metadata.present? %>
  <div class="card mb-3 overflow-hidden">
    <div class="row g0">
      <div class="col-md-8 align-self-center pe-0"> 
        <div class="card-body">
          <h5 class="card-title"><%= @metadata[:title] %></h5>
          <p class="card-text"><%= truncate(@metadata[:description], length: 100, omission: '...') %></p>
          <% if @metadata[:favicon_url].present? %>
            <img class="d-inline-block me-2" src="<%= @metadata[:favicon_url] %>" alt="Link Preview Image">
          <% end %>
          <span><%= @metadata[:url] %></span>
          </div>
        </div>
        <% if @metadata[:image_url].present? %>
          <div class="col-md-4 p-0">
            <img src="<%= @metadata[:image_url] %>" alt="Link Preview Image" class="img-fluid h-100 ">
          </div>
        <% end %>
      </div>
    </div>
  <% else %>
    <p>No metadata available for the provided URL.</p>
  <% end %>
</div>

ビフォー

アフター

リンクプレビューができましたね。

メタデータが設定されてないサイトもあるのでURLをそのままにするかCSSで見た目を調整する必要がありますね。

OGP

リンクのプレビュー以外に、ソーシャルシェアにも使われるのでメタデータがあった方が良いでしょう。一緒に設定を行いましょう。

`meta-tags`をインストールする

gem "meta-tags"

bundle install

https://github.com/kpumuk/meta-tags

`meta_tags.rb`を作成する

このコマンドを打つと、config/initializers内にmeta_tags.rbというファイルが作成されます。
初期設定を変えたい場合このファイルにある内容を編集して変えることができます。

rails generate meta_tags:install

`set_meta_tags`メソッドにメタタグ情報を入れる

set_meta_tagsというメソッドが用意されているのでそれを使ってメタ情報を入れます。

app/helpers/application_helper.rb

...
    def set_meta_tags
        {
        site: '',
        title: '',
        reverse: true,
        charset: 'utf-8',
        description: '',
        keywords: '',
        canonical: request.original_url,
        separator: '',
        og: {
            site_name: :site,
            title: :title,
            descriptiom: :description,
            type: 'website',
            url: request.original_url,
            image: image_url(''),
            local: 'ja-jp'
        },
        twitter: {
            card: 'summary_large_image',
            image: image_url('')
        }
    }
    end

`display_meta_tags`でメタ情報を表示させる

display_meta_tagsはメタタグを表示させるためのメソッドです。
レイアウトファイルに追加します。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <%= display_meta_tags(set_meta_tags) %>
</html>
  </head>

OGPのプレビューに関してこちらの記事を参考させていただきました。

終わりに

メタタグ情報の取得と設定でした。