1. 首頁
2. 知識庫
3. Sharing AI 架站平台教學
4. 網站彈出視窗怎麼用？顯示時機、內容與 Google 干擾式插頁規範

Sharing AI 架站平台教學

網站彈出視窗怎麼用？顯示時機、內容與 Google 干擾式插頁規範

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

彈出視窗是什麼？先分清楚四種「會跳出來」的東西

「彈出視窗」在日常對話裡涵蓋的範圍很廣：一進網站就蓋住整個畫面的優惠廣告、閱讀到一半跳出的訂閱邀請、畫面底部的 Cookie 同意列，甚至是點了一張圖卡後才打開的詳細說明，都有人稱為彈出視窗。這些元素對訪客與搜尋引擎的影響完全不同，混在一起討論，很容易得出「彈出視窗一律不好」或「大家都在用所以沒關係」這種過度簡化的結論。

比較好用的分法，是看兩件事：第一，是誰讓它出現的；第二，它遮住了多少主要內容。網站主動跳出、又遮住大半內容的，風險最高；訪客自己點開、或只占畫面一小塊的，通常不會造成困擾。下表把企業網站常見的幾種整理在一起，後面的章節會一一說明。

本文說的「彈出視窗」，指的是以重疊方式顯示在頁面上方、需要關閉才能回到原本內容的視窗；技術文件裡也稱為對話方塊（dialog）或強制回應視窗（modal）。瀏覽器另開新視窗的舊式 pop-up 大多已被瀏覽器預設封鎖，現在的企業網站很少使用，這裡不另外討論。

Google 怎麼看彈出視窗？干擾式插頁的定義

Google 搜尋中心〈避免干擾性的插頁式廣告和對話方塊〉把這類元素分成兩種：插頁式廣告會覆蓋整個網頁，對話方塊則只覆蓋一部分，以重疊方式顯示，有時也會讓底下的內容難以瀏覽。文件指出，使用干擾性的插頁阻礙使用者瀏覽，可能讓使用者感到困擾、破壞他們對網站的信任，也會讓 Google 和其他搜尋引擎難以解讀內容，進而導致搜尋成效不佳。

這個規範的起點，是 Google 在 2016 年 8 月發布的搜尋中心網誌公告：自 2017 年 1 月 10 日起，使用者從行動搜尋結果前往網頁後，如果無法輕鬆瀏覽當中的內容，這類網頁在搜尋結果中可能排名較低。公告列出三種會干擾瀏覽的做法：

• 使用者從搜尋結果前往網頁後，立即顯示會覆蓋主要內容的彈出式視窗，或在瀏覽途中顯示這類視窗。
• 顯示獨立的插頁式廣告，使用者必須先關閉它才能看到主要內容。
• 版面配置讓首屏看起來像一張獨立的插頁廣告，真正的內容被擠到需要捲動才看得到的位置。

第三點常被忽略：就算沒有用任何彈出程式，如果首頁第一屏被一張巨大的活動圖占滿，訪客要往下捲很久才看得到公司在做什麼，效果其實和插頁差不多。規劃首頁時，可以搭配公司網站首頁要放什麼一文的首屏原則一起檢查。

它對排名的影響有多大？

同一則公告也說明，這只是決定排名的數百個指標之一，搜尋意圖仍然非常重要，內容優質又切題的網頁依然可能有不錯的排名。Google 目前的網頁體驗說明把「網頁是否避免有插頁式廣告干擾」列為自我評估問題之一，同時也說明 Core Web Vitals 以外的網頁體驗層面不會直接提高排名，但這些層面通常讓網站更符合使用需求。

換成實務的說法：不要期待「拿掉彈窗」就讓排名大幅上升，但也不要讓一個彈窗毀掉訪客的第一印象。對企業官網來說，從搜尋進來的訪客通常正在比較廠商，一進站就被擋住，最直接的損失往往不是排名，而是那位訪客直接按上一頁。排名系統的整體觀念，可以參考Google 排名看哪些因素。

哪些彈出視窗不算干擾？Google 列出的例外

並不是所有跳出來的東西都會被視為干擾。前述公告同時列出幾種「使用得當就不會受到影響」的情況，現行說明文件也保留了依法顯示的例外。整理如下：

有一點要特別說清楚：例外指的是「依法必須顯示」或「技術上必要」的情況，不是只要寫上「Cookie」兩個字就能整頁遮蓋。把行銷優惠和 Cookie 同意塞在同一個全螢幕視窗裡，並不會讓優惠變成例外。

依法要顯示的提示：Cookie 同意與年齡驗證怎麼做

有些網站因為內容或法規需要，必須在訪客瀏覽前先顯示提示，例如說明網站使用 Cookie，或販售酒類、提供限制級內容時先確認年齡。Google 的說明文件指出，依法規定的插頁內容不需遵守干擾式插頁的規範，但仍建議盡可能做到兩件事：

1. 讓網頁內容與提示重疊顯示，而不是把內容藏起來。這樣 Google 至少能檢索到部分內容，網頁才有機會出現在搜尋結果中。
2. 不要為了收集同意或資料，把所有連入的網址都轉到同一個「同意頁」。文件提醒，所有網址轉到單一網頁時，只有那一頁能出現在搜尋結果中，因為 Googlebot 只會擷取它。

這兩點對企業網站最常見的情況就是 Cookie 同意。用畫面底部的一條橫幅，比整頁遮罩更好：訪客可以先看內容、再決定是否同意，搜尋引擎也能正常讀取頁面。Sharing AI 後台的「設定 → Cookie 使用政策」開啟後，訪客首次瀏覽網站時就會看到 Cookie 同意橫幅；橫幅文字、隱私權政策與頁尾資訊的完整設定，整理在Cookie 使用政策、隱私權與頁尾資訊一文，這裡不重複。

年齡驗證在一般企業官網比較少見。如果你的產品確實需要，建議先確認相關法規的要求，再決定提示的形式；本文只說明搜尋面的影響，不構成法律意見。

顯示時機怎麼選？進站、捲動、離開與點擊

決定要用彈出視窗之後，最關鍵的設定就是「什麼時候出現」。行銷工具常見的觸發條件有好幾種，它們對訪客的干擾程度差很多。下表依「干擾程度」由高到低排列：

從這張表可以看出一個簡單的原則：視窗出現的時間點越接近訪客「主動想看」，干擾就越小。訪客點了「看完整方案」才打開的視窗，是在回應他的需求；訪客剛點進來就跳出的視窗，是在打斷他。

「離開意圖」常被當成比較溫和的折衷做法，但它依賴滑鼠移動軌跡，手機上沒有相同的訊號，部分工具會改用「快速往上捲」或「按返回鍵」來判斷，誤判的機率更高。如果網站的訪客大多來自手機，不要把主要的轉換入口押在這種觸發方式上。

同一位訪客要看幾次？

就算時機選得好，同一個視窗每換一頁就跳一次，也會讓人厭煩。比較合理的做法是：訪客關閉之後，一段時間內不要再顯示；已經訂閱或送出表單的訪客，就不要再請他做同一件事。從廣告或搜尋點進來、只看一頁就離開的訪客，最不應該被視窗擋住，因為他給網站的機會只有這一次。

彈出視窗的內容怎麼寫？一個視窗只說一件事

彈出視窗的空間很小，訪客停留的時間更短。內容規劃可以用三句話檢查：這個視窗要訪客做哪一件事？訪客為什麼現在就要做？不想做的人要怎麼離開？三個問題都答得出來，視窗才值得存在。

按鈕文案的寫法和網站上其他 CTA 相同，可以直接套用網站 CTA 怎麼設計一文的「動詞＋會得到什麼」公式。視窗內只放一個主要按鈕，其他連結一律降為文字，避免訪客在小小的視窗裡還要做選擇。

如果視窗要請訪客留下 Email 或電話，就等於在蒐集個人資料。以台灣的《個人資料保護法》第 8 條為例，直接向當事人蒐集個人資料時，應明確告知蒐集者名稱、蒐集目的、資料類別、利用方式與當事人權利等事項；在彈出視窗裡放表單，告知說明與隱私權政策連結同樣不能省略。欄位設計與告知文字的寫法，可以參考網站表單怎麼設計？欄位、感謝頁與通知設定。本文不構成法律意見，實際情況請以主管機關說明或專業意見為準。

誇大的倒數與名額

「限時 5 分鐘」「只剩 2 個名額」很常出現在彈出視窗裡。如果倒數每次重新整理都重來、名額永遠只剩兩個，訪客很快就會發現，對品牌的傷害遠大於一次點擊。真的有期限的活動，寫出明確的截止日期與條件就足夠了。

關閉方式：讓訪客一秒就能離開

彈出視窗最讓人反感的，往往不是它出現，而是「關不掉」：關閉按鈕太小、顏色太淡、藏在角落，或者只有一個「不，我不需要」的灰色小字。訪客找不到出口，最常見的反應就是直接離開網站。

一個好關的視窗，至少要提供幾種關閉方式：右上角明顯的關閉按鈕、視窗內的文字選項、按鍵盤的 Esc 鍵，以及點擊視窗外的灰色背景。關閉按鈕在手機上要好按：WCAG 2.2 的 AA 級要求可點擊目標至少 24 × 24 CSS 像素，或保留足夠間距；較嚴格的 AAA 級是 44 × 44 CSS 像素。

關閉之後，畫面要回到訪客原本看的位置，不能把他帶回頁面最上方，也不能因為關閉視窗就自動開啟另一個視窗或另一個分頁。這些看起來是小細節，卻直接決定訪客會不會再相信網站上的下一個按鈕。

手機版要特別注意的四件事

Google 當年針對干擾式插頁的公告，正是從行動搜尋出發：手機螢幕小，一個在桌機上只占三分之一畫面的視窗，到了手機上可能就蓋住了全部。設計時至少要用手機實際檢查以下四件事：

• 大小：視窗高度不要超過畫面，內容超出時要能在視窗內捲動，關閉按鈕始終看得到。
• 位置：能用底部或頂部的小橫幅解決的訊息，就不要用置中的大視窗。
• 疊加：Cookie 橫幅、聊天按鈕、底部固定按鈕列與彈出視窗同時出現時，畫面可能所剩無幾，要實際捲動測試。
• 文字：不要把全部文字做在一張圖片裡，手機縮小後看不清楚，螢幕閱讀器也讀不到。

手機版的整體檢查方式，可以參考RWD 響應式網站為什麼重要；如果網站底部已經有固定的聯絡按鈕列，再加一個置中的彈出視窗，手機畫面幾乎就看不到內容了，兩者擇一即可。

無障礙：對話方塊的鍵盤操作與焦點

彈出視窗對鍵盤與螢幕閱讀器使用者特別容易出問題：視窗打開了，鍵盤焦點卻還停在後面的頁面；或者按了 Tab 鍵，焦點跑到被遮住的內容上，使用者完全不知道自己在哪裡。

W3C 的 ARIA 編寫實務指南〈Dialog (Modal) Pattern〉描述了強制回應對話方塊應有的行為，可以整理成四個檢查點：

1. 視窗打開時，鍵盤焦點移到視窗內的元素（通常是第一個可操作的元素，內容較長時可以先停在標題）。
2. 按 Tab 與 Shift＋Tab 時，焦點只在視窗內循環，不會跑到後面的頁面。
3. 按 Esc 鍵可以關閉視窗。
4. 關閉之後，焦點回到當初打開視窗的那個按鈕或連結。

這些行為多半由網站平台或彈出工具的程式處理，網站管理者能做的是實際測試：用鍵盤從頭操作一次，確認打得開、關得掉、焦點不會迷路。視窗裡的圖片要寫替代文字，按鈕要有清楚的文字，這兩件事則完全掌握在編輯內容的人手上。

彈出視窗會拖慢網頁嗎？從 CLS 看版面位移

彈出視窗和網頁速度的關係，主要在 Core Web Vitals 的 CLS（累計版面配置位移）。這項指標衡量頁面在載入與使用過程中，內容「突然移動」的程度；Google 建議的良好標準是 0.1 以下。

根據 web.dev 的 CLS 說明，版面位移是指可見元素的起始位置改變，例如在既有內容之前動態插入元素，把下面的內容往下推。因此，在頁面最上方晚一點才插入的公告列，會把整頁內容往下推，最容易造成 CLS；疊在內容上方、不推動版面的視窗，則不會因為出現而產生位移。說明也提到，使用者點擊、輕觸或按鍵後 500 毫秒內發生的版面變動會被排除在計算之外，所以訪客自己點開的視窗通常不受影響。

另一個常被忽略的影響是第三方彈窗工具本身的程式碼。每加一個行銷工具，就多一段要下載與執行的程式。PageSpeed Insights 報告怎麼看、哪些指標要先處理，整理在PageSpeed Insights 怎麼看；工具代碼的安裝與整理方式，則可以參考網站行銷代碼怎麼裝。

Sharing AI 的「彈出視窗」區塊：點擊後才開啟的介紹卡

在 Sharing AI 後台編輯頁面時，按「新增區塊」會看到「彈出視窗」這個類別，裡面只有一個同名的區塊。它和前面討論的「進站自動跳出」不一樣：這個區塊在頁面上先以一組圖卡呈現，訪客點選某一張圖卡後，才會彈出該項目的完整介紹。2026 年 10 月我們檢視後台的新增視窗時，欄位中沒有「進站自動跳出」或「延遲幾秒顯示」這類觸發設定。

這種「點了才看」的設計，正好符合 Google 對非干擾式內容的方向：頁面一打開，訪客就能看到所有項目的圖片與名稱，想深入了解哪一項再自己點開。平台官方教學建議用它呈現比較式內容、作品集、多項服務或合作夥伴介紹，並建議以 4 的倍數安排組數，排版會比較整齊。

最後一列要特別留意。彈出視窗裡的文字，訪客要點擊才看得到；頁面最重要的內容，例如服務是什麼、適合誰、怎麼聯絡，不要只放在視窗裡，應該直接寫在頁面本文，彈出視窗只負責補充細節。

彈出視窗區塊怎麼設定？逐步操作

以下步驟依 2026 年 10 月後台畫面整理（唯讀檢視，未儲存任何變更）。區塊加入頁面後，頁面編輯畫面會出現這個區塊的清單，每一筆項目會顯示標題、次要名稱、顯示期間、排序與預覽比例，並有「預覽」「編輯」「刪除」按鈕。

1. 進入要放置的頁面編輯畫面，按「新增區塊」，在「系統區塊」分頁點選「彈出視窗」類別，加入「彈出視窗」區塊。
2. 在區塊上按「新增」，開啟新增視窗，先填「基本設定」分頁。
3. 設定「顯示期間」：開始日期預設為當天，結束日期可以留空；有期限的項目填入結束日期，到期後就不必記得手動下架。
4. 設定「排序」：數字決定這一筆在圖卡中的順序。
5. 選擇「預覽圖比例」：可選橫式（4:3）、直式（3:4）、方形（1:1）或自訂比例，自訂時填入寬度與高度。
6. 在「圖片」按「新增圖片」上傳圖卡用的圖片，並填寫替代文字。
7. 切到「內容」分頁，填寫「標題」與「次要名稱」（兩者都是選填，次要名稱會顯示在網站上作為副標），再於「彈出視窗內容」編輯器撰寫完整說明，可以設定樣式與連結。
8. 按「儲存」，用前台預覽確認圖卡排列、點擊後的視窗內容，以及手機版的顯示。

圖片與文字的小建議

同一組圖卡的圖片，建議使用相同的尺寸與比例，排列起來才整齊；平台官方教學也提醒每張圖片的替代文字一定要填。圖卡上的標題保持簡短，例如服務名稱或作品名稱，次要名稱用一句話補充類別或特色。視窗內容建議分成兩到三個短段落，最後放一個指向服務頁或聯絡頁的連結，讓看完細節的訪客有下一步可走。

圖片的尺寸與壓縮原則，和網站其他圖片相同。素材準備可以參考架站前要準備哪些品牌素材；如果彈出視窗區塊放在首頁，整頁的段落順序則可以對照公司網站首頁要放什麼。

想讓所有訪客都看到的公告，改用頁面內的區塊

很多公司想用彈出視窗，是因為有「一定要讓大家知道」的事：年節公休、搬遷通知、價格調整、限期活動。這類訊息的重點是「被看到」，而不是「擋住訪客」。比較穩妥的做法，是把它放進頁面本身：

• 首頁主視覺：把公告做成輪播看板的其中一張，或直接寫進首屏的說明文字。
• 頁面上方的一段：在首頁或相關頁面最上方加一個簡短的文字段落或圖文區塊，寫清楚日期與影響範圍。
• 全站共用的段落：需要出現在多個頁面時，做成同步區塊，改一次就全站更新；做法在網站 CTA 怎麼設計有完整說明。
• 有期限的活動：放進彈出視窗區塊的項目可以設定顯示期間；頁面上的區塊則要記得在活動結束後移除或改寫。

這些做法都不需要任何彈窗程式，也不會遮住內容。公告結束後忘記下架，比沒有公告更傷信任：訪客看到三個月前的「春節公休」，會懷疑這個網站還有沒有人在管理。建議把所有有期限的內容列成一張表，記下上架日、下架日與負責人。

常見錯誤與改善方式

上線前的彈出視窗檢查清單

網站加入任何彈出元素之前，用下面這份清單走一遍；最好請一位沒參與製作的同事，用自己的手機實際操作。整體上線檢查可以搭配用 Sharing AI 架站，上線前要檢查什麼一起使用。

1. 說得出這個視窗要訪客做哪一件事，而且它不能用頁面內的區塊取代。
2. 從搜尋結果或廣告點進來時，主要內容不會被視窗蓋住。
3. 觸發方式是訪客自己點擊，或至少不是進站立刻跳出。
4. 依法顯示的 Cookie 提示以橫幅呈現，沒有把網址轉到單獨的同意頁。
5. 視窗只有一個主要按鈕，按鈕文字說得出按下去會得到什麼。
6. 關閉按鈕明顯、手機上好按，Esc 鍵與點擊背景都能關閉。
7. 用鍵盤操作時，焦點會進入視窗、在視窗內循環，關閉後回到原本的按鈕。
8. 圖片有替代文字，重要文字沒有只做在圖片裡。
9. 手機上視窗不超出畫面，也沒有和固定按鈕列、聊天按鈕互相遮擋。
10. 有期限的項目都設定了結束日期，並記在下架清單裡。

下一步：先把最擋路的那個視窗拿掉

整篇濃縮成三件事：第一，判斷彈出視窗的關鍵是「誰觸發、遮住多少」，進站就蓋住內容的視窗最該避免，依法顯示的 Cookie 與年齡提示屬於例外；第二，真的要用時，讓訪客自己點開，內容只說一件事、一秒就能關閉，手機與鍵盤都要測過；第三，想讓所有人看到的公告，放進頁面內的區塊，並設定好下架日期。

如果網站現在就有進站自動跳出的視窗，最簡單的第一步是把它改成頁面上的一段橫幅，記下修改日期，幾週後再比較詢問與跳出的變化。Sharing AI 後台其他區塊的用法，可以回到 Sharing AI 架站平台教學主題頁查詢；想了解平台方案，可以從 Sharing AI 架站平台開始。如果希望由專業團隊協助規劃網站的內容與轉換動線，也歡迎直接與我們聯絡。