シリーズゼロからWebサイトを作ろう！第8回 / 全10回

SEO

SEOと構造化データ ―
検索エンジンにも正しく伝えよう

見た目は変わりません。でも、サイトの"中身"は劇的に変わります。meta description、OGP、JSON-LD構造化データ。検索エンジンとSNSに「このサイトは何のサイトか」を正しく伝えることで、café SOELは世界中から見つけてもらえるサイトになります。

✍

KANON

2026.04.18 読了目安：15分

前回のおさらい

📖 前回のおさらい

Google Fontsを導入し、見出しにCormorant Garamond、本文にNoto Sans JPを適用した
transition と :hover で、ナビの下線アニメーション・画像ズーム・カードの浮き上がりを実装した
backdrop-filter: blur() でヘッダーをすりガラスに、ハンバーガーバーが×に変わるアニメーションも追加した

前回で、café SOELは見た目の仕上げが完了しました。フォントが整い、ホバーで気持ちよく反応し、ヘッダーが透ける。ブラウザで見る限り、もう十分に「ちゃんとしたサイト」です。

ただ、ここまでの作業は全て「人間の目」に向けたもの。今回は視点を変えて、検索エンジンやSNSの目に向けた整備をしていきます。見た目を変えずに、サイトの「伝わる力」を底上げする。地味だけど、公開前に欠かせない大事な回です。

今回のゴール

🎯 今回のゴール

<meta name="description"> と <title> を最適化して、検索結果での見え方を整える
OGP（Open Graph Protocol）を設定して、SNSでシェアされたときの表示をコントロールする
JSON-LD構造化データを追加して、検索エンジンに店舗情報をリッチに伝える

👀 この回の完成イメージ

今回の内容を終えると、サイトはこのような状態になります。見た目は第7回と同じですが、ソースコードを見ると違いがわかります。
第8回の完成イメージを見る →

今回は CSSの変更が一切ありません。触るのは index.html の <head> の中だけ。見た目を変えるのではなく、「見えないところ」を整える回です。

SEOとは何か — 「見つけてもらう」ための設計

SEOは Search Engine Optimization（検索エンジン最適化）の略。Googleなどの検索エンジンに「このサイトは何のサイトか」「どんな情報が載っているか」を正しく伝えるための技術と考え方です。

どれだけ美しいサイトを作っても、検索しても出てこなければ、誰にも見つけてもらえません。お店で言えば、素敵な内装なのに看板もなく、地図にも載っていない状態。SEOは、Webにおける「看板を出す」「地図に載せる」作業のようなものです。

とはいえ、SEOの世界は奥が深く、テクニックだけ追いかけると迷子になりがちです。今回は初心者が最初にやるべき 3つの基本 に絞って進めます。

meta description — 検索結果の説明文

Googleの検索結果にタイトルとセットで表示される、サイトの簡潔な紹介文。

OGP — SNSシェア時の見え方

X（Twitter）やLINE、Facebookでサイトがシェアされたときに表示される画像・タイトル・説明文の設定。

JSON-LD — 検索エンジンへの構造化情報

「これはカフェです」「住所はここです」「営業時間はこうです」を、検索エンジンが理解できる形式で伝える。

SEOは検索エンジンのためだけの話ではない。「このサイトは何か」を誰に対しても正しく伝える、コミュニケーション設計の一部です。

titleタグの見直し — 検索結果の"顔"

まず <title> タグ。第3回で café SOEL — そよぐ光と、ひと息つくひとときと設定しましたね。これは実はすでに良い形になっています。

検索結果のタイトルは、ユーザーが最初に目にする「サイトの顔」。ここに店舗名とキーワードが入っていることが重要です。ポイントは3つあります。

30〜60文字以内に収める。 長すぎるとGoogleに途中で切られてしまいます。今のタイトルは22文字なので、ちょうどいい長さです。

固有名詞（ブランド名）を含める。 「café SOEL」が入っていれば、お店の名前で検索したときにヒットします。

内容が伝わるフレーズを添える。 「そよぐ光と、ひと息つくひととき」はお店の雰囲気を伝えています。もし実際のカフェサイトなら「世田谷区のカフェ」のようなエリア情報を入れるのも効果的です。

💡 KANONのワンポイント

<title> はブラウザのタブにも表示されます。今のタブを見てみてください。「café SOEL — そよぐ光と、…」と表示されていませんか? ユーザーがたくさんのタブを開いているとき、自分のサイトだとひと目でわかることも大事です。

meta description — 検索結果の説明文を書く

index.html — <head> 内の <title> の下に追加

<meta name="description" content="café SOEL（カフェ ソエル）は、自然光あふれる空間でハンドドリップコーヒーと手作りスイーツを楽しめるカフェです。">

書き方のコツは3つ。120〜150文字以内にすること。長すぎると途中で切れます。サイトの内容を具体的に伝えること。「素敵なカフェです」では何もわかりません。「自然光あふれる空間」「ハンドドリップコーヒー」「手作りスイーツ」── 具体的な言葉があると、読む人の頭に景色が浮かびます。そして、行動を促す言葉を入れること。今回は「楽しめるカフェです」で「行ってみたい」と思わせる形にしています。

▶ Live Demo — 検索結果のイメージ

https://example.com › café SOEL

café SOEL — そよぐ光と、ひと息つくひととき

café SOEL（カフェソエル）は、自然光あふれる空間でハンドドリップコーヒーと手作りスイーツを楽しめるカフェです。

検索結果でこんなふうに表示されるイメージです。 <title> が青いリンクの文字、 <meta description> がその下のグレーの説明文。この2つで「このサイトをクリックするかどうか」が決まると言っても過言ではありません。

⚠️ よくあるミス

Googleは、 <meta description> をそのまま表示するとは限りません。ページの内容に応じて、Googleが独自に説明文を生成することもあります。でも、ちゃんと書いておくことで「こう表示してほしい」という意思表示になります。書かないよりは圧倒的にいい。

見出し階層とSEOの関係

ここでひとつ、第2回の内容を振り返らせてください。あのとき、見出しには <h1>〜<h6> の階層があること、 <h1> は1ページに1つだけ使うのが基本、と学びましたよね。

これは実はSEOにも直結しています。検索エンジンは <h1> を「このページで一番大事なテーマ」として認識します。café SOELのサイトでは <h1> に「そよぐ光と、ひと息つくひととき。」と入っていて、お店の世界観を象徴するキャッチコピーになっています。

<h2> はセクションの見出し（コンセプト、メニュー、ギャラリー、店舗情報）。<h3> は各メニューアイテムの名前。この階層が乱れていると、検索エンジンはページの構造を正しく読み取れません。

café SOELの見出し構造はすでに正しい階層になっています。第2回で丁寧に骨格を作ったことが、ここで活きています。セマンティックHTMLを意識して書いたことが、そのままSEO対策になっている。これが「正しいHTMLを書くこと」の本当の価値です。

📌 覚えておこう

SEO対策というと「何か特別なテクニック」を想像しがちですが、最も基本的で効果的な対策は 正しいHTMLを書くこと です。セマンティックなタグを正しい階層で使い、altテキストを丁寧に書き、descriptionを設定する。地味ですが、これがすべての土台になります。

OGP — SNSでシェアされたときの見え方を設定する

友人にカフェをすすめるとき、LINEやXでサイトのURLを送ることがありますよね。そのとき、URLだけがポンと表示されるのと、きれいな画像とタイトル付きのカードが表示されるのとでは、印象がまったく違います。

あのカード表示を制御するのが OGP（Open Graph Protocol）。Facebookが策定した仕様ですが、今やX、LINE、Slack、Discordなど多くのサービスがこの仕組みを使っています。

▶ Live Demo — SNSでシェアされたときのイメージ

この表示を作るために、 <head> に <meta property="og:..."> タグを追加していきます。

index.html — <head> 内に追加（meta description の下あたり）

<!-- OGP -->
<meta property="og:title" content="café SOEL — そよぐ光と、ひと息つくひととき">
<meta property="og:description" content="自然光あふれる空間でハンドドリップコーヒーと手作りスイーツを楽しめるカフェ。">
<meta property="og:image" content="img/ogp.jpg">
<meta property="og:type" content="website">
<meta property="og:locale" content="ja_JP">

順番に見ていきましょう。

og:title はカードに表示されるタイトル。 <title> タグと同じ内容で問題ありません。

og:description はカードの説明文。meta descriptionと似ていますが、SNS向けなので少し短めに。

og:image はカードに表示される画像のパス。第1回でダウンロードした画像素材の中に ogp.jpg が入っています。 img フォルダに入っていることを確認してください。

og:type はサイトの種類。トップページは website、ブログ記事なら article を使います。

og:locale は言語と地域。日本語のサイトなので ja_JP です。

💡 KANONのワンポイント

OGP画像のサイズは 1200×630px が推奨です。これはFacebookやXのカード表示で最も見栄えがいいサイズとして広く使われています。画像素材の ogp.jpg はこのサイズで用意してあります。自分のサイトを作るときも、1200×630pxを基準に画像を用意しておくと安心です。

なぜ name ではなく property なのか

ここまで <meta name="description"> と書いてきたのに、OGPでは <meta property="og:title"> と書いています。 name ではなく property。ちょっと混乱しますよね。

理由はシンプルで、OGPはHTMLの標準仕様ではなく、Facebookが定義した独自の仕様だからです。HTMLの標準では name 属性を使いますが、OGPは property 属性を使う。「こういうものだ」と覚えてしまって大丈夫です。

JSON-LD構造化データ — 検索エンジンに"意味"を伝える

ここからが今回のハイライト。JSON-LD構造化データです。

HTMLで書いたテキストは、人間には意味が伝わります。「〒156-0054 東京都世田谷区桜丘町0-0-0」を見れば住所だとわかる。でも、検索エンジンは「これは住所です」「これは営業時間です」と自動的にはわかりません。テキストの「見た目」は読めても、「意味」は推測に頼るしかないのです。

JSON-LDは、その「意味」を明示的に伝える仕組みです。「これはカフェです」「住所はここです」「営業時間は平日10時から19時です」と、機械が理解できる形式で書く。すると、Googleの検索結果にリッチスニペット（営業時間や住所がカードで表示される形式）として表示される可能性が出てきます。

▶ Live Demo — リッチスニペットのイメージ

café SOEL

カフェ・コーヒーショップ

住所東京都世田谷区桜丘町0-0-0

営業時間平日 10:00–19:00 / 土日 9:00–19:00

電話 03-0000-0000

価格帯 ¥500〜¥1,500

JSON-LDとは何か

JSON-LDは JavaScript Object Notation for Linked Data の略。JSONという軽量なデータ形式を使って、Webページの情報を構造化して記述するための仕組みです。HTMLの中に <script type="application/ld+json"> というタグで埋め込みます。

「script」という名前がついていますが、プログラムが動くわけではありません。ただのデータです。検索エンジンのクローラーがこのデータを読み取って、「ああ、これはカフェのサイトで、住所はここで、営業時間はこうなんだな」と理解する。人間には見えず、機械だけが読む情報です。

schema.orgとは

JSON-LDの中で使う「語彙（ボキャブラリー）」を定義しているのが schema.org というプロジェクト。Google、Microsoft、Yahoo!、Yandexが共同で運営しています。「CafeOrCoffeeShop（カフェ）」「address（住所）」「openingHoursSpecification（営業時間）」など、あらゆる種類のデータの書き方が定義されています。

café SOELはカフェなので、 CafeOrCoffeeShop という型を使います。

JSON-LDを書こう

index.html の <head> 内、OGPタグの下あたりに、以下のコードを追加してください。

index.html — <head> 内に追加

<!-- JSON-LD 構造化データ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CafeOrCoffeeShop",
  "name": "café SOEL",
  "description": "自然光あふれる空間でハンドドリップコーヒーと手作りスイーツを楽しめるカフェ。",
  "image": "img/ogp.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "桜丘町0-0-0",
    "addressLocality": "世田谷区",
    "addressRegion": "東京都",
    "postalCode": "156-0054",
    "addressCountry": "JP"
  },
  "telephone": "+81-3-0000-0000",
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Thursday", "Friday"],
      "opens": "10:00",
      "closes": "19:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Saturday", "Sunday"],
      "opens": "09:00",
      "closes": "19:00"
    }
  ],
  "priceRange": "¥500〜¥1,500",
  "servesCuisine": "コーヒー・カフェ"
}
</script>

コードが長く見えますが、やっていることはシンプルです。一つずつ読んでいきましょう。

"@context": "https://schema.org" ── 「この構造化データはschema.orgの語彙を使いますよ」という宣言。おまじないのようなものです。

"@type": "CafeOrCoffeeShop" ── このデータの型。「カフェまたはコーヒーショップ」を表します。レストランなら Restaurant、美容室なら HairSalon など、業種ごとに型が用意されています。

"name", "description", "image" ── お店の基本情報。ここまではOGPとほぼ同じ内容です。

"address" ── 住所情報。中に "@type": "PostalAddress" と入れ子になっています。住所を「町名」「区市町村」「都道府県」「郵便番号」「国」に分けて書くことで、検索エンジンが正確に理解できます。

"telephone" ── 電話番号。国際電話番号形式（+81）で書くのが正式です。

"openingHoursSpecification" ── 営業時間。café SOELは水曜定休なので、平日（月・火・木・金）と土日で分けています。配列 [ ] の中に2つのオブジェクトが入っている形です。

"priceRange" と "servesCuisine" ── 価格帯と提供する料理のジャンル。検索結果に表示されることがあります。

⚠️ よくあるミス

JSON形式はカンマの付け方にシビアです。各項目の末尾にはカンマ , を付けますが、最後の項目にはカンマを付けない。これはHTMLとは違う、JSONのルール。もしコピペ後にうまく動かない場合は、カンマの位置を確認してみてください。

💡 KANONのワンポイント

JSON-LDは <head> 内に書くのが一般的ですが、実は <body> 内のどこに書いてもGoogleは読み取ってくれます。ただ、管理のしやすさを考えると <head> にまとめておくのがおすすめ。私の現場でもそうしています。

JSON-LDの構造を俯瞰する

先ほどのコードを少し引いた目で眺めてみましょう。JSON-LDは { }（波括弧）で囲まれたキーと値のペアの集まりです。

JSON-LDの構造のイメージ

{
  // ① どの語彙を使うか
  "@context": "schema.orgを使う",

  // ② 何のデータか
  "@type": "カフェ",

  // ③ 基本情報
  "name": "名前",
  "description": "説明",

  // ④ 入れ子のデータ（住所のように複数の情報を持つもの）
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "番地",
    ...
  },

  // ⑤ 配列のデータ（複数のパターンがあるもの）
  "openingHoursSpecification": [
    { /* パターンA */ },
    { /* パターンB */ }
  ]
}

HTMLがタグの入れ子で構造を作るように、JSONは波括弧 { } と角括弧 [ ] の入れ子で構造を作ります。波括弧はひとかたまりのデータ、角括弧は同じ種類のデータが複数あるときの「リスト」です。

初めて見ると複雑に感じるかもしれませんが、パターンはこの5つだけ。慣れてしまえば、自分のサイトに合わせて項目を増やしたり型を変えたりできるようになります。

ブラウザとツールで確認しよう

コードを保存してブラウザをリロードしてみてください。── どうですか? そう、見た目は何も変わっていません。今回はそれが正解です。変わったのは、ブラウザの「見えないところ」です。

ソースコードを確認する

ブラウザでページを右クリック → 「ページのソースを表示」（Chromeの場合）。 <head> の中に、先ほど追加した <meta name="description">、OGPの <meta property="og:..."> タグ群、そして <script type="application/ld+json"> のブロックが入っていることを確認してください。

構造化データのテスト

Googleが提供するリッチリザルトテストというツールで、JSON-LDが正しく書かれているかを確認できます。サイトを公開した後にURLを入力すると、検索エンジンがどのようにデータを認識しているかが表示されます。今はローカル環境なのでまだ使えませんが、第10回でサイトを公開した後にぜひ試してみてください。

OGPの確認

OGPも、サイトを公開した後に確認できます。URLをXやLINEに送ってみて、カードが表示されるかを見る。うまく表示されない場合は、OGPタグの記述ミスか、画像のパスが間違っている可能性があります。

📌 覚えておこう

OGPやJSON-LDの効果は、サイトを公開して初めて確認できます。ローカル環境ではSNSのカード表示もGoogleのリッチスニペットも動作しません。「今は見た目に変化がないけど、公開後にちゃんと効く」── それを信じて書くのが、SEO対策の作業です。

headの全体像を整理する

ここまでで、 <head> の中身がだいぶ充実しました。第2回で3行だったものが、今はこうなっています。

index.html — <head> の全体像（第8回完成時点）

<head>
  <!-- 第2回で追加 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>café SOEL — そよぐ光と、ひと息つくひととき</title>

  <!-- 第8回で追加：SEO -->
  <meta name="description" content="café SOEL（カフェ ソエル）は、自然光あふれる空間でハンドドリップコーヒーと手作りスイーツを楽しめるカフェです。">

  <!-- 第8回で追加：OGP -->
  <meta property="og:title" content="café SOEL — そよぐ光と、ひと息つくひととき">
  <meta property="og:description" content="自然光あふれる空間でハンドドリップコーヒーと手作りスイーツを楽しめるカフェ。">
  <meta property="og:image" content="img/ogp.jpg">
  <meta property="og:type" content="website">
  <meta property="og:locale" content="ja_JP">

  <!-- 第7回で追加：ファビコン -->
  <link rel="icon" href="img/favicon.svg" type="image/svg+xml">

  <!-- 第7回で追加：Google Fonts -->
  <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=Cormorant+Garamond:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">

  <!-- 第4回で追加：CSS -->
  <link rel="stylesheet" href="css/style.css">

  <!-- 第8回で追加：JSON-LD 構造化データ -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "CafeOrCoffeeShop",
    "name": "café SOEL",
    "description": "自然光あふれる空間でハンドドリップコーヒーと手作りスイーツを楽しめるカフェ。",
    "image": "img/ogp.jpg",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "桜丘町0-0-0",
      "addressLocality": "世田谷区",
      "addressRegion": "東京都",
      "postalCode": "156-0054",
      "addressCountry": "JP"
    },
    "telephone": "+81-3-0000-0000",
    "openingHoursSpecification": [
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Monday", "Tuesday", "Thursday", "Friday"],
        "opens": "10:00",
        "closes": "19:00"
      },
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Saturday", "Sunday"],
        "opens": "09:00",
        "closes": "19:00"
      }
    ],
    "priceRange": "¥500〜¥1,500",
    "servesCuisine": "コーヒー・カフェ"
  }
  </script>
</head>

第2回では3行だった <head> が、8回を経てこれだけ充実しました。人間の目に見える部分（CSSやフォント）と、検索エンジン・SNSに見える部分（description、OGP、JSON-LD）。この両方が揃って初めて、「公開できるサイト」に近づきます。

<head> はサイトの「履歴書」のようなもの。見た目では伝わらない情報を、正しい形式で届ける場所です。

ここまでの全コードを確認しよう

今回はCSSの変更がないため、 css/style.css は第7回のままで大丈夫です。 index.html だけ、以下の全コードを確認してください。

index.html（第8回完成時点）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>café SOEL — そよぐ光と、ひと息つくひととき</title>
  <meta name="description" content="café SOEL（カフェ ソエル）は、自然光あふれる空間でハンドドリップコーヒーと手作りスイーツを楽しめるカフェです。">
  <meta property="og:title" content="café SOEL — そよぐ光と、ひと息つくひととき">
  <meta property="og:description" content="自然光あふれる空間でハンドドリップコーヒーと手作りスイーツを楽しめるカフェ。">
  <meta property="og:image" content="img/ogp.jpg">
  <meta property="og:type" content="website">
  <meta property="og:locale" content="ja_JP">
  <link rel="icon" href="img/favicon.svg" type="image/svg+xml">
  <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=Cormorant+Garamond:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "CafeOrCoffeeShop",
    "name": "café SOEL",
    "description": "自然光あふれる空間でハンドドリップコーヒーと手作りスイーツを楽しめるカフェ。",
    "image": "img/ogp.jpg",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "桜丘町0-0-0",
      "addressLocality": "世田谷区",
      "addressRegion": "東京都",
      "postalCode": "156-0054",
      "addressCountry": "JP"
    },
    "telephone": "+81-3-0000-0000",
    "openingHoursSpecification": [
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Monday", "Tuesday", "Thursday", "Friday"],
        "opens": "10:00",
        "closes": "19:00"
      },
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Saturday", "Sunday"],
        "opens": "09:00",
        "closes": "19:00"
      }
    ],
    "priceRange": "¥500〜¥1,500",
    "servesCuisine": "コーヒー・カフェ"
  }
  </script>
</head>
<body>

  <!-- ========== HEADER ========== -->
  <header class="header" id="top">
    <div class="header-inner">
      <a href="#top" class="logo">
        <img src="img/logo.png" alt="café SOEL" width="160" height="40">
      </a>
      <button class="menu-toggle" type="button">
        <span class="menu-toggle-bar"></span>
        <span class="menu-toggle-bar"></span>
        <span class="menu-toggle-bar"></span>
      </button>
      <nav class="nav" aria-label="メインナビゲーション">
        <ul class="nav-list">
          <li><a href="#concept" class="nav-link">Concept</a></li>
          <li><a href="#menu" class="nav-link">Menu</a></li>
          <li><a href="#gallery" class="nav-link">Gallery</a></li>
          <li><a href="#access" class="nav-link">Access</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>

    <!-- ========== HERO ========== -->
    <section class="hero" id="hero">
      <div class="hero-image">
        <img src="img/hero.jpg" alt="café SOELの店内。大きな窓から自然光が差し込む開放的な空間" width="1920" height="1080">
      </div>
      <div class="hero-content">
        <p class="hero-sub">Natural Light &amp; Coffee</p>
        <h1 class="hero-title">そよぐ光と、<br>ひと息つくひととき。</h1>
        <a href="#concept" class="hero-cta">Scroll</a>
      </div>
    </section>

    <!-- ========== CONCEPT ========== -->
    <section class="concept section" id="concept">
      <div class="concept-inner">
        <div class="concept-image">
          <img src="img/concept.jpg" alt="木のテーブルの上に置かれたハンドドリップコーヒーと陶器のカップ" width="1200" height="800">
        </div>
        <div class="concept-text">
          <span class="section-label">Concept</span>
          <h2 class="section-heading">ひかりと、木と、<br>一杯のコーヒーと。</h2>
          <p>café SOEL（カフェ ソエル）は、「そよぐ光」をイメージした造語から名づけました。</p>
          <p>大きな窓から差し込む自然光、ナチュラルな木のぬくもり、丁寧に淹れた一杯のコーヒー。忙しい日常からすこしだけ離れて、穏やかな時間を過ごしていただける場所でありたいと思っています。</p>
          <p>素材の味を大切にしたフードとドリンクを、心を込めてお届けします。</p>
        </div>
      </div>
    </section>

    <!-- ========== MENU ========== -->
    <section class="menu section" id="menu">
      <div class="section-header">
        <span class="section-label">Menu</span>
        <h2 class="section-heading">こだわりのメニュー</h2>
        <p class="section-desc">素材を活かしたシンプルなおいしさを、丁寧にお届けします。</p>
      </div>
      <div class="menu-grid">
        <article class="menu-card">
          <div class="menu-card-image">
            <img src="img/menu-coffee.jpg" alt="ハンドドリップで淹れたコーヒー" width="800" height="800">
          </div>
          <div class="menu-card-body">
            <h3 class="menu-card-title">Hand Drip Coffee</h3>
            <p class="menu-card-desc">産地ごとに異なる豆の個性を引き出す、一杯ずつ丁寧なハンドドリップ。</p>
            <span class="menu-card-price">¥550</span>
          </div>
        </article>
        <article class="menu-card">
          <div class="menu-card-image">
            <img src="img/menu-latte.jpg" alt="シンプルなラテアートが施されたカフェラテ" width="800" height="800">
          </div>
          <div class="menu-card-body">
            <h3 class="menu-card-title">Café Latte</h3>
            <p class="menu-card-desc">まろやかなミルクとエスプレッソのバランス。シンプルなラテアートを添えて。</p>
            <span class="menu-card-price">¥600</span>
          </div>
        </article>
        <article class="menu-card">
          <div class="menu-card-image">
            <img src="img/menu-cake.jpg" alt="素朴で美しいケーキ" width="800" height="800">
          </div>
          <div class="menu-card-body">
            <h3 class="menu-card-title">Seasonal Cake</h3>
            <p class="menu-card-desc">季節のフルーツを使った、素朴だけど美しいケーキ。コーヒーとの相性も抜群です。</p>
            <span class="menu-card-price">¥650</span>
          </div>
        </article>
        <article class="menu-card">
          <div class="menu-card-image">
            <img src="img/menu-sandwich.jpg" alt="断面が美しいサンドイッチ" width="800" height="800">
          </div>
          <div class="menu-card-body">
            <h3 class="menu-card-title">SOEL Sandwich</h3>
            <p class="menu-card-desc">新鮮な野菜とハム、自家製ソースをはさんだボリュームのあるサンドイッチ。</p>
            <span class="menu-card-price">¥900</span>
          </div>
        </article>
      </div>
    </section>

    <!-- ========== GALLERY ========== -->
    <section class="gallery section" id="gallery">
      <div class="section-header">
        <span class="section-label">Gallery</span>
        <h2 class="section-heading">店内の様子</h2>
        <p class="section-desc">自然光と木のぬくもりに包まれた、穏やかな空間。</p>
      </div>
      <div class="gallery-grid">
        <div class="gallery-item gallery-item--large">
          <img src="img/interior-01.jpg" alt="大きな窓から光が差し込む窓際の席" width="1200" height="800">
        </div>
        <div class="gallery-item">
          <img src="img/interior-02.jpg" alt="木のカウンターとペンダントライト" width="1200" height="800">
        </div>
        <div class="gallery-item">
          <img src="img/exterior.jpg" alt="白い外壁と黒フレームの窓が特徴的な外観" width="1600" height="1000">
        </div>
      </div>
    </section>

    <!-- ========== ACCESS ========== -->
    <section class="access section" id="access">
      <div class="access-inner">
        <div class="access-image">
          <img src="img/exterior.jpg" alt="café SOELの外観" width="1600" height="1000">
        </div>
        <div class="access-info">
          <span class="section-label">Access</span>
          <h2 class="section-heading">店舗情報</h2>
          <dl class="info-list">
            <div class="info-item">
              <dt>住所</dt>
              <dd>〒156-0054 東京都世田谷区桜丘町0-0-0</dd>
            </div>
            <div class="info-item">
              <dt>営業時間</dt>
              <dd>平日 10:00 – 19:00<br>土日 9:00 – 19:00</dd>
            </div>
            <div class="info-item">
              <dt>定休日</dt>
              <dd>毎週水曜日</dd>
            </div>
            <div class="info-item">
              <dt>電話</dt>
              <dd><a href="tel:03-0000-0000">03-0000-0000</a></dd>
            </div>
            <div class="info-item">
              <dt>アクセス</dt>
              <dd>小田急線 千歳船橋駅より徒歩8分</dd>
            </div>
          </dl>
        </div>
      </div>
    </section>

  </main>

  <!-- ========== FOOTER ========== -->
  <footer class="footer">
    <div class="footer-inner">
      <a href="#top" class="footer-logo">
        <img src="img/logo.png" alt="café SOEL" width="120" height="30">
      </a>
      <ul class="footer-nav">
        <li><a href="#concept">Concept</a></li>
        <li><a href="#menu">Menu</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#access">Access</a></li>
      </ul>
      <p class="footer-copy">&copy; 2025 café SOEL. All rights reserved.</p>
    </div>
  </footer>

</body>
</html>

CSSは第7回と完全に同じなので、変更の必要はありません。 css/style.css はそのまま残しておいてください。

👀 この回の完成イメージ

表示は第7回と同じに見えますが、検索エンジンやSNSから見ると全く違うサイトになっています。Chromeのデベロッパーツールでソースを見て、追加した要素が入っていることを確認してみてください。あなたの画面でも同じ構造になっていますか?
第8回の完成イメージを見る →

今回のまとめ

SEOとは、検索エンジンに「このサイトは何のサイトか」を正しく伝えるための技術と考え方
<title> タグは検索結果の"顔"。30〜60文字以内にブランド名と内容がわかるフレーズを入れる
<meta name="description"> は検索結果のタイトル下に表示される紹介文。120〜150文字以内で具体的に書く
OGP（Open Graph Protocol）で、SNSにシェアされたときの画像・タイトル・説明文を制御できる
OGP画像の推奨サイズは1200×630px。 og:title、 og:description、 og:image、 og:type、 og:locale の5つが基本
JSON-LDは、 <script type="application/ld+json"> で検索エンジンに構造化情報を渡す仕組み。schema.orgの語彙を使う
正しい見出し階層（h1→h2→h3）で書かれたセマンティックHTMLは、それ自体がSEOの土台になっている

← 前回デザインの仕上げ — CSSで"ちゃんとした"サイトに次回 → 公開前の最終チェック — アクセシビリティとパフォーマンス

SEOと構造化データ ―検索エンジンにも正しく伝えよう

前回のおさらい

今回のゴール

SEOとは何か — 「見つけてもらう」ための設計

meta description — 検索結果の説明文

OGP — SNSシェア時の見え方

JSON-LD — 検索エンジンへの構造化情報

titleタグの見直し — 検索結果の"顔"

meta description — 検索結果の説明文を書く

見出し階層とSEOの関係

OGP — SNSでシェアされたときの見え方を設定する

なぜ name ではなく property なのか

JSON-LD構造化データ — 検索エンジンに"意味"を伝える

JSON-LDとは何か

schema.orgとは

JSON-LDを書こう

JSON-LDの構造を俯瞰する

ブラウザとツールで確認しよう

ソースコードを確認する

構造化データのテスト

OGPの確認

headの全体像を整理する

ここまでの全コードを確認しよう

index.html（第8回完成時点）

今回のまとめ

SEOと構造化データ ―
検索エンジンにも正しく伝えよう