ポートフォリオサイト・『佛性寺』webサイトで実践した基本的なSEO対策まとめ

rikuo kamadarikuo kamada

SEO（Search Engine Optimization）とは、検索エンジンに対してWebページの内容を正しく伝え検索結果に適切に表示され、ブラウザ・人間ともにサイトの信用度を上げるようにするための最適化のことです。
単に検索順位を上げるためのテクニックではなく、ページの構造や情報を整理し人間と検索エンジンの双方にとって理解しやすい状態にすることが本質であるように思います。
本記事では「実際にWebサイトを構築する中で行った基本的なSEO対策を中心に整理します。

また、SEO対策は流動性が高いです。それまでメジャーな対策であったものが、最早有用性が見込めないといったこともよくあります。
最近ではSEOならぬAEO（Answer Engine Optimization | AIが生成する回答に自分サイトコンテンツの引用を促進させる対策) が注目されてきているようです。

SEOで1位でもAIに無視される時代が来た。今すぐできるAEO対応の書き方

ただ、これはSEO自体の価値が不安定であるという意味ではなく、サイトの構造設計が重要であることを意味しているように思います。
なので本記事では、そのような観点からSEO対策についてまとめらられたらと思っています。

SEOの基本方針

今までのプロジェクトにおける私が行ってきたSEO対策の方針は、次のとおりです。

  • セマンティックHTMLによる意味的な構造化
  • titleやdescriptionなどのメタ情報の明示
  • ページ速度を意識したパフォーマンス最適化
  • URLや内部リンクを含めた情報の整理

前提としてSEOは検索エンジン対策であると同時に情報設計そのものでもあります。また、あまりSEO対策を突き詰めすぎると奥が深いので、今現在のSEO対策はシンプルで再現性のある設計を優先しています。
したがって、見た目やテクニックではなく構造の一貫性と意味の明確さを重視しています。

実装した具体的な対策

1. メタ情報の最適化(title description OGP TwitterCard)

各ページごとにtitleとdescriptionを適切に設定しています。
検索結果に表示される部分なので、ここが曖昧だと内容が正しく伝わりません。

<title>KMD WORKS</title> //　なるべく短くシンプルに

// titleと比べて、もう少し具体的な補足を入れるように
// どちらかというと人が読む
<meta name="description" content="KMD WORKS の公式サイト。Next.js × Cloudflare で構築したポートフォリオ兼ブログ。">

また、OGPやTwitter CardはSEOというよりはSNS対策に近いですが、シェアされたときの見え方がかなり変わるので重要です。
特にブログ記事の場合は、タイトル・説明文・画像がしっかり表示されるだけでクリック率にも影響します。
Next.jsではページごとにメタ情報を動的に生成できるので、その仕組みを活用しています。

2. HTML構造の最適化

SOE対策を考えるにあたってHTMLの構造については、「見た目」ではなく「意味」を意識して組み立てる必要があります。

例えば、h1タグはページ内で1つに限定し、記事タイトルとして使用しています。 その上で、sectionやarticleなどのセマンティックタグ(要素ごとに意味を持たせるタグ)を使い、コンテンツのまとまりが分かるようにしています。

// 例
<main>
  <article>
    <header>
      <h1>SEO対策まとめ</h1>
      <p>公開日: 2026-03-26</p>
    </header>

    <section>
      <h2>SEOの基本方針</h2>
      <p>ここに本文が入ります...</p>
    </section>

    <section>
      <h2>実装した具体的な対策</h2>
      <p>ここに本文が入ります...</p>
    </section>
  </article>
</main>

慣れてくるとCSSやJavaScriptで見た目はいくらでも作れてしまうので、ついdivタグを多用して構造が疎かになりがちですが、 検索エンジンはあくまでHTMLをベースに理解しているため、この部分はかなり重要です。
このここらがけが、結果としてSEOだけでなく可読性や保守性の向上にも繋がっていくと思います。

3. 検索エンジンのクローリング

検索エンジンにページを見つけてもらうための仕組みとして、sitemap.xmlとrobots.txtを整備しています。

sitemap.xmlでは、サイト内のページ構造を検索エンジンに伝え、効率的にクロールしてもらえるようにしています。
あるプロジェクトで使用したAstroではプラグインを使うことで自動生成できるため、手動管理の手間もかかりません。

robots.txtでは、クロールしてほしいページ・してほしくないページを制御しています。
例えば、管理画面や不要なページがインデックスされないように調整しています。

このあたりは目に見えにくい部分ですが、サイト全体の評価やインデックスの質に関わるため、地味に重要なポイントです。

終わりに

...と、まあ基本的なSEO対策は以上のような感じです。
他にも、「画像の最適化」や「被外部リンクとして他サイトに貼ってもらう」などSEO対策は様々あります。
今回、基本的なSEO対策としてこの3つを選んだのはAIやAIエージェントにSEO対策をさせた際に最低限確認するべき項目だと考えるからです。
これらは、初心者でもコードエディターやwebサイトならブラウザの検証機能で簡単に確認できます。
AIに丸投げはかなり危険です。なのでAIにSEO対策をさせたときは少なくともこの3点は確認しておくべきです。
また、特定の技術スタック(Next.js, AStro)におけるSEO対策の方法は改めて書くことにします。

Author

rikuo kamadarikuo kamada

主にシステム面で学習したことをまとめています。 フロント、サーバー、インフラ、AIなど細かい分野に絞らずに広く発信していきます。

← 一覧へ戻る