了解網站 head 標籤的重要性

發表於 分類於
了解各種 Meta 標籤的功能與用法，助你打造更符合搜尋引擎最佳實踐的網頁，讓你的網站在搜尋引擎中脫穎而出。

前言

這篇文章主要介紹我在 <head> 標籤中常用的程式碼，大家可以根據需要自行使用。如果有錯誤，請隨時告訴我，文章最後有 Facebook 和 Twitter 的除錯工具連結，供大家參考。

HTML 程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW">
<head>

<!-- Meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 設定瀏覽器兼容 -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 響應式設計必備 -->
<!-- 響應式設計必備，禁止做畫面縮放 -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> -->

<!-- 一般網頁的 Meta tags -->
<title>網頁標題（每個頁面建議不要重複）</title>
<meta charset="utf-8"> <!-- 網頁文字編碼 -->
<meta name="robots" content="all,follow"> <!-- 允許所有搜尋引擎索引 -->
<meta name="googlebot" content="index, follow, snippet, archive"> <!-- Google 搜尋引擎設定 -->
<meta name="keywords" content="輸入關鍵字"> <!-- 雖然現在不太被重視，但仍可填寫 -->
<meta name="description" content="輸入網站描述或摘要" /> <!-- Google 搜尋結果顯示，中文字建議 65 ~ 80 字，英文建議 130 ~ 160 字 -->
<meta name="copyright" content="2024 company. All Rights Reserved" /> <!-- 版權聲明 -->
<meta name="author" content="Web_producer" /> <!-- 網站作者姓名 -->
<meta name="renderer" content="webkit" /> <!-- 瀏覽器內核控制 -->
<meta name="format-detection" content="telephone=no, email=no, address=no" /> <!-- 禁止自動識別電話號碼和郵箱 -->
<link rel="canonical" href="網頁連結" /> <!-- 建議每頁都有專屬連結 -->

<!-- Facebook Meta tags -->
<meta property="fb:app_id" content="1234567"/> <!-- Facebook 洞察報告 -->
<meta property="og:type" content="website" /> <!-- 網站類型 -->
<meta property="og:title" content="網頁標題" /> <!-- 網頁標題 -->
<meta property="og:description" content="輸入網站描述或摘要" /> <!-- 可與 description 共用 -->
<meta property="og:image" content="預覽圖 URL" /> <!-- 建議大小 600 x 314 -->
<meta property="og:site_name" content="網站名稱" />
<meta property="og:url" content="網頁連結" /> <!-- 專屬連結 -->
<meta property="og:locale" content="zh-TW" /> <!-- 主要語言 -->

<!-- Twitter Card Meta tags -->
<meta name="twitter:card" content=""> <!-- Twitter Card 類型 -->
<meta name="twitter:site" content="Twitter_username"> <!-- Twitter 用戶名稱 -->
<meta name="twitter:title" content="標題"> <!-- 網頁標題 -->
<meta name="twitter:description" content="描述或摘要"> <!-- 200 字以內的說明 -->
<meta name="twitter:creator" content="@username"> <!-- Twitter 用戶名稱 -->
<meta name="twitter:image" content="預覽圖 URL"> <!-- 大於 144 x 144 小於 4096 x 4096 -->
<meta name="twitter:image:alt" content="圖片內容說明">

<!-- 載入CSS文件 -->
<link rel="stylesheet" href="style.css" />

<!-- 載入JS文件 -->
<script src="jquery.min.js"></script>

</head>

檢查工具

Facebook 錯誤檢查工具
Twitter 錯誤檢查工具