淺談搜尋引擎最佳化(SEO)

文章目的

相信接觸前端的人，對於 SEO 這個名詞應該不陌生，但 SEO 到底是什麼？我將透過此文章紀錄我對 SEO 的理解，並盡量以前端的觀點來敘述 SEO。

SEO 目的

搜尋引擎優化(search engine optimization) 又稱作 SEO，SEO 的目的在於讓搜尋引擎能更容易搜尋到網站，並讓網站處於較前面的排序，以增加網站流量。

SEO 三大重點

關鍵字：了解使用者在搜尋相關內容時會使用什麼關鍵字，例如：使用者想要了解 SEO 可能就會在搜尋引擎打上「SEO」這樣的關鍵字。
網站內容：當有了關鍵字後，網站提供的內容是否符合該關鍵字也是很重要，例如：使用者搜尋「SEO」大部分是為了瞭解甚麼是 SEO 而非想知道 SEO 的歷史。
網站體驗：使用者來到網站後，若使用體驗不佳，也會對 SEO 的排名造成影響，因為 google 都知道使用者在網站上停留的時間。

前端 SEO

這邊我記錄一下，我所知道前端對於 SEO 優化的方法。

h 標籤使用

大家應該都知道 <h1>、<h2> 這類的標籤，妥善運用這些標籤可以優化網站的 SEO。

圖片取代文字

我們都知道 <h1> 是一個網站裡最重要的標題，但如果今天我想把它替換成網頁 logo 讓它變成 <h1> 呢？我們可以利用圖片取代文字的方法來實行。
概念是利用背景圖片來取代我們的 <h1> 文字，範例程式碼如下：

h1{
    background-image: url(背景圖片路徑);
    width: 自訂;
    height: 自訂;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 101%;
}

這邊概念是我們將文字縮排到原區域外，並讓它不會斷行，最後利用 overflow: hidden 把文字隱藏起來，這樣就完成效果囉!

將網頁標籤結構化

我們可以利用 HTML 5 的結構化標籤讓網頁結構化，使搜尋引擎能更快速了解網頁資訊。

充分利用標題與敘述

我們都知道 header 裡的 <title> 可以用來決定網頁標題，創造一個與內容有關聯的標題(但不要太過冗長)對 SEO 有很大的幫助。
<meta name="description" content="網站敘述"> 利用網站敘述也可以有效的幫助 SEO，最好是能為網站中的每一個網頁作與內容相關的敘述。

簡單易懂的網址

可以嘗試讓網頁網址中含有文字，且該文字與網頁內容有關。

參考資料

SEO的初學者教學
 網頁SEO優化入門
 SEO 初學者教學，3分鐘搞懂搜尋引擎優化
 從前端設計的角度來實踐SEO！