2017-06-25

Middleman BlogでOpen Graph protocol

このブログはMiddleman Blogで構築していますが、今更ながら Open Graph protocol に対応しました。その設定方法についてまとめます。

Open Graph protocol とは

Open Graph property (OGP) とは、Facebook が提案した、リンク先の Web ページのの情報を表示してくれる仕組みです。現在では Twitter や Slack も OGP に対応しています。

Twitter は OGP だけでなく独自のTwitter Cardsにも対応しており、より Twitter に特化した情報を記述できます。

Web ページを OGP に対応させるには、HTML に<meta>タグでそのページの情報を埋め込みます。例えばこの記事は以下のようなタグをページ内に使用しています。

<meta property="og:type" content="article" />
<meta property="og:title" content="Middleman BlogでOpen Graph protocol" />
<meta
  property="og:description"
  content="このブログはMiddleman Blogで構築していますが、今更ながらOpen Graph protocol に対応しました。その設定方法についてまとめます。"
/>
<meta
  property="og:url"
  content="https://i-beam.org/2017/06/25/middleman-blog-open-graph/"
/>
<meta
  property="og:image"
  content="https://i-beam.org/2017/06/25/middleman-blog-open-graph/og-slack.png"
/>

少しの Ruby コードを書くことで、Middleman Blog で<meta>タグページ内に埋め込むことができます。

ヘルパメソッドを書く

<meta>タグに指定するための、３つの情報を取得するヘルパメソッドを作ります。

記事の URL
記事のサマリーテキスト
記事のサムネイル画像の URL

まず画像や記事の URL を Middleman のビルド時に知るために、config.rbにページのエンドポイントを指定します。

# config.rb
set :endpoint, 'https://i-beam.org/'

これでconfig[:endpoint]で、ブログのルートパスを取得できます。

次に、BlogArticleオブジェクトから、サマリーやサムネイル画像の URL を取得するメソッドを書きます。ヘルパメソッドはlib/article_helpers.rbに定義します。記事のサマリーテキストとサムネイル画像の URL は、それぞれ最初の<p>タグ、<img>タグから取得します。

# lib/article_helpers.rb

module ArticleHelpers

  # 記事のURLを返す。
  def href(article)
    URI.join(config[:endpoint], article.url).to_s
  end

  # 記事のサマリーを返す。
  def first_paragraph_text(article)
    rendered = article.render(layout: false, keep_separator: false)
    tags = Nokogiri::HTML.parse(rendered).css('p')
    text = tags.map(&:text).find {|content| !content.empty? }
    text ? text.delete("\n") : article.title
  end

  # 記事のサムネイル画像のURLを返す。
  def first_img_href(article)
    rendered = article.render(layout: false, keep_separator: false)
    img = Nokogiri::HTML.parse(rendered).css('img').first
    return nil unless img

    src = img.attribute("src").value
    URI.join(config[:endpoint], src).to_s
  end

end

そしてページ内からヘルパメソッドを呼び出すために、config.rbで設定します。

# config.rb
require 'lib/article_helpers'

helpers ArticleHelpers

`<meta>`タグを記述する

<meta>タグを HTML に埋め込みます。 Middleman Blog のデフォルトの設定では、 source/layouts/post_layout.erbが各記事のページのレイアウトファイルとなります。このファイルに<head>の中に、<meta>タグを記述します。

<!-- source/layouts/post_layout.erb -->
<meta property="og:type" content="article"/>
<meta property="og:title" content="<%= current_article.title %>"/>
<meta property="og:description" content="<%= first_paragraph_text(current_article) %>"/>
<meta property="og:url" content="<%= href(current_article) %>"/>
<meta property="og:image" content="<%= first_img_href(current_article) %>">

Slack の自分チャネルや、Twitter Card Validatorで表示が確認されれば OK です。

Open Graph protocol とは

ヘルパメソッドを書く

<meta>タグを記述する

`<meta>`タグを記述する