Case study

78 個頁面的官網,改一次頁尾全站一起更新

網站開發形象官網知識庫內容結構化資料深色模式無障礙

最後更新: · 對頻設計

這個案子要解的問題

客戶是一家做教育科技的公司,服務對象是全台各級學校。這種生意的內容量跟小店完全不同:光是「有哪些方案」「兩種版本差在哪」「怎麼申請」「導入之後老師要怎麼用」,就足以撐成幾十個題目,而且每一個題目都有人真的會在 Google 上搜。

難的地方在於,這些內容如果只做成簡報或 PDF,就只有業務拜訪的時候拿得出來——學校老師自己搜的時候找不到。要讓內容被搜到,就得一個題目一個網址、一個網址一組標題描述,於是頁數自然往上長。

另一個限制很現實:內容會一直增加、也會被改,但公司不想為此背一套每月要付費的內容管理系統,更不想有一天因為某個系統停止服務、或是升級改版,整個網站跟著出問題。

為什麼是靜態網站,不是後台系統

會需要後台,通常是因為「非技術人員每天要自己上稿」。這個案子的更新節奏不是這樣:內容一次寫一批、寫完就穩定放著,過一段時間再補新的題目。這種節奏付月費養後台並不划算。

所以整站做成純靜態網站,放在 Cloudflare Pages 上:沒有資料庫、沒有伺服器、沒有月費,也沒有需要定期更新的後台程式。網站放著就會一直在。

靜態站要撐到幾十頁,關鍵不是頁面本身,而是頁首、頁尾、樣式只有一份。78 頁全部從同一套版型產生,改完跑一次組頁指令整站重新輸出——這是「改一頁頁尾,另外七十七頁忘了改」這種事不會發生的唯一辦法,也是純手工複製貼上做不到的規模。

實際做了什麼

目前線上是 78 個網址(可以直接開 網站地圖 自己數),大致分成三塊:

  • 公司與服務——關於我們、服務項目、Google 解決方案介紹、各項導入說明
  • 知識庫 28 篇——寫給老師與學校資訊組看的教育科技文章,每篇都針對一個真的有人在搜的具體問題
  • 工具與資源——研習資源、實用連結,以及幾個獨立的小工具

內容之外,做進去的還有這幾件客人不會注意、但會影響結果的事:

  • 每頁的結構化資料——文章(Article)、常見問答(FAQPage)、麵包屑(BreadcrumbList),讓搜尋引擎與 AI 讀得懂這頁在講什麼。宣告的問答一定要在頁面上看得到,只寫在程式碼裡而畫面上沒有,是會被搜尋引擎判定違規的。
  • 深色模式——整站顏色走同一組變數,不是把某幾頁塗黑。
  • 無障礙——跳到主要內容的捷徑、鍵盤可以走完整站、文字對比度符合標準,這幾項對公部門與學校客戶特別重要。
  • 自架中文字型——把字型裁切成全站實際用到的字,一支檔案涵蓋全部字重、全站共用一份快取,省掉向外部字型服務要一整組可變字型檔的流量。
  • 給 AI 看的索引檔——站上有 llms.txt,讓 AI 搜尋工具能快速知道整站有哪些內容、各在哪裡。

交付了什麼、之後怎麼維護

交付的是整站原始檔、組頁與檢查用的腳本,以及一套「改完要跑什麼」的流程:改內容 → 跑組頁 → 跑結構檢查與無障礙檢查 → 推上去自動部署。檢查腳本會抓出標題長度、缺少的描述、壞掉的內部連結、沒被任何頁面連到的孤兒頁這類問題,不必靠人一頁一頁看。

日常花費只有網域年費。要加新文章、調整版面、補新的服務頁,都可以另外算。

這個案子可以驗證的事實

  • 網站在營運中,網址是 www.hunglun.com
  • 頁數可以自己數:打開 sitemap.xml,裡面每一個網址都點得開。
  • 深色模式、鍵盤操作、跳到主要內容的捷徑,都可以自己在瀏覽器上試。
  • 結構化資料可以用 Google 的複合式搜尋結果測試工具驗,不用相信我們的說法。

我們一樣不會給你「流量成長多少 %」這種數字。那是客戶的營運資料,不是我們拿來當廣告的東西。上面這幾件事,你自己點得到、驗得到。

先說清楚的一件事

鴻綸科技是 Google for Education 的認證夥伴,對頻設計不是。我們在這個案子裡負責的只有網站本身——規劃、內容架構、程式與部署。網站上關於 Google 方案的內容,是客戶提供與確認的。

所以如果你要的是 Google 的授權方案、正式報價或導入服務,那不是我們的業務,我們不承接也不轉售。但我們可以幫你引薦給鴻綸科技,由他們直接跟你談,你也不用多繞一手。

內容一直長,網站卻越來越難改?

不管你現在是十頁還是七十頁,先跟我們說你多久改一次、誰負責改。我們會告訴你這個規模該不該上後台系統——結論如果是「你不需要」,我們也會照實說。

預約免費諮詢 看收費參考

關於這個案子,常被問到的四件事

公司官網做到 78 頁,是不是太多了?

頁數不是目標,是內容自己長出來的結果。這個案子的對象是學校,老師與資訊組真正會搜的是「某個工具怎麼申請」「兩種版本差在哪」這種具體問題,一個問題就是一頁。

反過來說,如果你的服務三句話講得完,硬拆成 20 頁只會每一頁都很空,對搜尋反而扣分。頁數要跟著內容走,不是跟著預算走。

純靜態網站可以做到這種規模嗎?改內容會不會很麻煩?

可以。關鍵是頁首、頁尾、樣式只有一份,78 頁都從同一套版型產生,改完跑一次組頁指令整站重出,不會東改一頁西漏一頁。

真正需要後台的情況是「非技術人員每天要自己上稿」。這個案子沒有到那個頻率,省下來的就是每個月的系統費用。

什麼是自架字型?為什麼要特地做?

中文字型檔很大。直接向外部字型服務要多個字重時,瀏覽器會拿到一整組可變字型檔,首次載入接近 1MB、十幾個檔案,佔整頁流量六成以上——手機在校園網路下特別有感。

做法是把字型裁切成全站實際用得到的字,一支檔案涵蓋所有字重、全站共用同一份快取,也少掉兩段跨網域連線。代價是新增文章若用到裁切範圍外的字,要重新產生一次字型檔。

你們是 Google 的合作夥伴嗎?

不是。鴻綸科技是 Google for Education 的認證夥伴,對頻設計不是,我們在這個案子裡負責的只有網站本身。

如果你要的是 Google 的授權方案、正式報價或導入服務,我們不承接也不轉售,但可以幫你引薦給鴻綸科技,由他們直接跟你談。

More

看看別的

伊登森活品牌官網

一頁式網站改成 8 頁,讓每一項療程都能被單獨搜到、單獨分享。

看這個案例

Loverolling 會員累點系統

紙本集點卡搬到線上,客人不用下載 App,店員掃碼就能累點。

看這個案例

網站做好之後怎麼被搜到

SEO、AEO、GEO 到底差在哪,哪些該做、哪些是話術。

看這篇

LINE 詢問 免費諮詢