Hugoでブログ投稿リストページのタイトルにページ番号を追加する方法
一部の検索エンジンは、ウェブサイトにタイトルが同じであるページがあると気に入らないようです…
ブログ投稿のリストページのタイトルに**ページ番号を追加する方法**を実装するには、リストテンプレートを変更する必要があります。
(通常は layouts/blog/list.html または layouts/_default/list.html にあり、場合によっては layouts/_default/baseof.html にも存在します)
このテンプレートで、現在がページネーションページであるかを検出する必要があります。その後、適切な場合にページ番号をタイトルに動的に追加します。
一般的な説明
基本的なアイデアは、
Hugoの
組み込みの paginator オブジェクトを使用し、ページ番号が1より大きい場合にのみページ番号を表示する条件付きレンダリングを行うことです。以下のように実装できます:
- paginatorにアクセスする:
リストページで.Paginator
を使用してページネーションを処理します。 - 現在のページを確認する:
.Paginator.PageNumber
を使用して現在のページ番号を取得します。 - タイトルの条件付きロジック:
- ページ1の場合、通常のタイトル(
{{ .Title }}
)を表示します。 - ページ2以上の場合、
" - Page X"
をタイトルに追加します。
- ページ1の場合、通常のタイトル(
Hugoテンプレートの例(list.html のパーツや baseof.html の `` タグ内に使用):
{{ .Title }}{{ if gt .Paginator.PageNumber 1 }} - Page {{ .Paginator.PageNumber }}{{ end }}
または、実際のページマーカップ内では:
{{ .Title }}{{ if gt .Paginator.PageNumber 1 }} - Page {{ .Paginator.PageNumber }}{{ end }}
注意点:
.Paginator
が利用可能な場合(セクション、タクソノミーなど)、この方法はページネーションリストページで動作します。.Paginator.PageNumber
は現在のページ番号を返します。- ページ1には
"Page X"
を追加しないようにしてください。
参考資料:
- Hugoのリストとページネーションガイドでは、
.Paginator.Project
と動的なヘッダーの使用が推奨されています。 - ブラウザタブ(つまり
<title>
)に表示するか、ページ内ヘッディングに表示するかによって、配置場所を調整してください。
SEOのためにHTMLの <title>
要素にページ番号を表示したい場合は、HTMLのhead部分(通常は layouts/_default/baseof.html)に上記のロジックを配置してください。視覚的なページヘッディングに表示したい場合は、セクションタイトルを出力する場所に配置してください。
公式のショートコードは存在しません。これは、Hugoのテンプレートを直接使用して設定するパターンです。
MainRoadテーマの変更
このサイトでは現在、Mainroadテーマを使用しています。
このサイトのブログ投稿インデックスページのSEOを改善するために、ブログ投稿インデックスページのタイトル生成を以下のように修正しました:
<title>{{ block "title" . }}{{ if .IsHome }}{{ .Site.Title }}{{ if and (eq .Kind "home") .Paginator (gt .Paginator.PageNumber 1) }} - Page {{ .Paginator.PageNumber }}{{ end }}{{ else }}{{ .Title }}{{ if and (in (slice "section" "taxonomy" "term") .Kind) .Paginator (gt .Paginator.PageNumber 1) }} - Page {{ .Paginator.PageNumber }}{{ end }} - {{ .Site.Title }}{{ end }}{{ end }}</title>