金融網站 UI、RWD、SEO 與流量分析

01UI、UX 與資訊架構

第六章已完成 GitHub 版本控制與 Cloudflare Pages 部署，網站現在可以透過公開網址讓其他人使用。然而，網站能夠上線，不代表網站已經成熟——若沒有清楚的分類與導覽，使用者可能找不到工具；若只在桌面正常顯示，手機使用者可能無法操作；若沒有正確設定 SEO，內容充實也可能長期無法被搜尋到；若沒有流量分析，管理者無法知道哪些工具真正有人使用。

02金融網站的主要使用者類型

03金融網站導覽架構設計

反面教材：十五個項目的導覽列

首頁、文章、AI、ESG、金融科技、考照、書籍、Podcast、
影片、遊戲、債券、股票、選擇權、退休、關於

問題：
→ 手機版需左右滑動
→ 使用者無法判斷哪個分類包含所需內容
→ 重要入口不突出（債券和書籍同層）
→ 視覺上造成認知負擔

建議主導覽架構（六個分類）

首頁四層內容架構

04建立金融網站導覽列

<header class="site-header">
  <div class="header-container">
    <a href="index.html" class="site-logo" aria-label="金融知識平台首頁">金融知識平台</a>

    <!-- 手機版選單按鈕（桌面隱藏，手機顯示）-->
    <button type="button" id="menuButton" class="menu-button"
            aria-expanded="false" aria-controls="mainNavigation">選單</button>

    <nav id="mainNavigation" class="main-navigation" aria-label="主要導覽">
      <a href="index.html">首頁</a>

      <!-- 有下拉選單的分類 -->
      <div class="nav-group">
        <button type="button" class="nav-group-button" aria-expanded="false">學習專區</button>
        <div class="dropdown-menu">
          <a href="articles.html">最新文章</a>
          <a href="videos.html">學習影片</a>
        </div>
      </div>

      <a href="exam.html">金融考照</a>
      <a href="books.html">閱讀與影音</a>
      <a href="about.html">關於與合作</a>
    </nav>
  </div>
</header>

CSS：桌面下拉選單 + 手機收合

/* ── 頁首底色與位置 ─────────────────── */
.site-header {
  position: sticky;   /* 頁面捲動時固定在頂部 */
  top: 0;
  z-index: 1000;      /* 確保在其他內容上方 */
  background: #ffffff;
  border-bottom: 1px solid #d9e1e8;
}

/* ── 下拉選單（桌面版） ─────────────── */
.nav-group { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 210px; padding: 10px;
  display: none;   /* 預設隱藏 */
  border: 1px solid #d9e1e8; border-radius: 10px;
  background: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}
.nav-group:hover .dropdown-menu,
.nav-group:focus-within .dropdown-menu { display: grid; }

/* ── 手機選單按鈕（桌面隱藏）────────── */
.menu-button { display: none; min-height: 44px; padding: 8px 14px; }

/* ── RWD 斷點：860px 以下改為手機版 ─── */
@media (max-width: 860px) {
  .menu-button { display: inline-flex; align-items: center; }
  .main-navigation { width: 100%; display: none; flex-direction: column; }
  .main-navigation.open { display: flex; }  /* 展開 */
  .dropdown-menu {
    position: static;   /* 手機版下拉改為正常流 */
    display: grid;      /* 手機版直接展開 */
    border: none; box-shadow: none; background: transparent;
  }
}

JavaScript：手機選單開關

"use strict";

const menuButton = document.getElementById('menuButton');
const mainNavigation = document.getElementById('mainNavigation');

menuButton.addEventListener('click', function () {
  // classList.toggle：有 'open' 就移除，沒有就加入
  const isOpen = mainNavigation.classList.toggle('open');

  // 更新 aria-expanded 讓輔助科技知道選單狀態
  menuButton.setAttribute('aria-expanded', String(isOpen));
});

05金融工具卡片設計

卡片應包含的五個元素

<article class="tool-card">
  <p class="tool-category">理財規劃</p>
  <h3>複利終值計算器</h3>
  <p>輸入本金、報酬率與年數，試算資產長期成長結果。</p>
  <a href="index.html" class="tool-link">開始試算</a>
</article>

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 桌面：3欄 */
  gap: 22px;
}
.tool-card { display: flex; flex-direction: column; padding: 24px;
  border: 1px solid #d9e1e8; border-radius: 14px; }
.tool-link {
  margin-top: auto;   /* 按鈕永遠對齊卡片底部 */
  min-height: 46px;   /* ≥ 44px 保障手機點擊範圍 */
}

/* ── 平板（900px 以下）：2 欄 ─────── */
@media (max-width: 900px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ── 手機（620px 以下）：1 欄 ─────── */
@media (max-width: 620px) { .tool-grid { grid-template-columns: 1fr; } }

06RWD 響應式網頁設計

常見 RWD 斷點參考

手機版金融表格處理——金融網站常有債券資料表、題庫表格等複雜表格，在手機上無法完整顯示：

/* HTML：table 外層加 wrapper */
<div class="table-wrapper">
  <table>...</table>
</div>

/* CSS */
.table-wrapper { overflow-x: auto; }
table { min-width: 720px; } /* 確保表格不擠壓 */

07SEO 搜尋引擎最佳化

SEO 的目的是讓搜尋引擎找到網站、理解內容、建立索引，並在適當搜尋情境中呈現頁面。SEO 不是保證排名第一，也不是大量塞入關鍵字。

SEO 三個層次

08title 與 meta description

title 設計原則——準確描述頁面主題、每頁不同、重要主題放前面、不要堆疊關鍵字、可在末尾加入品牌名稱。

meta description 設計原則——概括頁面（約 120–160 字）、鼓勵點擊、不完全相同、自然包含主題、不保證顯示（搜尋引擎可能自動選用其他文字）。

09Canonical 與 Open Graph 設定

若同一內容有多個網址（如 pages.dev 與自有網域），可用 canonical 告訴搜尋引擎主要版本，避免被判定為重複內容。當連結分享到 Facebook、LINE 或其他平台時，Open Graph 控制分享標題、說明、圖片與連結。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ① 頁面標題（每頁不同）-->
  <title>金融知識平台｜考照題庫、金融工具與投資教材</title>

  <!-- ② 頁面說明（搜尋結果摘要）-->
  <meta name="description"
    content="整合金融考照、複利試算、債券分析、股票工具、AI 金融與永續金融教材。">

  <!-- ③ 指定主要網址（避免重複內容）-->
  <link rel="canonical" href="https://example.com/">

  <!-- ④ Open Graph（社群分享效果）-->
  <meta property="og:type" content="website">
  <meta property="og:title" content="金融知識平台">
  <meta property="og:description" content="金融考照、投資工具與互動教材。">
  <meta property="og:url" content="https://example.com/">
  <meta property="og:image" content="https://example.com/images/og-cover.jpg">
  <!-- ↑ og:image 必須是完整 HTTPS 網址，圖片需公開可存取 -->

  <link rel="stylesheet" href="css/main.css">
</head>

10robots.txt 與 sitemap.xml

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap.xml

# 若有後台，可禁止爬蟲進入：
User-agent: *
Disallow: /admin/
Disallow: /private/

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

  <!-- 首頁：最高優先度，週更新 -->
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-06-23</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>

  <!-- 核心工具頁：次高優先度，月更新 -->
  <url>
    <loc>https://example.com/time-value.html</loc>
    <lastmod>2026-06-23</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>

</urlset>

11Google Search Console

1. 進入 search.google.com/search-console
2. 選擇「網域」（驗證整個網域，含 www 與非 www）
3. 複製 TXT 記錄值 → 在 Cloudflare DNS 新增 TXT 記錄 → 驗證
4. 驗證成功後，左側選單 → 網站地圖 → 貼上 sitemap.xml 網址 → 提交
5. 等待 Google 索引（通常數天至數週）

12GA4 流量分析

<!-- 替換 G-XXXXXXXXXX 為您的 Measurement ID -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

13Cloudflare Web Analytics

14GA4 事件追蹤

"use strict";

// ── 報酬率分組（不傳送精確數值）────────────────────
function getRateGroup(ratePercent) {
  if (ratePercent < 0) return 'negative';
  if (ratePercent <= 5) return '0_to_5';
  if (ratePercent <= 10) return '5_to_10';
  return 'above_10';
}

// ── 追蹤複利計算事件 ────────────────────────────────
function trackCompoundCalculation(years, ratePercent) {
  if (typeof gtag !== 'function') return;   // 先確認 GA4 已載入

  gtag('event', 'compound_calculation', {
    investment_years: years,
    annual_rate_group: getRateGroup(ratePercent),
    // ⚠️ 不傳送：精確本金、精確報酬率、使用者名稱 / Email
  });
}

金融工具建議事件命名規則

15金融網站核心分析指標

16SEO 內容品質原則

// ✗ 關鍵字堆疊（可能被搜尋引擎降低評分）
債券、債券投資、債券價格、債券評價、債券教學、
債券網站、最好債券工具、債券推薦、台灣債券......

// ✓ 回答使用者真實問題的標題
市場利率上升時，債券價格為什麼下跌？
如何使用存續期間估算債券價格變動？
十年後要累積 100 萬元，每月需要投入多少？

建立主題群組（Topic Cluster）

17頁面速度與效能優化

<!-- 使用 WebP 格式、加入 alt 與 lazy loading -->
<img
  src="images/bond-cover.webp"
  alt="債券投資教材封面，介紹票面利率與信用評等基礎概念"
  loading="lazy"
  width="400"
  height="260"
>
<!-- width/height 屬性幫助瀏覽器預先保留空間，減少版面位移（CLS） -->

18無障礙設計要點

19完整 SEO 專案結構

financial-platform/
├─ index.html              ← 含 title/description/canonical/OG
├─ time-value.html         ← 含獨立的 title/description
├─ bond-database.html      ← 含獨立的 title/description
├─ visualization.html      ← 含獨立的 title/description
├─ robots.txt              ← 放在根目錄
├─ sitemap.xml             ← 放在根目錄
├─ css/
│  ├─ main.css             ← 全域樣式
│  ├─ navigation.css       ← 導覽列樣式
│  └─ responsive.css       ← RWD 斷點
├─ js/
│  ├─ navigation.js        ← 手機選單 JS
│  └─ analytics.js         ← GA4 事件追蹤
└─ images/
   └─ og-cover.jpg         ← Open Graph 分享圖片

20實務案例

21常見錯誤與除錯

22關鍵字

23實作練習

上面「功能修改」的第一項，正是本章挑戰任務（04 分頁）任務一的原型——導覽列的手機選單邏輯是純前端 JavaScript，可以在瀏覽器裡真的執行，所以挑戰任務延續第一～三、五章的「真實執行」模式。SEO／meta 標籤／GA4 的部分則是設定與檢查清單，沒有可執行的程式邏輯，留在教材導讀中完整呈現。