<iframe> 是 HTML 中用來在目前網頁內嵌另一個網頁或外部內容的元素。實務上，像是 YouTube 影片、Google 地圖、第三方表單、社群內容，或其他外部服務，常常都會用到它。
它的作用不是把外部內容複製到網站裡，而是在原本的頁面中開出一個區塊，直接顯示另一個來源所提供的內容。使用者看起來仍停留在同一個頁面，但實際上 iframe 區域內載入的是另一份文件。
例如：
<iframe
src="https://www.example.com/"
title="範例網站內容"
></iframe>iframe 是什麼？
iframe 全名是 Inline Frame，中文常稱為「內嵌框架」。它會在目前 HTML 文件中建立一個獨立的瀏覽環境，再載入另一個 URL。
常見情境包括：
- YouTube 影片
- Google Maps
- 第三方預約或表單系統
- 社群貼文
- 外部 Dashboard
- 付款或身份驗證服務
因此，iframe 的重點不是把外部內容「搬進來」，而是讓網站在不離開頁面的情況下，整合另一個來源的功能或資訊。
HTML iframe 基本語法
最基本的 iframe 可以寫成：
<iframe
src="https://www.example.com/"
title="範例內容"
width="600"
height="400"
></iframe>其中：
src：指定要載入的網址。width：設定 iframe 顯示寬度。height：設定 iframe 顯示高度。title：描述 iframe 的內容，對使用輔助科技的使用者很重要。
實際網站通常會再搭配 CSS 控制寬度與版面，而不是只依賴 HTML 的固定數值。
現代 iframe 常用屬性
src
指定要嵌入的內容來源：
<iframe src="https://www.example.com/"></iframe>title
title 用來描述 iframe 的用途，讓使用螢幕閱讀器等輔助科技的人知道這個內嵌區塊是什麼。
<iframe
src="https://maps.google.com/..."
title="iDeaweb 公司位置地圖"
></iframe>loading
如果 iframe 不需要在首屏立即載入，可以考慮：
<iframe
src="https://www.example.com/"
loading="lazy"
title="外部內容"
></iframe>loading="lazy" 可以延後載入尚未接近 viewport 的 iframe，降低初始頁面載入負擔。
sandbox
sandbox 可以限制 iframe 內嵌內容能執行的功能。
例如：
<iframe
src="https://www.example.com/"
sandbox
title="受限制的外部內容"
></iframe>也可以依實際需求開放部分功能，例如：
sandbox="allow-scripts allow-forms"不過 sandbox 權限不能隨意加開，必須先確認第三方服務真正需要哪些能力。
allow
allow 可以限制 iframe 使用特定瀏覽器功能，例如全螢幕、相機、麥克風等。
referrerpolicy
referrerpolicy 可以控制載入 iframe 時，瀏覽器向外部來源傳送多少 Referrer 資訊。
哪些舊 iframe 屬性不建議再使用？
一些早期 iframe 教學常會看到：
framebordermarginheightmarginwidthscrolling
這些都屬於較舊的 HTML 寫法，現代網頁不建議再把它們當成主要設定方式。
例如邊框通常應改由 CSS 控制：
iframe {
border: 0;
}iframe 常見用途
YouTube 影片
如果網站要提供影片內容，通常不一定需要自己直接託管大型影片檔案。利用 YouTube 等影音平台提供的 Embed Code，就可以透過 iframe 把影片放進網站。
Google Maps
Google Maps 提供的「嵌入地圖」功能，也是非常典型的 iframe 應用。
第三方表單與服務
預約系統、付款介面、問卷或 SaaS 工具，也常透過 iframe 提供嵌入功能。
iframe 怎麼做 RWD？
如果 iframe 使用固定寬度，例如：
width="800"在手機上就可能超出畫面。
簡單情況可以利用 CSS：
iframe {
max-width: 100%;
}如果是影片，也可以搭配固定比例容器，例如：
.video-wrapper {
aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
}這樣影片就能依容器寬度縮放，而不必固定在某一種螢幕尺寸。
iframe 會影響網站速度嗎？
有可能。每一個 iframe 都會載入另一個獨立的文件環境，可能伴隨額外 HTML、JavaScript、CSS、第三方追蹤程式，甚至圖片或影片資源。
因此，iframe 並不是「用了就一定比較快」。如果頁面同時載入很多 YouTube、地圖、社群工具或第三方服務，仍可能增加頁面負擔。
常見改善方式包括：
- 只有真正需要的地方才使用 iframe。
- 非首屏 iframe 使用
loading="lazy"。 - 避免同一頁嵌入過多第三方服務。
- 實際測試 Core Web Vitals 與頁面載入狀況。
iframe 對 SEO 有什麼影響？
如果網站需要依靠某一段文字內容取得搜尋排名，不建議只把這些重要資訊放在第三方 iframe 裡。
例如把一篇 Facebook 貼文、外部文章或第三方頁面嵌入網站，並不等於自己的頁面就擁有一篇完整且具有搜尋價值的原生內容。
比較好的方式是：
- 頁面本身提供完整、有意義的文字內容。
- iframe 作為補充工具，例如影片、地圖或互動功能。
- 重要標題、說明與上下文仍寫在自己的 HTML 頁面中。
不要把 iframe 當成把別人的內容嵌進來，就能直接增加自己網站 SEO 內容量的方法。
iframe 有哪些安全與隱私注意事項？
iframe 會載入另一個來源，所以在使用第三方內容時，應該先確認來源是否可信。
常見風險包括：
- 第三方內容日後被修改。
- 外部 JavaScript 或追蹤工具。
- Cookies 與第三方資料收集。
- 不必要的相機、麥克風或其他瀏覽器權限。
- 外部服務失效時造成空白或錯誤內容。
如果服務支援，可以透過 sandbox、allow、referrerpolicy 等方式限制 iframe 能力，但仍要依實際服務需求設定。
iframe 對使用者體驗有什麼影響？
iframe 內的內容通常由第三方控制，因此字型、按鈕、顏色與版面可能和自己網站不同。
也可能發生：
- 手機版高度不正確
- 出現雙重捲動條
- 內嵌內容載入失敗
- Cookie 同意畫面遮住內容
- 第三方服務與網站視覺不一致
所以，iframe 最適合用來處理真正需要外部服務能力的區塊，而不是為了方便就把大量網站內容全部透過 iframe 拼裝。
什麼情況不建議使用 iframe？
以下情況通常應該先考慮其他方式：
- 網站主要 SEO 文字內容
- 核心產品資訊
- 重要品牌內容
- 需要高度控制 UX 的介面
- 來源不可信的第三方網頁
- 同一頁需要大量 iframe
如果只是影片、地圖或成熟第三方服務，iframe 則仍然是一種很實用的整合方式。
iframe 常見問題 FAQ
iframe 是什麼？
iframe 是 HTML 的 Inline Frame 元素，可以在目前網頁中嵌入另一個網頁或外部內容，例如 YouTube 影片、Google Maps 或第三方表單。
iframe 對 SEO 不好嗎？
iframe 本身不是 SEO 禁忌，但不應把網站需要排名的重要文字內容完全依賴第三方 iframe 提供。主要內容仍應存在自己的頁面 HTML 中。
iframe 會讓網站變慢嗎？
可能會。iframe 會載入額外的外部資源與文件環境，如果同一頁使用太多，就可能增加網站負擔。非首屏內容可以考慮使用 loading="lazy"。
iframe 可以做 RWD 嗎？
可以。可透過 CSS 的百分比寬度、max-width 或 aspect-ratio 等方式，讓 iframe 配合不同螢幕寬度調整。
frameborder 還需要使用嗎？
新網站通常不建議再使用 frameborder，邊框可直接透過 CSS 的 border 控制。
iframe 安全嗎？
取決於嵌入來源與設定。應使用可信任的第三方來源，並視需求搭配 sandbox、allow 與 referrerpolicy 等限制。
結語
iframe 是很實用的 HTML 元素，適合嵌入影片、地圖、表單與其他第三方服務。
但它不是越多越好。實際使用時，還是要一起考慮 SEO、網站效能、RWD、Accessibility、Security、Privacy 與 User Experience。
把 iframe 當成外部功能的整合工具，而不是取代網站本身內容與結構的方法。
若您正在規劃企業官網建置、網站改版、SEO 架構或 AI Search 內容策略，可進一步與 iDeaweb 艾迪網頁設計討論適合的網站與內容成長方向。
