HEAD 網頁開發參考手冊,收錄 HTML5 在 head 可用標籤及範例說明

最後更新於 2020 年 07 月 07 日

如果你是自行架站的網站管理者,對網頁原始碼結構應該不陌生,若以 WordPress 架設網站通常會有完整 <head> 段落,取決於你使用的佈景主題,這部份是用來描述一個頁面的相關資訊,例如網頁標題、語言、樣式表、說明、關鍵字和略縮圖等等,很多時候會透過 SEO 外掛工具產生各種常用的 Meta Tags 以擴充佈景主題不足的部分,如果你要從頭開始寫一個網頁或佈景主題,就必須知道 <head> 有那些可用的標籤。

本文要介紹的「HEAD」是一個免費參考手冊,收錄 HTML5 的 <head> 各種元件和使用範例,包括最基礎、建議使用的標籤,Meta、連結、圖示、社群網路、瀏覽器、App 鏈結等等。現今網頁能做的事越來越多,要怎麼在頁面最頂部呈現各種資訊也顯得更為重要,而「HEAD」的好處是提供非常完整的參考資訊,終於不用再參考其他網站寫法,尋找艱澀難懂的使用者文件。

HEAD 也是一個開放原始碼專案,開發者可在 GitHub 參與並加入更多標籤。

HEAD – A free guide to HTML5 <head> elements
https://htmlhead.dev/

使用教學

STEP 1

開啟「HEAD」網站,從內容索引可以看到各種 <head> 標籤分類,點選快速跳到特定段落,閱讀後也能點選返回頂端的鏈結快速跳到索引選單。

STEP 2

網頁部分最基礎的 <head> 標籤就在 Recommended Minimum 類別,包括定義網站編碼,還有對於 Viewport 設定,下方會有對於這兩段程式碼的簡單說明,如果你要開始一個新網頁,那麼最頂端的兩行程式碼可能看起來就會像這樣。

STEP 3

一個正確的 <head> 段落應該要包含 meta, link, title, style, script 和 noscript 等等,這些標籤可以告訴瀏覽器該網頁要如何呈現,以及對於搜尋引擎和爬蟲的規則控制。HEAD 會將常用的標籤列在網頁中,搭配註解說明可以知道某個標籤應該如何編寫。

另一個比較常用到的就是網頁在社群媒體的呈現方式,大致上會有略縮圖、標題、描述和網址等段落,Facebook 和 Twitter 使用不同標籤,如果你是使用 WordPress 也會有相關外掛可以動態產生這些標籤,若你想自己開發佈景主題或重新撰寫網頁,可以從 HEAD 提供的標籤按圖索驥。

值得一試的三個理由:

  1. 清楚易懂的網頁開發參考手冊,提供各種常用的 <head> 標籤
  2. 從基礎標籤至 Meta、連結、圖示、社群網路、瀏覽器、App 鏈結等等
  3. 每個標籤寫法都包含註解說明

 

相關的文章

Favicon.io 最強大的網站圖示產生器,可線上文字製作或以圖片轉換

前段時間在研究網站圖示(Favicon)如何正確運作,對有在經營網站的站長來說一定知道在網站加入識別圖案的重要性,一般來說,加入網站圖示的作法並不困難,甚至很多網站會說只要一段原始碼就能做到,但現在因為有行動裝置作業系統,也要考量到網站被新增到桌面時會用到不同圖示尺寸,因此就必須額外準備各種不同尺寸大小的網站圖示。

Snapfont 在網頁即時套用測試 Google Fonts 和本機字型顯示效果(Chrome 擴充功能)

對中文網頁來說,CSS 字型設定一直是個麻煩的問題,想直接載入字型檔案容量太大,拖慢網頁速度、耗費過多流量,通常會使用網頁字型解決,像是 Google Fonts 和 Adobe Fonts(以前叫作 Typekit)就有提供思源黑體和思源宋體等中文網頁字型,只要加入一段 JavaScript 程式碼並調整一下 CSS 樣式表就能使用,讓網頁的中文部分更易於閱讀,設計看起來也更有質感。

Cloudflare Speed 免費網路測速服務,可測網路速度、延遲和抖動情形

受新冠肺炎(COVID-19)疫情影響,許多公司改採在家辦公模式,減少員工在辦公室可能造成的群聚感染風險,也讓網路服務提供業者(ISP)觀察到家用頻寬上升的狀況。另一方面串流影音服務、線上會議服務的使用量也增加許多,Netflix 甚至宣布調降部分地區的流量,以因應過度使用情形。如果你想知道自己的網路速度究竟快或不快,可以透過網路測速工具看到數據,之前推薦過一些很值得使用的測速服務:

回應