Hugo の internal template を使って OGP, twitter card を導入する

template 機能が非常に便利


Posted on Mon, Jan 14, 2019
Tags hugo, ogp, twitter

OGP (Open Graph Protocol) とは?

The Open Graph protocol にあるとおり、social graph にてその web page がどういった情報を持つのか決まったスキーマがなかったため、Open な仕様が作られたとのこと。

主に Facebook でのシェア向けに使われているイメージがあるが、SEO まわりで紹介記事がたくさんあるので、省略。

Open Graph とか聞くと、セマンティックWebとオントロジー:現状と将来展望 を思い出すのだが、Web ページに意味をもたせるといろいろ便利になるということなのだろう。

Hugo の internal template

Internal Templates | Hugo

_internal/disqus.html
_internal/google_news.html
_internal/google_analytics.html
_internal/google_analytics_async.html
_internal/opengraph.html
_internal/pagination.html
_internal/schema.html
_internal/twitter_cards.html

とあり、この中の _internal/opengraph.html と _internal/twitter_cards.html を

{{ template "_internal/opengraph.html" . }}
{{ template "_internal/twitter_cards.html" . }}

で読み込む。この template の中身は、hugo/tpl/tplimpl/embedded/templates にあるので、中身を編集したい場合は参考にできる。 

viva Hugo!