背景

twitterにdescriptionを設定したかった.

hakyllのteaser設定方法

hakyll公式のteaser設定方法はmoreをmarkdownに書くものである.

We use <!--more--> for this to mimic the WordPress convention:

Hakyll - Using teasers in Hakyll

手動でいちいち｢続きを読む｣部分を書くのは人間の行う作業ではないし, マークアップの流儀とも反している.

また, descriptionは文字列のサイズで適当に切り捨てられるので, 切り捨てをいちいち考えるのも面倒くさい.

手動で文章を綺麗に切り抜いたほうが, 美しいwebページを作ることは出来るのだろう. しかし, 手動で切り抜き部分を指定するのは, 私の美学に反する.

pandocで変換する

というわけで私のサイトでは, pandocにhtmlからplaintextに変換してもらい, そこから指定の文字数だけを切り取ることにした.

富豪的なやりかただが, hakyllのcacheは賢いため, 問題にはならない.

teaserFieldByResource :: Int -> String -> Snapshot -> Context String
teaserFieldByResource l key snapshot = field key $ \item ->
    take l . stripTags . trans . itemBody <$> loadSnapshot (itemIdentifier item) snapshot
  where trans h = either (error . show) id (writePlain def <$> readHtml def h)

twitterはopen graphに対応していた

teaserも無事に設定できたので, twitterのdescriptionを設定することにした. それまでは仕方がないのでtitleと同じものを設定していた.

そしてtwitter cardのドキュメントを見直したら, twitterが独自のtwitter card形式だけでなく, 標準のopen graph形式に対応していたことを知った.

既にオープングラフプロトコルを使用してページのデータを記述している場合は、タグやデータを複製しなくてもTwitterカードを作成できます。

スタートガイド — Twitter Developers

なので, 標準形式で対応してfacebookなどにも対応させた.

設定が正常かは以下のサイトでチェックした.

• Card Validator | Twitter Developers
• デバッガー - 開発者向けFacebook