[Middleman 3][blog]初めてのMiddleman：Middleman-OGPでMiddleman-BLogにOGPを設定する

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

OGPってけっこうめんどくさいんですよね。自作するのも面倒なのでMiddleman-OGPを使ってOGPを設定してみます。

Middleman-OGPのインストール

Gemに追記して$ bundle installします。

gem 'middleman-ogp'

Middleman-OGPを有効化し設定を追加する

config.rbに以下の内容を設定します。公式の通りにfb:を追加しても良いですが下記だけでも十分です。ogp.blog = trueはブログの記事もOGP対応するために必要な設定です。

activate :ogp do |ogp|
  ogp.namespaces = {
    og: data.ogp.og
  }
  og.base_url = 'http://hoge.com'
  ogp.blog = true
end

デフォルト値を設定する

次にサイト全体に適用されるデフォルト値を用意します。これはデータファイルdata/ogp/og.ymlを使います。

locale:
  '': 'ja_JP'
  alternate:
    - ja_JP
site_name: 'Site Name'
description: 'Description'
image:
  '': 'http://mydomain.tld/path/to/fbimage.png'
  secure_url: https://secure.mydomain.tld/path/to/fbimage.png
  type: image/png
  width: 600
  height: 600

ページにOGPを設定する

YAML Front Matter を使ってOGPを設定しページに必要な部分だけを記述することでデフォルト値を上書きします。

---
title: Title
date: 2015-03-03 12:00:00 UTC+9
tags: Tag
ogp:
  og:
    description: 'This is my fixture Middleman site.'
    image:
      '': 'https://secure.mydomain.tld/path/to/hfbimage.png'
      secure_url: https://secure.mydomain.tld/path/to/fbimage.png
      type: image/png
---

テンプレート

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<head>
<% ogp_tags do |name, value| %>
    <meta name="<%= name %>" content="<%= value %>">
<% end %>
</head>

ビルド

ビルドしてみるとこのようになります。

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<head>
<meta name="og:locale" content="ja_jp">
<meta name="og:locale:alternate" content="ja_JP">
<meta name="og:site_name" content="Site Name">
<meta name="og:description" content="This is my fixture Middleman site.">
<meta name="og:image" content="http://mydomain.tld/path/to/fbimage.png">
<meta name="og:image:secure_url" content="https://secure.mydomain.tld/path/to/fbimage.png">
<meta name="og:image:type" content="image/png">
<meta name="og:image:width" content="400">
<meta name="og:image:height" content="400">
<meta name="og:type" content="article">
<meta name="og:title" content="Title">
<meta name="og:url" content="http://whiskers.nukos.kitchen/2015/03/03/example-01.html">
<meta name="article:published_time" content="2015-03-03T03:00:00Z">
<meta name="article:tag" content="Tag">
</head>

基本的にはこれでOGPが設定できるようになります。
ただし、画像をフルパスで書かなければいけないのでブログなどでOGP画像を設定するには少し不便です。次の回で前回の記事初めてのMiddleman：Gulpを使ってサムネイル画像を生成するで作成した画像を手軽に設定できるように改良してみようと思います。

次回：初めてのMiddleman：Middleman-OGPのOGP画像指定を相対パスで設定する