そもそもSEOとは？
SEOとは、「Search Engine Optimization」の略で、日本語にすると「検索エンジン最適化」です。
ウェブサイトが検索エンジンで表示されやすくして、クリックしてもらうための方法のことを指します。
・検索エンジンとは？
ユーザーが入力した検索キーワードをもとに、インデックスに登録された情報から適切なページを検索結果に表示させること。
・クローラーとは？
ページのコンテンツ内容とURLを取得して、それを「インデックス」と呼ばれるデータベースに登録する巡回型ソフトウェアのこと。
・クロールとは？
クローラーが情報を取得すること。ページ内のリンクを辿ったり、サイトマップを読み込むなど情報を取得する方法は複数あります。
・index登録とは？
クロールした情報を格納するデータベースのこと。インデックスに登録されないと、そもそも検索結果に表示されない。
HTMLの記述ってSEO対策に関係ある？
100％ではないですが、あります！
クローラーがウェブサイトを見た時に、HTMLの記述が正しいと、ロボットに対して伝えたい情報を正確に伝えることができます。
クローラーはロボットなので、ウェブサイトの見た目はあんまり関係ありません。
文字列（HTML）でみたとき、ロボットがわかりやすい、正しい記述にしたらSEO評価が上がるかも…！
ただし、最近のクローラー君は頭がいいので、HTMLが汚くてもある程度は情報を取得してくれますし、
HTMLが適切に記述されていても、掲載している情報の質が低い場合はSEO対策にはなりません。
なので部分的に効果があるイメージになります。
どんな場合にHTMLの記述がSEO対策になりやすい？
適切なHTMLでコーディングをしてもクローラー🤖に正しく情報が伝わりやすくなるだけです。
これで検索結果の上位に表示される！ってわけじゃあありません。
Core Web Vitals（コアウェブバイタル）とは？
コアウェブバイタルは、ユーザー体験（UX）をより優れたものにするためにGoogleが提唱している指標のことです。
以下3つの指針があります。すごい気にして対応すべき、というよりは、ある程度把握して気を配るとよい、というラインです。
| Largest Contetful Paint（LCP） | ページの読み込みスピード。 ページの中で最も大きなコンテンツが表示されるまでの速度が速いほど優秀 |
| First Input Delay（FID） | ユーザーのアクションに対してサイト側が視覚的な反応を返すまでの時間。 クリック・キーボード入力などのアクション後の動作時間が短いほど優秀。 ホバーやスクロールは当てはまらない。 |
| Cumulative Layout Shift（CLS） | ページの読み込み段階に発生したレイアウトのズレ・表示崩れが どれくらい発生したかを示す指標。 少ないほどいい。画像にwidth・height設定するといいってのがこれ。 |
Core Web Vitals と Google 検索の検索結果について
SEOに関係ある？
正直なとこふわっとしています。
- 競合するサイトにおいて同等のコンテンツ品質がある場合、CWVが良好なサイトが有利。
- 表示速度よりもコンテンツが大事、ただしそれは表示速度を無視して良いという意味ではない。
- 個別URLのフィールドデータがなくドメイン全体のCWVが悪い場合は全体評価が個別評価に影響を及ぼす可能性がある。
SEOに効果のあるHTMLタグ
・titleタグ
検索結果に出る情報。そのページの内容を示すものを入れる。
・metaタグ
検索結果に出るものや、SNSに出るものなど様々。
Googleはkeywordタグは参照していない。
・hタグ
見出しタグ。検索エンジンやユーザーに対し、Webサイト内の正確な情報を伝える役割がある。
【使い方】
h1~h6までのタグを正しい「階層」に並べて使う。
階層がバラバラだとクローラーが「どれが重要やねーん！わからんわ！検索結果の上にはあげられへんなあ」てなります。
階層：見出しタグが文書の論理的な構造をどのように表しているか
（こちらがクローラーにとって重要）
順番：見出しタグが文書内でどのように並んでいるか
（こちらはクローラーは重要視しないが、人間にとっては正しいとわかりやすくなる。）
| h1 | 大見出し。そのページが何のコンテンツを掲載してるかを記載する。 1ページに1回だけ使うとよい。 画像を使用したい場合はaltタグ必須。 左に重要なキーワードを入れると効果的とされている。 例：SEO対策 「今すぐ実践すべきSEO対策の方法7選」 「SEO対策の秘訣！効果的なHTMLコーディングの方法7選」 |
| h2～h6 | 他は階層を守りさえすればOK。文書の構造を意識して配置する。 クローラー的に 階層＞デザイン の重要度。カンプや仕様書から意識できると良い。 |
【チェックツール】
・aタグ
リンクを設定することで、読者が関連する他のページへ簡単に移動でき、サイトのユーザー滞在時間やページビューの数を増やすことが可能。
そのためSEOのパフォーマンス向上につながる。
・altタグ
画像が正しく表示されない時や視覚障害を持つユーザーに対して、画像の説明を提供するHTMLタグ。
画像の内容をテキストで説明し、画像が何を表しているのかをユーザーやクロールに伝える役割がある。
ウェブアクセシビリティ事例集「alt属性の良い事例」がわかりやすいです。
画像に関しては、width・heightを設定することでユーザビリティの向上が図れる。
これはCore Web Vitalsの最適化の手助けになる。
要するに読み込み時に画像読み込み前後でのページレイアウトのずれ防止になってくれるので良い。
・strongタグ
強調を示すタグ。そのページで目立たせたい文章などに使用する。ただし、多用するとSEOペナルティ食らうので注意が必要です。
・listタグ
箇条書きのためのHTMLタグ。視認性が上がり、コンテンツが理解しやすくなるという観点からユーザビリティの向上に効果的です。
ul、olともに効果あり。listタグが設定された内容は強調スニペットに表示される可能性がある。
・tableタグ
表を作成するために使用されるHTMLタグ。
クロールにページの内容を検索エンジンに正確に伝え、SEO効果を高めることが可能。
tbody、tr、th、tdを併用することで効果あり。
tableタグが設定された内容は強調スニペットに表示される可能性がある。
・canonicalタグ
異なるURLで同じコンテンツが表示されている場合に使用するHTMLタグ。
重複コンテンツがあるとSEOペナルティを食らったり、評価が分散してしまう可能性があるため、その回避策としても使用できる。
適切なHTMLの書き方について
コンテンツモデルを理解しよう
HTML要素がWebページ内でどのように機能し、
「 〇〇要素の中には、△△要素が配置できる 」といった、各要素ごとに中に配置できる要素を定義した配置ルールの事を言います。
コンテンツモデルを使うと、検索エンジンがWebページの内容を正しく理解しやすくなります。
この要素はこの役割を持っていて、この要素を入れれる、とかを理解しておくとコーディングしやすいです。
わかりやすいコンテンツモデルチェックサイト
コンテンツカテゴリー
| メタデータコンテンツ | Webページの背景情報や設定を提供する | link / meta / script / style / title など |
| フローコンテンツ | Webページの中で広く使われるもので、文章の段落、画像、リンク、リストなど、ページのほとんどの部分を形成する | a / address / article / aside / audio / blockquote / br / button / canvas / code / cite / div / dl / figure / footer / form / h1 / h2 / h3 / h4 / h5 / h6 / header / hr / iframe / img / input / main / map / nav / ol / p / pre / q / ruby / s / script / section / select / small / span / strong / sub / sup / svg / table / textarea / time / u / ul / video など |
| セクショニングコンテンツ | ページの構造を整え、内容をわかりやすくするために使われる | article / aside / nav / section / header / footer など |
| ヘディングコンテンツ | Webページの見出しやタイトルを示す重要な役割を果たす | h1 〜 h6 |
| フレージングコンテンツ | Webページ内のテキストやインライン要素を表すに使用される | abbr / audio / b / br / button / code / em / i / img / input / label / mark / script / select / span / strong / textarea / time / u / video など |
| エンベッディドコンテンツ | Webページに外部のメディアやコンテンツを埋め込むために使用される | audio / iframe / img / svg / video など |
| インタラクティブコンテンツ | ユーザーが操作可能なコンテンツ | a / button / iframe / label / select / textarea など |
参考サイト
SEO対策についての参考サイト
【2024年最新版】SEO対策に効果的な10個のHTMLタグの書き方！構文の例を用いて使い方まで徹底解説
SEOに効果的な10個のHTMLタグの書き方とは？【2024年最新版】
SEOに強いHTMLコーディングとは？6つの対策ポイントやチェックツールも解説！
CWVについての参考サイト
【専門家が解説】Core Web Vitals（コアウェブバイタル）とSEOとページ表示速度
コルとは？指標やSEOへの影響、対策方法までわかりやすく解説
コアウェブバイタル（Core Web Vitals）とは？SEOに与える影響と対策方法についてわかりやすく解説します！
