DPW

middleman-blogにOGPを追加した

本ブログの前身はmiddleman-blogで構築していました。

middleman-blogはslimやsass、markdownが使えて 技術者的に 便利なブログツールですが、マーケターなどのSEOを意識したユーザーに利用されるWordpressと違って、マーケティングには力を入れていない(興味が無い?)気がします。

今回、middleman-blogにOGP(オープングラフプロトコル。Facebookに記事が紹介される時に見栄え良くするための仕様)を導入してみたので、簡単に紹介します。

OGPの原文はこちらから見られます。

og:title

タイトルを設定します。
記事であれば記事のタイトルが適切でしょう。

og:type

ページの種類を指定します。
Video,Musicなどありますが、ブログではarticleが適切でしょう。

また、トップページではwebsiteを指定し、それ以外はarticleとするのが執筆時点のお作法のようですが、過去にはblogという種類も存在していたようで、今後変わる可能性があります。
要注意です。

articleには以下の詳細項目がありますが、Wordpressにもある項目やmiddleman-blogでの実装を考慮して、私なりに採用不採用を判断してみました。

種類 意味 採用
article:published_time 公開日時
article:modified_time 修正日時
article:expiration_time 有効期限
article:author 著者
article:section セクション(カテゴリ)
article:tag タグ ○ | 原文は

こちらで確認できます。

冒頭でも言いましたが、本ブログはWordPressのページ構成を参考にして、middleman-blogで構築していました。

タグやカテゴリなどの本文以外の情報を frontmatter(前付け) というYAMLフォーマットで設定しました。

こちらはとある記事の frontmatter です。

今回、articleの詳細項目に対応するfrontmatterを以下のように決めました。

種類 デフォルト 変数名
article:published_time Yes date
article:author No author
article:section No category
article:tag Yes tags

middleman-blogでデフォルトで用意されているFrontmatterの変数で対応するものは date と tags になります。

authorとcategoryは、私が決めた勝手項目になります。

まずauthorですが、現在のところ執筆者は私しかいないので、site.ymlというブログ共通の設定ファイルを作成してそこに定義しました。
複数のauthorが生じる場合はfrontmatterの設定を読み込むようにします。

続いてcategoryですが、運用上必ず設定するようにします。

また、カテゴリ一覧ページの生成は、独自項目のため、カスタム記事コレクションの機能を利用して行います。

ソースコードは以下になります。

published_timeはISO8601に準拠する必要があるため、時刻まで入れた 2014-05-12T01:08:28+00:00 のような形式で表示したかったのですが、記事作成にあたって時間まで記述するのは運用的に面倒と思われたので、日付けまでとしました。

og:image

記事であればそのアイキャッチ画像が適切でしょう。

サイトのメタ情報をまるっと設定したsite.ymlの内容とFrontmatterで設定した画像ファイル名の情報 eyecatch をつなぎあわせて実装します。

画像ファイルは images/eyecatch に配置し、frontmatterでファイル名を指定します。

アイキャッチ画像は ビジュアルを意識した ブログサイトでは不可欠と考えています。

このようなデザイナー目線の部分も、その生い立ちからかmiddleman-blogは弱い気がします。

また、アイキャッチ画像が設定されていない場合は、noimage.jpgを表示するように実装します。

og:url

cannonical URL なので、全く同じ値を設定しました。

DRY & DIE に反するのが気になるところです。。。

cannonicalが設定されていればそれを読むという仕様にしてくれればいいのに、と思いますが決まったことなのでこれ以上の文句は言いません。

本ブログ(middleman-blog)では、site.ymlというサイト全般の設定ファイルにドメインを定義して、その中で以下のように実装しました。

コードは執筆時点のもので、修正される可能性があります。

middelman-blogで集客を意識した制作をされている方の一助になれば幸いです。