Website Hero Section 應該放甚麼?
Hero Section 的任務,是讓訪客快速理解公司提供甚麼、服務誰及有何價值。它通常需要清晰標題、補充說明、相關視覺和合適行動,而不是堆滿所有公司資料。
直接答案:Hero Section 最少應回答三件事:你提供甚麼、主要服務誰、為甚麼值得繼續看。視乎網站目的,可再加入一個主要行動和一項具體信任訊息。
Hero Section 的五個常見元素
| 元素 | 作用 | 常見錯誤 |
|---|---|---|
| 主標題 | 說明核心服務或結果 | 只有空泛口號 |
| 副標題 | 補充對象、方法或地區 | 重複主標題 |
| 視覺 | 幫助理解品牌或服務 | 使用無關素材圖 |
| 主要行動 | 提供下一步 | 同時放太多選擇 |
| 信任訊息 | 降低最初疑慮 | 沒有證據的形容詞 |
好標題應該清楚,而不是只求有創意
「讓夢想起飛」可以適用於教育、旅遊、顧問或金融公司,搜尋者無法立即理解。較具體的寫法是「為香港中小企建立清晰、手機優先的公司網站」。創意可放在語氣,核心意思仍要明確。
副標題補充主標題未說完的內容
副標題可交代服務範圍、主要對象、流程特色或地區。例如主標題說明「跨境醫療護送」,副標題再解釋涵蓋醫療協調、點對點接送和途中照護。兩者不應只是同一句換字。
圖片要幫助理解
服務有明確場景時,可使用真實團隊、工作環境、產品或案例。抽象服務可用介面預覽、流程視覺或有方向性的品牌圖。手機版要重新考慮裁切,不能假設桌面大圖縮小後仍然清楚。
是否一定要在 Hero 放按鈕?
大部分商業首頁會提供一個清楚下一步,但不需要重複多個相同行動。如果網站 Header 已有固定聯絡入口,Hero 的按鈕可按頁面目的選擇查看方案、了解服務或瀏覽案例;純資訊文章頁則未必需要額外 CTA。
實際例子:
過於空泛:「創新科技,引領未來。」
較清楚:「為香港零售商整合網店、庫存與訂單流程。」
補充說明:「從 Shopify/WooCommerce 建置到 API 串接,以一套流程減少重複人手工作。」
過於空泛:「創新科技,引領未來。」
較清楚:「為香港零售商整合網店、庫存與訂單流程。」
補充說明:「從 Shopify/WooCommerce 建置到 API 串接,以一套流程減少重複人手工作。」
Hero Section 常見錯誤
- 首屏只剩一張大圖,沒有可讀文字。
- 標題太長,在手機佔滿整個畫面。
- 背景和文字對比不足。
- 自動播放影片拖慢載入。
- 同時出現五個按鈕和大量認證。
- 把公司所有服務都塞入主標題。
常見問題
Hero 標題應該多長?
沒有硬性字數,但應能快速閱讀,手機上最好控制在數行內。刪除不影響意思的形容詞通常有幫助。
是否應使用 Slider?
只有在多個訊息同等重要且使用者能清楚控制時才考慮。很多首頁用一個聚焦訊息會更容易理解和測試。
Hero 是否需要包含 SEO 關鍵字?
標題應自然說明頁面主題。可包含主要服務詞,但不應為堆砌關鍵字而破壞可讀性。
總結
Hero Section 不是用來一次說完所有事情,而是讓正確訪客知道自己來對地方。先寫清服務、對象與價值,再選擇能支持訊息的視覺和下一步。