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