返回 Blog
餐廳網站

25 個最佳餐廳網站,依 6 項測試評分

Ali Tanis 個人頭像Ali Tanis閱讀時間 19 分鐘
分享:
25 個最佳餐廳網站,依 6 項測試評分

好的餐廳網站會在手機首屏做好三件事:讓人看到餐點或店內環境,把訂位或點餐按鈕放在拇指點得到的位置,而且不自己擋自己的路。我們在 2026 年 10 月 1 日依照這些標準,替 25 家知名餐廳網站逐一評分,沒有一家拿到滿分 10 分。

搜尋「最佳餐廳網站」時排在前面的靈感圖庫,展示的是截圖和一堆設計形容詞。這篇給的是分數:每個網站都在手機尺寸的螢幕上檢查過,菜單逐一解析,速度則來自 Google 自己的真實使用者資料。該學的是能改善顧客體驗的做法,而不是只是看起來很貴的設計。

重點摘要:在這批最佳餐廳網站中,有 5 家以 9/10 並列第一:Commander's Palace、Carbone、Franklin Barbecue、Russ & Daughters 與 Sweetgreen。全部 25 家裡,有 14 家的手機首屏被彈出視窗遮住一部分,只有 2 家在每道菜旁邊都放了照片,所以彈出視窗和照片正是多數餐廳失分的地方。

我們怎麼替最佳餐廳網站評分

我們用顧客幾秒內就感受得到的六項測試,替每個餐廳網站打分數,滿分 10 分:首屏主視覺圖、看得到的訂位或點餐按鈕、首屏的彈出視窗、菜單格式、菜單是否附餐點照片,以及真實使用者的載入速度。每一項都來自 2026 年 10 月 1 日的即時檢查。

  • 手機首屏。我們用 Google PageSpeed Insights 的行動裝置模式檢查每個網站的首頁,並看它擷取的最後一張截圖,也就是訪客往下滑之前看到的畫面。
  • 速度。我們採用同一次測試中的 Chrome UX Report 真實使用者資料:真實 Chrome 使用者第 75 百分位數的最大內容繪製(Largest Contentful Paint,LCP)時間。Google 的 LCP 說明把 2.5 秒以內定為「良好」。
  • 菜單。我們抓取了每個網站的首頁和菜單,記錄 PDF 連結、圖片與價格,再逐一人工閱讀確認。
測試項目2 分1 分0 分
首屏主視覺圖餐點或店內照片插畫、標誌、文字,或照片被部分遮住被遮住或空白
訂位 / 點餐按鈕看得到只在彈出視窗裡,或被彈出視窗擋住看不到
彈出視窗無只有 Cookie 橫幅促銷、電子報或公告彈出視窗
菜單格式搜尋引擎可爬取的 HTML總覽頁、腳本載入,或與 PDF 混用只有 PDF、只有圖片、沒有連結
餐點照片不適用有餐點照片(1 分)無
真實使用者速度不適用LCP 在 2.5 秒以內(1 分)超過 2.5 秒

有兩點要先說明。實驗室分數每次跑都會差上好幾分,所以我們列出來但不計分。彈出視窗也會隨所在地區和季節而改變。請把這份結果當成某個時間點的快照,而不是永久定論。

Chrome 碼錶放在一份厚重的摺頁紙本菜單和一張輕薄的單頁菜單旁,象徵頂尖餐廳網站背後的速度測試

評分總表:25 個最佳餐廳網站比較

有 5 個餐廳網站以 10 分中的 9 分並列,沒有一個拿到 10 分。實驗室效能分數的中位數是 100 分中的 56 分,沒有任何網站達到 Google 90 分的「良好」區間,而多數網站失分的原因是彈出視窗和缺少餐點照片,而不是視覺設計不夠好。

#餐廳主打看得到訂位/點餐彈出視窗菜單格式餐點照片實驗室真實使用者 LCP分數
1Commander's Palace建築外觀有無HTML無401.0 秒9
2Carbone用餐區有無腳本分頁部分841.2 秒9
3Franklin Barbecue烤肉拼盤有CookieHTML一盤烤肉591.6 秒9
4Russ & Daughters餐點 + 按鈕有無商店 + Toast商品561.4 秒9
5Sweetgreen用餐中的人有CookieHTML每道菜402.1 秒9
6Eleven Madison Park廚房有無無作品集552.3 秒8
7Chez Panisse插畫有無HTML無431.7 秒8
8Balthazar用餐區有無總覽頁12+ 道菜573.5 秒8
9Din Tai FungLogo有CookieHTML + PDF每道菜401.6 秒8
10Alinea餐盤特寫有無無無591.0 秒7
11St. JOHN用餐區有無沒有連結無601.2 秒7
12Dishoom引言有CookieHTML20+ 張,沒有替代文字323.1 秒7
13Noma食物圖片有Cookie無無562.0 秒6
14BAO London部分被遮住有Cookie總覽頁無881.9 秒6
15Zahav用餐區在彈出視窗裡公告HTML + PDF無411.4 秒5
16Padella義大利麵否公告HTML無701.0 秒5
17Joe's Stone Crab部分被遮住否公告HTML + PDF一道菜363.4 秒4
18Gramercy Tavern被遮住否促銷HTML作品集242.0 秒4
19Zuni Café外觀否無PDF無653.0 秒4
20Via Carota標誌插畫否無圖片作品集393.1 秒4
21Katz's Delicatessen被遮住否電子郵件HTML商品分類562.0 秒4
22Hawksmoor被遮住被遮罩擋住地區HTML無611.5 秒4
23Sketch被遮住有Cookie訂位頁面只有空間照252.6 秒4
24Roberta's開場畫面否無沒有連結無421.8 秒3
25Momofuku部分被遮住否電子報沒有連結無612.1 秒2

最佳餐廳網站評分總表。實驗室 = PageSpeed Insights 行動版效能分數(0-100)。真實使用者 LCP = Chrome UX Report,第 75 百分位數。所有檢查皆於 2026 年 10 月 1 日進行。

最佳餐廳網站做對了什麼

做得好的餐廳網站會在首屏放一個清楚的行動按鈕,讓照片負責推銷。比較弱的網站則把首屏埋在彈出視窗底下、把菜單藏進 PDF,或根本不放食物照片。這 25 次檢測整理出五項發現,每一項都能在你自己的網站上輕鬆檢查。

1. 首屏是多數網站流失訪客的地方

就連頂尖的餐廳網站也在這裡絆倒。25 家中有 14 家的手機首屏被遮住一部分:7 家是 Cookie 橫幅,7 家是促銷或公告彈出視窗。Gramercy Tavern 一打開就跳出宣傳 Danny Meyer 新書的彈出視窗;Katz's 則是要你留下電子郵件換周邊商品。肚子餓的訪客得先關掉一個方框才看得到晚餐,第一印象很差。

一對情侶從半拉下的鐵捲門底下望進燈火通明的用餐區,就像彈出視窗把餐廳網站藏了起來

2. 25 家中只有 15 家在首屏放了訂位或點餐按鈕

最強的網站讓行動按鈕不可能被忽略:Franklin Barbecue 的橘色「Order in Advance」(提前預訂)箭頭,Eleven Madison Park 唯一一顆「Book on Resy」(在 Resy 訂位)按鈕。有 8 個網站在往下滑之前看不到任何訂位或線上點餐的按鈕,訪客只好在導覽選單裡到處找。

3. 25 家中只有 2 家在每道菜旁邊放照片

Din Tai Fung(鼎泰豐)和 Sweetgreen 替每道菜都拍了照片,Sweetgreen 還為每一張寫了描述清楚的替代文字。另外有 10 家放了部分食物照片。有 13 家的菜單完全沒有餐點照片,這是成本最低、最容易補上的缺口。

4. HTML 勝過 PDF

有 11 個網站提供手機和搜尋引擎都讀得懂的 HTML 菜單。Zuni Café 連到「Sample」(範本)PDF;Via Carota 放的是一張沒有價格的圖片。Eleven Madison Park、Alinea 和 Noma 完全不公開菜單,這是只供應品嚐套餐的餐廳刻意的選擇。我們的如何設計餐廳菜單指南談的是版面,會賣的菜單描述則談文字。

5. 真實使用者的速度比實驗室數據顯示的更快

速度是這些頂尖網站最讓人意外的地方。沒有一個網站在實驗室拿到 90+ 分,但 25 家中有 19 家對真實訪客通過了 2.5 秒的 LCP 門檻。Gramercy Tavern 在實驗室只拿到 24 分,對大多數真實使用者仍能在 2.0 秒內載入完成。Noma 的首頁在實驗室測試中約有 19 MB。

25 個最佳餐廳網站,依分數排名

依評分標準的分數排序,這些餐廳網站告訴你哪些值得學、哪些該改。每一則都會點出網站做對的地方,以及一個能拉高分數的改動。同分者不分先後,所有說法都來自我們 2026 年 10 月 1 日的檢查,餐廳更新網站後細節可能會改變。

1. Commander's Palace(紐奧良):9/10

Commander's Palace 一打開就是那棟藍白相間的建築,導覽列有「Reserve」(訂位),主視覺圖上還有一個訂位按鈕,兩者都連到 Tock。菜單是真正的 HTML 文字,連「+3.50」的加點選項都有。這個設計讓訂位成為最自然的下一步。改善建議:沒有餐點照片。附近的餐廳老闆可參考:紐奧良菜單圖片編輯。

2. Carbone(紐約):9/10

Carbone 在實驗室拿到 84 分,是這裡的第二名,以設計感這麼重的網站來說算快,而且把「Reserve a table」(訂位)放在燭光映照的用餐區上方。肉丸和帕瑪森焗小牛排的餐點照片和菜單一起放在首頁。改善建議:菜單分頁由腳本載入,搜尋引擎可能看不到多少文字。請參考紐約美食照片。

3. Franklin Barbecue(奧斯汀):9/10

Franklin Barbecue 擁有這批網站中最清楚的行動呼籲:一個大大的橘色「Order in Advance」(提前預訂)箭頭,壓在一整盤烤肉上,點下去就是線上預購。價格是純 HTML(牛胸肉每磅 $42)。改善建議:整個網站只靠一張烤肉盤照片撐場面;可以看看我們的奧斯汀餐廳食物攝影報價比較,比較各種做法。

4. Russ & Daughters(紐約):9/10

Russ & Daughters 把首屏變成四個大按鈕(Order Now、Locations、Send a Gift、Cookbook),是專為拇指操作設計的版面。線上點餐透過 Toast 進行,商店裡滿是燻鮭魚配貝果的照片。改善建議:菜單放在另一個商店子網域上,分散了搜尋排名訊號。

5. Sweetgreen:9/10

Sweetgreen 是菜單攝影的範本:每個品項都有自己的照片和描述清楚的替代文字,頁首還有「Order」(點餐)。改善建議:價格只出現在線上點餐流程裡,而且以這種規模的品牌來說,實驗室 40 分偏低。連鎖品牌可以看看我們的外送平台美食照片指南,以及Uber Eats 與 DoorDash 菜單照片規範。

6. Eleven Madison Park(紐約):8/10

Eleven Madison Park 呈現廚房忙碌的樣子,加上一顆橘色的「Book on Resy」(在 Resy 訂位)按鈕。沒有任何東西搶走注意力,下一步該做什麼一目了然。改善建議:沒有公開菜單;放一份範例菜單就能回答用餐客人的第一個問題。可以比較我們的Fine Dining 美食攝影方案。

7. Chez Panisse(柏克萊):8/10

Chez Panisse 一打開是一幅植物圖鑑風的番茄插畫,加上簡單的導覽列:Menu、Reservations、Information。咖啡館菜單是附價格的 HTML(「Rocket and fennel salad… $24」)。改善建議:插畫的吸引力不如真實的美食照片;就算只在一道季節料理後面放上唯美背景,效果也會更好。

8. Balthazar(紐約):8/10

Balthazar 把電話、地址、「Main Menu」(主菜單)、訂位和外送放在用餐區照片上方,讓顧客要做的每件事在首屏都有位置。它的菜單總覽頁有十幾張餐點照片,檔名標註了攝影師 Michael Grimm。改善建議:真實使用者 LCP 是 3.5 秒,是 25 家中最慢的。

攝影師站在梯子上,在空無一人的法式小酒館裡從正上方拍攝黑胡椒牛排,為餐廳菜單拍一組照片

9. Din Tai Fung(美國):8/10

Din Tai Fung 首屏是醒目的標誌,下方是 Reserve 和線上點餐按鈕。HTML 菜單上的每道菜都有風格一致的商品照,也都有自己的頁面。改善建議:只放標誌的首屏,浪費了網站上最好的食物照片。

10. Alinea(芝加哥):7/10

Alinea 一打開是抽象的餐盤特寫,兩顆訂位按鈕說明它在 11 月從 Tock 改用 OpenTable。改善建議:沒有菜單。請參考芝加哥美食 AI 攝影。

11. St. JOHN(倫敦):7/10

St. JOHN 呈現純白的用餐區,頁面上方有「Reservations」(訂位)連結,首頁還內建訂位表單。改善建議:首頁沒有連到菜單。請參考倫敦餐廳 AI 修圖。

12. Dishoom(英國):7/10

Dishoom 以一段關於孟買的引言開場,頁首有「Book」(訂位)。它的 HTML 菜單列出價格,還放了 20+ 張大照片,但替代文字全是空的。改善建議:替每張圖片寫上描述;真實使用者 LCP 是 3.1 秒。

13. Noma(哥本哈根):6/10

Noma 先賣體驗再賣食物:首屏是一張氛圍沉鬱的食物圖片、「Copenhagen 2026」和「Book a table」(訂位)。改善建議:Cookie 橫幅蓋住畫面下方三分之一,而且頁面在實驗室測試中約有 19 MB。

14. BAO London:6/10

BAO 拿下這裡最好的實驗室分數(88),並在頂端列放了「Book here」(在此訂位)。改善建議:Cookie 彈出視窗蓋住主視覺圖,菜單頁放的是分店照片,而不是刈包。

15. Zahav(費城):5/10

Zahav 先呈現溫暖的用餐區,接著跳出一個關於週一營業時間的公告彈出視窗,「Book Here」(在此訂位)就在視窗裡。酒吧和甜點菜單只有 PDF。改善建議:改用細長橫幅,並提供 HTML 菜單。請參考費城餐廳照片。

16. Padella(倫敦):5/10

Padella 有一張漂亮的義大利麵照片,還有標註當天日期的 HTML 菜單,這個獨特的小細節讓體驗感覺很即時。改善建議:團體訂位的彈出視窗擋住了首屏。

17. Joe's Stone Crab(邁阿密海灘):4/10

Joe's Stone Crab 在我們測試時顯示季節性休業公告(10 月 16 日重新營業)。HTML 菜單上的特大蟹螯是 $129.95,另外還有一份 PDF。改善建議:LCP 3.4 秒,而且只有一張餐點照片。請參考邁阿密餐廳 AI 食物攝影。

動態模糊的服務生從忙碌的廚房出餐口端起清晰靜止的餐盤,正是用餐客人期待餐廳網站具備的速度

18. Gramercy Tavern(紐約):4/10

Gramercy Tavern 有附價格的 HTML 菜單(Seafood Platter $54)和照片集。改善建議:宣傳新書的彈出視窗把所有內容都擋住了,而且它的實驗室分數是最低的(24)。

19. Zuni Café(舊金山):4/10

Zuni Café 有一張建築與窗戶在黃昏時分的美麗照片。改善建議:「Sample」(範本)PDF 菜單、頁面上方沒有給訪客的訂位按鈕,LCP 3.0 秒。請參考舊金山美食攝影。

20. Via Carota(紐約):4/10

Via Carota 用插畫風的標誌設計包住整個首屏,並保留一個符合品牌風格的餐點照片集。改善建議:菜單是一張沒有價格的圖片。

21. Katz's Delicatessen(紐約):4/10

Katz's 經營完整的線上商店,有煙燻牛肉、湯品和貝果的分類照片。改善建議:收集電子郵件的彈出視窗蓋住首屏,菜單還讓顧客得自己從連帽衫和禮物卡之間找出煙燻牛肉。

22. Hawksmoor(英國):4/10

Hawksmoor 的 HTML 菜單乾淨清楚,附有價格(菲力 £46/£59)。改善建議:分店選擇視窗和 Cookie 橫幅疊在主視覺圖上,擋住了「Book a table」(訂位)。

23. Sketch(倫敦):4/10

Sketch 把訂位和菜單整合成頁首的一顆按鈕,是聰明又獨特的做法。改善建議:Cookie 彈出視窗蓋住首屏,實驗室還記錄到主執行緒被阻塞 29.4 秒。

24. Roberta's(紐約):3/10

Roberta's 連到 OpenTable、外送的線上點餐和外燴服務。改善建議:我們測試的最後一個畫面仍停在紅色開場畫面,而且沒有連到菜單。

25. Momofuku:2/10

Momofuku 替旗下大多數餐廳提供 OpenTable 連結。改善建議:電子報和 Cookie 彈出視窗蓋住首屏,而且沒有連到菜單。對餐飲集團來說,在導覽列放一個「Menus」(菜單)總覽頁就能解決大部分問題。

為什麼表現差的餐廳網站敗在照片

大多數餐廳網站敗在照片,因為現代網站範本預設要有一張主視覺圖和一整組餐點照片,而餐廳從來沒拍過。就算在最佳餐廳網站之中,25 家也有 13 家的菜單沒有任何餐點照片;過關的網站不是花錢請專業攝影,就是有連鎖規模的拍攝計畫。

空著的圖片欄位會讓任何現代網站設計看起來像沒做完,字體再好看也一樣,而這正是多數獨立餐廳卡住的地方。我們的餐廳品牌行銷指南說明一種照片風格如何把品牌貫穿你的網站、社群和外送平台,照片菜單指南則說明為什麼視覺化菜單能幫客人做選擇。

十二道菜盛在同款灰色石器餐盤上,排成相同角度的俯拍網格,是一組風格一致、適合餐廳網站的美食照片

網站範本需要的一組照片:

圖片欄位數量比例呈現內容
主打1-216:9,主體置中,方便手機裁切招牌菜或營業中的用餐區
餐點8-12 道招牌熱銷菜1:1,相同角度與桌面每個品項一張照片
店內與外觀2-3橫式用餐區、吧台、大門
Google 與社群重複使用1:1 或 4:5同一批餐點照片也用在你的 Google Business Profile(Google 商家檔案),裁切成商家檔案照片規格

先從最賺錢的菜色開始;菜單工程會告訴你是哪幾道。補齊這組照片有三種做法。請專業攝影的掌控度最高;我們的美食攝影費用拆解列出價格範圍,餐廳拍攝企劃則幫你規劃拍攝當天。如果你照著我們的用手機拍食物的步驟和美食攝影打光教學,用手機自己拍也行得通。第三條路是AI 美食攝影:FoodShot 能把每道菜的手機照片,在大約 2 分鐘內變成攝影棚風格的 2K 圖片(2048 px)。每道菜都套用 200+ 種風格中的同一種,整組照片就會一致;或者用 My Styles(我的風格)配合你現有的品牌照片。它也是一款 iOS 與 Android 上的美食照片修圖 App,方案每月 $15 起,可處理 25 張照片。我們的餐廳美食拍照完整指南深入比較這三種做法。

先說清楚:FoodShot 提供的是照片,不是網站。你可以像放任何照片一樣,把檔案放進 Squarespace、BentoBox、Webflow 或 WordPress。我們的餐廳美食照片頁面說明了整個流程,同一組照片也能用在外送平台和所有線上店家頁面,詳見如何提升餐廳外送銷售額。

這次檢測還暴露出兩個細節。替每張餐點照片寫替代文字,像 Sweetgreen 那樣,而不是像 Dishoom。還有,依照圖片欄位實際顯示的尺寸匯出圖片,因為手機首屏上最大的元素通常是一張圖片,它就是你的 LCP。

10 分鐘檢查你自己的餐廳網站

你可以用免費工具,在大約十分鐘內,拿我們評比最佳餐廳網站的同一套標準替自己的餐廳網站打分數。跑一次 PageSpeed 測試,看看手機首屏,打開你的菜單,再數一數餐點照片有幾張。任何得 0 分的項目就是你下一個要改的地方,而且大多是不用重新設計就能輕鬆搞定的改善。

餐廳老闆打烊後在吧台勾選列印出來的網站檢查清單,身後的椅子都已倒放在桌上

  1. 現在就用行動裝置模式跑一次 PageSpeed Insights。記下真實使用者的 LCP;目標是 2.5 秒以內。
  2. 看看首屏。有沒有食物或店內的照片,以及不用往下滑就點得到的訂位或點餐按鈕?
  3. 數一數你要關掉幾個視窗。把任何彈出視窗改成細長橫幅,是很簡單的改動。
  4. 打開你的菜單。如果它是 PDF 或圖片,就改做成 HTML,附上價格、過敏原資訊,並在旁邊放上營業時間。
  5. 數一數餐點照片。招牌熱銷菜不到 8 道有照片?用我們的菜單攝影指南安排一次拍攝。
  6. 檢查替代文字。描述這道菜(「crispy pork belly bao with peanut powder」,花生粉脆皮五花肉刈包),而不是寫「IMG_4471」。

想把更多網站訪客變成上門用餐的客人,請看我們整理的餐廳宣傳點子,以及我們比較過的餐廳行銷工具。

常見問題

最佳餐廳網站有什麼不同?

我們測試中表現最好的餐廳網站有三個共同點:首屏有真實照片、有一顆看得到的訂位或點餐按鈕,而且沒有彈出視窗擋住這兩者。設計風格差異很大,從 Chez Panisse 的插畫到 Russ & Daughters 的大按鈕都有,可見體驗比外觀更重要。

餐廳網站該用 PDF 菜單嗎?

能避免就避免。PDF 在手機上很難閱讀,能提供給搜尋引擎的資訊也比較少。在我們測試的頂尖餐廳網站中,只有 Zuni Café 完全依賴 PDF。把 PDF 當成可選的下載檔案就好,像 Joe's Stone Crab 和 Din Tai Fung 那樣,而不是唯一的版本。

餐廳網站在手機上應該多快載入?

Google 認為,真實使用者在第 75 百分位數的 LCP 達到 2.5 秒以內就算良好。我們檢查的 25 個頂尖餐廳網站中,有 19 個達到這個門檻,但實驗室分數比較低(中位數 56),因為實驗室模擬的是一支速度慢的手機。

餐廳網站需要多少張美食照片?

請準備一到兩張主視覺圖、8-12 張招牌熱銷菜照片,以及 2-3 張店內或外觀照片。在我們檢測的頂尖餐廳網站中,只有 Din Tai Fung 和 Sweetgreen 替每道菜都拍了照片,所以一整組照片是真正能脫穎而出的方式。

彈出視窗會傷害餐廳網站嗎?

它們會賠掉第一印象。我們測試的 25 個頂尖餐廳網站中,有 14 個的手機首屏被遮住一部分。如果你現在真的需要發布公告,一條細長橫幅就能傳達同樣的訊息,又不會擋住客人看晚餐。

關於作者

Foodshot - 作者個人頭像

Ali Tanis

FoodShot AI

#最佳餐廳網站
#餐廳網站範例
#餐廳網站設計
#餐廳網站設計靈感

用 AI 改造您的美食照片

將自家菜餚的手機照片變成專業美食照片,每張約 2 分鐘。方案 $15/月起。