【HTML基本構造テンプレート】セマンティックなマークアップと構造化データとOGP設定

備忘ですが、コピペで使っていただいてOKです。

HTMLの骨組み

基本設定: <meta charset>, <meta name="viewport">, <title>など、HTML5の最低限必要な設定。
OGPとSEO対策: Twitter(X)やFacebookなどのSNSで共有してもらうときのためにOGPも入れとく。<meta>タグで詳細を指定。
構造化データ: JSON-LD形式で<script>タグ内に記述。Googleなどの検索エンジン向けに、ページ内容をわかりやすく伝えるための設定。
リンクやスクリプトの読み込み: リセットCSS、スタイルシート、JavaScriptを外部ファイルから読み込む。よく使うNoto Sans Japaneseのウェイト400と700だけを読み込む記述も入れとく。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サイト名 | サイトの説明</title>
  <meta name="description" content="サイトの説明文。100文字程度。">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="format-detection" content="telephone=no,email=no,address=no">
  <link rel="canonical" href="サイトのURL">
  <link rel="icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="icon.png">

  <!-- 多言語サイトの場合 -->
  <link rel="alternate" hreflang="ja" href="日本語URL">
  <link rel="alternate" hreflang="en" href="英語URL">
  <link rel="alternate" hreflang="x-default" href="言語や地域を特定できない場合のデフォルトページのURL">

  <!-- OGP -->
  <meta property="og:url" content="サイトのURL">
  <meta property="og:type" content="article">
  <meta property="og:title" content="サイト名 - サイトの説明">
  <meta property="og:description" content="サイトの説明文">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:image" content="SNSなどで表示したい画像（アイキャッチとか）のURL">
  <meta property="og:image:width" content="og:imageの横サイズ（単位不要）">
  <meta property="og:image:height" content="og:imageの縦サイズ（単位不要）">
  <meta property="og:locale" content="とかen_USとか">

  <!-- OGP Facebook -->
  <meta property="fb:app_id" content="FacebookアプリID">
  
  <!-- OGP Twitter (X) -->
  <meta name="twitter:card" content="summary または summary_large_image">
  <meta name="twitter:site" content="@サイトの@Twitter(X)ID">
  <meta name="twitter:creator" content="@サイト（コンテンツ）作成者の@Twitter(X)ID">
  <meta name="twitter:title" content="Twitterカードに表示するタイトル　例：サイト名 - サイトの説明">
  <meta name="twitter:description" content="サイトの説明文">
  <meta name="twitter:image" content="投稿のアイキャッチ画像のURL">

  <!-- Google Font の Noto Sans Japanese を使用するなら -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/script.js" defer></script>

 <!-- 構造化データ -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "サイト名",
    "url": "サイトのURL",
    "description": "サイトの説明。100文字程度。",
    "publisher": {
      "@type": "Organization",
      "name": "運営者名",
      "logo": {
        "@type": "ImageObject",
        "url": "ロゴのURL",
        "width": 200,
        "height": 50
      }
    },
    "potentialAction": {
      "@type": "SearchAction",
      "target": "サイトのURL/search?q={search_term_string}",
      "query-input": "required name=search_term_string"
    }
  }
  </script>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "記事タイトル1",
    "description": "記事の概要をここに記載します。",
    "datePublished": "2024-11-06",
    "dateModified": "2024-11-06",
    "author": {
      "@type": "Person",
      "name": "著者名"
    },
    "publisher": {
      "@type": "Organization",
      "name": "サイト名",
      "logo": {
        "@type": "ImageObject",
        "url": "ロゴのURL",
        "width": 200,
        "height": 50
      }
    },
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "記事のURL"
    },
    "image": {
      "@type": "ImageObject",
      "url": "記事のアイキャッチ画像URL",
      "width": 1200,
      "height": 630
    }
  }
  </script>
</head>
<body>
  <!-- ヘッダー -->
  <header>
    <h1>サイトのタイトルやロゴ</h1>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#articles">Articles</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- メインコンテンツ -->
  <main>
    <!-- サイト概要セクション -->
    <section id="about">
      <h2>About Us</h2>
      <div>サイトや会社の概要を説明します。</div>
    </section>

    <!-- 記事一覧セクション -->
    <section id="articles">
      <h2>Latest Articles</h2>
      <article>
        <h3>記事タイトル1</h3>
        <p>公開日</p>
        <p>記事の概要</p>
        <a href="article1.html">続きを読む</a>
      </article>
      <article>
        <h3>記事タイトル2</h3>
        <p>公開日</p>
        <p>記事の概要</p>
        <a href="article2.html">続きを読む</a>
      </article>
    </section>

    <!-- ギャラリー -->
    <section id="gallery">
      <h2>Gallery</h2>
      <figure>
        <img src="image1.jpg" alt="ギャラリー画像1">
        <figcaption>画像1の説明</figcaption>
      </figure>
      <figure>
        <img src="image2.jpg" alt="ギャラリー画像2">
        <figcaption>画像2の説明</figcaption>
      </figure>
    </section>

    <!-- サイドバー -->
    <aside>
      <h2>関連情報</h2>
      <p>関連リンクやお知らせ</p>
      <nav>
        <ul>
          <li><a href="#related1">関連リンク1</a></li>
          <li><a href="#related2">関連リンク2</a></li>
        </ul>
      </nav>
    </aside>
  </main>

  <!-- フッター -->
  <footer>
    <p>&copy; 2024 サイト名. All rights reserved.</p>
    <nav>
      <ul>
        <li><a href="#privacy">プライバシーポリシー</a></li>
        <li><a href="#terms">利用規約</a></li>
      </ul>
    </nav>
  </footer>
</body>
</html>