如何加強網站的SEO - 基礎篇

由於我在公司開發的新產品有加強SEO的需求，剛好任務分配到我身上，因此這次也順便整理一下加強網站SEO的內容。

SEO全系列文章

📌 如何加強網站的SEO - 基礎篇
📌 如何加強網站的SEO - 進階篇
📌 如何加強網站的SEO - SSR與CSR篇
📌 如何加強網站的SEO - 同構篇
📌 如何加強網站的SEO - 框架篇
📌 如何加強網站的SEO - 資安篇

為什麼需要加強SEO

我們設計一個上線的網站，最重要的當然就是曝光自己的網站，並且把流量拉起來提高客群。
一般使用者都會透過搜尋引擎，如Google, Yahoo…輸入關鍵字來搜尋類似的網站。
因此我們需要曝光搜尋，甚至是提升搜尋名次，當然首要的就是提升SEO。

Single Page Application的SEO

傳統的網頁渲染都是Server Side Rendering（a.k.a. SSR），從伺服器端渲染好網頁程式，再送到客戶端用瀏覽器打開網頁。
但是現今的網頁開發框架，如：React, Vue…，皆屬於Single Page Application，搜尋引擎爬到的網頁內容都是未渲染好的HTML。
因此Single Page Application的SEO面臨了極大的挑戰。
不過隨著框架的改版與網頁套件的革新，SPA的SEO門檻有逐漸降低。
我們可以從這兩張圖片看出Server Side Rendering與Cient side Rendering的差異。

這篇文章將不會提到SPA的解決方案，之後可能會發另外一篇文章介紹。

如何加強解析網頁

要讓爬蟲精準的解析你的網頁，最基本也是最重要的就是要下對標籤，該當header的就當header，該當paragraph就當paragraph。
此外我們也會使用meta改善爬蟲解析。

同時也要注意網址的層數盡可能地不要太多層，基本上以不超過三層以上為準，這個範圍都是可接受的。

1 2	1. http://yy.tw/shop/item/ 2. http://yy.tw/item/

網頁分享

相信大家都有網址分享的經驗，或是在搜尋引擎觀看網頁搜尋結果時，有發現標題內容都有些微的不同。
可能有些結果有額外的sitelink，有些會有多評價的星星。
雖然搜尋引擎官方並沒有明講，我們也不知道他們的完整解析方式是如何。
但是目前大家歸納出來的結論，都是下好最基本的tag，日後透過解析即可有效提升曝光。

我們打開開發者介面可以看到網頁的HTML，你會看到有很多meta，特別是og。

那是由The Open Graph protocol所定義的描述，透過解析裡面的內容，可以讓社群媒體解析內容提供預覽。
例如，當我們分享到Facebook的時候，Facebook就會解析HTML的資料，並且解析成預覽畫面。

基本上HTML下的tag或是標題內容，盡量保留一些基本原則即可：

避免重複
精簡

HTML語意

HTML並非讓搜索引擎知道目前網頁的內容，而是讓搜索引擎了解這些scope的意義。
清楚地在對的時機下tag，對開發者和網頁解析都有好處的。
例如：

<article>
  <h1>Today News</h1>
  <p>brah brah brah......</p>
</article>

Keywords

Google雖然宣稱不會爬Keywords tags，不過事實上大部分的網站還是會放。
但是如果刻意隨便下關鍵字，有可能會造成反效果。

善用一些技巧

網頁設計雖然提供一些方便的function，但是如果不注意去使用的話，可能會無意之間影響到分析的計算。
例如 history.back() 是網頁返回的功能，使用的話，可能會提高網頁跳出率，事實上是可以用anchor tag改善的。

Schema.org

Schema.org定義了統一詞彙，這些詞彙可以讓搜尋引擎容易了解內容，常見的方法有 Microdata、JSON-LD, RDFa……
以下以Microdata為例：

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar.html" itemprop="trailer">Trailer</a>
</div>

重點

itemscope用來說明整個div tag的範疇都屬於同一個scope。
itemtype定義這個scope屬於什麼類別，以這個例子表示是電影的類別。
itemprop可以將這個property貼上一個屬性標籤，表示這個tag屬於什麼。

解析

itemtype可以在Schema.org的文件裡面找到
點進去分類之後，可以看到每個itemprop對應的是什麼樣的屬性。

1
2
3

<section itemscope itemtype="http://schema.org/Game">
  <div itemprop="numberOfPlayers">玩家人數介於 <span itemprop="minValue">2</span> 到 <span itemprop="maxValue">4</span> 個玩家</div>
</section>

動態網址

網頁上顯示的內容會根據query而不同。
例如：網址會根據查詢條件而不同。

1	https://www.google.com/search?q=123

不過如果不同的網址卻產生相同的頁面，將會影響搜尋引擎的曝光。
例如：

1 2	https://www.google.com/search?q=123 https://www.google.com/search?q=123&oq=123

要解決的話，我們可以在不同的網址加上以下內容來告訴爬蟲，這些都是相同的頁面。

1
2
3

<head>
  <link rel="canonical" href="http://www.test.com/index.html" />
</head>

轉址狀態

http狀態只要是3開頭的，都代表著轉址的意思。

301 - 永久性轉址
有可能是因為舊網站既有的架構很舊了，又無法輕易地淘汰他，因此需要轉指導新網址。
302 - 暫時性轉址
暫時性的轉址而不影響原先的索引。
Meta refresh
301, 302都是在server side回復之後就轉址好了，如果你希望讓使用者收到轉址原因的資訊，可使用這個。
1
2
3
<head>
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.ex.com/">
</head>