Middlemanでちゃんとsitemap.xmlを生成する方法

以前に簡単にMiddlemanでsitemapを動的に生成する方法という記事をエントリーしましたが、
本当に簡単なサイトマップで、priorityが固定だったり、lastmodがなかったりと手抜きな感じのサイトマップだったので、もう少しちゃんとした、sitemap.xmlを生成でるような設定のメモです。

Gemfileの追加

Gemfileに下記を追加して、bundle install

# https://github.com/jimweirich/builder
# sitemap.xml feed.xml
gem 'builder'

sitemap.xml.builderの作成

source/sitemap.xml.builder を下記のように作成します。

拡張子が.htmlのファイルに対してのサイトマップを生成していきます。

xml.instruct!
xml.urlset "xmlns" => "http://www.sitemaps.org/schemas/sitemap/0.9" do
  sitemap.resources.each do |resource|
    xml.url do
      xml.loc "http://example.com#{resource.url}"
      xml.lastmod File.mtime(resource.source_file).strftime('%Y-%m-%d')
      xml.priority (1.1 - resource.url.count("/") * 0.1).round(1).to_s
      xml.changefreq "daily"
    end if resource.destination_path =~ /\.html$/
  end
end

※ http://example.com部分は、環境に合わせて変更してください。

lastmod

ファイル自体の、最終更新時刻からlastmodを指定しています。

priority

priorityはroot直下の階層が1.0
2階層目が0.9
2階層目が0.8

と階層を追う毎に0.1づつpriorityが下がっていきます。

changefreq

changefreqは、上記の書き方では、daily固定になっています。
上記に合わせて、値を変更してください。

値	説明
always	毎回内容が更新
hourly	1時間毎に変更
daily	1日毎に変更
weekly	1週間毎に変更
monthly	月毎に変更
yearly	年毎に変更
never	基本変わらないページ

また、urlのpath等をみて、振り分けを行ってもよいと思います。

sitemap.xmlの作成

後は、以下を実行しれば、build/sitemap.xmlが生成されるので確認して、サーバーにアップしてください。

middleman b

簡単にMiddlemanでsitemapを動的に生成する方法

• • sitemap.xml.erbの生成
  • config.rbへの設定追加
  • まとめ
  • 参考サイト

Middleman環境で、動的にsitemap.xmlを動的に生成する方法です。

特に、gem等は利用せずに、erbファイルから生成する方法になります。
SEO的にも最低限 サイトマップは用意しておくべきだと思います。

以下がその手順になります。

sitemap.xml.erbの生成

source/sitemap.xml.erbを下記のように作成します。

<% pages = sitemap.resources.find_all{|p| p.source_file.match(/\.html/) } %>
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
pages.each do |p|
  <url>
    <loc>http://www.example.com/<%= p.destination_path.gsub('/index.html','') %></loc>
    <priority>0.5</priority>
  </url>
<% end %>
</urlset>

上記の場合、build時に生成される、htmlファイルにたいして、priorityを全て0.5を設定するようになっています。

必要があれば、pages.each do |p| の ループの中でディレクトリ名を見ながら、
以下の値を変更していってください。

<lastmod> 最終更新日
<changefreq> 更新頻度
<priority> 優先順位

sitemapのタグの定義方法に関しては、Goolge - サイトマップを作成する を参考ください。

config.rbへの設定追加

config.rbに以下を追加します。

page "/sitemap.xml", :layout => false

上記で、生成した、source/sitemap.xml.erbを元に、/sitemap.xml を生成してくれます。

ためしに、以下にアクセスして、saitemapが取得できれば成功です。

http://localhost:4567/sitemap.xml

まとめ

比較的簡単に、saitemapの生成が可能です。
細かく設定していこうとすると大変かもしれませんが、必要最低限のサイトマップの生成はできると思います。

参考サイト

http://benfrain.com/understanding-middleman-the-static-site-generator-for-faster-prototyping/

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'
---

Middlemanの多言語化(i18n)対応する方法

Middlemanで日英の多言語化にi18nで対応する方法です。

---

• config.rbの設定
• 対応ロケールのファイル作成
• テンプレートファイル作成
• 便利な使い方
  • 配列とeachの利用

---

公式ドキュメントは下記を参考にしてください。
Middleman 多言語化 (i18n)

config.rbの設定

activate :i18n, :langs => [:ja, :en]

langs配列に、仕様する言語を指定します。
先頭の物が、デフォルト設定されます。上記の記述であれば、日本語が優先されます。

http://localhost:4567/index.html で日本語ページ
http://localhost:4567/en/index.html で英語ページ

のようにアクセス可能になります。

対応ロケールのファイル作成

各ロケールのYAML形式のファイルを作成します。

日英のロケールファイルを作成する場合、/locales 配下に下記のファイルを作成します。

ja.yml 
en.yml

ファイルの内容は、

ja.yml

ja:
  title: "タイトル"

en.yml

en:
  title: "TITLE"

テンプレートファイル作成

多言語化するファイルは、/source/localizable 配下に配置します。

例えば、/source/localizable/index.html.erb を作成して、タイトルには下記のようにアクセス可能です。

<%= t('title') %>

上記をした場合、それぞのURLでは以下のように表示されます。

/index.html の場合

タイトル

/en/index.html の場合

TITLE

便利な使い方

配列とeachの利用

メニューなども多言語をしたい時に、ついでに配列に指定した値でループを回しながら、メニューを生成する方法です。

ja.yml

ja:
  menu:
    items:
      - name: '会社情報'
        href: '/outline/index.html'
      - name: '店舗情報'
        href: '/shop/index.html'
      - name: 'お問い合わせ'
        href: '/contact/index.html'

/source/localizable/_menu.html.erb

<ul>
  <% t('menu.items').each do |item| %>
      <li>
        <%= link_to item['name'], item['href'] %>
      </li>
  <% end %>
</ul>

以下のようなhtmlが生成されます。

<ul>
      <li>
        <a href="/outline/">会社情報</a>
      </li>
      <li>
        <a href="/shop/">店舗情報</a>
      </li>
      <li>
        <a href="/contact/">お問い合わせ</a>
      </li>
</ul>