Middlemanでmetatagを設定する方法

• • layoutの編集
  • 各ページのFrontmatterの編集

MiddlemanでMetatagを設定する方法です。
通常のメタタグとオープングラフ、Twitter Cardも合わせて設定しています。

metatag用のGemもあるようですが、今回はそれは使わずに、
各ページのフォーマッタからメタ用の情報を設定したものを、親のレイアウトで受け取ることを想定しています。

layoutの編集

layoutのメタタグ部分を以下のように編集する。

  <title><%= (current_page.data.title).present? ? "#{(current_page.data.title)} | SITE NAME" : 'SITE NAME' %></title>
  <meta name="keywords" content="<%= data.page.keywords %>">
  <meta name="description" content="<%= data.page.description %>">
  <%# OGP %>
  <meta content="<%= data.page.og_title %>" property="og:title"/>
  <meta content="<%= data.page.og_type %>" property="og:type"/>
  <meta content="<%= data.page.og_description %>" property="og:description"/>
  <meta content="http://www.example.com/<%= data.page.og_url %>" property="og:url"/>
  <meta content="SITE NAME" property="og:site_name"/>
  <meta content="http://www.example.com/<%= data.page.og_image %>" property="og:image"/>
  <meta content="99999999999999" property="fb:app_id"/>
  <%# Twitter card %>
  <meta content="summary" property="twitter:card"/>
  <meta content="@xxxxxxxxx" property="twitter:site"/>

各ページのFrontmatterの編集

各ページのFrontmatter部分を以下のように編集する。

---
title: 'ページタイトル'
keywords: キーワード1, キーワード2, キーワード3
description: 'メタ説明。あああああああ'

og_title: 'OPG用ページタイトル'
og_type: 'website'
og_description: 'OPG用メタ説明。あああああああ'
og_url: 'index.html'
og_image: 'img/index/sample.png'
---