このエントリーをはてなブックマークに追加

TinkererでOpen Graph Protocol(OGP)を使う

はじめに

Open Graph Protocol(OGP)

これだけは知っておきたいOGP (Open Graph Protocol)

http://nex.fm/ogp/

前から気になっていたのですが、このブログで使っている Tinkerer でのやり方が分からなかったので、放置してましたが、対応していた方がいらっしゃったので、試してみました。

このブログにOGPを設定した

http://misc.mat2uken.net/blog/2013/05/31/setting_ogp.html

やりかた

こちらを参考にしながらやってみました。

Tinkererでは、layout.htmlを作ることで、全体に対応した既存のテンプレートを拡張出来るみたいです。

_templatesディレクトリを作る

プロジェクト直下に _templates ディレクトリを作成します。

私の場合、既にはてブボタンや、twitterのボタンを追加する為に作っていました。

_templates/layout.htmlを作る

layout.htmlは作っていなかったので、以下のコードを記載して追加しました。

{% extends "!layout.html" %}

{% block extrahead %}

<meta property="og:title" content="{{ shorttitle }}" />
<meta property="og:description" content="{{ title|striptags|e }}" />
<meta property="og:url" content="http://grimrose.bitbucket.org/blog/html/{{ pagename }}{{ file_suffix }}" />
<meta property="og:image" content="http://grimrose.bitbucket.org/blog/html/_static/ogp_image_400x400.jpeg" />

{% endblock %}

index.htmlにも追加する

プロジェクト直下のindex.htmlにも設定しておくと、いいと思います。

今回は、以下のタグを追加しました。

<meta property="og:title" content="grimrose's tech log" />
<meta property="og:description" content="ホーム" />
<meta property="og:url" content="http://grimrose.bitbucket.org/" />
<meta property="og:image" content="http://grimrose.bitbucket.org/blog/html/_static/ogp_image_400x400.jpeg" />

Open Graph Object Debuggerで確認する

後は、buildして、pushして、確認します。

Open Graph Object Debugger

https://developers.facebook.com/tools/debug/og/object/

自分のブログの記事のURLを入れてください。

When shared, this is what will be included の箇所に表示されます。

間違いがあったりすると、いろいろ指摘されます。

まとめ

Tinkererは、あれこれやりたいなと思った時に拡張するためのポイントが最小限になっているのが、ありがたいですね。

このエントリーをはてなブックマークに追加