2-3:HTML 的 link 標籤-資源預載、app icon標準網址、分頁宣告

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。