SEO対策とは、特定のキーワードで検索エンジンで検索した際、なるべく検索結果の上位に表示させるための取り組みのことです。しかしSEOを取り巻く環境は変化が速く、最新の動向で常に対策することは骨が折れると言えるでしょう。<h3 style="text-align: start" id="hd9e9561bff">SEO対策で評価を上げづらい時代</h3>SEO対策で評価を上げづらい要因には、主に２つの要因が考えられます。<blockquote><ol><li>年2～4回行われるGoogleコアアップデートによるルールの変化</li><li>デバイスやメディアの多様化など、外部要因による変化</li></ol></blockquote>『Googleコアアップデートにより評価指標が変わり、順位変動の影響を受けてしまう……』 『ユーザーが使用するデバイスやメディアの多様化により、基準とされるデバイスが変化した場合、サイト側で対応が必須になる……』そんな大変な思いをした方もいるかもしれません。直近ではレスポンシブ化についての変更がありました。　直近の変更について2019年7月から順次導入されたモバイルファーストインデックスにより、その数年前まではPCにのみ対応していたサイトが多かった中、モバイルにも対応したレスポンシブ化が必須となりました。<h3 style="text-align: start" id="h2a2b046cc2">SEO対策の普遍的な部分</h3>頻繁に変化しつづける外的要因やGoogleのコアアップデートに対応するのであれば、予算のある企業しかSEO対策ができないと思われるかもしれません。しかし、8年間SEO界隈の動向を見て感じたことは「SEO対策にも普遍的な部分」があるということです。<h3 style="text-align: start" id="h7787372d31">SEO内部対策について</h3>SEO内部対策について大きく２つに分けると「テクニカルSEO」と「コンテンツSEO」に分けることができます。　<blockquote>【テクニカルSEO】 検索エンジンに正しくWebサイトの情報を読み取ってもらうために、Webサイト側で行う施策。 （例）HTML/CSS記述の最適化、サイト設計や構造の最適化、ページスピードの向上、モバイルフレンドリーへの対応、UX（ユーザエクスペリエンス）の向上 【コンテンツSEO】 ユーザーが検索するキーワードに対して、掲載する情報の質を上げ、有益となるコンテンツを提供する取り組み。 （例）サイトデザイン、記事内容の充実（ブログメディアの場合）、画像や図解の挿入、UI（ユーザーインターフェース）</blockquote>　SEO内部対策とは、テクニカルSEOでサイトの基礎を固め、コンテンツSEOで質の高いコンテンツを提供し、ユーザーが必要とする情報を正しく提供するための取り組みのことを言います。次項では、多岐にわたるSEO内部施策の中から特に重要な施策をご紹介します。

01.変化し続けるSEOを取り巻く環境

<h3 style="text-align: start" id="h08f1b0fc69">title、description、h1タグについて</h3>タイトルタグ・メタディスクリプションは、Googleの検索結果画面に表示される要素です。検索結果の一覧からこの内容を見て、ユーザーはページを訪問するかどうかを判断します。タイトルタグは、検索エンジンが最重要視する要素なので、きちんと設定しましょう。 h1タグはページの大見出しに当たり、こちらもSEOの評価に重要な要素となります。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/a270a3d6ca6f4a80a823018b8640515a/1693363785352-1SSTzYkVQH.webp" alt="" width="1266" height="368"><figcaption>Google検索結果画像</figcaption></figure>【参考】タイトルタグ設定<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/f736108f98974585b23264a12a1e8043/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-28%20155011.png" alt="" width="619" height="142"></figure>【参考】h1タグ設定<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/a141c539df3c4d33baacd4b41a69a360/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-28%20155025.png" alt="" width="615" height="158"></figure>　<blockquote>▶title、description、h1タグの設定について<ol><li>タイトルタグの文字数は29～35文字で簡潔に、また検索上位表示を狙うキーワードを含める</li><li>ディスクリプションの文字数は50～120文字にする</li><li>h1タグはページのテーマとなる大見出しを設定し、imgタグやsvgタグを使う場合はalt属性やtitle要素でテキスト設定する</li></ol></blockquote>　上記の対応をしておかなければ他のSEO対策をどれだけ行っていても上位に表示されることはないので、必ず実施しましょう。<h3 id="h7701eae102">パーマリンクの設定</h3>パーマリンクとは、端的に言うとサイト内の各ページのURLのことです。サイトによって最適なサイト構造が異なるため、パーマリンク設定でユーザーにとってわかりやすく、またクローラーにも把握しやすいURLを設定します。パーマリンクがSEOの評価に直接影響するというよりは、ユーザビリティやクローラビリティが向上することにより、サイト評価を高めることが期待できます。　<blockquote>パーマリンク例 https://delicious-gohan.com/food/chinese/noodles/tantanmen/<a href="https://delicious-gohan.com/food/chinese/noodles/tantanmen/￼￼上記例は「"> </a>上記例は「  食べ物  ＞  中華料理  ＞  麺類  ＞  担々麺  」 とカテゴリを分類し、階層構造にしている</blockquote><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/ed2bd1b0ebb046b4a3b63e8d4b087311/1712628564878-FMruITy58g.webp" alt="" width="667" height="460"><figcaption>【参考】WordPressのパーマリンク設定画面</figcaption></figure><blockquote>▶パーマリンクの設定で意識すること<ol><li>ページ内容に応じた階層や分類をつけ、ユーザーにとってわかりやすいURL構造にする。ただし、目安は３階層までとし、階層が深くなりすぎないように注意する。</li><li>ページ内容に合った、わかりやすい単語をスラッグに設定する</li></ol></blockquote><h3 style="text-align: start" id="hce16a53fe7">URL正規化</h3>URL正規化とは、同じ内容のコンテンツにも関わらず別のURLが存在する場合に、クローラーに大元のページとなるURLを伝え、評価が分散しないようにすることを指します。 下記のようなケースで各URLでページが表示される場合、URL正規化を行わなければ別ページとして評価が分散したり、重複コンテンツとしてみなされる恐れがあります。<blockquote>【wwwの有無】<a href="https://www.m-hand.co.jp/">https://www.m-hand.co.jp/</a> <a href="https://m-hand.co.jp/">https://m-hand.co.jp/</a>【パラメータの有無】<a href="https://www.m-hand.co.jp&amp;job=direction">https://www.m-hand.co.jp&amp;job=direction</a> <a href="https://m-hand.co.jp/">https://m-hand.co.jp/</a>【ファイル名の有無】<a href="https://www.m-hand.co.jp/index.html">https://www.m-hand.co.jp/index.html</a> <a href="https://m-hand.co.jp/">https://m-hand.co.jp/</a>【末尾スラッシュの有無】<a href="https://m-hand.co.jp/">https://m-hand.co.jp/</a> <a href="https://m-hand.co.jp">https://m-hand.co.jp</a></blockquote>　次の３点の対応を行い、URLの正規化をしましょう。　<blockquote>【同一のコンテンツで別URLが存在する場合】 ▶「canonical」を設定して評価が分散しないようにする……※参考１ 【同一のコンテンツで多言語サイトやモバイルサイトが別に存在する場合】 ▶「alternate」を設定する……※参考２ 【同一のコンテンツで、既に異なるURLがインデックスされている場合】 ▶301リダイレクトを使用して統一したいURLにリダイレクトし、評価を引き継がせる</blockquote>　＜参考１：canonical設定例＞<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/650978b064a24f7da670e335f6d6925e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-28%20155043.png" alt="" width="617" height="88"></figure>＜参考２：alternate設定例＞<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/54df244b956e4e3e99df9276f41a9fac/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-28%20155103.png" alt="" width="616" height="105"></figure><h3 style="text-align: start" id="h681c493735">構造化マークアップ</h3>HTMLを使用した通常のマークアップとは別に、Googleが指定したフォーマットに沿ってページの構造を伝える構造化マークアップがあります。構造化マークアップによりGoogleがページの構造を正確に理解し、リッチリザルトへの表示など、検索結果画面の表示に影響することがあります。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/cac3a09c4b3a49ae955c8dcc8db20df7/1693372526552-jPEV0Uw3Yi.webp" alt="" width="467" height="179"><figcaption>【参考】リッチリザルト表示画像</figcaption></figure>構造化マークアップ記法はいくつかありますが、Googleが推奨しているのは「JSON-LD」記法です。【JSON-LD（ジェイソン・エルディ）を用いた記法　※推奨方式】<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/856a44afd4b94174803a6b357a2cb5f0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-28%20155116.png" alt="" width="614" height="570"></figure>【Microdata（マイクロデータ）を用いた記法】<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/5170e33bad66441999c27fb374e5042a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-28%20155336.png" alt="" width="614" height="322"></figure>構造化マークアップをすることにより、以下の効果が見込めます。<blockquote><ol><li>直接的なSEOへの影響はないが、Googleがページ構造を正確に理解することができるため、クローラビリティの向上が見込める</li><li>リッチリザルトに表示されるケースがあるため、表示回数・クリック数・クリック率の向上が期待できる</li></ol></blockquote><h3 style="text-align: start" id="hc9a996e1be">ページスピード</h3>ページの表示速度は、ユーザー体験に大きく影響を与えます。あまりにも表示に時間が掛かるページはユーザー体験を著しく低下させ、GoogleのSEOから悪い評価を受けるでしょう。技術の進化によりWebブラウザ上での表現が広がるなか、表示速度と表現のバランスを取り、質の高いユーザー体験を目指すことも制作者にとって重要なポイントです。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/8094ed40c8e44577896b97818c0b2f35/1693374241906-EshYTjoHbl.webp" alt="" width="469" height="806"></figure>ページスピードを改善させるには、以下のことを念頭に置いてください。<blockquote><ol><li>表現と表示速度のバランスを取り、製作者の独りよがりにならず、ユーザーにとって質の高い体験を提供することを忘れない  </li><li>コスト（時間）をかければ、ある程度まで改善を見込めるが、サーバーに起因したり、複数の問題が絡むこともあるため、工数の見積りが難しい  </li><li>Page Speed Insightの改善項目には、テキストリソースの圧縮など運用・管理等も踏まえて、あえて対策しない場合もある</li></ol></blockquote>ページスピード対策は時間と労力がかかるものです。100％対応できるとは言い切れないので、どこを落としどころにするかを判断して進めましょう。 【コアウェブバイタル】 2021年のコアアップデートにより、コアウェブバイタルの評価比重が高まりました。コアウェブバイタルには「LCP」「FID」「CLS」の3つの指標があります。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/2b1aafaef8264aac9739c4f81cd27300/1693374622594-eSfWASIyoC.webp" alt="" width="469" height="806"><figcaption>コアウェブバイタル表示画面</figcaption></figure><blockquote>▶コアウェブバイタル、３つの指標 ①LCP（Largest Contentful Paint ）：読み込み時間 LCPは、ページの読み込み時間に関する指標。ページの中で最も大きなコンテンツ（画像またはテキストブロック）のレンダリング時間を指します。 ②INP（Interaction to Next Paint）：インタラクティブ性 INPは、ページ内でユーザーが行動（クリック・タップ・キーボード操作）を起こした後、ページや文字が表示されるまでの時間を数値化したものを指します。 ③CLS（Cumulative Layout Shift ）：ロード時のレイアウトのズレ CLSは、ページの安定性を計測する指標。ロード時のレイアウトのズレや崩れが数値化され、ズレが大きいと誤タップが起きるなどユーザー体験を損ねてしまいます。</blockquote>　ページスピード・コアウェブバイタルの計測には、Googleが提供するPage Speed Insightを利用します。計測したいページのURLを入力すると各数値と改善項目が表示されるため、その内容に沿って改善を進めます。 ページスピードの改善は、同じ項目を改善してもサイトの作りやサーバーによって、数値の変動が大きく異なります。改善を行う際は、予算と工数を見合わせて根気強く対策を行いましょう。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/94092e67451f4336937d7ba423bcf1c1/1693376316906-0Tfd0vE5cJ.webp" alt="" width="469" height="806"><figcaption>Page Speed Insight</figcaption></figure>下記は過去に実際に行った改善内容の一部です。こういった内容でも改善が難しい場合は、サーバーやCMSといった大元から見直す必要も出てきます。　<blockquote>・画像フォーマットの最適化 ・画像サイズの見直し ・次世代フォーマットでの画像の配信 ・imgタグで画像サイズを明示する ・.htaccessにてgzip圧縮を設定する ・Webフォント使用の見直し ・画像や動画といったリソースの遅延読み込み ・テキストリソースの圧縮</blockquote>

02.テクニカルSEOを知る

<h3 style="text-align: start" id="h1a92606665">Webフォントの制限について</h3>Webフォントを使用するとページ表示速度が遅くなると言われているが、使用する場合はどれくらいのフォント数がいいのか？<ul><li>Webフォントの場合、特に日本語フォントは重いので使用には気を付ける</li><li>ウェイトも含めて２種類くらいが理想</li><li>Page Speed Insightsを使用して検証した場合、GoogleのWebフォントを使用するとNGになってしまうことも……。</li><li>他サービスが提供しているWebフォントを使用することも一つの選択肢（モリサワ、FONTPLUS等）</li></ul><h3 style="text-align: start" id="haa84b5f71c">caronicalとnoindexの関係について</h3>noindexとcaronical、それぞれ似た意味を持つ属性だが、どのような使い分けをすればよいのか？<ul><li>noindexは強制。検索結果に表示させたくないページには必ずつける。</li><li>caronicalには強制力はない。『似たようなページがあるので一方のページで評価してほしい』とGoogleに対してメッセージを送っているイメージ。ユーザーにとって不利益ではないけれど、重複コンテンツだと思われる物に使用するという温度感。</li><li>index、caronical、同時使用もOK。</li></ul><h3 style="text-align: start" id="h90b44e54aa">パーマリンクのスラッグについて</h3>スラッグが未設定の場合に日本語が代入されてしまうが、英字のほうがよいのか？英字URLの方が、誰にでもわかりやすい表記になる。 記事の内容によっては、英字スラッグでなくpostIDのような数字を設定する方がよい。 （例：お知らせ→postID　スタッフ紹介ページ→英字スラッグ）スラッグの設定については、人によって見解が異なる。 postIDのような数字URLの場合、記事のタイトル変更の場合にURLを変更する必要がないので、既存のページ評価を継承させられる。<hr>おわりに今回の資料を通して、ディレクターの知識の底上げとともに、フロントエンドエンジニアが日ごろ取り組んでいる一端を紹介しました。フロントエンドエンジニアは、ひと昔前に考えらていたような決められた仕様やデザインをただ再現するだけのポジションではなく、ブラウザやデバイスの進化など世の中の変化に柔軟に対応し、広がり続ける表現の幅に遅れをとらず、進歩し続けています。日々、ともに制作に携わってくれている社内エンジニアに感謝し、世の中のフロントエンドエンジニアにリスペクトを込めて。これからもエンジニアの目線を持つディレクターとして知識の共有を続けていきたいと思います。最後までお読みいただきありがとうございました。

SEO内部対策を理解する

01.変化し続けるSEOを取り巻く環境

02.テクニカルSEOを知る

03.質疑応答

Related Blogs

Webディレクションは冒険そのもの／中堅ディレクターが語る実践の成功法

異業種からのWebディレクター転職で役立ったWeb以外のスキル

仕事の段取り術

ペルソナ設計について