SEOとは何か？祖母にも5歳児にも説明できるエンジニアを目指して

IT業界に長くいると、「SEO」という言葉を聞かない日はほとんどありません。 しかし不思議なことに、SEOについて質問すると、技術者であっても急に難しい単語を連発し始めることがあります。 「検索エンジンのクローラビリティを向上させて、構造化データを実装し、コアウェブバイタルを改善しつつ……」 もちろん間違ってはいません。 しかし、私はいつも思うのです。 「それ、おばあちゃんに説明できますか？」 もし説明できないなら、本当に理解しているとは言えないのではないでしょうか。 今日はSEOについて、5歳児や祖母にも伝わるレベルから、現場のエンジニアが実践する高度なテクニックまで、一気に解説してみたいと思います。 ⭐️SEOを5歳児に説明すると ある日、私はSEOを5歳くらいの子どもに説明しようと考えました。 すると答えは驚くほど簡単でした。 SEOとは、「Googleさんに見つけてもらいやすくする工夫」です。 例えば大きな公園に1000人の子どもがいるとします。 その中で「鬼ごっこする人ー！」と叫んだとき、誰にも見つけてもらえなければ、一人ぼっちです。 しかし大きな旗を立てて、「鬼ごっこはこちら！」と書いておけば、多くの人が集まります。 Webサイトも同じです。 どれだけ素晴らしいサイトを作っても、Googleに発見されなければ存在しないのと同じです。 SEOとは、【Googleに向かって大きな旗を立てる作業】なのです。 ⭐️祖母に説明すると さらに祖母向けに説明してみましょう。 昔の電話帳を思い出してください。 近所のラーメン屋を探すとき、電話帳の適切なページに載っていなければ誰も見つけられませんでした。 Googleは現代版の巨大な電話帳です。 SEOとは、「電話帳の正しい場所に、分かりやすく掲載してもらう努力」と言えます。 祖母は私の説明を聞いたあと、「つまり看板をちゃんと出すことね」と言いました。 正直、それがSEOの本質だと思います。 数百ページのSEO専門書を読むよりも分かりやすい説明でした。 ⭐️多くの人が誤解しているSEO 私が実際の案件で何度も見てきたのは、「SEO＝裏技」だと思っている人です。 しかし現代のSEOは違います。 2005年頃なら、 ・キーワードを100回書く ・白背景に白文字を埋め込む ・意味不明なリンクを大量購入する といった怪しい手法が存在しました。 しかし現在のGoogleは非常に賢くなっています。 もはや検索エンジンは、「小学生レベルのズル」には引っ掛かりません。 むしろ、 ・分かりやすい ・読みやすい ・速い ・安全 という、人間が喜ぶサイトを評価します。 つまり現代SEOは、Google対策ではなく人間対策なのです。 ⭐️HTML/CSSサイトのSEO対策 私が最初にSEOを学んだ頃は、純粋なHTMLサイトが主流でした。 当時から現在まで変わらない基本があります。 →titleタグ <title>初心者向けSEO解説 | ○○ブログ</title> これは本のタイトルです。 タイトルが「トップページ」になっているサイトを見るたびに私は思います。 「本屋に行って、全ての本の表紙が『本』だったら誰も買わないだろうな」 と。 →h1タグ <h1>SEOとは何か</h1> ページの主役です。 映画のポスターで主演俳優の名前が書かれているようなものです。 脇役だけ並んでいて主演がいない映画は混乱します。 Googleも同じです。 →alt属性 <img src="seo.png" alt="SEOの仕組みを説明する図"> これは画像の説明文です。 Googleは画像を人間ほど理解できません。 つまり、「犬の写真です！」と教えてあげないと、 Googleは「四角い何か」と認識してしまうことがあります。 犬が少し可哀想です。 →表示速度 表示速度は非常に重要です。 私が案件で最も多く遭遇する問題の一つが、「トップページだけで20MBある」というケースです。 画像を開いた瞬間、 ・コーヒーを淹れる ・飲み終える ・皿を洗う くらいの時間が経過することがあります。 ユーザーは待ってくれません。 Googleも待ってくれません。 ⭐️WordPressのSEO対策 WordPressは世界中で使われています。 そのためSEO機能も非常に充実しています。 私が案件でまず確認するポイントは次の通りです。 →SEOプラグイン 代表的なものとして、 ・Yoast SEO ・Rank Math ・All in One SEO などがあります。 ただし注意点があります。 SEOプラグインを10個入れてもSEOは10倍になりません。 むしろサイトが重くなり、「健康のためにサプリを100種類飲んだら入院した」状態になります。 →パーマリンク ・悪い例 ?p=123 ・良い例 /seo-guide/ 人間にもGoogleにも優しいURLを作ります。 →XMLサイトマップ これはGoogle向けの地図です。 巨大なショッピングモールで案内板がなければ迷います。 Googleも同じです。 ⭐️React・Next.jsのSEO対策 ここからエンジニア色が濃くなります。 React初心者が最初に遭遇するSEO問題があります。 それは、「Googleさん、何も見えていません問題」です。 →CSRの課題 React単体ではJavaScript実行後に画面が生成されます。 つまり初期HTMLは、<div id="root"></div>だけの場合があります。 これではGoogleから見ると、「空き地」です。 豪華なビルを建てる予定でも、更地は更地です。 →Next.jsを使う Next.jsでは ・SSR ・SSG ・ISR が利用できます。 検索エンジン向けには非常に有利です。 私自身、React案件で検索流入に苦戦した経験がありますが、Next.jsへ移行したことでインデックス速度や検索順位が改善したケースを何度も見てきました。 ・メタデータ export const metadata = { title: "SEO解説", description: "SEO初心者向け解説" } Googleに対する自己紹介です。 名刺を渡さずに商談する人がいないように、ページも自己紹介が必要です。 ⭐️Vue・NuxtのSEO対策 VueもReactと似ています。 Vue単体ではCSR中心です。 そのためSEO重視ならNuxtが有力候補になります。 →NuxtのSSR サーバー側でHTMLを生成できます。 Googleは完成済みのHTMLを読むことができるため非常に有利です。 →Head管理 useSeoMeta({ title: 'SEO解説', description: '初心者向けSEO記事' }) 検索エンジンへ正確な情報を伝えられます。 ⭐️結局SEOで一番大切なこと ここまで技術的な話をたくさんしてきました。 しかし、私が実務を通じて最終的に辿り着いた結論は非常にシンプルです。 SEOの本質は、「ユーザーの役に立つこと」です。 Googleは年々進化しています。 アルゴリズムは変わります。 ランキング要因も変わります。 しかし、「読者が求める情報を分かりやすく届ける」という原則だけは変わりません。 私自身、数多くのWebサイトやシステム開発案件に携わる中で、検索順位だけを追い求めたサイトよりも、利用者の課題解決を真剣に考えたサイトの方が長期的に成功する場面を何度も見てきました。 SEOとは魔法ではありません。 秘密の裏技でもありません。 Googleを騙すゲームでもありません。 SEOとは、 祖母にも理解できるほど分かりやすく情報を整理し、5歳児でも迷わず目的地に辿り着けるようにすることです。 もしSEOを一言で表現するなら、私はこう言います。 「Googleに好かれる方法ではなく、人間に親切にする方法を学ぶこと」 それこそが、HTMLでも、WordPressでも、Reactでも、Next.jsでも、Vueでも、そして将来どんな技術が登場したとしても変わらないSEOの本質なのだと思います。