技術 5 分鐘閱讀

前端 SEO 完全指南：React 靜態站的 meta、OG、Schema Markup

前端 SEO 完全指南：React 靜態站的 meta、OG、Schema Markup

前言

根據我的經驗，很多客戶花了錢做網站，卻沒有做好 SEO 基本功，導致 Google 搜不到。這篇整理了前端 SEO 的必備知識，特別針對 React 靜態網站。

基本 Meta 標籤

每一頁都需要設定好的基礎標籤：

<head>
  <title>頁面標題 | 品牌名</title>
  <meta name="description" content="不超過 155 字的頁面描述" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="canonical" href="https://example.com/page" />
</head>

在 React 中動態設定

使用 react-helmet-async：

import { Helmet } from 'react-helmet-async';

function ProductPage({ product }: { product: Product }) {
  return (
    <>
      <Helmet>
        <title>{product.name} | 我的商店</title>
        <meta name="description" content={product.description.slice(0, 155)} />
        <link rel="canonical" href={`https://example.com/products/${product.slug}`} />
      </Helmet>
      <div>{/* 頁面內容 */}</div>
    </>
  );
}

Open Graph（OG 標籤）

社群分享時顯示的預覽資訊：

<meta property="og:title" content="文章標題" />
<meta property="og:description" content="文章描述" />
<meta property="og:image" content="https://example.com/images/og.jpg" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="zh_TW" />

Twitter Card

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="文章標題" />
<meta name="twitter:description" content="文章描述" />
<meta name="twitter:image" content="https://example.com/images/og.jpg" />

Schema Markup（結構化資料）

讓 Google 更理解你的內容，有機會出現豐富搜尋結果：

公司資訊

function OrganizationSchema() {
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'Organization',
    name: '公司名稱',
    url: 'https://example.com',
    logo: 'https://example.com/logo.png',
    contactPoint: {
      '@type': 'ContactPoint',
      telephone: '+886-2-1234-5678',
      contactType: 'customer service',
    },
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  );
}

文章 Schema

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章標題",
  "datePublished": "2025-09-10",
  "author": {
    "@type": "Person",
    "name": "作者名稱"
  },
  "image": "https://example.com/images/article.jpg"
}

餐廳 Schema

如果你在做餐飲業網站，這個特別有用：

{
  "@context": "https://schema.org",
  "@type": "Restaurant",
  "name": "餐廳名稱",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "台北市"
  },
  "servesCuisine": "台灣料理",
  "priceRange": "$$"
}

SEO 檢查清單

  • 每頁有唯一的 title 和 description
  • 圖片都有 alt 屬性
  • 使用語意化 HTML（h1 只出現一次）
  • 網站有 sitemap.xml 和 robots.txt
  • 頁面載入速度在 3 秒內
  • 行動裝置友善

更多企業網站的 SEO 檢查，可以參考 SEO 基本功檢查清單。

React 靜態站的 SEO 挑戰

傳統 React SPA 的 HTML 是空的，爬蟲抓不到內容。解決方案：

  1. SSG（靜態產生）：Astro、Next.js 的 getStaticProps
  2. SSR（伺服器渲染）：Next.js 的 getServerSideProps
  3. Pre-rendering：使用 react-snap 預先渲染

小結

SEO 不是做完網站後才想的事，而是從設計架構時就要考慮進去。做好這些基本功，你的網站才有機會被潛在客戶找到。

如果你需要類似的系統，歡迎聯繫討論。

#SEO #React #Schema Markup
Thousand Lab

Thousand Lab

GitHub LINE