HugoでSEO対策を施し、関連記事機能を実装した

はじめに

ChatGPTの力を借りてSEO対策を施していきます。

SEO対策の一般知識

聞いたらごくごく一般的な回答が得られましたので、できるところから対策していきます。 これらのアイデアを実行し、ブログのSEO対策を改善していくことで、アクセス数の増加が期待できます。 最適な結果を得るためには、継続的な努力が必要ですが、これらの方法を取り入れることで、徐々に改善が見られるでしょう。

ありがたいお言葉をいただきましたので、愚直に実践していこうかと考えています。

といっても一度に全てに対して対応することは難しいのでこの中から対応できそうなものを実践していきます。

類似性のあるコンテンツを特定して関連記事を表示する

Hugoでは、類似性のあるコンテンツを特定して関連記事を表示する機能が組み込まれています。HugoのRelated Content機能を使用して、類似性の高い記事を見つけることができます。

Config.tomlの設定

config.tomlファイルに、[related]セクションを追加し、関連コンテンツの類似性を判断する方法を設定します。

[related]
  threshold = 0.1
  toLower = true
  includeNewer = true
  [[related.indices]]
    name = "tags"
    weight = 200
  [[related.indices]]
    name = "categories"
    weight = 100
  [[related.indices]]
    name = "date"
    pattern = "2006"
    weight = 10

thresholdを使い関連性のしきい値で、80% 以上の類似性がある記事が表示されます。 toLowerはタグやカテゴリの大文字小文字を無視するかどうかを指定します。includeNewerは新しい記事も関連記事として含めるかどうかを指定できます。

[[related.indices]]は、関連性の判断に使用するインデックスを指定します。 上記例では、タグ、カテゴリ、および日付に基づいて関連性を評価しており、weightはそれぞれのインデックスの重要度を指定します。

記事の関連コンテンツの表示

次に、関連コンテンツを表示する場所を指定するために、single.htmlを弄ります。 以下の例は、関連記事をリスト形式で表示する方法です。

コンテンツの下に追加してみましょう。

<div class="content post__content clearfix">
	{{ .Content }}
</div>
{{- if .Params.tags }}

<h3>関連記事</h3>
<ul>
  {{ range .Site.RegularPages.Related . | first 5 }}
    <li>
      <a href="{{ .Permalink }}">{{ .Title }}</a>
    </li>
  {{ end }}
</ul>

実行するとこんなふうに表示されます。

サムネイルを追加する

先程の例では関連記事のリンクとタイトルだけが取得できています。 そこにサムネイル画像を追加します。

まずはCSSを準備します。

			.related-posts {
		  display: grid;
		  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		  grid-gap: 20px;
		}
		
		.related-post {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		}
		
		.related-post img {
		  max-width: 100%;
		}

上記のCSSを適用するように、single.htmlを書き換えます。

		<h2>Related Posts</h2>
		<div class="related-posts">
			{{ range .Site.RegularPages.Related . | first 6 }}
			  <div class="related-post">
				<a href="{{ .Permalink }}">
				{{ $path := strings.TrimPrefix (printf "%s" ) .Permalink }}
				  {{ with .Params.coverImage }}
					<img src="{{$path}}{{ . }}" alt="{{ $.Title }}" />
				  {{ end }}
				  <h5>{{ .Title }}</h5>
				</a>
			  </div>
			{{ end }}
		  </div>

これで完成です。 ちなみに、.Params.imageは、各記事の冒頭に書いてあるタグ情報からアドレスを抜き取っています。

こんな感じですね。ここのimageから持ってきています。 動作させるとこのようになります。

まとめ

Hugoを使用すると、SEO対策や関連コンテンツの表示など、ブログ運営に役立つ機能が容易に実現できます。記事間の関連性やサムネイル画像の表示も簡単にカスタマイズできるため、ユーザーエンゲージメントの向上につながります。また、Hugoは高速な静的サイトジェネレータであるため、ページの読み込み速度も優れています。これらの要素が相まって、ブログのSEOパフォーマンスとユーザー体験が大幅に向上するでしょう。

これにて、関連記事の実装が完了です。お疲れ様でした。 次回も引き続きブログの改善を進めていきましょう。