Skip to main content

SEO html 語意話說明

HTML element tag​

Title tag​

標題標籤用於設置您在 SERP 中看到的可點擊標題：

<title>bla... bla...</title>

最佳實踐 ​

一方面，您的標題應包含有助於其出現在搜索結果中的關鍵字。另一方面，您的標題應該足夠吸引用戶實際點擊，因此需要在搜索優化和用戶體驗之間取得平衡：

  • 注意長度 - Google 只會顯示標題的前 50-60 個字符，並刪除其餘部分。標題長度超過 60 個字符都不是問題，只要符合截斷點之前的重要信息即可。
  • 包含合理數量的關鍵字 - 關鍵字堆砌可能會受到懲罰，但一兩個關鍵字就可以了。只要確保你的標題形成一個連貫的句子。
  • 寫好文案—— 不要賣弄，也不要籠統。創建突出內容價值的描述性標題，並設置適當的期望，以便用戶在訪問頁面時不會失望。
  • 添加您的品牌名稱 - 如果您有一個可識別的品牌可能會增加您的點擊率，那麼您也可以隨意將其添加到標題中。

Meta description tag​

元描述標籤用於在搜索結果片段中設置描述：

最佳實踐 ​

元描述的規則並不過分嚴格——畢竟，如果你沒有寫出好的描述，即使你完全沒有寫出一篇，那麼谷歌也會為你寫一篇。

  • 注意長度 - 與標題相同，Google 將保留您的元描述的前 150-160 個字符，並刪除其餘部分。確保儘早包含重要方面，以最大限度地提高搜索者的興趣。
  • 寫好文案 - 雖然元描述不用於排名，但針對搜索意圖對其進行優化仍然很重要。根據相應的查詢，您的描述越相關，用戶訪問您的頁面的可能性就越大。
  • 考慮跳過元描述 - 為特別長尾的關鍵字或針對各種關鍵字的頁面創建好的副本可能很困難。在這些情況下，請考慮保留元描述 - Google 會抓取您的頁面並使用一些相關的引號填充您的代碼段。

Heading (H1-H6) tags​

標題標籤用於為讀者和搜索引擎構建頁面：

幾乎沒有人通讀一篇文章已經不是什麼秘密了——我們通常做的是掃描文章，直到找到我們喜歡的部分，我們閱讀了那個部分，然後我們反彈。如果文章不分成幾個部分，那麼很多人會立即反彈，因為它太多了。因此，從用戶的角度來看，標題是方便的閱讀輔助工具。

然而，從搜索引擎的角度來看，標題標籤構成了內容的核心，並幫助搜索爬蟲機器人了解頁面的內容。

  • 不要使用多個 H1 - H1 標題與其他標題不同，因為它被搜索引擎視為頁面的標題。不要與標題標籤混淆 - 標題標籤顯示在搜索結果中，而 H1 標籤顯示在您的網站上。
  • 保持淺層結構—— 很少需要低於 H3。使用 H1 作為標題，使用 H2 作為章節標題，使用 H3 作為小節。更多的東西往往會讓人感到困惑。
  • 形成類似查詢的標題 - 將每個標題視為在搜索中排名的額外機會。為此，每個標題都應該聽起來像是一個查詢或查詢的答案——包括關鍵字。
  • 與所有標題保持一致 - 所有標題的編寫方式應使如果您要刪除所有文本並僅保留標題，它們會讀起來像一個列表。

Image alt text​

雖然 alt 文本的主要目標是 Web 可訪問性，但 alt 屬性的 SEO 目標是圖像索引。

<img alt="bla... bla..." />

當你的圖片出不來的時候，爬多會看這個 alt 來去 check 你的圖片意思

圖片懶加載（loading="lazy"）​

使用 loading="lazy" 可延遲載入螢幕外的圖片，直到使用者捲動接近時才載入，有助於加快首屏載入並減少頻寬消耗。

範例：

<img src="large-image.jpg" loading="lazy" alt="Description" />
title: Pro Tip：搭配 srcset 與 sizes 做響應式圖片

結合 srcset 和 sizes 可依裝置寬度載入合適尺寸的圖片：

<img
  src="small.jpg"
  srcset="small.jpg 480w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, 1200px"
  loading="lazy"
  alt="Responsive image"
/>

腳本載入優化：defer 與 async​

用 defer（在 HTML 解析完成後執行）或 async（下載完成即執行）優化腳本載入，可避免阻塞頁面渲染。

範例：

<script defer src="main.js"></script>
<script async src="analytics.js"></script>
title: Pro Tip：何時用 defer、何時用 async
  • defer：適合依賴 DOM 的腳本（如主程式），會依序在 DOM 就緒後執行。
  • async：適合獨立腳本（如分析、廣告），下載完就執行，不保證順序。

Schema markup​

Schema markup (其實就是 structure-data)用於增強具有豐富片段功能的常規 SERP 片段：

Schema.org託管了一組由 Google、Bing、Yahoo! 和 Yandex 聯合開發的標籤，網站管理員使用這些標籤為搜索引擎提供有關不同類型頁面的附加信息。反過來，搜索引擎使用這些信息來增強其 SERP 片段的各種豐富功能。

語意結構區塊 - HTML5 semantic tags​

HTML5 用於更好地描述各種頁面組成

隨著語義 HTML5 元素的引入，我們有了一組直觀的標籤，每個標籤都描述了一個單獨的頁面組件。因此，與其用一堆令人困惑的div標記我們的內容，我們現在有了一種以易於理解、標準化的方式描述組件的方法。

可以想像，搜索引擎非常熱衷於語義 HTML5。

使用 <header>、<nav>、<main>、<article>、<footer> 等語意元素不僅是為了結構——更能提升無障礙（accessibility）與搜尋引擎優化（SEO）。螢幕閱讀器依賴這些標籤解讀內容，搜尋引擎也會優先處理語意標記以利索引。

title: Pro Tip：<section> 搭配 aria-label

使用 <section> 搭配 aria-label 分組相關內容，並配合 <h2>–<h6> 建立清晰的標題層級：

<section aria-label="Blog post summary">
  <h2>Latest News</h2>
  <article>...</article>
</section>

a tag​

Links are not crawlable

如果說本身沒有轉址的話，就不要特別用 a link。

HTML 代碼​

以下是一些最方便的語義 HTML5 元素，使用它們來改善您與搜索引擎的溝通：

  • main - 標記頁面主要內容區塊（每頁僅一個）
  • article - 將帖子與其餘代碼隔離開來，使其可移植
  • section - 隔離博客中的一組帖子或帖子中的一組標題
  • aside - 隔離不屬於主要內容的補充內容
  • header - 隔離文檔、文章、部分的頂部，可能包含導航
  • footer - 隔離文檔、文章、部分的底部，包含元信息
  • nav - 隔離導航菜單、導航元素組

html 語意結構

使用 data-* 儲存自訂資料​

data-* 屬性可讓你在 HTML 元素上直接儲存自訂資料，方便用 JavaScript 或 CSS 讀取，同時保持標記乾淨、避免非標準屬性。

範例：

<div data-theme="dark" data-user-id="123">Content</div>
[data-theme="dark"] {
  background: #333;
  color: #fff;
}
const element = document.querySelector("[data-user-id]");
console.log(element.dataset.userId); // Outputs: 123

Meta robots tag​

meta robots tag 是關於網站和搜索引擎之間的參與規則。

<meta name="robots" content="index, archive" />

爬蟲在抓的時候，有這個更像是建議爬蟲建立 index ，當然爬蟲不一定會完全尊重這些標記，但是主流的搜索引擎通常會這樣做。如果沒有它的話，爬蟲就會隨心所欲

表單優化：inputmode 與 pattern​

用 inputmode 在行動裝置上喚起對應鍵盤（如數字鍵、Email 鍵盤），用 pattern 以正則表達式限制輸入格式，可提升表單在手機上的可用性。

範例：

<input
  type="text"
  inputmode="numeric"
  pattern="[0-9]*"
  placeholder="Enter numbers only"
/>
title: Pro Tip：搭配 required 與 aria-describedby

加上 required 與 aria-describedby 可強化驗證與無障礙，讓錯誤訊息與欄位正確關聯：

<input type="email" required aria-describedby="email-error" />
<span id="email-error">Please enter a valid email.</span>

無障礙：tabindex 與 role​

用 tabindex 控制鍵盤焦點順序、用 role 定義元素角色，可提升鍵盤與螢幕閱讀器使用者的無障礙體驗。

範例：

<div role="button" tabindex="0" onclick="handleClick()">Click me</div>
title: Pro Tip：tabindex="-1"

tabindex="-1" 讓元素可被 JavaScript 聚焦，但不會加入鍵盤 Tab 順序，適合彈窗等需程式控制焦點的元件：

<div tabindex="-1" id="modal">Modal content</div>

使用 <details> 與 <summary> 做手風琴​

用 <details> 與 <summary> 不需 JavaScript 即可做出手風琴效果，具無障礙支援且現代瀏覽器皆支援。

範例：

<details>
  <summary>Click to expand</summary>
  <p>Hidden content goes here.</p>
</details>
title: Pro Tip：用 CSS 自訂外觀

可用 CSS 依開合狀態顯示不同圖示：

details[open] summary::after {
  content: "▼";
}
details summary::after {
  content: "▶";
}

控制文字選取：user-select​

用 CSS 的 user-select 控制文字是否可被選取，可透過 class 或行內樣式套用。

範例：

<div style="user-select: none;">Non-selectable text</div>
<div style="user-select: auto;">Selectable text</div>