icon
learn-seo-let-user-to-explore-website-via-search-engine

2023年1月17日星期二 上午11:21

利用SEO機制，讓用戶可以在瀏覽器上找到你的網站！

對於網站開發人員，識得利用SEO機制係一大嘅加分點，或者其實係必備技能。不過對於初學者黎講，學SEO好似又唔係咁必要，通常都會學得好表面，反而注重學好網站開發技術嘅基礎會更好。但係因為最近開始要部署網站，所以就想更加系統咁去學製作SEO友善嘅網站。
本文主要圍繞Google的搜尋引擎，內容會參考網絡上對SEO優化的技術，也會盡量按照 Google Search Central 當中的搜尋引擎優化的文檔來去整合。

Search Engine Optimization - SEO

網絡上的資源非常的龐大，搜尋引擎就如 Google、Bing、Baidu 等。這些引擎最大的目的就是能夠在用戶搜尋關鍵字時，顯示最關聯的內容，也就是對用戶幫助最大的內容。但是同樣的關鍵字，也可以有幾百、甚至上千筆的網站。那搜尋引擎是如何把最關聯的網站放到最前呢？

事實上，全部搜尋引擎都會有自己的一套準則（算法）去進行網站爬蟲，從不同的方面去判斷這些有著相同關鍵字的網站的評分排序。但是對於大部分的搜尋引擎，他們會分享著相同且重要的標準：例如通過用戶停留在網站上的時間，去分析網站的內容是否對用戶有幫助。以下是一些在網上常見的最重要因素：

  1. 高質量內容 - High-quality Content
  2. 網站載入速度 - Website Loading Speed
  3. 使用體驗 - Page Experience
  4. 移動端適配 - Mobile-first
  5. 反向連結 - Backlinks
  6. 網站的安全性 - Website Security
可以看到以上的準則都是圍繞著要提高用戶體驗的，用戶體驗越好，排名也會更著向上。

常見的SEO優化操作

基本上大部分的操作都是在我們的源代碼中實現，即是網站的 HTML 代碼。所以即使是什麼前後端框架也不會有太大分別，以下會展示其中常見且有效的方法：

Google上的搜尋頁面

這裡會介紹如何從代碼出發去改變網站在搜尋頁面上的顯示資料。但是根據Google文檔中描述，爬蟲系統對同一個網站進行索引（爬蟲）的間距是從幾天到幾個星期不等，所以在學習過程中，可以利用網上的一些搜尋引擎頁面（SERP）的預覽工具，可以先在這些工具中看一下效果如何。

SERP-preview.png

以下是實現圖片效果的 HTML 代碼：

<title>利用SEO機制，讓用戶可以在瀏覽器上找到你的網站！</title>
<meta name="description" content="網絡上的資源非常的龐大，搜尋引擎最大的目的就是能夠在用戶搜尋關鍵字時，顯示最關聯的內容，那搜尋引擎是如何把最關聯的網站放到最前呢？" />
需要注意的地方是，網站中的每一個頁面都需要有獨特的標題；避免標題有過多重覆的關鍵字。

圖片優化

圖片是一個很常見的網頁元素，基本上所有網站的內容都會有圖片的身影。所以正確地編寫代碼可以更好的提升網站的評分。由於Google引擎還有 Google相片 的功能，用戶可以使用文字或圖片來去搜尋圖片，所以每一張圖片都要有文字描述！

<image src="/images/path_to_image" alt="describe the image"
Google引擎會利用上述的文字描述標籤和圖像識別的功能去分析並了解圖片的內容與想要表達的事。另外填寫文字描述可以提高無障礙網頁的易用性。

還有其他重要的標準：

  1. 圖片跟網站內容的關聯性
  2. 圖片應該放在相關的內容的附近
  3. 使用較高清的圖片
  4. 圖片的資源路徑要一致
  5. 圖片載入速度

Meta Tag的誤區

其實大部分的 Meta Tag 是不參與SEO的排名的！我的理解是Google主張 Meta Tag 的資料不能夠真實反應網站的內容，主要也是靠網站的標題和內容。早在2009前，搜尋引擎都會採用下面的關鍵字標籤的，但是Google認為太多網站濫用這個標籤，所以就棄用了。

# Keywords會被無視
<meta name="keywords" content="SEO, SEO Ranking, SEO優化">

以下是Google支持的Meta Tag：

<meta name="description" content="A description of the page">
<meta name="robots" content="..., ...">
<meta name="googlebot" content="..., ...">
<meta name="google" content="nositelinkssearchbox">
<meta name="google" content="nopagereadaloud">
<meta name="googlebot" content="notranslate">
<meta name="google-site-verification" content="...">
<meta http-equiv="Content-Type" content="...; charset=...">
<meta charset="...">
<meta http-equiv="refresh" content="...;url=...">
<meta name="viewport" content="...">
<meta name="rating" content="adult">
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA">
詳情可以在下方參考資料看這些標籤的用處與實用放法。

參考資料

  4. 10個強化SEO的HTML標籤，最後的HTML標籤，讓SEO排名大增 - https://web-design.vip/htm-seo.html
  5. Different Types of HTML Meta Tags - https://github.com/kevinSuttle/html-meta-tags
  6. Influencing your title links in search results - https://developers.google.com/search/docs/appearance/title-link