🔍

検索エンジン最適化（SEO）について

2023/08/01に公開

HTML

はじめに

より良いコンテンツや記事を作成することは時間が掛かりいます。例えば私はブログの記事を作成する際に少なくても3時間、長くて1日ほど掛かります。なるべく分かりやすく説明したいからです。

WEBアプリケーションの開発も同じだと思います。UIとUXを考える、JavaScriptのロジックの最適化する、CDNを利用して静的リソースを提供するなどユーザーを満足させるため時間を割きます。

但し、一つの問題があります。ユーザーがせっかく作ったWEBアプリケーションを見つからないことです。ユーザーの接続（トレピック）がなかったら、どれだけ良いアプリケーションだとしても努力が無駄になってしまいます。

ユーザーはオンライン広告や検索エンジンの検索を利用して私たちのアプリケーションに接続します。今回は検索エンジン上でユーザーがWEBアプリケーションをより簡単に検索して使用できる戦略になるSEOについて勉強したいと思います。

SEO, Search Engine Optimization

検索エンジン最適化(Search Engine Optimizaion、SEO)のWikipediaの説明です。

検索エンジン最適化とは、検索エンジンのオーガニックな検索結果において、特定のウェブサイトが上位に表示されるよう、ウェブサイトの構成や記述などを調整すること。また、その手法の総称。

検索エンジン最適化は検索エンジン（Google、Yahooなど）からWEBアプリケーションを検索エンジン向けに改善するプロセスです。

検索エンジン

Google、Bing、Yahooなどの検索エンジンはキーワードというユーザーの検索語を基板でインターネットから検索できるように設計されたツールです。検索エンジンにキーワードを入力すると検索エンジンはクロールして探してインデックスを登録したページを検索結果として表示します。
世界の検索エンジンの2022年6月から2023年6月までの占有率は以下になります。

Search Engine Market Share Worldwide（June 2022 - June 2023）
やっぱりGoogleが一位🥇を占有してました。なので、今回はGoogleの検索エンジンを基準で説明いたします。

検索の三つのステージの流れ

検索エンジンに引っかかってユーザーの検索結果に表示されるまでは以下のステップを従います。

クロール: クローラーと呼ばれる自動プログラムを使用して、ウェブ上で見つけたページからテキスト、画像、動画をダウンロードします。
インデックス登録: 見つけたページ上のテキスト、画像、動画ファイルを解析し、その情報を Google インデックス（大規模なデータベース）に保存します。
検索結果の表示: ユーザーが Google で検索すると、Google はユーザーの検索語句に関連する情報を返します。

クロール

全てのWEBページが登録されるデータベースがないため、検索エンジンは新しいページや更新されたページを把握して検索エンジンのデータベースに保存しないといけないです。このようなプロセスをURL検索だと言います。
このURL検索はクローラーというボットを利用して収集します。収集する時にはアルゴリズムを従って収集するし、サイトの設定による収集されないページもあります。
このように、クローラーが自体データーベースをアップデートするために、WEBページを訪問することをクロールだと言います。
この時に必要に応じてJavaScriptを実行します。但し、検索エンジンボットはサイトをクロールする際に制限された時間があるため、CSRによるサイトが遅く表示されたら、WEBページをクロールできない場合もあります。なので、SEOに関してはSSRをおすすめする理由です。
それと、ページに訪問して内容を読みます。読むということはHTMLコードを検査して、JavaScriptを実行してページをレンダリングし、他のページのリンクがあるか読むことです。
ちなみに、検索エンジン結果に表示したくない場合はメタタグを利用してクロールできないよう設定できます。

インデックス登録

ページがクロールされたらページの内容を把握します。この段階をインデックス登録だと言います。
この時に要素、イメージ、動画、テキストなどのコンテンツを分析します。それと重複されたり関係ないテキストを識別して除外します。
それとページの品質も評価します。ページのレイアウトがユーザーに優しいか、ロード時間が早いか、タグを適切に使ってるかなどの評価をしてコンテンツを収集します。

検索結果への表示

ユーザが検索キーワードを入力するとインデックスに登録されてるページを検索した後コンテンツの品質が一番良いコンテンツと関連性が大きいと判断される結果を返します。
結局、SEO最適化をする理由は限定されてる検索結果ページ（Search Engine Result Page, SERP）の上位に表示するためです。
SERPの上位に位置させるためには、様々な方法がありますが、高品質のコンテンツ、WEBサイト最適化、関連キーワード使用、セキュリティー強化（HTTPS）、バックリンク、メタタグなどの方法があります。

SEOが重要な理由

例えば、開発用の新しいパソコンが必要な場合どのような行動をしますか？周りの開発者に使ってるパソコンの情報を聞いたり、WEBサイトやYoutubeでレビューを見たり、価格と性能を比較したりします。このように積極的に購入するパソコンを探す段階をZMOT段階（Zero Moment of Truth）だと言います。
ZMOTは2011年にGoogleが発表した概念として、PC、スマホ、タブレットの使用で購入する前にネットから情報を取得することです。
なので、ZMOTは検索エンジンで行われるので、検索エンジンの上位に表示されることは実際の収益に連結されます。なので、SEOが重要になりました。

SEO最適化方法

検索エンジンのアルゴリズムは把握しにくいですが、以下の方法を使用してSEO最適化することができます。

ページのロード速度改善
Sitemap
robots.txt
Core Web Vitalsとページのロード速度改善

ページのロード速度改善

ページのロード速度はユーザーエクスペリエンスとSEOに最も重要なことです。以下の方法を利用してページのロード速度を改善できます。

HTTPのリクエスト最小化

ページのロードではイメージ、CSS、JavaScriptなどをダウンロードするに時間が掛かります。必要な部分だけロードして不要な部分は削除する方が良いです。

Content Delivery Network（CDN）を使用

インターネットの資産は実際に物理的に連結されてるので、物理的に近いサーバからデータを取得するほどダウンロードの速度が速いです。なので、CDNを使用して待機時間を短縮して通信遅延を減らす方が良いです。

イメージ圧縮、最適化

大きいほど容量が大きくなってダウンロードに時間が掛かります。ツールを利用して画像サイズを修正や効率的な圧縮方法を使用する方が良いです。

キャッシュ使用

キャッシュを使用してクライアント側に資産を保存しておくと、クライアントがあらためて接続した際にダウンロードしなくても良いので、ロード速度が速くなります。

HTML、CSS、JavaScriptのMinify

コードを最適化（空白、コメントアウトなど削除）をしたらページ速度を改善できます。
上記以外もコードリファクタリング、CSS、JavaScriptの非同期ロードなど色んな方法があるので、プロジェクトに合わせて必要な方法を実装するとページのロード速度が改善できると思います。

Sitemap

サイトマップとは、サイト上のページや動画などのファイルについての情報や、各ファイルの関係を伝えるファイルです。
検索エンジンに提出して、より効率的にクロールできるようにする役割です。
Sitemapでは検索結果に出したいURLの内容、動画の長さ、同級、カテゴリ、イメージの位置、形式、ニュースのタイトルや掲示日時などを含めることができます。
サイトのボリュームが大きい、外部に連結されるリンクが多い、ニュース、動画、イメージが多いサイトであれば考慮する方が良いです。
Sitemapの目的はクローラーに情報を提供することで、必須ではありませんが、SEOの改善に役になるので追加する方が良いです。

robots.txt

クロール可能状態を設定しないといけないです。robots.txtファイルはクローラーがWEBサイトをクロール可否を表示します。robots.txtを使用してクローラーがアクセスできるファイルを制御できます。robots.txtはWEBサイトのルートに位置させます。

User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /

Sitemap: https://www.example.com/sitemap.xml

上記のrobots.txtの内容は以下になります。

Googlebot という名前のユーザーエージェントには、https://example.com/nogooglebot/ で始まるいかなる URL のクロールも許可していません。
他のすべてのユーザーエージェントには、サイト全体のクロールを許可しています。このルールは記載していなくても同じ結果になります。デフォルトの動作として、全てのユーザーエージェントはサイト全体のクロールを許可されているためです。
サイトのサイトマップファイルは https://www.example.com/sitemap.xml にあります。
User-agent、Disallow、allow、sitemapなどのを使用して特定なページを制御することができます。
User-agnet : 検索エンジンクローラーの名前を指定して、どのような検索エンジンのルールか指定する。
Disallow : 該当するパスはクロール拒否する。
allow : 該当するパスはクロール認可する。
sitemap : Sitemapの位置。

Core Web Vitalsとページのロード速度改善

Core Web Vitals は、ページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性に関する実際のユーザーエクスペリエンスを測定する一連の指標です。LCP、FID、CLSという三つの項目に構成されてます。

Largest Contentful Paint(LCP)

LCPはユーザーからページをリクエストした後最も大きいコンテンツ（画像やテキストブロック）をレンダリングするにかかる時間です。ページをロードするのに時間が掛かったらとユーザーが離れます。

レベル	時間（s）
良い	2.5秒以下
改善が必要	4.0秒以下
悪い	4.0秒超過

First Input Delay(FID)

ユーザがページとやり取りを開始した後から作業が実際に実行されるまでの時間です。
例えばボタンやリンクをクリックして反応するまでの時間になります。この作業で時間が掛かったら、ユーザーはページに問題があると思って離れます。

レベル	時間（ms）
良い	100秒以下
改善が必要	300秒以下
悪い	300秒超過

Cumulative Layout Shift(CLS)

ページがロードされる時にどれだけの要素が移動するかを測定します。ものが移動しすぎると、ユーザが混乱になってしまい離れます。

レベル	数値
良い	0.1以下
改善が必要	0.25以下
悪い	0.25超過

メタタグの使用

メタタグはページのコンテンツを説明するテキストです。ページでは表示されませんがページのソースコード上ではあります。メタタグは検索エンジンがページの内容を把握する時に役になリマス。
全てのWEBページに適切なメタタグを追加する方が良いです
<title>、<meta>などがあります。

`<title>`

<title>はブラウザーの題名バーやページのタブに表示される文書の題名に表示されますが、この機能以外もSEOとして重要です。<title>はSERPから最初に認識することなので、ページのコンテンツに対して適切な内容が必要です。

サイト上の全てのページに<title>要素を設定します。
要素の内容としては具体的し分かりやすいテキストをお勧めします。ただし、反復なキーワードは避ける方が良いです。
検索エンジンは一般的に英語基準55~60文字を表示するので、これ以下の方が良いです。

meta description

meta descriptionタグはHTMLのhead中に存在して、WEBページのコンテンツに対する説明を提供することができます。

<meta name="description" content="...">

Googleはmeta descriptionを使用して検索結果に表示するので、検索順位としては関係ないですが、間接的なクリック率を上げるので、SEOに役になります。
長さとしては決められたルールはないですが、Googleの場合英語基準155~160文字です。重複された説明ではなくページ固有な説明がある方が良いです。

meta robots

検索エンジンクローラーを制御するタグです。検索エンジンに設定を渡してページの情報を渡すことができます。

<meta name="robots" content="noindex">

例えば、noindex属性を使用して検索エンジンがページをインデックしないように設定できるし、indexを追加してインデックするように設定することもできます。

meta viewport

GoogleではSEOに最適化要素としてモバイルフレンドリーを測定します。モバイルフレンドリーとしてはインタラクションデザイン、Flash使用禁止、タッチ最適化、ポップアップ避けるなどの方法があります。その中も一つとして媒体の画面に表示項目を合わせるviewportタグを実装する方が良いです。
viewportタグは使用中媒体の画面に合わせてコンテンツを調節する方法です。

<meta name="viewport" content="width=device-width, initial-scale=1">

ちなみに、モバイルフレンドリーかは以下のサイトでもテストできます。

Open Graphタグ

Open Graph(OG)タグはWEBサイトの情報をLine、Facebook、Twitter（Xに変更されました！）LinkeInなどSNSに共有する時に情報を提供するタグです。例えば、以下の画像になります。

OGタグ自体はSEOに直接影響はありませんが、SNSやコンテンツを共有するどころで重要な役割をします。コンテンツを共有する時に分かりやすいとクリック率やWEBサイトの接近性を上げれます。

<meta property="og:title" content="タイトル" />
<meta property="og:description" content="説明" />
<meta property="og:image" content="イメージ.jpg" />
<meta property="og:url" content="https://zenn.dev/bellstone" />

canonicalタグ使用

単一のページに複数の URL でアクセスできる場合や、異なるページのコンテンツが類似している場合（たとえば、あるページにモバイル版と PC 版両方のURLがある場合）、Googleはそのようなページを同じページの重複版と見なします。
このような重複ページを管理するためには標準URLを検索エンジンに教える役割をします。
canonicalタグは以下みたいに使えます。

<link rel="canonical" href="https://www.example.com/page/" />

セマンティックタグの使用

セマンティックタグを使用してクローラーがページを理解しやすいようにする方が良いです。
簡単な説明を前回に扱ったことあるので、以下のページを参考してください。

WEBサイトのセキュリティー強化

WEBサイトのセキュリティー強化してサイトの信頼性を上げることもSEOに役になります。
例えば、Secure Sockets Layers(SSL)の認証書を使用してHTTPSを使用するとより良いWEBサイトになります。

結論

SEO最適化技術としては上記以外もたくさんあります。実はSEOを専門的にやってくれる職務もあります。
但し、開発者として適切なコードを実装するとSEO専門家に任せなくても結果を出せることは良いと思います。
それと最も重要なことはコンテンツの内容だと思います。このような戦略を利用して検索エンジンが引っ張ってくれるまで頑張りましょうー！
今までの説明が皆さんにも分かりやすく説明できていればと嬉しいです。