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

2023-03-22-01-45-35.webp
目次

はじめに

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

SEO対策の一般知識

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

項目 内容
キーワードリサーチ 関連性の高いキーワードを見つけるためにGoogleキーワードプランナーなどのツールを使用する。
タイトルとメタデータの最適化 タイトルタグ、メタディスクリプション、H1タグなどのHTMLタグを最適化し、キーワードを適切に含める。
内部リンク ブログ内の関連記事へのリンクを適切に配置し、ユーザーが簡単に関連コンテンツにアクセスできるようにする。
外部リンク 信頼できるウェブサイトからリンクを獲得し、ドメインの権威性を向上させる。
コンテンツの質と量 高品質でオリジナルなコンテンツを定期的に投稿し、ユーザーに価値を提供する。
モバイルフレンドリー モバイルデバイスでの閲覧に適したデザインにすることで、モバイルファーストインデックスに対応する。
ページ速度の最適化 ページの読み込み速度を向上させる方法を検討し、ユーザー体験を向上させる。特にHugoを使用している場合に有利。
ソーシャルメディアの活用 コンテンツを共有し、リーチを広げることで、新規訪問者を増やす。
Google Search Consoleの使用 検索エンジンがサイトを正しくクロール・インデックスしているか確認し、検索パフォーマンスやエラー情報を入手する。
構造化データの導入 構造化データ(Schema.orgマークアップ)を導入し、検索エンジンがコンテンツを理解しやすくし、クリック率を向上させる。
類似性のあるコンテンツを特定して関連記事を表示する サイト内での回遊を促しつつ、検索クローラーによって記事DB化を促す効果があります。

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

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

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

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パフォーマンスとユーザー体験が大幅に向上するでしょう。

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

Related Post

> HugoでSEO対策を施し、関連記事機能を実装した
HugoブログをGithubActionを使ってS3サーバに差分アップする方法
> HugoでSEO対策を施し、関連記事機能を実装した
HugoでSEOスコアを改善するためにやったこと
> HugoでSEO対策を施し、関連記事機能を実装した
HugoでMobile端末向けのSEO対策を実践していく【画像の適正サイズ】
> HugoでSEO対策を施し、関連記事機能を実装した
Hugoで404ページを作る
> HugoでSEO対策を施し、関連記事機能を実装した
ブログでの使用画像をWebpフォーマットに変換してサイト軽量化する
> HugoでSEO対策を施し、関連記事機能を実装した
Nuxt.jsブログに全文検索機能を追加する方法

おすすめの商品

>