RevtelTech
Published in

RevtelTech

SEO 做多少 ? 客製化電商開發時的一些實踐經驗

印刷業專屬電商 HiPrint 開發分享 — 以 GatsbyJS 打造高速 ERP / EC
https://revteltech.pse.is/3za3mj
三分鐘內數百萬業績的高流量電商煉成 — Le Ruban Pâtisserie 法朋烘焙甜點坊
https://revteltech.pse.is/LR-medium

RevConsult 系統開發諮詢顧問:https://consult.revtel.tech/

對於電商系統來說,如何能夠在持續營運中降低獲客成本非常重要,這往往影響業務的成敗。SEO 在這裏扮演很重要的一個角色,做得好可以省去許多維運成本。

但如果從頭搭建起電商的話,SEO 在開發流程中要怎樣安排會比較好?稍稍就過往開發經驗做些紀錄。

https://pixabay.com/zh/illustrations/internet-social-media-network-blog-4463031/

本文舉印刷電商的開發為例

這一兩年開發了專屬於印刷業的電商系統(可參考印刷業專屬一站式解決方案 — HiPrint 印刷電子商務新零售),協助廠商們做一些升級及轉型。

系統在市面上還算受到不錯的反響,亦順利受到 2021 年 DSA 數位奇點獎「數位轉型」項目的肯定。

HiPrint https://www.eculture.tech/ x 理想印制 https://www.lixiangprint.com.tw/

在這個案例中與其說是在開發電商,事實上卻更接近是在一套 ERP 系統(其實蠻多電商系統都是這樣的)。開發過程中約莫百分之七十以上時間都在處理內部流程(比如稿件審理以及出貨和工廠的狀態管理),前端電商佔比不高,而 SEO 上的心力就有限了。

但這也引出一個好玩的問題就是,有限資源下 SEO 做哪些比較好?

SEO 漫漫長路,要思考的是資源配比問題

其實該做哪些事,換個團隊或換個場景可能答案就不同,在查找一些相關資訊之後,大概有些想法

  • 技術含量高:一定程度上會需要將之列入架構設計的目標
  • 非一時一地能克服:得靠專案管理流程及持續觀測來精進

聽起來很像是廢話,但端正態度在開發系統時可以避免陷入見樹不見林的窘境。

題目:前後端分離的網站的 SEO 開發

SEO 工程是很大的議題,這裡我們討論一下前後端分離的

前端選擇上,SEO 在近年來蠻要求使用者體驗,經過一些考慮,我們最終技術選型是 GatsbyJS + AWS backend。Gatsby 搭建出了幾乎可以全入 CDN 的網站,除省去 FE server 維護成本外,讀取速度也可以顯著提升(大家不妨感受一下 — 理想印制)。後端我們利用 AWS 並搭建了一些用來計算價格用的微服務,為未來擴充成 SAAS 服務及開發 APP 做個準備。

https://jamstack.org/

權衡:盡量善用原生架構處理

框架百百種,引進 feature 的同時也引進了 constraint。順應框架特性做你想做的事情才能事半功倍。

GatsbyJS 作為 static site generation 的技術路線,補上了一些 ReactJS 在 SEO 上的先天不足 (但 ReactJS 在這的發展上也越來越完善,可參考 React 18 的 release note)。靜態化網站對於 SEO 極為友善。爬蟲可以直接爬到內容,這幾乎是最完美的結果了。

但畢竟許多資料仍然來自後端,如何去規範靜態動態頁的比例就很重要(全站靜態有時候不是一個好的追求目標!)。

如同前面所說的,SEO 的增進是無止盡的,這裡分享一下我們設定的第一階段。

  1. 電商的重點在於商品列表及商品頁,這些部分應該全窮舉並在編譯時期打 API 取回資料
  2. 個別重要頁面希望能獨立做 SEO 的獨立拉出
  3. API 設計時盡量將跟 meta 相關的資訊整合在同一隻 API
  4. 注意關鍵頁面 (如首頁、商品列表及商品頁)的 LCP、FID、CLS (載入速度、互動性、頁面穩定性)

但為了做到這些,有些前置設定就得做到

  1. 資訊在分類上要能妥善理解其生命週期以設計重新編譯時間
  2. 適度導入 Auto-Build 工具降低部署成本,但對於機敏資料或客戶端觸發的更版要設計審核機制
  3. 小心處理當網站更新時用戶瀏覽到一半時的體驗
  4. 為增進編譯效率要設計檢查層避免無意義的資源耗損
  5. API 可以視情況彈性組合及快取
  6. 妥善觀察業務邏輯以達到 LCP、FID、CLS 的要求

實際在使用時還是蠻多問題要再思考,但重點在於這個思考及逐漸優化的流程設計。

結論:好還要更好,無止盡地往前

在網站系統的開發上 SEO 是一個很容易被工程師忽略甚至抵觸的議題(類似的還有分析工具的導入)。

主要原因可能有以下幾個

  1. 不做對於系統本身功能並無影響
  2. 發起方向往往是營運或者行銷部門而非工程單位
  3. 很多時候會涉及到架構調整,傷筋動骨容易出意外
  4. SEO 先天是個與時俱進的議題,不存在終點是以也可能不存在起點

而越是這樣越是需要好好思考跟設計,畢竟系統就是給人用的,越容易讓用戶找到其價值也越高。

然後 … 有時候無止盡的工程追求也是一種態度不是嗎?

--

--

--

顧問諮詢 / 開發協力 / 商業模式

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sam Huang (sailplaneTW)

Sam Huang (sailplaneTW)

[ https://www.sam-huang.info/ ] 始於嵌入式系統,途經 Web / APP 再到區塊鏈。是個逐步由底層走向上層的軟體人,持續尋找技術和商模的平衡對接

More from Medium

How To Dynamically Render Your Medium Blog Posts On Your Web Site?

Introducing High Performance Linux VPS Servers

Introducing High Performance Linux VPS Servers

Best free video conferencing apps

Square Space Pros and Cons | Review 2022 | Best Website Builder