如何編寫一個良好的 index.html 文件，你學會了嗎？
每個網絡開發者都曾遇到過這種情況：你正在開始一個新項目，面對著一個名為 index.html的空文件。你努力回憶，哪些標簽應該放在 <head> 中？哪些 meta 標簽是最佳實踐，哪些是過時的？
最近，我發現自己正處在這種情況中。我的第一反應是從之前的項目中復制頭部分，但當我審查代碼時，我意識到 有些標簽已經過時或根本不需要。于是，我深入研究了 HTML 頭標簽——哪些是必要的，哪些是可選的，哪些只是代碼的累贅。
如果你時間緊迫，只想看模板：你可以在 GitHub 上找到我的完整起始模板。該倉庫包含兩個主要文件：
- index.html：一個干凈、極簡的模板，只包含你需要的內容，沒有不必要的額外內容。
- index-commented.html：同一個模板，但帶有詳細注釋，解釋如何以及為什么要使用每個標簽。
本文本質上是對 index-commented.html 文件中的注釋進行深入探討，為模板中的每一個決策提供更多的背景和解釋。
這個模板代表了我在研究當前最佳實踐后形成的觀點。它旨在為大多數網絡項目提供堅實的基礎，同時保持良好的性能、可訪問性和搜索引擎優化。
讓我們深入探討一個結構良好的 HTML 頭的關鍵組成部分。
必須包含的標簽
這些標簽應該出現在你幾乎每一個 HTML 文檔中。它們對于正確的渲染、SEO 和可訪問性都是至關重要的。
<!DOCTYPE html> 和 lang="en"：設置文檔類型和語言
<!DOCTYPE html> <html lang="en"></html>總是從 HTML 文檔的 doctype 聲明開始。這告訴瀏覽器你使用的是哪個版本的 HTML（在這個例子中是 HTML5）， 并有助于確保一致的渲染。<html> 標簽上的 lang 屬性指定頁面的語言——這對于屏幕閱讀器、搜索引擎和瀏 覽器來說至關重要。如果您的內容是其他語言，請相應地更改代碼（例如，lang="es" 用于西班牙語）。
<title>：頁面標題
<title>Hello world!</title>每個 HTML 文檔都必須有一個標題標簽。這個文本出現在瀏覽器標簽頁、書簽和搜索引擎結果中。讓你的標題既描 述性又簡潔，理想情況下不超過 60 個字符。一個好標題既能告知用戶頁面內容，又能包含 SEO 的相關關鍵詞。
<meta name="viewport">：配置視口以適應響應式設計
<meta
name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>在今天以移動設備為主的世界上，這個 meta 標簽是必不可少的。它告訴移動瀏覽器如何控制頁面的尺寸和縮放。 讓我們分解一下每個參數的作用：
- viewport-fit=cover：確保內容延伸到顯示的邊緣（對于有缺口的手機尤其重要）
- width=device-width：將頁面的寬度設置為設備屏幕的寬度
- initial-scale=1.0：設置頁面首次加載時的初始縮放級別
- minimum-scale=1.0：防止用戶縮放到太小
- maximum-scale=5.0：允許用戶縮放到最多 5 倍（完全限制這可能會損害可訪問性）
沒有這個標簽，移動設備將以典型的桌面屏幕寬度渲染頁面，然后縮放，導致文字太小，難以閱讀，并迫使用戶進 行縮放和平移。
<meta name="description">、<meta name="keywords">、<meta name="author">：基本的元信息
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />這些 meta 標簽提供了關于你頁面的重要信息：
- description：你頁面內容的簡潔摘要（理想情況下 150-160 個字符）。這通常出現在搜索結果中，位于你的 標題下方。
- keywords：你頁面內容的相關關鍵詞。雖然現在對 Google 來說不那么重要，但其他搜索引擎和網絡爬蟲可能 仍然使用這些信息。
- author：創建頁面的個人或組織的姓名。
雖然這些標簽不會直接影響頁面渲染，但它們對 SEO 和內容分類很有價值。
<link rel="canonical">：避免重復索引
<link rel="canonical" href="" />這個標簽幫助搜索引擎避免當內容可以通過不同 URL 訪問時重復索引。例如，如果您的頁面可以通過多個 URL 訪問（如 example.com/page 和 example.com/page/index.html），canonical 標簽告訴搜索引擎哪個 URL 是要索引的“官方”版本，防止重復索引，這可能會損害您的搜索排名。
在 href 屬性中填入您希望搜索引擎與該內容關聯的主要 URL。
CSS 加載策略：關鍵內聯 CSS 與外部樣式表
<style>
body {
background: #fefefe;
color: #222;
font-family: 'Roboto', sans-serif;
padding: 1rem;
line-height: 1.8;
}
</style>
<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="main.css" /></noscript>這種 CSS 加載策略通過以下兩種方式優化性能：
- 內聯關鍵 CSS：通過將關鍵樣式直接嵌入 HTML 文檔中，您可以避免加載樣式表的額外網絡請求，這會阻止渲染。這使得關鍵樣式加載得非常快，并防止內容在樣式加載后出現的無樣式內容閃現（FOUC）。
- 非關鍵 CSS 的異步加載：帶有 onload 處理程序的預加載技術允許主樣式表加載而不會阻止渲染。這意味著您的頁面可以開始顯示，而其余的樣式仍在加載中，從而創建更好的用戶體驗。noscript 標簽為禁用 JavaScript 的用戶提供了一個回退。
或者，如果您在頁面加載時不需要大量的樣式，您可以使用更簡單的方法：
<link href="main.css" rel="stylesheet" />這更直接，但可能會減慢初始渲染，因為瀏覽器必須下載和解析 CSS 才能顯示內容。
<script>：腳本加載最佳實踐
<script type="module" src="app.js"></script>對于 JavaScript，type="module" 屬性提供了幾個優點：
- 自動延遲腳本加載直到 DOM 準備好
- 通過 ECMAScript 模塊實現更好的代碼組織
- 默認采用嚴格模式
- 允許更清晰的依賴管理
對于不依賴于 DOM 元素并且應該盡快運行的腳本，考慮添加 async 屬性：
<script type="module" async src="analytics.js"></script>另外，為離線功能注冊服務工作者是一個好習慣：
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>這個腳本沒有 defer 或 async 屬性，因此它會盡快加載和執行，使離線功能在頁面加載過程的早期可用。服務工作者在后臺獨立于您的網頁運行，允許它處理網絡請求和緩存，即使用戶導航離開您的網站。
也許應該包含的標簽
這些標簽并非每個項目都需要，但在特定情況下可能有價值。根據您的項目需求來包含它們。
<meta charset="utf-8">：字符編碼
<meta charset="utf-8" />這個 meta 標簽指定 HTML 文檔的字符編碼。UTF-8 已經是 HTML5 的默認字符編碼，所以在許多情況下這個標簽并不是嚴格必要的。然而，顯式地包含它確保了在所有瀏覽器中的一致性，并防止潛在的字符渲染問題，特別是對 于特殊字符或非拉丁字母。
<base href="/">：定義基本 URL
<base href="/" />base 標簽指定文檔中所有相對 URL 的基本 URL。如果您的所有網站 URL 已經相對于根路徑 ("/")，那么您不需要包含這個標簽。它主要在您的網站托管在子目錄中，但您希望路徑相對于域根，或者在開發帶有客戶端路由的單 頁應用程序時有用。
<meta name="application-name">：應用程序細節
<meta name="application-name" content="" />如果您的漸進式 Web 應用程序 (PWA) 的名稱與標題標簽中指定的名稱不同，請使用這個 meta 標簽。它定義了當您的網絡應用程序安裝在設備上或固定在用戶的開始菜單或任務欄上時顯示的名稱。
<meta name="theme-color">：瀏覽器 UI 主題顏色
<meta name="theme-color" content="#33d" />這個 meta 標簽定義了用戶代理在頁面周圍 UI 元素中使用的顏色，如移動瀏覽器的地址欄或某些桌面瀏覽器的標題欄。選擇一個反映您品牌身份的顏色，以創建更一體化的視覺體驗。
<meta name="color-scheme">：支持淺色和深色模式
<meta name="color-scheme" content="light dark" />這個標簽通知瀏覽器您的網站支持淺色模式、深色模式或兩者。值 "light dark" 表示兩種方案都支持，淺色是首選。這有助于瀏覽器渲染表單控件、滾動條和其他 UI 元素的適當顏色方案，從而創建一個尊重系統偏好的更好 的用戶體驗。
<meta property="og:">：使用 Open Graph 進行社交媒體整合
<meta property="og:title" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />Open Graph meta 標簽優化了您的內容在 Facebook、LinkedIn 和 X（以前的 Twitter）等社交媒體平臺上共享時的顯示方式。雖然它們不是基本功能所必需的，但當您的內容被共享時，它們顯著提高了內容的外觀和參與度。
關鍵的 Open Graph 標簽包括：
- og:title：您的頁面/內容的標題（可以與您的 HTML 標題不同）
- og:type：內容的類型（網站、文章、產品等）
- og:url：您的頁面的規范 URL
- og:image：代表您內容的圖像的 URL
如果您網站的內容可能會在社交媒體平臺上共享，用適當的內容填充這些標簽可以顯著提高點擊率和參與度。
<link rel="manifest"> 和 <link rel="icon">：PWA 支持和 favicon
<link rel="manifest" href="manifest.json" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />對于漸進式 Web 應用程序，使用清單鏈接指向一個包含您的應用元數據的 JSON 文件，包括圖標。清單應包括您的應用圖標在各種尺寸和設備及上下文中的圖標。
對于不是 PWA 的常規網站，使用圖標鏈接定義您的網站的 favicon。雖然從技術上講是可選的，但 favicon 有助于品牌識別和用戶體驗，因此大多數網站都應該包含一個。
<link rel="alternate">：網站的替代內容類型
<link rel="alternate" type="application/rss+xml" href="/feed.xml" />
<link rel="alternate" type="text/markdown" href="/llms.txt" />這個 link 標簽有多個用途：
- 它幫助 RSS 閱讀器和其他 feed 聚合器發現您的網站的 RSS feed。如果您提供 RSS feed（常見于博客、新聞網站或定期更新的內容集合），請包括它。
- 它還可以用于指定一個 llms.txt 文件作為您的網站的 type="text/markdown" 替代鏈接。此文件以易于大型語言模型掃描您的網站的格式提供您的網站內容。注意：這個想法來自 Giles Thomas。
如果您網站沒有這些功能，您可以安全地省略這些標簽。
<link rel="preload">、<link rel="preconnect">、<link rel="prefetch">：資源優化
<link
rel="preload"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
/>
<link rel="preconnect" />
<link rel="prefetch" href="/next-page.html" />這些 link 標簽幫助優化資源加載：
- preload：告訴瀏覽器盡快下載和緩存一個資源。對于渲染過程早期需要的關鍵資源，如字體或重要圖像，這很有用。
- preconnect：提前與您稍后將從中獲取資源的外部域建立連接。這通過在需要時準備好連接來節省時間。
- prefetch：建議瀏覽器未來導航可能需要一個資源。瀏覽器將在空閑時下載它，使后續頁面加載更快。
根據您的性能需求有選擇地使用它們。過度使用它們會浪費帶寬，所以只關注真正關鍵的資源。
結論
這個模板為您提供了任何網絡項目的堅實起點。當然，這個模板是完全基于觀點的，您可能需要的最佳設置可能會有所不同。如果我在模板中遺漏了一些常見的標簽，那可能是因為它們不需要，至少在大多數情況下不需要。
我歡迎您的反饋！如果您認為我遺漏了重要的內容，請在 GitHub 倉庫 上打開一個問題或提交一個拉取請求。
此外，如果您想要一個不僅僅包含 index.html 文件的起始模板，您可能想要查看 HTML5 Boilerplate。這是一個很好的資源，可以幫助您快速開始構建漸進式 Web 應用程序。
資源
如果您想更多地了解 HTML 頭標簽，我建議從這里開始：
- Mozilla Web 文檔：HTML 中的元數據
- Google 的 web.dev
- 開放圖譜協議
- Web 應用清單規范
