サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2>はじめに</h2>

<blockquote>
この記事は&nbsp;<a href="https://qiita.com/advent-calendar/2021/dmm" target="_blank">Calendar for DMMグループ Advent Calendar 2021 | Advent Calendar 2021 - Qiita</a>&nbsp;の2日目の記事です。
</blockquote>

前日：<a href="https://inside.dmm.com/entry/2021/12/01/connecting-business-engineering">事業をスケールさせるエンジニアリング〜技術のコモディティ化にエンジニアは敗北する〜</a>&nbsp;<a href="https://twitter.com/i35_267" target="_blank">@石垣 雅人さん</a> 
翌日：terraformでどこまでやる？運用を見据えた部分的な管理アプローチのすゝめ @飯田 涼太さん

こんにちは。光岡高宏(<a href="https://twitter.com/mitsuoka0423" target="_blank">@mitsuoka0423</a>) です。 
DMMブックスのサーバーサイドエンジニアとして働いており、最近SEO対策に集中して取り組んでいます。

今回は現在進行形で実施している、DMMブックスの商品一覧ページへのSEO対策の一つである「URLの再設計」について紹介します。

<h2>まずはDMMブックスの商品一覧ページを紹介</h2>

商品一覧ページは、<code>DMMブックス上の全商品をジャンル名・価格などでフィルタし、その結果をリスト形式で表示する機能</code>を持つページです。 
フィルタの条件は、サイトバーのファセットナビゲーションから設定することができます。

<img alt="" height="353" src="https://image.dmm-corp.com/ji8y8tokl8hnqb3sxaa9lrvom6r4" width="600" />

&nbsp;

<center style="text-align: center;">商品一覧ページのイメージ</center>

この手のフィルタ機能を持つページは、SEOを意識して設計しないと重複コンテンツの問題が発生しやすいため要注意です！

<h2>商品一覧ページのSEO対策ポイント</h2>

商品一覧ページのSEO対策では、以下の課題を解決するためにURLの再設計(フィルタ条件に対応するクエリ文字列の整理)を行なっています。

<ul>
	<li>フロアごとに商品一覧ページが存在していて、SEO的価値が分散している</li>
	<li>1つのフィルタ結果にアクセス可能なURLが複数存在していて、1URL1コンテンツの原則に反している</li>
	<li>パラメータが複雑でわかりにくい</li>
</ul>

<h3>フロアごとに商品一覧ページが存在している</h3>

DMMブックスには<code>フロア</code>という概念があります。大きいカテゴリのようなもので、フィルタ条件では<code>floor</code>を指定します。

<img alt="" height="419" src="https://image.dmm-corp.com/j12ltjcdkuo2wu43z9mr18q0vxs7" width="600" />

男性コミックフロアページのイメージ

&nbsp;

<center>&nbsp;</center>

&nbsp;

フロアページはサイト構造上、トップページの次に位置し、サイト構造に大きな影響を与えています。

DMMブックスのサイト構造イメージ

<pre>
<code>トップページ
 + フロアページ(男性コミックフロアページ、女性コミックフロアページ など)
 + 商品一覧ページ(異世界系ジャンルでフィルタしたページ など)
 + 商品詳細ページ</code></pre>

現状、商品一覧ページはフロアページの下のレベルとして実装されています。 
これにより困ったことが発生します。商品一覧ページが最大でフロアの数だけ存在してしまいます。

<pre>
<code>男性コミックフロアの異世界系: https://book.dmm.com/list/comic/?floor=Gcomic&amp;article=genre&amp;id=91775
文芸・ラノベフロアの異世界系: https://book.dmm.com/list/novel/?floor=Gnovel&amp;article=genre&amp;id=91775
女性コミックフロアの異世界系: https://book.dmm.com/list/comic/?floor=Gcomicf&amp;article=genre&amp;id=91775
など</code></pre>

本来の機能としては、全商品から異世界系ジャンルでフィルタすることができ、そのうえで男性コミックや女性コミックでさらに絞り込むことができるのが理想ですが、現状では全商品から異世界系ジャンルをフィルタすることができません。

SEOの観点では、異世界系の商品一覧ページが複数存在するため、<code>マンガ 異世界系</code>などのキーワードで検索された場合に、表示すべきページが複数存在することになるため、SEO的価値が分散してしまっていると言えます。 
また、正規URLとなるページも存在しないため、canonicalを設定することができない状況です。

<h3>1つのフィルタ結果にアクセス可能なURLが複数存在している</h3>

商品一覧ページのフィルタ機能は、URLのクエリ文字列と連動しています。 
例えば、<code>異世界系</code>ジャンルの商品をフィルタした場合、以下のURLとなります。

<pre>
<code>https://book.dmm.com/list/comic/?floor=Gcomic&amp;article=genre&amp;id=91775</code></pre>

<code>91775</code>は異世界系ジャンルに割り振られているIDです。 
<code>article</code>に<code>genre</code>、<code>id</code>に<code>91775</code>を指定する = 異世界系ジャンルでフィルタする、ということになります。

DMMブックスには、<code>n系パラメータ</code>と呼ばれるフィルタ条件を汎用的に設定できるパラメータが用意されており、こちらでも異世界系ジャンルを指定することができます。

<pre>
<code>https://book.dmm.com/list/comic/?floor=Gcomic&amp;n1=DgRJTglEBQ4GgqSI147w0PTp0YWL</code></pre>

こちらにアクセスすると、実は前述の<code>article</code>と<code>id</code>のURLと全く同じコンテンツが表示されます。 
このため、1URL1コンテンツの原則に反してしまっています。

<h2>商品一覧ページのパラメータを再設計する</h2>

前述の課題を解決するために、商品一覧ページのフィルタ条件を指定するパラメータを再設計することにしました。

課題に対する解決策は以下の通り。

<ul>
	<li>フロアごとに商品一覧ページが存在していて、SEO的価値が分散している
	<ul>
		<li>--&gt;&nbsp;<code>フロア</code>を任意指定に</li>
	</ul>
	</li>
	<li>1つのフィルタ結果にアクセス可能なURLが複数存在していて、1URL1コンテンツの原則に反している
	<ul>
		<li>--&gt;&nbsp;<code>n系パラメータ</code>を使用不可に。通常のパラメータ指定に変換</li>
	</ul>
	</li>
	<li>パラメータが複雑でわかりにくい
	<ul>
		<li>--&gt;&nbsp;<code>article</code>パラメータの記述をシンプル化</li>
	</ul>
	</li>
</ul>

<h3>articleパラメータの記述をシンプル化</h3>

<code>article</code>パラメータは、過去の実装に引っ張られて使用していましたが、本来は不要なものです。 
パラメータの形式をややこしくしている原因の一つでしたので、パラメータのシンプル化に伴い撤去しました。

<pre>
<code>before
 https://book.dmm.com/list/comic/?floor=Gcomic&amp;article=genre&amp;id=91775

after
 https://book.dmm.com/list/comic/?floor=Gcomic&amp;genre=91775</code></pre>

これでURLが少し綺麗になりました。

<h3>フロアを任意指定に</h3>

今まで必須パラメータであった<code>floor</code>の指定を任意に変更しました。 
(<code>floor</code>が指定されていない場合は、全商品からフィルタするようにしました)

<pre>
<code>before
 男性コミックフロアの異世界系: https://book.dmm.com/list/comic/?floor=Gcomic&amp;genre=91775
 文芸・ラノベフロアの異世界系: https://book.dmm.com/list/novel/?floor=Gnovel&amp;genre=91775
 女性コミックフロアの異世界系: https://book.dmm.com/list/comic/?floor=Gcomicf&amp;genre=91775

after
 全商品の異世界系: https://book.dmm.com/list/?genre=91775</code></pre>

URLがだいぶ綺麗になり、どういう条件でフィルタしてるのかがぱっと見てわかるようになってきました。

<h3>n系パラメータ使用禁止。</h3>

<code>n系パラメータ</code>は内部にフィルタ条件を保持しているため、理論的に<code>?genre=xxxxx</code>の形に変換可能です。 
パフォーマンスチューニング面で苦労した点があるのですが、DMMブックスの内部的な実装の話になるため今回は省略します。

正規URLにcanonicalを設定してもよいのですが、1URL1コンテンツの原則に反する原因になりやすいので、使用禁止にしました。

<pre>
<code>before
 https://book.dmm.com/list/?n1=DgRJTglEBQ4GgqSI147w0PTp0YWL

after
 https://book.dmm.com/list/?genre=91775</code></pre>

<h2>まとめ</h2>

DMMブックスでは商品一覧ページのURLを整理することで、1URL1コンテンツの原則を守り、またURLをシンプルにする取り組みを実施しています。 
今後も継続して検索順位の改善に取り組んでいきます。

SEO対策で商品一覧ページのURLを再設計している話

シェア

関連する求人

関連する記事

関連するサービス