blog

初めての Middleman シリーズ初めてのMiddleman:Middleman-OGPでMiddleman-BLogにOGPを設定する

    • Ryuichi Nonaka
    この記事は書かれてから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画像指定を相対パスで設定する

    シリーズ

    1. 初めてのMiddleman:rbenv, bundler 環境でMiddlemanを使ったHello World
    2. 初めてのMiddleman:レイアウト機能でレイアウトとコンテンツを分離する
    3. 初めてのMiddleman:パーシャルを使ったコンテンツのモジュール化
    4. 初めてのMiddleman:SCSSのコンパイルとテンプレートの基礎
    5. 初めてのMiddleman:Sass MixinライブラリのBourbon, Neatを導入してみる
    6. 初めてのMiddleman:データファイルとデータファイルを使った動的ページ生成
    7. 初めてのMiddleman:サイトにブログ機能を追加する
    8. 初めてのMiddleman:Amazon S3にビルドされたファイルを同期する
    9. 初めてのMiddleman:HTML/CSS/JS/画像をビルド時に圧縮する
    10. 初めてのMiddleman:設定について
    11. 初めてのMiddleman:静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ
    12. 初めてのMiddleman:Middleman::S3Syncで使うAWS IAMユーザーのアクセスキー管理方法について
    13. 初めてのMiddleman:Helperを使ってGravatarのアイコンを表示する
    14. 初めてのMiddleman:アセットパイプラインを使った外部アセットファイルの読み込みと結合
    15. 初めてのMiddleman:Bowerを使ってjQueryなどのライブラリをロードする
    16. 初めてのMiddleman:スケルトンを自作する方法
    17. 初めてのMiddleman:Middleman Blogの記事データを使いやすく管理する方法
    18. 初めてのMiddleman:Middleman-blogのシングルブログを前提としたSkeletonを作った
    19. 初めてのMiddleman:Middleman-blogでマルチブログを試してSkeletonを作った
    20. 初めてのMiddleman:Markdown EngineをkramdownからRedcarpetに切り替える
    21. 初めてのMiddleman:RedcarpetとMiddleman::Rougeを使ったシンタックスハイライト
    22. 初めてのMiddleman:Middleman-Syntaxを使ったシンタックスハイライト
    23. 初めてのMiddleman:Middleman-Blogで記事毎に画像を管理する方法
    24. 初めてのMiddleman:Gulpを使ってサムネイル画像を生成する
    25. 初めてのMiddleman:Middleman-OGPのOGP画像指定を相対パスで設定する
    26. 初めてのMiddleman:Middleman-OGPでMiddleman-BLogにOGPを設定する
    27. 初めてのMiddleman:Middleman-Titleでタイトルタグを手軽に設定する
    28. 初めてのMiddleman:多言語化 - 言語ファイルの作成とヘルパーの埋め込み
    29. 初めてのMiddleman:Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法
    30. 初めてのMiddleman:Bowerで管理されているフォントファイルをインポートする

    コメント・フィードバック