網頁標題 title 怎麼寫？長度、格式與關鍵字位置

不必一樣，但主題要一致。title 面向搜尋結果，可以加上品牌名與更多修飾語；h1 面向已經進站的讀者，通常寫得更簡潔。兩者主題不一致才是真正的問題，那會讓點進來的人覺得被騙。

<title> 是整組檔頭標籤裡影響最大的一個。它同時出現在四個地方：

長度是像素，不是字數

不要用字數當標準

搜尋結果的標題有 像素寬度 上限，桌機大約 600 像素。中文字寬約是半形英文字母的兩倍，所以：

超過的部分會被截成刪節號。

比較實際的做法是：把最重要的資訊放在前 20 個中文字內，後面的部分被截掉也不心痛。

html

<!-- 太長，重點在後面會被截掉 -->
<title>關於我們公司在網頁設計與數位行銷領域的完整服務項目介紹說明頁面｜某某公司</title>

<!-- 重點在前，品牌名在後 -->
<title>網頁設計與數位行銷服務｜某某公司</title>

搜尋引擎對標題前段的字詞給比較高的權重，使用者的視線也是從左往右。所以：

主題關鍵字 + 補充說明 ｜ 品牌名

只有首頁把品牌名放前面

首頁的搜尋意圖多半是「找這個品牌」，品牌名放前面才對得上。其他頁面的搜尋意圖是「找這個主題」，主題就該擺前面。

常見的選擇與各自的觀感：

沒有優劣之分，重點是全站一致。 要避免的是用逗號或句號，那會讓標題讀起來像一句被砍斷的話。

這是最常見也最嚴重的錯誤。全站標題都一樣，等於告訴搜尋引擎「這些頁面沒有差別」。

html

<!-- 三個不同的頁面，標題卻一樣 -->
<title>某某公司</title>
<title>某某公司</title>
<title>某某公司</title>

用框架開發時，把標題當成 頁面資料 而不是模板內容。多數框架與靜態站產生器都提供標題樣板：

// 全站的樣板，各頁只需寫自己的 title
export default {
  title: '前端工程文件',
  // 佔位符各家不同，常見的是 %s 或 :title
  titleTemplate: '%s｜前端工程文件',
};

yaml

---
# 各頁的 frontmatter 只寫主題，品牌名由樣板補上
title: 網頁標題 title 怎麼寫？長度、格式與關鍵字位置
---

首頁要關掉樣板

首頁的標題通常自己就是完整的，套上樣板會變成「品牌名｜品牌名」。多數框架都能在單頁關閉樣板，例如：把 titleTemplate 設成 false。

單頁應用程式還要處理路由切換時的更新，做法見 SPA 動態更新 title 與 meta 。

搜尋引擎會在覺得自己的版本更貼近使用者需求時改寫標題。這是設計上的行為，不是設定失效，但您可以降低它發生的機率。

標題被改寫最常見的來源是 h1

當搜尋引擎不採用您的 <title> 時，它常改用頁面的 <h1> 或內文中的顯著文字。所以 <h1> 也要寫好，它是您的第二道防線。