Series Build a Website from Scratch Part 8 of 10

SEO

SEO & Structured Data —
Help Search Engines Understand Your Site

The visual design won't change a single pixel. But your site's "inner self" will be dramatically different. By adding a meta description, OGP tags, and JSON-LD structured data, you'll tell search engines and social platforms exactly what café SOEL is — so the right people can find it.

✍

KANON

2026.04.18 15 min read

Quick Recap

📖 Quick Recap

Integrated Google Fonts — Cormorant Garamond for headings, Noto Sans JP for body text
Added transition and :hover effects: underline animation on nav links, image zoom, card lift
Applied backdrop-filter: blur() to the header and animated the hamburger bars into an × shape

After Part 7, café SOEL looks polished. The fonts are refined, hover interactions feel satisfying, and the header has that frosted-glass elegance. For a human visitor, the site already looks "real."

But everything we've done so far has been for human eyes. Today, we shift perspective and work on what search engines and social platforms see. No visual changes — just a major upgrade to your site's ability to communicate with the wider web.

Goals for This Part

🎯 Goals for This Part

Optimize <meta name="description"> and <title> for better search result appearance
Set up OGP (Open Graph Protocol) to control how the site looks when shared on social media
Add JSON-LD structured data so search engines understand the café's business information

👀 Preview the Result

By the end of this part, your site will look like this. The visual appearance matches Part 7, but the source code is quite different.
See the Part 8 result →

Here's something unique about this part: there are zero CSS changes. We'll only touch the <head> section of index.html. Instead of changing how the site looks, we're improving how it's understood.

What Is SEO — Designing to Be Found

SEO stands for Search Engine Optimization. It's the practice of helping search engines like Google understand what your site is about and what information it contains.

You could build the most beautiful website in the world, but if it doesn't show up when someone searches for it, nobody will find it. Think of a café with stunning interiors but no sign on the door and no listing on any map. SEO is the web equivalent of hanging that sign and getting on the map.

That said, SEO is a deep field, and chasing every technique can get overwhelming. Today, I want to focus on the three essentials every beginner should cover first.

Meta Description — Your Search Result Pitch

The snippet of text that appears below your title in Google search results.

OGP — How Your Site Looks When Shared

The image, title, and description that appear when someone shares your URL on X (Twitter), Facebook, LINE, or Slack.

JSON-LD — Structured Information for Machines

A way to tell search engines "this is a café," "here's the address," and "these are the opening hours" in a format they can parse directly.

SEO isn't just about search rankings. It's communication design — making sure anyone (or anything) looking at your site understands exactly what it is.

Reviewing the Title Tag — Your Search Result "Face"

Let's start with the <title> tag. Back in Part 3, we set it to café SOEL — そよぐ光と、ひと息つくひととき. That's actually already in good shape.

The search result title is the first thing a user sees — your site's "face" in Google. There are three things to keep in mind when writing it.

Keep it under 60 characters. Anything longer risks being cut off by Google. Our current title is well within that limit.

Include your brand name. "café SOEL" is right there, which means the site will appear when someone searches for the café by name.

Add a phrase that communicates what the site is. The tagline gives a sense of the café's atmosphere. For a real business site, you might also include a location keyword like "Setagaya, Tokyo."

💡 KANON's Tip

The <title> tag also shows in your browser tab. Look at your tab right now — you should see "café SOEL — そよぐ光と、…" displayed there. When a user has dozens of tabs open, that tiny bit of text is how they find your site again.

Meta Description — Writing Your Search Snippet

The <meta name="description"> tag provides the introductory text shown below the title in search results. It's not a direct ranking factor according to Google, but it significantly affects click-through rates. A compelling description makes the difference between someone scrolling past and someone clicking through. Think of it as a second tagline — one aimed at search users.

index.html — Add below <title> inside <head>

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

Three tips for writing a good description. Stay within 120–150 characters (for Japanese) or about 150–160 characters for English — anything longer gets truncated. Be specific about your content — "a nice café" tells nobody anything, but "hand-drip coffee and handmade sweets in a sun-drenched space" paints a picture. And include a soft call to action — words that make someone want to visit.

▶ Live Demo — How It Might Appear in Search Results

https://example.com › café SOEL

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

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

⚠️ Common Mistake

Google doesn't always display your meta description verbatim. It sometimes generates its own snippet based on the page content. But writing a good description is still important — it tells Google what you'd prefer to be shown. That's always better than leaving it blank.

Heading Hierarchy and SEO

Let me take you back to Part 2 for a moment. We learned that headings have a hierarchy from <h1> through <h6>, and that <h1> should appear only once per page.

That directly ties into SEO. Search engines treat <h1> as the most important topic on the page. In café SOEL, the <h1> contains the main catchphrase. The <h2> tags mark each section (Concept, Menu, Gallery, Access), and <h3> tags identify individual menu items. This clean hierarchy lets search engines accurately map your page's structure.

The good news? Our heading structure is already correct. The careful skeleton we built in Part 2 is paying off right now. Writing semantic HTML is SEO. That's the real value of "doing it right from the start."

📌 Remember This

SEO can seem like a world of special tricks, but the single most effective technique is writing correct HTML. Semantic tags in the right order, thoughtful alt text, a clear description — it's not glamorous, but it's the foundation everything else builds on.

OGP — Controlling Your Social Media Card

When you share a café recommendation with friends on LINE, X, or Slack, the link sometimes shows up as a plain URL, and sometimes as a beautiful card with an image, title, and description. The difference is night and day.

That card is powered by OGP (Open Graph Protocol). It was created by Facebook, but today it's used by X, LINE, Slack, Discord, and many other platforms.

▶ Live Demo — How a Shared Link Might Appear

To create this card, we add <meta property="og:..."> tags inside <head>.

index.html — Add inside <head> (after 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">

Let's walk through each one. og:title is the card's title — it can match your <title> tag. og:description is the card's description — keep it a bit shorter than the meta description since social card space is limited. og:image is the card's image. The ogp.jpg file from our image assets in Part 1 goes here — make sure it's in your img folder. og:type is the content type — website for a homepage, article for a blog post. og:locale is the language and region — ja_JP for Japanese.

💡 KANON's Tip

The recommended OGP image size is 1200 × 630 pixels. This is the sweet spot for Facebook and X card displays. The ogp.jpg in our asset pack is already this size. When building your own site, design your OGP image at 1200×630 and you'll be set.

Why "property" Instead of "name"?

You might have noticed that we've been using <meta name="description"> with the name attribute, but OGP uses <meta property="og:title"> with property. A bit confusing, right?

The reason is simple: OGP isn't part of the HTML standard — it's a specification created by Facebook. Standard HTML meta tags use name; OGP uses property. It's just how it is. File it away and move on.

JSON-LD Structured Data — Giving Machines Meaning

Now for the highlight of today's work: JSON-LD structured data.

When a human reads "〒156-0054 東京都世田谷区桜丘町0-0-0" on our page, they immediately recognize it as an address. But a search engine doesn't inherently know that. It can read the text, but the meaning is something it has to guess at.

JSON-LD removes the guessing. It lets you explicitly say "this is a café," "this is the address," "these are the opening hours" — in a machine-readable format. When Google parses this data, it may display a rich snippet in search results: a card showing the café's hours, address, and phone number at a glance.

▶ Live Demo — How a Rich Snippet Might Appear

café SOEL

Café / Coffee Shop

Address Sakuragaoka 3-12-8, Setagaya, Tokyo

Hours Weekdays 10:00–19:00 / Weekends 9:00–19:00

Phone 03-0000-0000

Price ¥500–¥1,500

What Is JSON-LD?

JSON-LD stands for JavaScript Object Notation for Linked Data. It's a lightweight data format embedded in your HTML using a <script type="application/ld+json"> tag. Despite the "script" name, it doesn't run any code — it's pure data. Search engine crawlers read it to understand the structured details of your page.

What Is schema.org?

The "vocabulary" — the set of terms like "CafeOrCoffeeShop," "PostalAddress," and "openingHoursSpecification" — comes from schema.org, a collaborative project run by Google, Microsoft, Yahoo!, and Yandex. It defines standardized types and properties for virtually every kind of business and content.

Since café SOEL is a café, we'll use the CafeOrCoffeeShop type.

Let's Write the JSON-LD

Add the following code inside <head>, below the OGP tags.

index.html — Add inside <head>

<!-- JSON-LD Structured Data -->
<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>

It looks long, but the ideas are straightforward. Let's read through it.

"@context": "https://schema.org" declares that we're using schema.org's vocabulary. Think of it as a required boilerplate line.

"@type": "CafeOrCoffeeShop" identifies the type of data. A restaurant would use Restaurant, a hair salon would use HairSalon, and so on.

"name", "description", and "image" are the basic information — similar to what we wrote for OGP.

"address" is a nested object (notice the "@type": "PostalAddress" inside it). By breaking the address into street, locality, region, postal code, and country, search engines can parse each piece precisely.

"telephone" uses the international format (+81 for Japan). "openingHoursSpecification" is an array with two entries — one for weekdays (Monday, Tuesday, Thursday, Friday) and one for weekends — since café SOEL is closed on Wednesdays.

"priceRange" and "servesCuisine" round out the business profile. These may appear in search result panels.

⚠️ Common Mistake

JSON is strict about commas. Every item ends with a comma except the last one. If you copy-paste and rearrange properties, double-check the trailing commas. A misplaced comma is the most frequent JSON error.

💡 KANON's Tip

Technically, JSON-LD can go anywhere in the HTML — <head> or <body>. Google reads it either way. But for organization, I always place it in <head>. It keeps all machine-readable metadata in one place, which makes future edits much easier.

Stepping Back — The Shape of JSON-LD

Let's zoom out and look at the overall pattern. JSON-LD is a collection of key-value pairs wrapped in curly braces { }.

The structure of JSON-LD at a glance

{
  // ① Which vocabulary?
  "@context": "use schema.org",

  // ② What kind of thing?
  "@type": "Café",

  // ③ Basic info
  "name": "...",
  "description": "...",

  // ④ Nested data (things with multiple sub-fields)
  "address": {
    "@type": "PostalAddress",
    ...
  },

  // ⑤ Array data (multiple items of the same kind)
  "openingHoursSpecification": [
    { /* pattern A */ },
    { /* pattern B */ }
  ]
}

Just like HTML builds structure with nested tags, JSON builds structure with nested braces { } and brackets [ ]. Braces mean "one object," brackets mean "a list of objects." Those five patterns — context, type, basic fields, nested objects, and arrays — are all you need to understand the format.

Checking Your Work

Save your file and reload the browser. Notice anything different? Right — nothing visible has changed. That's exactly correct for this part. The changes are all under the hood.

View the Source Code

Right-click the page and choose "View Page Source" (in Chrome). Inside <head>, you should see the new <meta name="description">, the OGP <meta property="og:..."> tags, and the <script type="application/ld+json"> block.

Test the Structured Data

Google provides a Rich Results Test tool where you can paste your URL and verify the JSON-LD. Since our site is still on a local machine, you can't test it yet — but once you deploy in Part 10, this is one of the first things to check.

Preview the OGP Card

OGP cards only work on the live web. After publishing, share your URL on X or LINE and see if the card appears. If it doesn't, check for typos in the OGP tags or an incorrect image path.

📌 Remember This

OGP and JSON-LD can only be verified after your site goes live. In a local environment, social cards and rich snippets simply won't fire. Trust the code you've written — it will work once the site is on a real server. That's the nature of SEO work: invisible investment now, visible payoff later.

The Complete <head> — A Bird's-Eye View

Let's take a step back and look at the full <head> section. Back in Part 2 it was just three lines. After eight parts, it's grown into a comprehensive set of information about our site.

index.html — Full <head> at the end of Part 8

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

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

  <!-- Part 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">

  <!-- Part 7: Favicon -->
  <link rel="icon" href="img/favicon.svg" type="image/svg+xml">

  <!-- Part 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">

  <!-- Part 4: CSS -->
  <link rel="stylesheet" href="css/style.css">

  <!-- Part 8: JSON-LD -->
  <script type="application/ld+json">
  { ... }
  </script>
</head>

Everything that a human sees (CSS, fonts) and everything that machines read (description, OGP, JSON-LD) now lives in <head>. Both halves need to be in place before a site is truly ready for the world.

The <head> is your site's résumé — all the information that doesn't show on the surface but shapes how the world perceives you.

Full Code Check

Since CSS hasn't changed, css/style.css remains exactly as it was at the end of Part 7. Below is the complete index.html as of Part 8. If anything isn't working, you can copy this entire file to get back on track.

index.html (End of Part 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 is unchanged from Part 7, so there's nothing to update in css/style.css.

👀 Preview the Result

The display looks identical to Part 7, but under the surface, search engines and social platforms now see a completely different site. Open your browser's DevTools, view the source, and confirm the new tags are all in place. Does your code match?
See the Part 8 result →

What You Learned

SEO is the practice of helping search engines understand what your site is about, so the right people can find it
The <title> tag is your search result headline — keep it under 60 characters with your brand name and a descriptive phrase
<meta name="description"> provides the search snippet text — write it specifically and within 120–160 characters
OGP (Open Graph Protocol) controls how your site appears when shared on social media — image, title, and description
The recommended OGP image size is 1200×630px. The five essential tags are og:title, og:description, og:image, og:type, and og:locale
JSON-LD structured data uses <script type="application/ld+json"> with schema.org vocabulary to give search engines machine-readable business information
A well-structured heading hierarchy (h1 → h2 → h3) is itself a fundamental SEO practice — semantic HTML is the foundation

← Previous Design Finishing Touches — Making Your Site Look "Real" with CSS Next → Pre-Launch Checklist — Accessibility & Performance

SEO & Structured Data —Help Search Engines Understand Your Site

Quick Recap

Goals for This Part

What Is SEO — Designing to Be Found

Meta Description — Your Search Result Pitch

OGP — How Your Site Looks When Shared

JSON-LD — Structured Information for Machines

Reviewing the Title Tag — Your Search Result "Face"

Meta Description — Writing Your Search Snippet

Heading Hierarchy and SEO

OGP — Controlling Your Social Media Card

Why "property" Instead of "name"?

JSON-LD Structured Data — Giving Machines Meaning

What Is JSON-LD?

What Is schema.org?

Let's Write the JSON-LD

Stepping Back — The Shape of JSON-LD

Checking Your Work

View the Source Code

Test the Structured Data

Preview the OGP Card

The Complete <head> — A Bird's-Eye View

Full Code Check

index.html (End of Part 8)

What You Learned

SEO & Structured Data —
Help Search Engines Understand Your Site