SEOフレンドリーなコーディング

WEBページをコーディングする際にSEOに最適化されたコードを書いていますか❓
なかなかできていない方が多いのではないでしょうか。
クライアントからは見えない箇所なので手を抜きがちになってしまいます。

SEO対策は全てを行うことは大変で、時間もお金もかかるので、コーダーは少なくともセマンティックHTMLコーディングを行うべきだと考えています。

セマンティックHTMLコーディングとは、SEOフレンドリーなコードを書くことです。
WEBページのコンテンツが持つ「意味」や「種類」を検索エンジンに理解しやすい形式で記述していきす。
主に下記のタグを適材適所に使っていきます。

<header>
サイトのロゴやグローバルナビゲーションを配置。
<nav>
主要なナビゲーションリンクに使用し、サイト全体の構造を検索エンジンに伝える役割も果たします。
<main>
ページの主要コンテンツを包含。
<h1>
ページの最も重要な見出しとして、そのページのメインテーマを簡潔に表現したり、タイトルとします。
トップページの場合、サイト名とそのコンセプトを表すことが多いです。
<article>
各記事の要約部分を<article>で囲むことで、それぞれが独立したコンテンツのブロックであることを示します。
<section>
コンテンツのグループ分けに使用します。
<aside>
補足情報を示し、本文とは直接関係ないサイドバーにも使用されます。
<footer>
サイト全体のフッター情報（著作権、プライバシーポリシーなど）を配置します。

コード例

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>最新の話題・トレンドを毎日更新！キュレーションメディア</title>
  <meta name="description" content="エンタメ、テクノロジー、ライフスタイル、ビジネスなど、あらゆるジャンルの最新情報や話題のトレンドを厳選してお届けするキュレーションメディア。あなたの「知りたい」がここにあります。">
  <link rel="canonical" href="https://www.your-curation-site.com/">
</head>

<body>
  <header>
    <a href="/" title="トップページへ">
      <img src="images/logo.png" alt="ロゴ" width="200" height="60">
    </a>
    <nav>
      <ul>
        <li><a href="/category/entertainment/" title="エンタメ記事一覧">エンタメ</a></li>
        <li><a href="/category/technology/" title="テクノロジー記事一覧">テクノロジー</a></li>
        <li><a href="/category/lifestyle/" title="ライフスタイル記事一覧">ライフスタイル</a></li>
        <li><a href="/category/business/" title="ビジネス記事一覧">ビジネス</a></li>
        <li><a href="/about/" title="について">当サイトについて</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>あなたの毎日を豊かにするキュレーションメディア</h1>
    <p>
      インターネット上に溢れる情報の中から、本当に価値のある**最新トレンド**や**話題のニュース**、**役立つ知識**を厳選してご紹介するキュレーションメディアです。
      エンタメからビジネスまで、幅広いジャンルの記事を毎日更新しています。
    </p>

    <section>
      <h2>新着記事</h2>
      <article>
        <h3><a href="/articles/article-001.html" title="最新記事1のタイトル">[最新記事1のタイトル]</a></h3>
        <p>[最新記事1の簡単な説明文。記事の内容を示すキーワードを含める。]</p>
        <img src="images/article-001-thumb.jpg" alt="最新記事1のサムネイル画像" width="300" height="200">
        <p><small>公開日: 2025年8月2日</small></p>
      </article>
      <article>
        <h3><a href="/articles/article-002.html" title="最新記事2のタイトル">[最新記事2のタイトル]</a></h3>
        <p>[最新記事2の簡単な説明文。記事の内容を示すキーワードを含める。]</p>
        <img src="images/article-002-thumb.jpg" alt="最新記事2のサムネイル画像" width="300" height="200">
        <p><small>公開日: 2025年8月1日</small></p>
      </article>
      <article>
        <h3><a href="/articles/article-003.html" title="最新記事3のタイトル">[最新記事3のタイトル]</a></h3>
        <p>[最新記事3の簡単な説明文。記事の内容を示すキーワードを含める。]</p>
        <img src="images/article-003-thumb.jpg" alt="最新記事3のサムネイル画像" width="300" height="200">
        <p><small>公開日: 2025年7月31日</small></p>
      </article>
      <p><a href="/articles/" title="新着記事一覧へ">もっと新着記事を見る</a></p>
    </section>

    <section>
      <h2>人気記事ピックアップ</h2>
      <article>
        <h3><a href="/articles/popular-001.html" title="人気記事1のタイトル">[人気記事1のタイトル]</a></h3>
        <p>[人気記事1の簡単な説明文。多くのユーザーに読まれていることを示唆する。]</p>
        <img src="images/popular-001-thumb.jpg" alt="人気記事1のサムネイル画像" width="300" height="200">
      </article>
      <article>
        <h3><a href="/articles/popular-002.html" title="人気記事2のタイトル">[人気記事2のタイトル]</a></h3>
        <p>[人気記事2の簡単な説明文。多くのユーザーに読まれていることを示唆する。]</p>
        <img src="images/popular-002-thumb.jpg" alt="人気記事2のサムネイル画像" width="300" height="200">
      </article>
      <p><a href="/popular/" title="人気記事ランキングへ">人気記事ランキングを見る</a></p>
    </section>

    <section>
      <h2>カテゴリから探す</h2>
      <nav>
        <ul>
          <li><a href="/category/entertainment/" title="エンタメ カテゴリ">[エンタメ]</a>：映画、音楽、芸能の最新情報</li>
          <li><a href="/category/technology/" title="テクノロジー カテゴリ">[テクノロジー]</a>：AI、ITトレンド、ガジェットの最新動向</li>
          <li><a href="/category/lifestyle/" title="ライフスタイル カテゴリ">[ライフスタイル]</a>：健康、グルメ、旅行、ファッション情報</li>
          <li><a href="/category/business/" title="ビジネス カテゴリ">[ビジネス]</a>：経済ニュース、キャリアアップ、マーケティング戦略</li>
          <li><a href="/category/science/" title="サイエンス カテゴリ">[サイエンス]</a>：科学の最新発見、宇宙、環境問題</li>
        </ul>
      </nav>
    </section>
  </main>

  <aside>
    <h2>注目トピック</h2>
    <ul>
      <li><a href="/topic/ai-innovation/" title="AIと未来社会のコラム">AIと未来社会の最新動向</a></li>
      <li><a href="/topic/eco-friendly/" title="エコフレンドリーな暮らし方">エコフレンドリーなライフスタイル</a></li>
      <li><a href="/topic/remote-work-tips/" title="リモートワーク生産性向上ヒント">リモートワークで生産性を高めるコツ</a></li>
    </ul>

    <h2>おすすめサービス</h2>
    <p>
      は、あなたの毎日をサポートする様々なサービスをご紹介しています。<br>
      <a href="/affiliate-service-A/" title="提携サービスAの詳細">提携サービスA</a>や<a href="/affiliate-service-B/" title="提携サービスBの詳細">提携サービスB</a>もぜひご覧ください。
    </p>

    <h2>公式SNSアカウント</h2>
    <ul>
      <li><a href="https://twitter.com/your-curation-site" title="公式Twitter">Twitter</a></li>
      <li><a href="https://facebook.com/your-curation-site" title="公式Facebook">Facebook</a></li>
      <li><a href="https://instagram.com/your-curation-site" title="公式Instagram">Instagram</a></li>
    </ul>
  </aside>

  <footer>
    <nav>
      <ul>
        <li><a href="/about/">サイト概要</a></li>
        <li><a href="/privacy-policy/">プライバシーポリシー</a></li>
        <li><a href="/terms-of-service/">利用規約</a></li>
        <li><a href="/contact/">お問い合わせ</a></li>
      </ul>
    </nav>
    <p>&copy; 2025 . All Rights Reserved.</p>
  </footer>
</body>

</html>

コード 例

コメントや質問をする

コード例