1. 首頁
2. 知識庫
3. Sharing AI 架站平台教學
4. 公司網站首頁要放什麼？首屏、服務、信任證據到 CTA 的排列與區塊設定

Sharing AI 架站平台教學

公司網站首頁要放什麼？首屏、服務、信任證據到 CTA 的排列與區塊設定

作者：JamXu更新日期：2026-10-11

首頁的任務是什麼？先回答訪客的三個問題

很多公司做首頁時，第一個念頭是把公司沿革、每一項服務、所有作品與最新消息都放上去。結果首頁越拉越長，訪客卻還是看不懂這家公司做什麼。問題不在內容不夠，而在沒有先想清楚首頁的任務。

首頁的任務其實很單純：讓第一次來的訪客，在幾個畫面之內確認「你們是誰、能不能解決我的問題、我下一步該做什麼」。只要這三個問題有清楚的答案，訪客自然會往下滑、點進服務頁或填寫表單；任何一個問題沒有答案，訪客就會回到搜尋結果，去看下一家。

首頁、服務頁與一頁式網站的差別

首頁、服務頁與一頁式網站的角色並不相同，分清楚之後，就知道哪些內容在首頁點到為止即可。

這也代表，首頁不是訪客唯一的入口。從搜尋結果點進來的人，常常直接落在某個服務頁或文章；所以首頁不需要、也不應該把每一頁的內容都重複一次。整個網站要有哪些頁面、選單怎麼分層，可以先依網站頁面架構與選單規劃的步驟整理好，再回來規劃首頁要把訪客帶去哪裡。

動手排版前，先寫一張首頁企劃單

首頁最常見的失敗，是一開始就打開後台挑版型，邊做邊想要放什麼。比較穩當的做法，是先把下面五個問題寫下來，這張企劃單能省下大量來回修改的時間。

• 主要訪客是誰：寫出一到兩種最重要的訪客，例如「想翻修老屋的屋主」與「需要長期配合的室內設計公司」。訪客不同，首屏要說的話就不同。
• 他們最想知道什麼：列出訪客在聯絡你之前最常問的三到五個問題，例如做不做小坪數、大概多少錢、要等多久。這些問題就是首頁各段落的題目來源。
• 一個主要行動：決定首頁最希望訪客做的「一件事」，例如預約諮詢、索取報價、加入 LINE 或來電。次要行動可以有，但主要行動只能有一個。
• 能證明你做得到的證據：盤點手上真的有、而且可以公開的東西，例如案例照片、證照、得獎紀錄、合作品牌（需取得同意）。
• 要分流到哪些頁面：列出首頁要帶訪客前往的頁面，通常是各服務頁、案例頁、關於我們與聯絡頁。

企劃單寫好之後，首頁的段落順序幾乎就決定了。文字、照片與標誌等素材要怎麼依頁面準備，可以搭配架站前的品牌素材清單一起整理。

首頁建議的排列順序：九個段落與各自要回答的問題

下面這個順序，是依訪客做決定的過程排出來的：先確認「是不是我要找的」，再看「有哪些選擇」，接著問「你們可靠嗎」「要怎麼開始」，最後才是「現在就聯絡」。不是每個網站都需要全部九段，但順序大致可以照著走。

有兩個原則可以幫你判斷要不要調整順序。第一，越接近「做決定」的內容越往下放，越能讓人「確認來對地方」的內容越往上放。第二，客單價越高、決策越慎重的產業，信任證據與流程說明就越需要篇幅；在地小店或簡單服務，則可以把聯絡方式往前移，讓想打電話的人不用滑到最底。

首屏怎麼寫？一句定位、一句補充、一個主要按鈕

首屏指的是訪客打開首頁、還沒往下滑時看到的第一個畫面。這是最珍貴的位置，卻常被一張形象照加一句放在哪家公司都成立的口號浪費掉。

比較有效的首屏只需要四個元素：一句說清楚「你為誰解決什麼」的主標題、一句補充細節的副標題、一個主要行動按鈕，以及一張與服務直接相關的照片。主標題通常就是頁面的 H1，也是搜尋引擎理解這一頁的重要線索。

主標題的寫法：對象＋問題＋你的做法

主標題不需要把所有服務塞進去，用「對象＋問題＋你的做法」組一句話通常就夠了。以下為示範寫法，並非真實客戶的文案：

副標題用來補上訪客在意的資訊，例如服務地區、營業年資或交件速度；寫上去的事實都要是你能證明的。

主要按鈕只放一個，文字寫出「會發生什麼事」

首屏最好只有一個主要按鈕，最多再加一個外觀較低調的次要按鈕。按鈕文字不要只寫「了解更多」，而是寫出按下之後會發生的事，例如「預約免費丈量」「索取報價單」「用 LINE 詢問」。

輪播看板要不要用？多數情況一張就好

不少網站的首屏是自動輪播的大看板，放四五張圖。問題是後面幾張的訊息很容易被錯過，自動切換也可能在訪客還沒讀完時就換頁。

從無障礙的角度，國際通用的 W3C 網頁內容無障礙指引 WCAG 2.1 要求：自動開始、持續超過五秒、又和其他內容同時呈現的移動內容，必須提供讓使用者暫停、停止或隱藏的方式（成功準則 2.2.2）。如果一定要輪播，請確認有暫停或手動切換的方式，並把最重要的訊息放在第一張；如果沒有非輪播不可的理由，單張主視覺加上清楚的文字，通常更容易被讀懂。

另一個常見問題是把標題做在圖片裡。WCAG 2.1 的成功準則 1.4.5 要求能用文字呈現的資訊就用文字，而不是文字圖片；圖片裡的字不易被搜尋引擎與螢幕閱讀器讀取，手機上也常看不清楚。主標題與按鈕請用頁面上的文字，圖片只負責氣氛與情境。

服務入口段：讓訪客在幾秒內找到自己要的那一項

訪客確認來對地方之後，下一個問題是「哪一項服務適合我？」服務入口段要把服務列清楚，並讓每一項都能點進去看詳細內容。

這一段的寫法有三個重點。第一，每一項服務用一句話說明「適合誰、解決什麼」，而不是只放服務名稱；「企業網站設計」幾個字無法讓人判斷適不適合自己，「適合需要接受線上詢價的中小企業」就清楚多了。第二，服務項目最好控制在三到六項，太多就分大類，細項交給服務頁。第三，每一項都要有連結，指向對應的服務頁。

三種常見的呈現方式

• 圖文交錯：每項服務一張圖、一段說明加一個按鈕，左右交錯排列，適合三到四項服務。
• 頁籤區塊：把服務分成幾個頁籤切換內容，適合服務項目多、又想保持精簡的首頁；最重要的服務放在第一個頁籤。
• 插入其他頁面：以卡片列出已經建立好的服務頁，新增服務頁時加進清單即可，適合服務頁已經完整的網站。

無論用哪一種，服務入口段都會產生首頁到各服務頁的內部連結。這些連結除了幫訪客分流，也讓搜尋引擎知道哪些頁面是網站的重點；連結的錨點文字最好就是服務名稱或主題，而不是「了解更多」。內部連結的寫法與檢查方式，在內部連結怎麼做一文有完整說明。

信任證據段：哪些可以放、哪些不能寫

訪客知道你做什麼之後，接著會懷疑「真的做得好嗎？」。Google 在建立實用且以使用者為優先的內容指南中，建議網站經營者用「製作者、方法和原因」檢視自己的內容，例如訪客能否快速瞭解內容是誰做的；換到公司首頁，就是讓訪客看得出這些成果是誰做的、怎麼做到的。

信任證據的力量來自「具體」與「可查證」。一句「服務過上千家客戶」如果沒有任何佐證，效果往往不如三個寫清楚背景、做法與結果的真實案例。沒有的數字不要寫、沒有取得同意的客戶標誌與評價不要放；一旦被發現誇大，失去的信任比原本沒寫還多。

「發展統計」區塊的數字要經得起問

Sharing AI 的「發展統計」區塊適合用大字呈現年資或完成件數。正因為醒目，數字都要有內部紀錄佐證並定期更新；建議只放兩到四個，並寫清楚計算範圍，例如「完成的住宅翻修案（2018 年起）」，比單獨一個「500+」更可信。

合作流程與價格說明：先回答「找你之後會怎樣」

很多訪客不聯絡，是因為不知道聯絡之後會發生什麼事。流程段的任務，就是把這些看不見的步驟攤開，讓訪客覺得聯絡一下沒有壓力。

流程寫成三到五個步驟最容易讀，每一步寫清楚誰做什麼、大約需要多久。以下是一個室內裝修公司的示範寫法：

1. 線上或電話諮詢：說明房屋狀況、預算範圍與希望完成的時間，約 15 分鐘。
2. 現場丈量與需求訪談：設計師到府丈量，並確認生活習慣與收納需求。
3. 提案與報價：提供平面配置與分項報價，確認後再簽約。
4. 施工與進度回報：依工程階段回報進度，重要節點邀請屋主到場確認。
5. 完工驗收與保固：逐項驗收，並說明保固範圍與後續維修方式。

價格段則是很多公司最猶豫的部分。如果無法公開定價，至少說明計價方式與影響價格的因素，例如「依坪數與工程項目計價，丈量後提供分項報價」，再把詳細說明放在服務頁。有公開方案或起價的，首頁與服務頁的數字要一致。

關於我們與常見問題：首頁只放摘要

「關於我們」在首頁只需要一小段：公司在哪裡、成立多久、團隊專長是什麼，再加一個連到完整頁面的按鈕。Sharing AI 的「關於我們」區塊可以用圖文並列的方式呈現這段內容，按鈕再連到詳細頁面；如果有多個門市或據點，「分店資訊」區塊可以一次列出地址、電話與社群連結。

這一段的重點，是讓訪客確認這是一家真實存在、找得到人的公司。公司全名、所在地區與聯絡方式，最好在首頁就看得到；完整的品牌故事與團隊介紹，留給關於我們頁面。

首頁的常見問題怎麼挑？

首頁的常見問題建議三到六題就好，挑的是「會阻止訪客聯絡你」的問題，例如服務範圍、最低承接金額、需要準備什麼資料、多久可以開始。技術細節或只跟某一項服務有關的問題，放在對應的服務頁。

最新消息、文章與社群動態：要不要放在首頁？

最新消息與文章列表，可以讓訪客感覺「這家公司還在經營」，也能把首頁的流量帶到知識文章或活動頁。不過，它有一個前提：內容要持續更新，最新一則停在兩年前的「最新消息」，反而讓人懷疑公司是否還在營運。

如果能維持每月更新一兩次，就可以用「插入其他文章」或「最新消息（直式／橫式）」區塊放在首頁中後段；做不到就先不放。開始經營文章之前，可以先看文章管理、分類與發布流程，把分類與發布節奏規劃好。

社群貼文嵌入也是同樣的邏輯，而且會增加頁面載入的負擔；比較建議在首頁放社群帳號的連結或聯絡按鈕即可。社群按鈕、貼文嵌入與分享預覽圖的設定方式，可以參考網站和社群怎麼串；官網與粉絲專頁各自該負責什麼，則整理在有粉絲專頁還需要官網嗎。

行動呼籲與聯絡段：放在訪客準備好的地方

行動呼籲的位置有一個簡單的原則：在訪客「可能已經想聯絡」的地方都放一個入口。首屏有一個、看完服務或案例後有一個、頁面最後再有一個完整的聯絡段。按鈕文字與首屏保持一致，訪客不會因為每個按鈕寫法不同而猶豫。

• 立即填表(可自訂欄位)：直接在首頁放詢問表單，欄位越少越好，只問聯絡你所必需的資訊。欄位設計、感謝頁與通知信的做法，在網站表單怎麼設計有完整步驟。
• 聯絡我們：以圖片搭配地址、電話與聯絡說明，適合以來電或到店為主的行業。
• 同步區塊：把同一段行動呼籲做成同步區塊，放在首頁與各服務頁，之後只要修改一次，所有頁面都會一起更新，避免各頁的電話或優惠資訊不一致。

手機版要特別檢查聯絡段：電話號碼可以直接點擊撥打，地址可以連到地圖，表單不會因為欄位太多而一路滑不完。

在 Sharing AI 後台怎麼排？用區塊組出首頁

在 Sharing AI 架站平台，首頁和其他頁面一樣，是在「頁面管理」裡用一個個區塊組合而成。打開首頁的編輯畫面後，點選「新增區塊」，就會看到「系統區塊」與「我的範本」兩個分頁；系統區塊依用途分成標題、文章、輪播、自由設計、區塊、表單、圖片、彈出視窗與分隔線等類別。

把九段架構對應到區塊，大致可以這樣選；這是常見的搭配而非唯一答案，挑你最容易維護的方式即可。

五個步驟把首頁組起來

1. 先排順序再填內容：依企劃單把區塊依序加入，確認順序合理之後再填入正式內容。
2. 替每個區塊取好辨識的名稱：區塊的顯示名稱只出現在後台，不會顯示在網站前台。建議用「首頁｜服務入口」這類統一的命名，方便日後修改。
3. 填入文字與圖片：主標題、服務說明與按鈕文字都用文字輸入；上傳圖片時一併填寫替代文字，說明圖片的內容與用途。
4. 預覽電腦版與手機版：特別注意手機首屏是否看得到主標題與按鈕，圖片裁切後主體是否完整。
5. 存成範本，方便其他頁面沿用：滿意的頁面可以用「存成頁面範本」保存，之後在「我的範本」裡重複使用，讓服務頁的版面風格與首頁一致。

需要更自由的版面時，可以使用「自由設計」區塊自行排版，甚至直接編輯 HTML；但自由設計的內容要自己維護一致性，不熟悉網頁語法的人，建議以系統區塊為主，比較不容易在手機版跑版。整個後台的操作位置與各功能入口，可以回到 Sharing AI 架站平台教學主題頁對照。

手機版、速度與無障礙：首頁最容易出問題的地方

首頁通常是全站圖片與區塊最多的一頁，上線前至少檢查下面幾件事。

• 手機首屏：在手機上打開首頁，第一個畫面是否就能看到主標題與主要按鈕，而不是一整張圖片。
• 圖片大小：主視覺與案例照片在上傳前先壓縮與調整尺寸，避免一張數 MB 的照片拖慢整頁。
• 文字對比：WCAG 2.1 的成功準則 1.4.3 要求一般文字與背景的對比至少 4.5:1、大字至少 3:1；白字壓在淺色照片上，是首屏最常見的問題。
• 替代文字：WCAG 2.1 的成功準則 1.1.1 要求非文字內容提供等效的文字替代；有意義的圖片都要寫替代文字，說明圖片想傳達的內容。
• 彈出視窗：一進首頁就跳出遮住內容的大視窗，會打斷訪客閱讀。

關於彈出視窗，Google 搜尋中心在避免使用干擾式插頁和對話方塊的說明中指出，這類元素會妨礙使用者瀏覽內容，並可能破壞他們對網站的信任，建議改用只占部分畫面的橫幅；依法必須出現的提示（例如 Cookie 同意、年齡驗證）則屬於例外。Google 的網頁體驗自我評估也提醒，網頁應該避免插頁式廣告干擾，並讓訪客能輕鬆區分網頁的主要內容。首頁的優惠或訂閱訊息，用頁面中的橫幅或區塊呈現，通常比彈出視窗更好。

台灣的網站無障礙規範同樣以 WCAG 2.1 為基礎，即使你的網站不是政府網站，照著做也能讓更多人順利使用。速度方面的檢查方式與分數判讀，可以參考PageSpeed Insights 怎麼看；版面在不同螢幕上的表現，則可以搭配RWD 響應式網站為什麼重要一起檢查。

首頁的 SEO：標題、描述與內容深度

有人搜尋公司或品牌名稱時，首頁往往是最先被點進來的頁面。首頁的 SEO 不需要複雜的技巧，把幾個基本設定做好就夠了。

• 頁面標題與描述：標題寫出品牌名稱與主要服務，描述用一兩句話說明你為誰提供什麼。寫法與長度可以參考SEO 標題與描述怎麼寫。
• 一個清楚的 H1：首屏的主標題就是最好的 H1 候選，說明你為誰解決什麼，而不是只有品牌口號。
• 真正的文字內容：服務說明、流程與常見問題都用文字呈現，搜尋引擎才讀得懂首頁在講什麼。
• 連到重要頁面：首頁連出去的頁面，代表你認為重要的內容；主要服務頁、案例頁與聯絡頁都應該能從首頁直接點到。

要避免的是另一個極端：為了排名，把首頁寫成一長串關鍵字，或把每一項服務的完整內容都塞進首頁。首頁和服務頁講同一件事，反而可能讓兩頁互相競爭同一個搜尋字；比較好的分工，是首頁用一句話介紹服務並連過去，讓服務頁去爭取該服務的搜尋。搜尋結果上顯示的網站名稱與小圖示，則是另一組設定，在頁尾資訊與網站名稱的設定一文中有說明。

上線前後怎麼檢查？首頁的驗收與調整清單

首頁完成後，找一位沒看過網站的同事用手機打開首頁，給他十秒鐘，再問他：這家公司做什麼？適合什麼樣的客人？要聯絡會按哪裡？三題都答得出來，首頁的骨架就是對的。

上線前的檢查清單

• 首屏的主標題說明了對象與服務，手機上不用滑動就看得到主要按鈕。
• 每一項服務都有說明與連結，點進去是正確的服務頁。
• 信任證據都是真實、可公開的，數字有計算範圍，客戶標誌與回饋已取得同意。
• 所有按鈕與連結都能正常點擊，沒有連到測試頁或已刪除的頁面。
• 電話、地址、營業時間與其他頁面、Google 商家檔案上的資料一致。
• 圖片已壓縮，有意義的圖片都填了替代文字，文字與背景對比足夠。
• 頁面標題與描述已填寫，首頁只有一個 H1。

整站上線前的完整檢查，例如網域、表單、追蹤碼與 SEO 欄位，可以依用 Sharing AI 架站上線前的檢查清單逐項確認，這裡不再重複。

上線後：用數據決定要不要調整

首頁上線後，建議每月看一次幾個簡單的數字：首頁的瀏覽量、從首頁點到服務頁的比例、表單送出與電話點擊次數。這些數字需要先在網站裝好 GA4 等追蹤工具，安裝方式在網站行銷代碼怎麼裝一文有完整步驟；搜尋方面的表現，則可以在 Google Search Console 的成效報表查看首頁的曝光與點擊。

一次只改一個地方，觀察幾週再決定下一步；同時改標題、換照片又調整順序，就很難判斷是哪一項造成的影響。

三種產業的首頁排列示範

同樣的架構套用到不同產業，比重與順序會有些差異。以下都是假想情境，並非真實客戶的網站。

示範一：在地服務業（例如居家清潔、水電維修）

訪客多半是用手機搜尋、急著找人處理問題，所以聯絡方式要往前移。建議順序：首屏（服務項目＋服務地區＋電話按鈕）→ 服務項目與計價方式 → 服務流程 → 案例照片與客戶回饋 → 常見問題 → 聯絡段。服務地區一定要寫清楚，也可以同步經營Google 商家檔案，讓地圖搜尋找得到你。

示範二：B2B 製造業（例如設備、零件製造）

採購決策時間長、參與的人多，訪客需要更多證據與規格資訊。建議順序：首屏（產品類別＋應用產業＋索取型錄或詢價按鈕）→ 產品類別入口 → 應用產業與案例 → 品質認證與生產能力 → 合作流程（打樣、量產、交期）→ 關於我們（工廠位置、年資）→ 常見問題 → 詢價表單。型錄與規格表放在各產品頁。

示範三：專業顧問服務（例如會計、法律、行銷顧問）

訪客在意的是「這些人懂不懂我的問題」，專業內容與團隊背景比華麗的圖片重要。建議順序：首屏（服務對象＋核心專長＋預約諮詢按鈕）→ 服務項目 → 團隊與資格 → 合作流程與收費方式 → 精選文章或知識內容 → 常見問題 → 預約表單。

三個示範的共同點是：首屏都寫出對象與服務，最後都有清楚的聯絡入口，差別只在中間的段落比重。

首頁常見的錯誤與改法

如果你的首頁有好幾項都中了，不一定要整個重做。先從首屏與聯絡段開始改，這兩段對詢問量的影響最直接；等首頁的骨架調整好，再評估要不要連同視覺一起改版，判斷方式可以參考公司網站什麼時候該改版。

下一步：先寫出你的首屏主標題

一句話總結：公司網站首頁的任務，是讓訪客在幾個畫面內知道你是誰、能為他解決什麼、下一步該怎麼做；內容依「首屏、服務入口、信任證據、流程、關於我們、常見問題、聯絡」排列，每一段只回答一個問題，詳細內容交給各自的頁面。

建議今天就用「對象＋問題＋做法」寫出首屏主標題，拿給不熟悉你公司的人看。接下來的頁面規劃與後台操作，可以回到 Sharing AI 架站平台教學主題頁依學習路線進行，網站長期維護則整理在網站經營主題頁；想了解平台的功能與方案，可以看 Sharing AI 架站平台介紹。如果希望由團隊協助規劃首頁內容與版面，也歡迎直接與我們聯絡。