【ご報告】OGPのメタタグを出力するようにしました【やっとかよ】

こなさんみんばんわ。
このWebサイトは開設してから15年ほど経ってて、あと1ヶ月くらいで16年目に突入するんですが、記事書きや管理に掛けた時間を足し算した実質的な活動期間は、その1/10くらいな気がします。涙

で、その15年の間にサイトを構築するためのプログラムをblosxom（懐）からJekyllへと移行してるんですが、その時に「これは後回しでもええかな」とか思って、OGPのメタタグを出力するコードを書いてなかったんですね。当時はもちろん「そのうちやるぞ」と思ってたのですが、その後すっかり忘却の彼方へ…涙

今まではそういうのをあまり重要視してなくて気にも留めてなかったのですが、それがここ最近はFacebookやTwitter¹など以外にも色々とSNSサービスが増えてきまして、んでそういった新しいSNSはなるべく早めにアカウントを確保して²URL共有のテストとかをしてみるんですが、まぁOGPが当たり前のように普及してる現在なので、この辺のSNSもURLを投稿したら普通にOGPを読んで、リンク先をうまいこと表示してくれるんですね。

そうやってテストする中で、自分のサイトのURLを共有したものを自分の目で見る機会が増えてきますと、やっぱり気になってくるんですね。「ああ、やっぱりこれでは見る側の目にも留まりにくいだろうな、このままじゃさすがにちょっとダメかも…」とか、次第に感じるようになってきました。

そんな訳で、最近ちょっと時間的な余裕が増えたこともあり、ここは思い立ったが吉日! とばかり、ちゃんと各ページにOGPのメタタグが出力されるようがんばってみました、という次第です。前置き長いわ! 涙

どうやって出力してますか?

「がんばった」とか書きましたけど、作業的にはあまり時間が掛かった訳でもないし、たいしたこともしてないですよ。期待せんといてください。涙

まずog:titleとog:descriptionについては、元々Jekyll Archivesプラグインを導入した際に、title要素や<meta name="description" …>のタグをページに合わせて出し分けるロジックをLiquid Tag化してましたので、そのプラグインにOGPのメタタグを出力する機能を付け足しました。具体的な実装コードはここでは省略します（ていうか、ここのコードはほぼすべてGitHubに公開してあるので、ご自由にお読みくださいませ）が、

{% auto_title ogp xml %}
{% auto_description ogp xml %}

テンプレートにこう書いたのが

<meta property="og:title" content="【ご報告】OGPのメタタグを出力するようにしました【やっとかよ】" />
<meta property="og:description" content="サイト構築用のプログラムをblosxomからJekyllに移行した時にOGPのメタタグ出力を実装してなかったのですが、最近「やっぱこれじゃちょっとダメかも…」とか思うようになってきたので、ようやく気合い入れて実装してみました、というお知らせです。" />

このように変換されます。ていうか、やり始めた時にあらためて自分で書いたプラグインを見返してみたら、すでにauto_description_tag.rbの方にはこれを実現するためのコードが書いてあったよ! 自分で書いてるはずなのに忘れてたよ! という訳で、もう一方にはほぼそれをコピペしただけですね。涙

og:imageについては、各記事に独自の画像URLを指定できなければ意味がないので、YAML front matterに

og:
  image: /images/path/to/custom-ogp-image.jpg

のようにパスを指定すれば、その画像のフルURLが出力されるようにしました。指定がない場合にはとりあえずデフォルト（共通）の画像URLを出力するようにしてありますが、適用されるのはトップページやアーカイブ系のページ、指定を書いてない古い記事だけになるでしょう。いや、そうなるようにがんばります。涙

og:typeについてはトップページにだけwebsiteを、それ以外はarticleを出力するだけなので簡単。あとはもうテンプレート直書きで済むものや、_config.ymlに書いた設定値そのままか、各種変数を組み合わせて出力するものだけですね。

で、以上のコードをogp.htmlというインクルード・ファイルにまとめて、ベースとなるレイアウト・ファイルで読み込んで完成です。だいたい半日くらいで終わりました。正直、ここまでこの報告エントリーを書くのに費やしてる時間の方が長いです。涙

という訳で

簡単にいうと、このサイト上のどのページをどこのSNSにシェアしても、いい感じに表示されるようになりましたよ、というお知らせでした。この記事も含めまして、どんどんSNSでシェアして拡散にご協力いただけると幸いです。
あっ、でもなるべくなら古いやつは避けてほしいです、オレの顔がそこら辺に貼られることになるので。涙