簡介
Search Engine Optimisation,搜尋引擎最佳化,是⼀種透過了解搜尋引擎的運作規則來調整網站, 藉此提⾼在搜尋引擎內排名。
經過許多專業的 SEO 研究機構調查後發現, 當使⽤者利⽤搜尋引擎尋找資料、產品或服務時, ⼤部分⼈通常只會點擊搜尋結果當中,最前⾯出現的幾個連結。所以延伸出 SEO 有白帽、黑帽的手法(之後會介紹),積極地將自己的網站推銷出去。
而且搜尋引擎的演算法時常在變,2020 Google 切換為 Mobile First。
Google 於 2023 五月之後發布生成式搜尋體驗 Search Generative Experience,SGE,是一種新的搜尋後呈現的畫面,現在只要先知道有這個東西存在即可,畢竟內容還是真正的重點。
通常需要 4 ~ 6 個月的操作,等到累積到自己訂的指標時,就可以進行分析,繼續改善投入在 SEO 的經費與時間。
要提升 SEO ,前面說過會跟搜尋引擎有關,所以必須先觀察您的使用者最常使用哪些搜尋引擎,如果您的網站已經有使用網站分析服務,那麼可以借助那些服務的資料觀察出來,例如: Google Analytics。如果您還沒有網站,也還沒有目標使用者的分析,那麼可以先大致利用一些工具,先釐清自己想要主攻的搜尋引擎,例如是桌機為主?還是行動裝置為主?以下為簡單的一個例子,我們先找出 2022-11 至 2023-11 臺灣桌機與行動裝置使用的主流搜尋引擎:
與大家的印象差不多,基本就是 Google 壟斷了,但這樣的資料並不能幫助我們什麼,所以建議您還是先進一步釐清自己網站主要的使用者在什麼情境下使用什麼搜尋引擎,這樣才能幫助您在 SEO 投入的資源,集中在某一個地方。
一般而言,通常都是針對 Google 進行 SEO 優化,畢竟還是目前最多人使用的,在這個章節裡,為了依職能良好的介紹,會以技術分類個別解說細節,但別忘了其實是要互相搭配的。
All about User Experience
以下重點提示僅供參考,搜尋引擎從來沒有公佈他們真正的計算方式,而且也時常在變或是因人而異(A/B testing),以下僅根據操作後的經驗歸納而來。
確保網頁標題出現關鍵字
避免無意義的⽤關鍵字填滿內容,但可使⽤同義詞
確保內容是⾼品質的,也就是說文章結構要通順有層次、邏輯要清晰,而且是適合人類使用或閱讀的
內容定期更新,並且提供更新時間
廣告必須要是可以辨識的區塊,且不能影響主要內容閱讀,蓋全⾴⾯可能會被降低排名。
提供外部連結與內部連結
網頁排版須清晰易用(supplementary content,例如:導航選單)
提供版權資訊、聯絡方式
主要內容前 150 個字要有關鍵字
網頁頁籤標題少於 64 個字符, 您最多可以包含 12 個單詞,這些單詞將被算作⾴⾯標題的⼀部分,並考慮在前 8 個單詞中使⽤重要的關鍵字。⾴⾯標題的其餘部分將被視為⾴⾯上的一般文字內容
別亂轉址
不要用太多 Landing Page 導到同⼀⾴⾯,可能會降低排名
⾴⾯只以賺錢為⽬的,google 可能會視為垃圾網站,例如點擊區塊就能得到回饋的這種
⾃動播放的影⾳廣告可能會降低排名
固定位置的⼤型廣告可能會降低排名
廣告⼤於 30% ⾏動裝置可視⾼度可能會降低排名
全螢幕的廣告、動畫廣告可能會降低排名
語言要自動適合使用者所使用的語言
使用 瀏覽器的設定,提供站內搜尋 (Sitelinks and search box internal)
有⽤的 404 ⾴⾯,404 頁面不要只是顯示文字提示找不到頁面,還可以做一些跟網站可能間接相關的事情
301 重新導向,將舊的連結引導至新的連結,讓搜尋引擎保持最新索引
注意使⽤者在你的網站上的發⾔內容
網頁的載入需要快,第一時間就要讓使用者看見有畫面
舊的 SEO 資訊要清理乾淨
網站地圖的頁面
...
白帽:
利用正常方式,讓使用者可以最快搜尋到所需要的資訊,內容越好,使用者越多,藉此「 自然 」提升網站排名。
黑帽:
利用程式面、操作面或心理學等技巧,引導使用者一定要點擊或導流,達成流量提升等目的提升網站排名,對使用者暸解網站內容並無實質幫助,甚至帶來困擾。
灰帽:
在符合搜尋引擎的規則下,利用程式面、操作面或心理學等技巧,達成流量提升等目的提升網站排名,對使用者暸解網站內容僅帶來部分幫助。例如內容農場網站,內容大部分使用別的網站內容加以修改,並且以吸睛、好奇心驅使使用者點擊,又或是整篇文章充滿累贅的關鍵字,藉此取巧提升關鍵字的排名。
網頁關鍵字的規劃,也攸關在搜尋引擎搜尋時提升排名,所以必須審慎的評估您主打的關鍵字。您可以藉由一些工具,先查詢看看您想的關鍵字在各大搜尋引擎的趨勢。如果您想出來的關鍵字都沒有人搜尋,雖然您可能可以藉由 SEO 的操作獨佔這個關鍵字,但另一方面也要評估是不是沒有使用者有這方面的需求,所以才都沒有人搜尋。以下僅列舉一些關鍵字工具:
如果您已經有網站,想看看目前表現如何,也可以在網路上尋找 SEO 檢測相關工具,將報告中文案的部分加以參考,程式面的建議則給予您的開發人員。
接下來的兩個篇幅,會跟開發人員有關。
如果您的夥伴對於 SEO 的基本設定沒有相關經驗,可以藉由接下來的文章學習與設定。
正確的使用 HTML 標籤,有助於搜尋引擎使用機器查看您的網頁時,了解您的網站結構、網站目的、網站連結、網站內容等,有助於您的網站評分。
正確的使用 HTML 標籤,對於無障礙的環境也是一種幫助,近年來各國皆在提倡,搜尋引擎也會將無障礙列為評分項目。
每個網站基本只能使用一個 <h1>,這代表著網頁內容的主旨。
除非使用了像 <article> 這種就是刻意要將網頁內容獨立的部分(也就是在 <article> 內,可以再次使用 <h1>,因為 <article> 的意思就是這個區塊內的部分,可以當成獨立的),否則 <h1> 只能使用一次,且最好配合此網頁的關鍵字一起實作 SEO 優化。
再來,依序使用 <h2> ~ <h6>,每個都可以重複,但就是要按照階層使用,如下範例結構:
這樣的情況,搜尋引擎會良好的知道這個網站的重點在哪。對於無障礙來說,也方便在網頁內容間跳躍。
正確的使用例如 <img>、<audio>、<video>等,有助於搜尋引擎知道這個網站有多媒體資訊。
並且如前一篇所言,在使用者經驗上,多媒體一般並不會自動播放。
另外,影音類可能會讓 SEO 表現的更好。
如果需要資訊,可以使用 <table> 呈現。
如果是要點累,可以使用列舉標籤,例如 <ol>、<ul>。
這些措施都是幫助使用者釐清各資訊的關係,搜尋引擎也會快速理解內容、認為您的內容是整理過的。
前面有稍微提到如果有做無障礙的部分 SEO 表現會更好,但要介紹整個無障礙篇幅又太大,所以僅列舉常見基本設定,建議您可以多多暸解無障礙這個領域,白話一點其實就是讓更多的人可以更方便的使用的 UX 層面的事情。
<img> 要加入圖片描述在 alt 屬性裡,並且內容是要有意義的。除非此圖片只是裝飾性質,那就可以不填入任何資訊,但注意,還是要把 alt 寫出來,例如:<img src="../deco.jpg" alt="" /> 這個樣子。
網頁的語言設定,例如:<html lang="zh-Hant-TW">,這就是繁體中文-臺灣,越貼近當地主流的語言會更好,當然也可以只使用 zh-Hant ,但這只是表示繁體,沒辦法表示是在臺灣或香港。 另外動態的改變 lang ,提供多國語言會更好。
<a> 連結一定要加上 title 屬性描述要前往的連結是什麼,例如:<a href="/" title="前往首頁">首頁</a>,如果連結是連到外部網站,則還要加上 「 另開視窗 」 文字提示和一些屬性,例如: <a href="https://www.google.com/" title="另開視窗前往 Google" target="_blank" rel="noreferrer noopener">,其中 target="_blank" 是另開新分頁,noopener 是避免原始網站被重新導向,是屬於安全性問題,noreferrer 則是該網站得到的是直接流量(direct),而不是引薦 (referral)。還有一個是 nofollow ,也就是告訴搜尋引擎本網頁跟要前往的網頁沒有關係,但不太常使用。
這部分是 HTML 設定 SEO 的精華,包含了 <title>、<meta>、<link>、<script>, 這裡面的資訊不會顯示在網頁上,基本就是給機器人看的,簡單舉例如下:
接下來我們一個個來看吧,可以選擇自己想要加的再加入就可以了!(以下皆視為在 HTML5 )
結構化資料是一種標準化格式,作用是提供網頁相關資訊並將網頁內容分類。例如在食譜網頁上,結構化資料就能分類材料、烹飪時間和溫度、熱量等內容。
這份說明文件旨在介紹結構化資料的必要屬性、建議屬性及選用屬性,並且說明這些屬性對 Google 搜尋的特殊意義。雖然大部分的 Google 搜尋結構化資料都使用 schema.org 詞彙,但在瞭解 Google 搜尋的運作方式時,請忽略 schema.org 的說明文件,並以 Google 搜尋中心說明文件為最終參考指南。schema.org 上有許多屬性或物件對其他搜尋引擎、服務、工具和平台來說可能很實用,但對 Google 搜尋而言並非必要。
一般而言,只要定義更多建議的功能,資訊就更有可能以進階顯示功能的形式呈現在搜尋結果中。不過,與其設法將所有可能的建議屬性一網打盡,但卻因為不完整、格式錯誤或不正確的資料而漏洞百出,還不如採取量少質精策略,提供較少的建議屬性,但個個完整無誤。
添加結構化資料可增加搜尋結果對使用者的吸引力,也可能鼓勵使用者更常與您的網站互動 (這稱為「複合式搜尋結果」)。
Google 會利用從網路上找到的結構化資料來瞭解網頁內容,以及收集網路和全球的資訊 (例如標記中所包含的使用者、書籍或公司相關資訊)。舉例來說,食譜網頁可能會出現以下 JSON-LD 結構化資料程式碼片段,介紹食譜的名稱、作者以及其他詳細資料:
JavaScript Object Notation for Linked Data,JSON 格式的結構化資料,
這是一種嵌入在 HTML 網頁的 <head>
和 <body>
元素內 <script>
標記中 JavaScript 標記法。由於標記不會與使用者可見的文字交錯,因此巢狀資料項目可透過更簡易的方式表達,例如 Country
> PostalAddress
> MusicVenue
> Event
。此外,Google 能夠解讀以動態方式插入網頁內容的 JSON-LD 資料,例如透過 JavaScript 程式碼或內容管理系統中的內嵌小工具插入的資料。
使用方式:
請勿透過 robots.txt、noindex
或任何其他存取權控管方法,禁止 Googlebot 存取您的結構化資料網頁。
這段 HTML 有三個重點,首先是
itemscope
,用來說明這各 div 底下的資訊都是同一個範圍。 第二個重點是itemtype
,用來定義這個資訊是屬於哪一種類別,以上方範例來說是電影的類別,最後是itemprop
,用來定義這段文字的資訊是屬於什麼,例如<h1 itemprop="name">Avatar</h1>
就是說明 Avatar 是電影名稱。
基本先依據 Google PageSpeed Insights 改善。
提供 next-gen 格式的圖片 JPEG 2000、JPEG XR 和 WebP 等圖片格式的壓縮效果通常優於 PNG 或 JPEG,因此能提⾼下載速度並節省使⽤者的數據⽤量。
使⽤⼤⼩合適的圖片有助於節省⾏動數據⽤量並縮短載入時間。 視瀏覽器⽀援狀況採⽤不同技術,若可⽀援最新,圖片可使⽤ <picture>
等 RWD 的方式。若不⽀援最新 Html Tag,使⽤ css @media⽅式。 另外情境如果可以,使⽤ lazy loading。
排除禁⽌轉譯的資源。 先載入必要之 js/css ,其他不重要的使⽤ lazy loading
視情況使⽤ Cache
將主要執⾏緒的⼯作降到最低
⽂字壓縮
避免耗⽤⼤量網路資源
減少 JavaScript 執⾏時間
將關鍵要求層級降⾄最低 ,優先載入必要資源
降低要求數量並減少傳輸⼤⼩
Https (申請 SSL),Chrome79將逐步封鎖網⾴中未SSL加密之內容
如果使⽤者輸入http,也要轉到 Https,同理,使⽤者不管有沒有打 www,也要可以連線。
域名最好可以包含關鍵字或相關。
域名最好是符合性質。例如台灣使⽤.tw,開發使⽤.dev
Robot.txt
允許所有搜尋引擎檢索所有內容(通常建議使⽤) User-agent: * Disallow:
拒絕所有搜尋引擎檢索所有內容(正式環境請避免使⽤) User-agent: * Disallow: /
拒絕所有搜尋引擎檢索/members/底下所有內容。 User-agent: * Disallow: /members/
拒絕Google搜圖的爬蟲檢索/images/底下所有內容。 User-agent: Googlebot-image Disallow:/images/
[萬⽤字元]拒絕所有搜尋引擎檢索網站內png為副檔名的圖檔。 User-agent: * Disallow: .png$
[萬⽤字元]拒絕Bing搜尋引擎檢索網站內/wp-admin⽬錄底下所有內 容及網站內開頭為test的所有檔名。 User-agent: bingbot Disallow: /wp-admin/ Disallow: ^test
sitemap: http://www.XXXXXXXX.com/sitemap.xml
Crawl-deslay: XX — 告訴爬蟲,再次來訪的最短時間間隔為20秒。 (百度公開表⽰不⽀援此語法)
Robot.txt檔案只能放在網站的根⽬錄底下
有些東⻄要擋掉比較好
XML 可使⽤⼯具產⽣:XML-Sitemaps 網址數量往往超過⼀個 Sitemap 檔案可以乘載的⼤⼩? 單靠 Sitemap 製作⼯具依然會有許多網⾴沒辦法被找到? 每天都有⼤量新⾴⾯產⽣,需要時時更新Sitemap內的內容? 解決辦法:套件、模組、⾃⾏開發程式⾃⾏產⽣ sitemap Subdomain or SubFolder ?建議 SubFolder
screaming frog 用爬蟲的方式抓很多頁的關鍵字
mozbar 查看網站的關鍵字
aherfs(付費)
ubersuggest 把 google 關鍵字整理一次抓下來
keywordtool.io
LSI Graph 找出與你的關鍵字相關的字詞