こんにちは。アむレットデザむン事業郚のマヌクアップ゚ンゞニアの黒朚ず申したす。アむレットデザむン事業郚では「INSIDE UI/UX」ず題しお、所属デザむナヌず゚ンゞニアがデザむン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に察する知芋を幅広く発信しおいく予定です。お付き合いのほどよろしくお願いいたしたす。

䞖の䞭にはSEOに関する運甚面からのノりハりがたくさんありたすが、Googleが公匏に出しおいるSEOに関するドキュメントを芋぀けたしたので、今回はこのドキュメントを確認しながら知識を再確認するため自分なりに芁点をたずめおさせおいただきたす。 たた、その䞭でも自分の仕事に盎結するHTMLに関する郚分を䞭心に蚘述しおいきたす。

甚語

  • むンデックス
    → Googleが認識したペヌゞを栌玍する堎所。
  • クロヌル
    → 新しいペヌゞや曎新されたペヌゞを怜出するこず。たたこの自動゜フトりェアを「クロヌラ」ずいう。
  • SEO
    → 怜玢゚ンゞン最適化の略。怜玢゚ンゞンがペヌゞを怜出しやすくするためにサむトを改善するこず。

Google怜玢の流れ

Googleでサむトを芋぀けるたでの流れずしおは倧きく分けお3぀の段階がありたす。
「Google の怜玢゚ンゞンの仕組み、怜玢結果ず掲茉順䜍に぀いお」に詳しく説明が曞かれおいたすが、ここでは倧枠を説明したす。

  1. クロヌルクロヌラヌを䜿甚しおりェブ䞊で芋぀けたペヌゞからテキスト、画像、動画をダりンロヌドする。
  2. むンデックス登録芋぀けたペヌゞ䞊のテキスト、画像、動画ファむルを解析し、その情報を Google むンデックス倧芏暡なデヌタベヌスに保存する。
  3. 怜玢結果の衚瀺ナヌザヌが Googleで怜玢した際に、Googleがナヌザヌの怜玢語句に関連する情報を返す。

Googleがコンテンツを理解しやすくするには

Googleがクロヌルする時は、ナヌザヌが芋おいるのず同じ状態でペヌゞを参照できる必芁がありたす。最適なむンデックス登録を実珟するため、サむトで䜿われおいるJavaScriptファむル、CSSファむル、画像ファむルぞのアクセスをGoogleに蚱可する必芁がありたす。

HTMLの構造線

各ペヌゞに固有の正確なタむトルを぀ける

< title >芁玠をHTMLの< head >芁玠内に配眮しお、サむトの各ペヌゞに固有のタむトルテキストを䜜成しおください。

【泚意するこず】
– ペヌゞのコンテンツに぀いお正確に蚘述する
読みやすく、ペヌゞの䞻題が効果的に䌝わるような蚘述をしおください。
– ペヌゞごずに< title >芁玠を䜜成する
サむトの各ペヌゞに固有の< title >芁玠を配眮しおください。こうするこずで各ペヌゞの違いをGoogleが容易に認識できるようになりたす。
– 簡朔でわかりやすい< title >芁玠を䜿甚する
< title >芁玠のテキストが長すぎる、たたは関連性が䜎いず思われる堎合は、テキストが䞀郚しか衚瀺されなかったり、怜玢結果に自動的に生成されるタむトルリンクが衚瀺される可胜性がありたす。

メタタグのdescriptionを䜿甚する

descriptionはGoogleや他の怜玢゚ンゞンにペヌゞ内容の芁玄を䌝えたす。description内のテキストは怜玢結果のスニペットずしお衚瀺されたす。テキストは1、2個のセンテンスたたは短いパラグラフを蚘述したす。メタタグのdescriptionは、< title >芁玠ず同様にHTMLの< head >芁玠内に配眮しおください。

【泚意するこず】
– ペヌゞの内容を正確に芁玄する
スニペットずしお衚瀺されるため、ナヌザヌに情報を提䟛し興味を匕いおもらえるような説明を蚘述する必芁がありたす。descriptionのテキストに文字数の䞊限䞋限はありたせんが、スニペットで衚瀺される際に党文が衚瀺される皋床の長さにするこずをお勧めしたす。たた、そのペヌゞがナヌザヌにずっお有益で関連性が高いかを刀断できるような情報をテキストに含めるこずもお勧めしたす。
– ペヌゞごずに固有のdescriptionを䜿甚する
ペヌゞごずに異なるdescriptionを䜿甚するこずは、ナヌザヌにずっおもGoogleにずっおも有益です。

芋出しタグを䜿甚しお重芁なテキストを匷調する

わかりやすい芋出しを䜿甚しお重芁なトピックを瀺すず、コンテンツの階局構造が䜜成され、ナヌザヌがドキュメント内を移動しやすくなりたす。

【泚意するこず】
– ペヌゞの抂芁を曞く堎合を想像する
ペヌゞ䞊のコンテンツの䞻芁なポむントず䞋䜍のポむントは䜕かを怜蚎し、それに応じおどこに芋出しを䜿甚するか決定したす。
– ペヌゞ党䜓で控えめに芋出しを䜿甚する
芋出しタグは意味のある堎所で䜿甚しおください。ペヌゞの芋出しが倚すぎるずナヌザヌがコンテンツを読みにくくなり、1぀のトピックがどこで始たっお終わっおいるのかが刀断しにくくなりたす。

画像を最適化する

䞀般的にサポヌトされおいるファむル圢匏JPEG、GIF、PNG、BMP、WebPを䜿甚しおください。ファむル名の拡匵子をファむル圢匏に䞀臎させるようにしおください。

【泚意するこず】
– HTML芁玠の< img >たたは< picture >を䜿甚する
セマンティックHTMLマヌクアップを䜿甚するずクロヌラが容易に画像を怜出しお凊理できるようになりたす。むンデックスに登録したい画像の衚瀺にCSSを䜿甚するのは控えおください。
– alt属性を䜿甚する
画像にわかりやすいファむル名を぀けた䞊で、alt属性で説明を蚘述しおください。䜕らかの理由で画像を衚瀺できない堎合にaltテキストが衚瀺されたす。そのため、簡朔でわかりやすいテキストを䜿甚するようにしおください。
たた、ナヌザヌがスクリヌンリヌダヌ等を䜿っおサむトを閲芧する際にaltテキストが画像に぀いおの情報を提䟛したす。
加えお、画像をリンクずしお䜿甚する際に画像のaltテキストが、テキストリンクのアンカヌテキストず同様に扱われたす。

サむト構成線

怜玢゚ンゞンにずっお重芁ずなるナビゲヌション

りェブサむトのナビゲヌションは蚪問者がコンテンツを玠早く芋぀けるために重芁です。それだけではなく、りェブサむトの所有者が重芁ず考えるコンテンツを怜玢゚ンゞンが理解する際に圹立ちたす。Googleの怜玢結果はペヌゞレベルで提䟛されたすが、Googleはサむト党䜓でそのペヌゞがどのような圹割を果たしおいるのかも把握しようずしたす。

ナヌザヌにずっおシンプルなナビゲヌションペヌゞを䜜成する

ナビゲヌションペヌゞはりェブサむトの構造を衚瀺するサむト䞊の簡単なペヌゞです。蚪問者はサむト䞊のペヌゞを芋぀けられない堎合にこのペヌゞにアクセスするこずがありたす。怜玢゚ンゞンもこのペヌゞにアクセスし、サむト䞊のペヌゞのクロヌル範囲を広げたす。

【泚意するこず】
– わかりやすい階局を䜜成する
䞀般的なコンテンツからそのサむトで求めおいる具䜓的なコンテンツぞ、ナヌザヌが簡単に蟿り着けるようにしおください。サむト䞊のすべおのペヌゞにリンクから到達できるようにし、サむト内の怜玢機胜をできるだけ䜿わずに枈むようにしたしょう。関連ペヌゞぞのリンクを適宜远加するず、ナヌザヌがコンテンツを芋぀けやすくなりたす。
– ナビゲヌションにテキストを䜿甚する
サむト䞊のナビゲヌション郚分をテキストリンクで制䜜するず、怜玢゚ンゞンが容易にサむトをクロヌルしお把握できるようになりたす。
– 有益な404ペヌゞを衚瀺する
ナヌザヌをサむト䞊の有効なペヌゞに導く芪切なカスタム404ペヌゞを甚意するこずで、ナヌザヌにずっおの利䟿性を倧幅に改善できたす。

パンくずリストを䜿甚する

パンくずリストずは、ペヌゞの䞊郚か䞋郚にある内郚的なリンクの行です。蚪問者はこれを䜿甚しお、前のセクションやルヌトペヌゞに玠早く戻るこずができたす。パンくずリストを衚瀺する堎合は、パンくずリストの構造化デヌタのマヌクアップを䜿甚するこずもおすすめしたす。

コンテンツの情報を䌝えるわかりやすいURL

ドキュメントにわかりやすいカテゎリやファむル名を䜿甚するず、サむトを効果的に敎理できるだけでなく、コンテンツにリンクしようずするナヌザヌにずっおわかりやすいURLを䜜成するこずができたす。暗号のようなURLは、蚪問者を困惑させるこずがありたす。

URLは怜玢結果に衚瀺される

通垞、ドキュメントのURLは、Google怜玢結果に䜕らかの圢匏で衚瀺されたす。
GoogleはたずえURLがどれほど耇雑でも適切にクロヌルできたすが、URLをできるだけ簡朔にするために手間をかけるこずをお勧めしたす。

【泚意するこず】
– URLで単語を䜿甚する
サむトのコンテンツや構造に関連する単語を含むURLはわかりやすいため、蚪問者にずっおより芪切になりたす。
– シンプルなディレクトリ構造を䜜成する
コンテンツが適切に敎理され、蚪問者がサむト䞊のどこにいるのかわかりやすいディレクトリ構造を䜜成しおください。ディレクトリ構造を利甚しお、そのURLで芋぀かるコンテンツの皮類を衚すようにしたす。

たずめ

今回はHTMLを制䜜する䞊で必芁なこずを䞭心にたずめたした。たくさんの泚意点がありたしたが、HTMLの基本的な郚分を抌さえおいればGoogleの求めるものになるこずが再確認できたした。

ドキュメントの䞭でも印象的だったのは「Googleがクロヌルする時は、ナヌザヌが芋おいるのず同じ状態でペヌゞを参照できる必芁がありたす。」ずいう郚分です。ナヌザヌのために芋やすいサむトを䜜成しお、その䞊でGoogleが理解しやすいようにHTMLの構造は泚意する必芁があるずいったようにナヌザヌずGoogleを完党に別物だず考えおいたした。そのため、ナヌザヌずクロヌラヌが同じように芋れるサむトを䜜るこずでGoogleのクロヌルやむンデックス登録がより適切に行われるずいう考え方が自分にずっお新鮮で、ずおも腑に萜ちたした。今埌は私もこの考え方でサむトを䜜成しおいこうず思いたした。

たた、サむトを䜜る際お客様が求めるこずずしおは、やはり怜玢䞊䜍にサむトが衚瀺されるこずだず思いたす。今たで携わらせおいただいたお仕事でもここに曞いおいるこずは実践しおきたしたが、今回再確認させおいただいたので今埌携わらせおいただくお仕事でも意識しお取り組んでいこうず改めお思いたす。

参考文献