Hugoでブログ投稿リストページのタイトルにページ番号を追加する方法

一部の検索エンジンは、ウェブサイトにタイトルが同じであるページがあると気に入らないようです…

目次

ブログ投稿のリストページのタイトルに**ページ番号を追加する方法**を実装するには、リストテンプレートを変更する必要があります。

(通常は layouts/blog/list.html または layouts/_default/list.html にあり、場合によっては layouts/_default/baseof.html にも存在します)
このテンプレートで、現在がページネーションページであるかを検出する必要があります。その後、適切な場合にページ番号をタイトルに動的に追加します。

hugo-site-generator

一般的な説明

基本的なアイデアは、
Hugo
組み込みの paginator オブジェクトを使用し、ページ番号が1より大きい場合にのみページ番号を表示する条件付きレンダリングを行うことです。以下のように実装できます:

  1. paginatorにアクセスする
    リストページで .Paginator を使用してページネーションを処理します。
  2. 現在のページを確認する
    .Paginator.PageNumber を使用して現在のページ番号を取得します。
  3. タイトルの条件付きロジック
    • ページ1の場合、通常のタイトル({{ .Title }})を表示します。
    • ページ2以上の場合、" - Page X" をタイトルに追加します。

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>

有用なリンク