SEO 教學：提升網站搜尋引擎優化技巧

SEO（搜尋引擎優化）透過內容和技術的改善，幫助網站在搜尋引擎中的自然排名提升。以下介紹 SEO 的基本概念與程式面可以做的優化方式。

什麼是 SEO

SEO 是指通過優化網站內容和技術，以提高網站在搜尋引擎中的自然排名和可見度的過程。透過 SEO 優化，網站在使用者搜尋相關關鍵字時更容易被搜尋引擎找到，吸引更多訪客。

SEO 的主要目的

提升排名：讓網站在搜尋結果頁面（SERP）中更靠前，通常是首頁，以獲得更多點擊。
增加自然流量：吸引更多相關性高的使用者進入網站。
改善使用者體驗：包括提升網站速度、結構清晰、內容易於理解等，優化使用者的瀏覽體驗。

程式面可以做的優化

1. 標題標籤（Title Tag）

✨ 作用：位於 <head> 標籤中，告訴搜尋引擎和用戶此頁面的主題。
✔️ 最佳做法：
- 每頁應有唯一的標題。
- 標題長度在 50-60 個字符內。
- 包含主要關鍵字並放在靠前位置。
📜 範例：

<head>
  <title>專業服務與解決方案 - 優化技術與應用</title>
</head>

2. 描述標籤（Meta Description）

✨ 作用：位於 <head> 中，為搜尋引擎結果頁（SERP）提供頁面摘要。
✔️ 最佳做法：
- 長度在 150-160 個字符內。
- 包含主要關鍵字和簡明描述。
📜 範例：

<meta name="description" content="提供專業技術與解決方案，提升應用程式效能，簡化使用體驗。">

3. 標頭標籤（Heading Tags）

標籤：<h1>到<h6>，用於組織內容結構。

✨ 作用：幫助搜尋引擎了解內容的層次結構。
✔️ 最佳做法：
- 每頁僅用一個 <h1>，包含主要關鍵字。
- 使用 <h2> 到 <h6> 組織副標題，包含次要關鍵字。

4. 圖片優化

✨ 作用：
- 添加 alt 屬性描述圖片內容，以提高無障礙性。
- 縮小圖片檔案大小提升加載速度。
✔️ 最佳做法：
- 使用描述性文字，包含關鍵字。
- 縮小圖片檔案大小，使用 WebP 格式或壓縮工具。
📜 範例：

<img src="images/logo.png" alt="公司標誌" title="專業技術服務">

5. 結構化數據（Schema Markup）

✨ 作用：
- 使用 JSON-LD 語法向搜尋引擎提供更多內容資訊。
- 在 SERP 中顯示豐富片段（Rich Snippets），提升點擊率。
📜 範例：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "技術服務公司",
  "url": "https://www.example.com",
  "logo": "https://www.example.com/logo.png",
  "contactPoint": [{
    "@type": "ContactPoint",
    "telephone": "+123456789",
    "contactType": "客服",
    "areaServed": "TW",
    "availableLanguage": ["Chinese"]
  }]
}
</script>

測試結構化數據：Google Rich Results Test

6. 關鍵字標籤（Meta Keywords）

✨ 作用：大多數搜尋引擎已不再使用此標籤，但仍可添加相關關鍵字。
✔️ 最佳做法：在 <head> 中添加 <meta name="keywords"> 標籤。
📜 範例：

<meta name="keywords" content="技術服務, AI 應用, 系統開發, 方案解決">

7. Open Graph 標籤

✨ 作用：優化在社交媒體上的分享預覽。
✔️ 最佳做法：在 <head> 中添加相應的 meta 標籤。
📜 範例：

<head>
  <meta property="og:title" content="技術服務公司 - 提供 AI 應用方案" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://www.example.com/index.html" />
  <meta property="og:image" content="https://www.example.com/logo.png" />
  <meta property="og:description" content="專業 AI 應用服務，提升工作效率。" />
  <meta property="og:site_name" content="技術服務公司" />
</head>

8. robots.txt

✨ 作用：告訴搜尋引擎哪些頁面可被抓取。
✔️ 最佳做法：在網站根目錄中添加 robots.txt 文件，設置適當的規則。
📜 範例：

# 允許所有搜尋引擎抓取
User-agent: *
Disallow: /private/        # 禁止抓取 /private/ 目錄
Disallow: /test.html       # 禁止抓取特定頁面

9. Sitemap.xml

✨ 作用：XML 檔案幫助搜尋引擎了解網站結構。
✔️ 最佳做法：
- 定期檢查 Sitemap 健康狀況。
- 避免錯誤連結，並將 Sitemap 提交到 Google Search Console 和 Bing Webmaster Tools。
📜 範例：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/index.html</loc>
    <lastmod>2024-10-25</lastmod>
    <changefreq>monthly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.example.com/about.html</loc>
    <lastmod>2024-10-25</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

10. URL 優化

✨ 作用：讓 URL 簡潔易讀，包含關鍵字。
✔️ 最佳做法：
- 使用靜態 URL。
- 以破折號 - 分隔詞語，避免無意義參數。
📜 範例：

https://www.example.com/product-optimization.html

11. 頁面載入速度優化

✨ 作用：提高用戶體驗和搜尋引擎排名。
✔️ 最佳做法：
- 壓縮和合併 CSS、JavaScript 檔案。
- 使用瀏覽器快取。
- 啟用 GZIP 壓縮，減少 HTTP 請求數量。

12. 移動設備優化

✨ 作用：確保網站在移動設備上的展示效果。
✔️ 最佳做法：
- 採用響應式設計。
- 使用視窗標籤（Viewport Meta Tag）。
📜 範例：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

13. 內部連結

✨ 作用：提升頁面權重並改善用戶導航。
✔️ 最佳做法：
- 使用描述性的錨文本（Anchor Text）。
- 連結到相關內容頁面。
📜 範例：

<a href="product-details.html" title="產品詳情">
  產品詳情
</a>

14. Canonical 標籤

✨ 作用：避免搜尋引擎對相似內容的混淆，設置主要頁面。
✔️ 最佳做法：在 <head> 中使用 Canonical 標籤。
📜 範例：

<link rel="canonical" href="https://www.example.com/main-page.html">

15. HTTP 狀態碼設置

✨ 作用：向搜尋引擎和用戶返回頁面狀態，如 200、301、404 等。
✔️ 最佳做法：
- 正確處理 404 錯誤頁面，提供有用的導引。
- 使用 301 重定向將舊頁面權重轉移到新頁面。

16. 使用語義化 HTML 和 CSS

✨ 作用：讓搜尋引擎更好地理解網站結構。
✔️ 最佳做法：
- 使用語義化 HTML 標籤，如 <header>、<nav>、<footer>。
- 減少冗長的代碼，避免過度嵌套。

17. 避免阻擋搜尋引擎抓取

✨ 作用：確保搜尋引擎可以順利抓取和索引網站。
✔️ 最佳做法：避免在重要頁面中使用 noindex、nofollow。
📜 範例：

<meta name="robots" content="index, follow">

18. 網站安全優化

✨ 作用：提升用戶信任度和搜尋引擎排名。
✔️ 最佳做法：安裝 SSL 憑證，使用 HTTPS 協議。