Hugo を使った個人サイトの作り方 11 OGP、ツイッターカード、favicon

tech 1752字：読了まで約3分14秒

Hugo アイキャッチ画像

前回はHugoの分類機能（Taxonomy）の仕上げを行いました。今回はOGP、ツイッターカード、faviconなど、今どきのサイトで必要とされる外部へのアピール機能を設定します。

OGP(Open Graph Protcol)とツイッターカード

OGP画像を作成する

Twitter,FacebookなどのSNS上でシェアされたときに、ページの概要をヘッダー画像とともに出力する、令和のリンクバナー的な存在です。あらかじめ画像を用意して、それを個々のページからMetaタグで指定してやる形になります。

OGPの画像作成サイズについては以下のサイトを参考にしました。840px × 1200px で作成し、各SNSでのトリミングに対応するため中央(630px × 840px)にロゴなどの重要な情報が収まるようにする、という具合です。

OGP画像シュミレータでの結果

hugo.tomlの設定を行う

サイト全体の画像や概要をhugo.tomlより以下のように設定します。

[params]
images = ["画像へのパス（./static/基準）"]
description = "aouma によるBoysLove小説を展示するR18サイトです。オリジナルBL「終わりの後の夜物語」・創作戦国(毛利家中心)、二次創作もあります。"

image="画像パス"の中にstaticフォルダからの画像パスを、description="概要"にはサイト概要を、という具合です。

ちなみに、個々のmarkdownファイルのFront Matterから個別で設定することもできます。このサイトでも小説に関係ないブログ記事などには上書き設定をしています。

description : "静的サイトジェネレーターHugoを用いた令和の小説同人サイトの作り方。テーマを自作し、個性ある使いやすいサイトを目指す。11回目はOGP、ツイッターカード、faviconなど外部アピールの設定"
images : ["./img/daily/hugo-eyecatch.png"]

内部テンプレート機能を利用する

Hugoにはいくつかの機能が標準で内部テンプレートとして埋め込まれています。OGPやツイッターカードなどもその一つです。（hugo/tpl/tplimpl/embedded/templates at master · gohugoio/hugo · GitHub）

以下の二行をテンプレートのHead部分に埋め込むことで利用できます。

./themes/Museum/layouts/partials/head.html

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

次に、Headタグにprefixの記述を追記します。

<head prefix="og: https://ogp.me/ns#">

表示を確認する

ツールを使って表示確認します。

faviconの設定

favicon とは、お気に入り追加時やブラウザーのタブなどに表示されるサイト独自のアイコンのことです。Hugoからは離れますが、あった方が可愛らしいので設定していきます。

基本的には2023年版、HTMLによるファビコン設定方法、さまざまなブラウザやデバイスに対応させる最小限のセットは6種類のファイルが必要 | コリス で紹介されている画像ファイルを用意すればよいでしょう。

  1. icon.svg (ラスター画像)
  2. favicon.ico (svg形式未対応ブラウザー用)
  3. PNG画像（スマートフォン等の画面タッチ用。512×512、192×192、apple-touch-icon.pngの三種類）
  4. manifest.webmanifestファイル（設定用JSONファイル）

これらを全て用意します。様々なファビコンを一括生成。favicon generator が助けになるでしょう。

その後はHTMLのHead要素内に記述を加え、ファイルをサーバートップに置きます。Hugoならテンプレートで楽々です。

./themes/Museum/layouts/partials/favicon.html

1 <link rel="icon" href="{{ "/favicon.ico" | relURL }}">
2 <link rel="icon" href="{{ "/icon.svg" | relURL }}" type="image/svg+xml">
3 <link rel="apple-touch-icon" href="{{ "/apple-touch-icon.png" | relURL }}">
4 <link rel="manifest" href="{{ "/manifest.webmanifest" | relURL }}">

次回はRSSやSitemap、検索エンジン避けなどのSEO対策について扱います。

関連記事