link 標籤
rel="preload"
在 link 加 rel="preload" 可以指定哪些資源 (resource) 在頁面載入後自動非同步地 (asynchronously) 預加載,利用這個方法可以讓一些資源在還沒有使用到之前就先下載,可以增加使用者體驗。
rel="preload" 會搭配 as 屬性來指定要被預加載資源的位址和類型,包含的類型有以下:
- audio: 聲音
- document: 將被嵌入 frame 或 iframe 的 HTML 文件
- embed: 要被嵌入 <embed> 中的內容
- fetch: 那些將會透過 fetch 或 XHR 請求的資源
- font: 字型/字體檔
- image: 圖片
- object: 將被嵌入 <embed> 的文件
- script: JavaScript 文件
- style: CSS 樣式表
- track: WebVTT 文件
- worker: 一個 JavaScript 的 web worker 或 shared worker
- video: 影片
範例:
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="general.js" as="script">
preload 可以判斷響應式的預加載,透過 media="" Media Query 屬性指定針對特定螢幕大小時選擇性預載。
以下範例為指定在頁面寬度 641px 以上預載 big.png,640px 以下預載 small.png 的圖片。
<link rel="preload" href="small.png" as="image" media="(max-width: 640px)">
<link rel="preload" href="big.png" as="image" media="(min-width: 641px)">
<rel="apple-touch-icon">
這是設定要把網頁新增到手機桌面指定的圖示,常見的 touch icon 尺寸可以是 180x180 pixels 或 192x192 pixels。
可以搭配 PWA 的應用製作 web app。
rel="canonical"
canonical 是用來指定網頁的標準網址,可以避免重複網頁被收錄到 google,對 SEO 有幫助。
<link rel="canonical" href="https://www.wingzero.tw/">
注意網址都要是絕對路徑。
rel="prev", rel="next"
prev 和 next 是用在有多頁面的分頁 (pagination) 關係時,聲明上下頁關係時使用,主要可以在 SEO 上幫助搜尋引擎理解頁面間關係的資訊。
假設以下三個頁面間有分頁關係
https://www.wingzero.tw/page/1
https://www.wingzero.tw/page/2
https://www.wingzero.tw/page/3
第一頁
<link rel="next" href="https://www.wingzero.tw/page/2">
第二頁
<link rel="prev" href="https://www.wingzero.tw/page/1">
<link rel="next" href="https://www.wingzero.tw/page/3">
第三頁
<link rel="prev" href="https://www.wingzero.tw/page/2">
注意第一頁不會有 prev,最後一頁則不會有 next。