W.S.Wade
首頁
文章列表
分類
關於我
avatar
文章
44
分類
6
首頁
文章列表
分類
關於我
想知道嗎：前端的SEO
|想知道嗎
評論數:

來聊聊 SEO 這件事，以及身為前端我們可以做什麼事吧

為什麼提到 SEO 的時候，我們只討論 Google？

因為它是目前市佔率最大、也是最重要的搜尋引擎（沒有之一）


台灣搜尋引擎市佔率 (2020/07)。

至於 Amazon、Youtube 因為有各自的商業生態，所以 SEO 也是各自分開討論，而且會特別強調「Youtube SEO」、「Amazon SEO」等，不會併在一般的 SEO 主題討論。

搜尋引擎 (Search Engine) 的運作原理是什麼？

How it works

搜尋引擎運作可以分成以下三大部分：

  • 爬文 (Crawling)
  • 收錄 (Indexing)
  • 排名 (Ranking)

爬文

Google 會使用網路爬蟲 (Crawler)，或稱爬文蜘蛛 (Spider) 在網際網路上爬文、收集資料。

爬文蜘蛛會透過網頁和網頁之間的連結探索新的網頁，並且不斷重複使用同樣手法進一步擴張和抓取更多資料。經過整理分類、最後在搜尋結果中呈現給使用者，這讓 Google 成為巨大網際網路世界裡最好的資料查詢導航。

爬文會耗費運算資源，所以搜尋引擎會控制爬文的額度，並優先遵從幾個要點爬文。

  1. 優先從高權威性的網頁開始爬文(新聞媒體、國際認證機構 等等)
  2. 擁有比較多連結的網頁

所以
讓自己的網頁可以頻繁的被 Google 爬文，就是 SEO 們的主要目標。
從規則中也可以知道
全新開張的網站、沒有足夠連結的網頁、或是很久不更新的文章，通常就要等待比較久才能夠被 Google 找到。

收錄

爬文爬進 Google 伺服器 之後，Google 會建立「搜尋索引」(Search Index)，將資料收錄進資料庫裡進行管理、分類。

有經過收錄的內容才能在 Google 上被找到。

排名

使用者搜尋關鍵字詞的時候，Google 會從龐大搜尋資料庫中提供使用者最具價值的資訊。
最終目的就是要 提供最有價值的搜尋結果給使用者。

SEO

SEO 全名 Search Engine Optimization
所謂「操作 SEO、SEO 優化」，就是了解搜尋引擎的運作原理，根據演算法的習性產生優質內容、調整網站與連結架構、以及建立反向連結等方式，進而提升 Google 搜尋結果的排名。

流量越高的網站，就越有可能呈現有價值的資訊給使用者，也越有可能吸引願意實際花錢消費的訪客。
SEO 的排名也就會越前面。
而 SEO 排名越好，就越有可能帶進更多的新訪客，再進一步「增加新客源的機會」。

所以怎麼做？

SEO 分為 「站內優化」與「站外優化」

站內優化

  1. 「關鍵字優化」
  2. 「產生優質內容」
  3. 「網站技術性優化」

站內 SEO 主要就是讓 搜尋引擎 和 搜尋者 能清楚了解網頁的內容
想辦法 讓搜尋引擎「讀懂」網頁 會是關鍵

基本上，站內 SEO 優化的項目都是 直接與使用者的利益相關的
例如：提供給使用者可以解決問題的文章，提供給使用者需要的商品購買服務…

站外優化

站外 SEO 偏像是讓搜尋引擎知道其他人（例如：網站和使用者）對自己網站的評價與看法
大多是和網站的 權威性、相關性、可信度有關。

  • 反向連結 (Backlinks)

    爬文是藉由連結來串聯起各個網站的，因此若你的網站多次被其他網站所提到，那 Google 爬文會更頻繁造訪，權重也會逐漸累積。

  • 品牌訊號 (Brand Signals)

    增加品牌字眼出現在搜尋引擎關鍵字或網路上的次數。

  • 社群訊號 (Social Signals)
    這是比較有爭議的項目，社群訊號指的是網頁在社群網站上的按讚、留言、分享數等，有研究顯示：社群分享量和排名呈現正相關，也就是社群分享量越多，排名似乎也越高。
    然而，Google 官方也一再表示，社群訊號並不會直接影響排名。畢竟太容易經由人為操控。
    但社群分享可能會帶來品牌搜尋量和品牌討論度，間接幫助提高排名，因此社群訊號依然是值得留意的項目。

什麼是反向連結？

今天我們自己的 A 網站，裡面放了一個連結去到 B 網站，這個就是我們知道的 一般連結
此時若 B 網站也放了一個連結，可以來到我們自己的 A 網站，那這時這個 “可以過來的連結”，就叫做 『反向連結』，我們也就得到了一個從 B 網站過來的 『反向連結』。

『反向連結』是被評斷 SEO 的一大標準，卻也被強制限定不可被操控，一但發現濫用反向連結，Google 將立刻懲處，排名大幅調降、甚至採取從搜尋引擎中除名的行動都有可能。

身為前端我們可以做什麼？

大概看了整篇最想看的就是這一段了吧？

web dev技術對 SEO 的提升在整體 SEO 排名表現中，重要性佔比相對於「內容」與「反向連結」較低，雖然較低，但依然有一點點我們可以努力的地方

meta tag

其實就是 HTML 的 <title> 與 <meta> tag
好的 <meta> tag 與 <title> 會幫助 爬文引擎 更了解我們網站的內容，從而針對適當的關鍵字做更高的 SEO 排序，前端皆知的 善用 語意化標籤 ，而不要全部都用 <div> 也是其中一項

資料結構化

如果你有聽過 Schema.org ，那這就是他了，簡單來說就是在 <head> 裡面加上一段 <script>
，裡面可能包含以下內容：

plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Event",
  "location": {
    "@type": "Place",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Denver",
      "addressRegion": "CO",
      "postalCode": "80209",
      "streetAddress": "7 S. Broadway"
    },
    "name": "The Hi-Dive"
  },
  "name": "Typhoon with Radiation City",
  "offers": {
    "@type": "Offer",
    "price": "13.00",
    "priceCurrency": "USD",
    "url": "http://www.ticketfly.com/purchase/309433"
  },
  "startDate": "2022-09-14T21:30"
}
</script>

他一樣會幫助 爬文引擎 更明確的了解我們網站的內容，而且會對搜尋結果畫面產生實質影響，如果你曾在某些搜尋結果中看過以下畫面：

很明顯除了 <title> 及簡短敘述，我還可以從搜尋結果中知道 星數、價位、評分與是否供貨，這些多餘的其他資訊，就是藉由以上撰寫 結構化資料 所產生的結果，會對 爬文引擎 產生非常實際的影響。

值得一提的是，我們填得越完整，Google 搜尋結果也不一定會將資訊呈現在搜尋結果的畫面中，完全看 Google 心情，但有填的情況下，哪天 Google 心情好，就會放上去了。

可以藉由 schema.org Full Hierarchy 查到完整的結構化資料列表。

…

放心你不是第一個不想全部看完的人，Google 進階搜尋引擎最佳化 (SEO) 有提供一些範例可以照抄，記得從左側的 功能指南 中選取自己想要“借鑑”的範本。或是從這裡也可以找到 Google 探索 Search Gallery。

img alt

這個應該也比較廣為人知，當圖片顯示不出來時，會顯示 alt 的內容
但還有一件事
當 爬文引擎 做網頁爬文時，不會知道圖片的內容，因此開發者藉由 alt 去告知 爬文引擎 這張圖片的內容，就會是唯一的方法，也就會是 增加內容 的手段。

SEO 多久會看到成效？

如果你問 Google ，大概會得到 “ It depends.” （看情況）的回答

太多的因素會影響，包括網站本身原有的權威強度、關鍵字的競爭程度等，都可能會影響文章的排名表現。

訪間網站統計大約要超過六個月的時間成效才算是穩定，想看到一點點跡象最快也要 2~3 個月，當然也還是有很極端的案例，所以或許真的像 Google 自己說的…

“ It depends.”

參考資料

評論