10.1 語義標記
SEO (搜索引擎優化) 在網頁開發中非常重要，因為它有助於提高網頁在搜索引擎結果中的可見性。現代的 HTML 標記對 SEO 影響很大，幫助搜索引擎更好地理解和索引內容。我們來看一下 SEO 對現代 HTML 標記的主要影響。
HTML5 的語義標籤有助於搜索引擎理解網頁的結構和內容。使用正確的標籤能提高可訪問性，並讓搜索引擎更容易理解內容。
語義標籤的例子：
<header>: 頁面或部分的標題<nav>: 導航連結<main>: 頁面的主要內容<section>: 主題相關的部分<article>: 獨立的內容塊<aside>: 附加信息或側邊欄<footer>: 頁面或部分的底部
使用例子：
HTML
<body>
<header>
<h1>網站標題</h1>
<nav>
<ul>
<li><a href="#home">主頁</a></li>
<li><a href="#about">關於我們</a></li>
<li><a href="#contact">聯繫方式</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章 1</h2>
<p>文章內容...</p>
</article>
<section>
<h2>部分</h2>
<p>部分內容...</p>
</section>
</main>
<aside>
<h2>側邊欄</h2>
<p>附加信息...</p>
</aside>
<footer>
<p>© 2024 我的網站。保留所有權利。</p>
</footer>
</body>
10.2 微數據標記
微數據標記 (structured data) 用於向搜索引擎提供有關頁面內容的額外信息。這有助於搜索引擎更好地理解內容並提高頁面在搜索結果中的可見性。
Schema.org 的例子：
- Article: 用於文章和新聞
- BreadcrumbList: 用於麵包屑導航
- Product: 用於描述商品
- Event: 用於描述事件
微數據標記的使用例子：
HTML
<body>
<article>
<h1>文章標題</h1>
<p>作者：作者名</p>
<p>發布日期：2024年1月1日</p>
<img src="https://example.com/image.jpg" alt="圖片示例">
<p>文章內容...</p>
</article>
</body>
JavaScript
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "文章標題",
"author": "作者名",
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg"
}
</script>
10.3 標題和元標籤優化
標題和元標籤在 SEO 中扮演著關鍵角色，因為它們為搜索引擎和用戶提供有關頁面內容的信息。
元標籤：
<title>: 顯示在搜索結果中的頁面標題<meta name="description">: 搜索結果片段中使用的頁面描述<meta name="keywords">: 關鍵詞（對現代搜索引擎來說不是特別重要）
元標籤的使用例子：
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>頁面標題示例</title>
<meta name="description" content="這是為 SEO 創建的頁面描述示例。">
<meta name="keywords" content="示例, SEO, HTML">
</head>
<body>
<h1>頁面標題</h1>
<p>頁面內容...</p>
</body>
</html>
10.4 圖片優化
圖片優化包括使用 alt 和 title 屬性，以及通過壓縮和使用現代圖像格式（如 WebP）來確保快速加載時間。
使用例子：
HTML
<body>
<h1>圖片優化示例</h1>
<img src="example.jpg" alt="圖片描述" title="圖片標題" loading="lazy">
</body>
10.5 麵包屑導航
麵包屑導航 (breadcrumbs) 是顯示用戶從主頁到當前頁面的路徑的導航元素。它們幫助用戶輕鬆地在網站上導航，提供到前一層導航的連結。這一元素是用戶界面的重要組成部分，特別是對於擁有深層結構的大型網站。
麵包屑導航的主要方面
麵包屑導航是通常顯示在頁面頂部標題或菜單下方的一排連結。鏈中的每個連結都指向用戶通過的頁面之一，以到達當前頁面。
HTML
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/home">主頁</a></li>
<li class="breadcrumb-item"><a href="/category">類別</a></li>
<li class="breadcrumb-item active" aria-current="page">當前頁面</li>
</ol>
</nav>
麵包屑的類型：
-
層次結構: 顯示從主頁開始的網站層次結構。
- 示例: 主頁 > 類別 > 子類別 > 當前頁面
-
時序型: 顯示用戶行動順序，在多步導航或購物過程中特別有用。
- 示例: 主頁 > 類別 > 商品 > 購物車 > 結帳
-
屬性型: 用於顯示當前頁面屬性或標籤，對於擁有大量類別和篩選器的網站特別有用。
- 示例: 主頁 > 電子產品 > 手機 > 智能手機 > Apple
麵包屑的優勢：
- 改善導航: 能讓用戶快速返回到前一頁。
- SEO 優勢: 幫助搜索引擎理解網站結構並提高其索引性。
- 可用性: 使網站更直觀和易於使用。
- 降低跳出率: 簡化導航，可能降低跳出率，因為用戶可以輕鬆地返回到前一頁，而不是離開網站。
SEO 的優勢
麵包屑導航在 SEO 中發揮著重要作用，因為它們可以幫助搜索引擎更好地理解網站結構，並且提高用戶的導航體驗。正確使用麵包屑導航可以對網站在搜索結果中的排名產生積極影響。
GO TO FULL VERSION