GLSoft 官網 v1 優化 — 變更清單
日期：2026-07-05｜基準檔：
優化檔：
依據：wiki 文件「GLSoft 官網 v1 優化方案」五大方向，文案類均採用文件指定字句
驗證：Contact 表單版面已注入線上站截圖確認（桌機 1440 / 手機 390）
index-original.html（同日抓取的線上版）優化檔：
index-optimized.html + openings-optimized.js（本機示範版，未動線上原始碼）依據：wiki 文件「GLSoft 官網 v1 優化方案」五大方向，文案類均採用文件指定字句
驗證：Contact 表單版面已注入線上站截圖確認（桌機 1440 / 手機 390）
一、五大方案總覽
| 方案 | 狀態 | 說明 |
|---|---|---|
| GA4 追蹤 | 已寫好 未生效 | 保留原有 G-N9RHXGZC59，新增六種事件埋點（虛擬頁面、區塊瀏覽、外連含 104 職缺、Email、新聞開啟、表單送出）。生效需「上線」+「GA4 後台開關」，見第四節。 |
| SEO 語意化 | 已做 | H1-H3 階層補齊（含職缺名稱 h3）、25 張圖片補有意義 alt、加 JSON-LD 結構化資料、修掉錯誤的保險公司 schema 標記。 |
| UI 現代化 | 微整型 | 文件原文是「評估」引入 Tailwind——評估結論：不建議整站換框架（見第五節）。改以附加 CSS 做字體渲染、hover 過渡、卡片陰影、焦點狀態微調。 |
| OG 社群優化 | 已做 | og:title / og:description 採文件指定文案、網址統一 https://webglsoft.com/、加 Twitter Card、品牌預覽圖重製（1200x630，含 ISO 徽章列）。 |
| 聯絡表單 | 已做 待換 ID | Formspree 表單：姓名 / Email / 公司名稱（選填）/ 訊息 + SEND，黑白極簡風格。上線前要註冊 Formspree 換掉 FORM_ID。 |
二、SEO 與 Meta 修正明細
Head 區基礎
| 項目 | 原本 | 改成 |
|---|---|---|
| <title> | 有兩個 title（"GLSoft" + "Glsoft"） | 只留一個，文件指定：「GLSoft | 頂尖軟體開發、AI 數據與 SAP 解決方案」 |
| meta description | 英文樣板句（文法還是錯的） | 文件指定 60-80 字中文文案（國際大獎 + ISO 認證 + 百大企業信賴） |
| Content-Language | 屬性用了全形引號，整個標籤無效 | 移除，改用 <html lang="zh-Hant-TW"> |
| canonical | 沒有 | 加 https://webglsoft.com/ |
| viewport | user-scalable=0 禁止縮放（無障礙扣分） | 移除限制 |
| X-UA-Compatible | IE 相容標籤（IE 已停止支援） | 移除 |
OG 社群標籤
| 項目 | 原本 | 改成 |
|---|---|---|
| og:url / og:image | http://www.（非 https、帶 www） | 統一 https://webglsoft.com/（照文件指定） |
| og:title | 只有 "GLSoft" | 文件指定文案（同新 title） |
| og:description | 英文樣板句 | 文件指定 60-80 字文案 |
| og:locale | zh-TW（格式錯） | zh_TW（OG 規範用底線） |
| og:image 本體 | 1000x1000 正方形（FB/LINE 會裁切），印著文法錯誤舊標語 | 重製 og-cover.png：1200x630 標準尺寸、官方 logo、修正後標語、ISO 認證徽章列 |
| Twitter Card | 沒有 | 加 summary_large_image 一組 |
新版 og-cover.png（1200x630，含 ISO 徽章列）
結構化資料（重大修正）
原本 <main> 標著 itemtype="https://schema.org/InsuranceAgency"——把自己標成保險公司，AI 爬蟲會誤解公司性質。已移除，改用 JSON-LD Organization：公司中英文名、logo、email、台北高雄兩地址、核心技術。內容全部來自官網現有資訊，沒有編造。
標題階層（H1-H3）
- H1：保留 G/L/S/O/F/T 動畫字（加 aria-hidden），另加隱藏完整文字給搜尋引擎讀。全頁僅此一個 h1。
- H2：各區塊標題從
<div class="title">改成<h2 class="title">（class 不變、樣式照舊，另加 CSS reset）。 - H3：認證名稱、六則新聞標題（隱藏式）、12 筆職缺名稱（見
openings-optimized.js，職缺標題 div → h3、外連補 rel="noopener"）。
圖片 alt（25 張全補）
| 圖片 | 原本 alt | 改成 |
|---|---|---|
| 9 張認證 | cert-1～cert-9 | 「GLSoft ISO/IEC 27001:2013 資訊安全管理系統認證證書」等完整描述 |
| 5 張碳排 | carbon-1～carbon-5 | 逐張看圖確認：American Carbon Registry、Verified Carbon Standard、terrapass、Climate Action Reserve、Gold Standard |
| 11 張獎項 | 全部都是 logo | 逐張確認獎項名（Epica、The Lovie、MENA Cristal Festival、LA Movie Awards、Campaign Agency of the Year、FWA、D&AD、Webby、Davey、LIA、Creative Circle） |
| 首屏以下圖片 | 無 lazy | 全部加 loading="lazy" |
重複內容降噪（文件說的「抓兩次」問題）
- 認證區 smScreen 整組 9 張是桌機版複製品 → 加
aria-hidden+ 空 alt，不再重複讀 18 張。 - Our principles、Client list、技術清單的 .mobile 複製區塊 → 同樣 aria-hidden。
- 刪掉 77 行被註解的 2022 年舊新聞區塊與開發註解（死程式碼佔原檔近一成）。
- Client list 的
Toshiba,（多逗號）→ 修掉。
新聞區（JS 內容爬不到）
六則新聞的標題、內文原本全部由 news.js 動態塞入、圖片用 background-image——不跑 JS 的爬蟲一個字都讀不到。已為每則加 <article> + 隱藏式真實 h3 標題（與 JS 渲染內容一致），並補鍵盤操作屬性。根治方案（新聞改伺服器端輸出）列於第五節。
三、聯絡表單 + Contact 區版面修正
- 欄位照文件規格：姓名 / Email / 公司名稱（選填）/ 訊息 + SEND，另有隱藏蜜罐欄位防機器人。
- 走 Formspree 免費方案（每月 50 封內免費），留言自動轉發
info@webglsoft.com，不用寫後端。 - 樣式照文件要求「沿用黑白極簡風格」：黑底、白字、白框線。
- 版面配套修改：原本 Contact 區高度寫死 50vw、內容從底部往上長，加表單後會撞到 CONTACT 大標題。已改成高度自動撐開 + 內容改文流定位（桌機/手機都改）。
桌機 1440px — 注入線上站驗證，無重疊
手機 390px — 同樣驗證通過
四、GA4 追蹤（現況 + 埋點 + 未生效前提）
現況：線上版本來就有基本 GA4（gtag.js，評估 ID G-N9RHXGZC59），page_view 流量現在就在收。優化版原封保留。
新增埋點（index-optimized.html 尾端獨立 script，不動原本 gtag）：
| 事件 | 對應文件要求 |
|---|---|
| 錨點虛擬頁面（page_view + #區塊網址） | 導覽點擊追蹤（Our principles / Client list / Join us / Contact） |
| section_view（實際捲到哪區） | 虛擬頁面的補充——一頁式網站多數人用捲的不點選單 |
| outbound_click | 104 職缺外連（文件特別點名）+ 新聞彈窗外連 |
| contact_email_click | info@webglsoft.com 的 mailto 點擊追蹤 |
| news_open（哪則新聞被打開） | 加值項 |
| generate_lead（表單送出） | 配合新增的聯絡表單 |
兩個「還沒生效」的前提：
- 埋點程式碼還在本機示範檔，沒上線——要等優化版套回正式站（或把
GA錨點追蹤片段.html交給廠商貼）才會開始記錄。 - 一個後台開關程式碼做不到——文件要求在 GA4 後台開「加強型評估 > 依瀏覽器歷史事件記錄網頁變更」，需要
G-N9RHXGZC59的管理權限。待辦：跟 David 確認這個 GA4 資源在誰的帳號、GLSoft 看不看得到後台。
結論：埋點程式碼 100% 寫好，「上線」+「後台開關」兩步完成後才算真正在追蹤。
五、示範版沒做的事（建議第二階段）
- Tailwind CSS 導入：等於整站改版，需要 build 流程配合，會動到 locomotive-scroll 動畫的所有樣式。文件原文是「評估」——評估結論是不建議為換而換。
- desktop / mobile 雙份 DOM 合併：重複噪音的根源，合併要重寫動畫參數，本次先用 aria-hidden 降噪。
- news.js 改伺服器端輸出：根治新聞爬不到的問題。
- 圖片轉 WebP + 補 width/height：減少流量與版面跳動（CLS）。
六、上線檢查清單
- 換兩個檔：
index.html（用 index-optimized.html 內容）+js/openings.js（用 openings-optimized.js） - 上傳
og-cover.png到網站images/目錄 - 到 formspree.io 用
info@webglsoft.com註冊，把表單 action 的FORM_ID換成真實 ID - GA4 後台：管理 > 資料串流 > 加強型評估 > 開啟「依瀏覽器歷史事件記錄網頁變更」（需管理權限）
- 實際打開頁面確認各區標題樣式沒跑版（h2/h3 已加 reset，理論上不變；Contact 區是唯一截圖驗證過的部分）
- 用 FB 分享偵錯工具（
developers.facebook.com/tools/debug）強制重抓 OG 快取 - GA4「即時」報表點幾個錨點驗證事件有進來