網站開發人員必學的 SEO 知識

Ian
I think, therefore I do.
14 min readOct 11, 2020
不想再用搜尋引擎的圖了,所以挑了一張很好看的 Apple 滑鼠跟 Macbook 文青圖
一屋不平,何以平天下
架構不明,何以得排名
關於 SEO,我們先來談 Crawling

網站的可檢索性

這可謂是網路世界第一大關,不管網站架構規劃得再好,抑或是內容寫得深得人心,你把搜尋引擎機器人擋在門外或是不願意來你的網站拜訪那都是徒勞無功。

這章講的是什麼樣的頁面搜尋引擎機器人不會爬取,你又該用什麼方式找出你網站上面不適用於現代的設計方式?譬如說:Flash 不會被檢索、JS 不會被檢索、iframe 的內容不會被檢索、文字圖片化的文字不會被檢索、過多的 404 無效連結可能會影響爬蟲爬取網站的效能以及意願。

網站上線許久卻一直沒有出現在 SERP?
先檢查一下你的網站是否有被正確檢索吧!

網站與搜尋引擎的相關設定

除了頁面上那些 Google 不喜歡的頁面設計方式以及語法以外,你的 Robot.txt 對於網站來說可謂相當重要,網站頁面哪些部分該被讓爬蟲爬取,哪些頁面要爬蟲禁止進入,避免過度浪費爬蟲資源,人家來你家做客,你給人家帶了一堆垃圾回家,這樣人家下次也不會想要再來了。

又或是你這輩子打算鍾情於一個搜尋引擎,只想跟 Google 好,其他搜尋引擎你都想拒於門外,你也可以用 Robot.txt 幫你達成。

檢索與索引都有個索字在裡面,但兩者在 SEO 裡的概念卻是有著完全不同的意義,如果你是希望網站特定頁面不要出現在 SERP 中,你應該善用 noindex 的指令,而不是在 Robot.txt 中阻擋機器人爬取這個頁面,就算你擋了,如果別的網站有連到你的這個特定頁面,對方也沒設定 nofollow,那依然是有機會被收錄在 SERP 當中,如果不想出現在 SERP 當中,你該做的是在頁面上下 noindex 的指令,而不是用 Robot.txt 的設定去阻擋。(例如短期的活動頁面)

Robot.txt 設定要用對,Robot meta tag 也要正確使用,以一個簡單的方式比喻搜尋引擎就是:

搜尋引擎彷彿是一座圖書館,搜尋引擎去全世界把所有的書收藏回來(檢索),分析之後決定是否在圖書館(SERP)上架(索引),讓讀者可以找到。
Google 搜尋引擎就像是這座漂亮的圓弧形圖書館,收藏著豐富的資料

網站 Sitemap 提交

把你的網站想像成是一座迪士尼樂園,這是一座動線規劃良好、指標對於使用者友善的遊樂園,但如果再給你一張園區地圖,相信對於你的遊園計畫能夠有更良好的體驗,例如:入園之前就可以先決定好攻略,要先去抽哪個設施的號碼牌、等待的期間可以順路去哪裡等。

但是,所有的事情都有但是

如果你的網站本身使用者體驗就很差,例如瀏覽動線規劃不佳、使用者不易返回首頁、繼續瀏覽其他頁面、載入速度緩慢、網站疊床架屋造成使用者不易找到他所要的資訊或是你提供的資訊根本無法解決使用者的問題,那 Sitemap 不是你該優先處理的項目,提交一份 Sitemap 檔案並無法解決你的搜尋引擎優化問題。

就像是給你一張台北車站的地圖,你也不見得能從捷運站走到高鐵站月台,問題不在有沒有地圖,問題在於本身結構就錯綜複雜。

優化處理也是有先後順序的,當資源不足時,別搞錯了重點。

這章解釋了各種 Sitemap 的種類,影片、圖片、網頁以及新聞 Sitemap,有哪些自動生成 Sitemap 的工具以及其所該擺放的位置和檔案中一行一行奇怪的英文字代表什麼,網站如果不大,資源不足的情況底下,這份檔案可以後面再來慢慢優化,可以先去搞定其他更重要的事。

行動裝置相容性以及網站速度

現在已經是個行動裝置優先索引的時代,網站大部分的流量都來自於行動裝置端,出門一趟你就知道了,咖啡廳、捷運、斑馬線、觀光景點等,只要有人的地方就有低頭族,所以網站在行動裝置頁面上的呈現以及使用者操作體驗就非常重要,這章節告訴你可以用哪些工具以及方法優化,當檢測出相對應的錯誤時,你應該怎麼處理,不用背下來,但是你會知道去哪裡找答案。

再來,2010 年 4 月 9 日開始 Google 即公告網站速度是搜尋排名要素之一,2018 年 7 月則開始把行動裝置端的速度列入搜尋排名要素,其實只要試問一下自己有沒有辦法忍受一個網站頁面開啟要讓你等超過 3 秒,那你就知道網站速度這個體驗有多重要了,除非你是要在網站上搶五月天或是蔡依林的演唱會票,那只要點進去後還有票,都可以等。

你可以用 Google Analytic 自訂一份專屬於觀察網站速度的報表,Pagespeed Insight 是你優化自家網站速度的好朋友,來自 Google 官方出品,這章提供了許多面對問題時的直接解法,讓你清楚了解當面對這樣的情況時,你可以怎麼處理你的網站。

HTTPS?這是什麼?如何健診以及正確導入

在 2014 年時 Google 就宣布他們將採用 Https 加密憑證來作為排名要素之一,你的網站安全性對於使用者相當重要,因此 Google 相當重視這點,如果你的網站有 Https 那對於搜尋引擎優化是有相當的幫助的。

HTTPS 加密憑證有免費的也有花錢的,但不管花不花錢,都不影響你的網站排名,在網站建置初期,如果能先建置好這一部分,將可以減少未來許多不必要的麻煩,你選擇的主機是否支援自動更新憑證以及支援 HSTS 也就相當重要。

如果你的網站本身是採用 Http,那你安裝好 Https 之後,還有許多工作需要檢查,例如是否有混合內容?舊網址是否採 301 轉到新網址?有沒有幫你的新網址開設 Google Search Console?畢竟安裝加密憑證之後,你獲得的可是一個全新的網站,資料有無順利繼承並且讓 Google 順利爬取也是必須一步一步仔細檢查的。

結構化資料以及開放圖譜標記

隨著 Google 搜尋引擎不斷優化使用者在搜尋上面的體驗,結構化資料也成為搜尋引擎更加容易判斷你的內容類別的方式之一,以確保使用者在搜尋時,Google 能夠更準確地提供正確的資料給使用者。

結構化資料可以分成很多種類,例如:文章、食譜、課程、書籍活動以及 How to 等,你可以選擇適合你內容的類別讓 Google 知道,讓使用者可以更有機會接觸到你的內容,種類繁多,可以前往 Google Search Gallery 閱讀官方文件,尋找適合你頁面內容使用的 Schema。

這個章節除了介紹結構化資料以外,同時也提供幾個健診結構化資料的步驟,讓你確保沒有遺漏任何在建制結構化資料時應該注意的事項。

除了 Google 以外,提供正確的資料供社群媒體抓取也是相當重要的環節,當你分享一篇文章在你的社群媒體平台如 Facebook 以及 Twitter 上面時,你是否曾經好奇,這篇文章的預覽圖為什麼是顯示這張圖片?為什麼標題長這樣?標題下方的描述內容怎麼跟我想給的不一樣?

那你可能該檢查你的 open graph meta tag 是否設定正確,雖然說不設定社群媒體還是可以抓到,但結果可能跟你要的不一樣,舉手之勞做環保,舉手之勞讓你的內容可以更加正確顯示在社群媒體上,也是使用者體驗的一環,顯示正確的資訊更可以增加使用者在社群媒體點擊率。

慎選域名與主機

萬丈高樓平地起,很多事情在建置初期就做好可以為未來省很多事情,地基打夠深,樓才夠穩,對於網站來說也是一樣的,一開始在選擇域名以及主機時,可以預先完整規劃好網站需求,避免未來發現有不足之處需要遷移,那可能會造成很多不必要的麻煩,譬如說流量流失、排名下降等不可抗拒因素,畢竟你的網站不是天外奇蹟爺爺的家,幾顆氣球就可以飛起來搬到其他地方還完好如初的。

如果有多語系需求,該國網站主機就應該離目標市場近一點,減少資訊傳遞的時間;你的主機方案雖說是無限流量,但是否被限制了上行以及下載的速度?如同給你一缸的台啤,但你只能用吸管吸,還沒喝醉,嘴巴已經先累。

你是否與品質不佳的網站共用 C 段 IP?對方網站給 Google 的不良印象有可能會連帶拖累你的網站。

你要用子域名還是子資料夾的方式來作為內容以及品牌的區隔?你可能現在沒有需求,但當未來想加開子域名時,才發現主機有限制數量,這下又多一個工要處理了。

多地區語言規劃

對於業務遍佈於世界各地的品牌來說,多語系是網站必定建制的項目之一,使用者可以透過選單選擇他所要閱讀的網站語言,但你要怎麼讓 Google 爬蟲知道他所在的當前頁面是屬於哪一個國家的呢?

可以善用網址規劃/Hreflang/Sitemap/Google search console 的指定國際目標來讓 Google 更加認識你的網站,如果你的網址末帶有國家名稱,例如:.com.tw,那這很簡單,Google 會把你歸類在台灣的網站,你的網址說得很明白。

但是萬一品牌業務遍及全球 30 幾個國家,各國都有各自的語言,難道我要買 30 幾個帶有國家在末端的網址?先不說要花一大筆錢,光想到後續維護這部分,可能會讓工程師都不想跟你當朋友,每天下午請雞排加珍珠奶茶也不能解決。

比較常見的做法會是開設子網域或是設定子資料夾,例如 tw.example.com 或是 example.com/tw 的方式作為不同語系網站的網址,並在 head 加入 hreflang,告知 google 爬蟲這個頁面我同樣有其他語言的版本,你可以過去那邊看看,然後將其歸類在該語言的 Google 服務當中。

方法很多,該注意的眉角也很多。

多語系品牌的公司,須針對網站做多語系規劃,才能滿足不同的客群,提供最佳的使用者體驗

行動網站開發方式

Google 在 2016 年就宣布他們在實驗「行動版內容優先索引」,而在今年 5 月則宣布 2020 年 9 月開始將全面採用「行動版內容優先索引」(後來又宣布延後至 2021 年 3 月),去年還只是針對新建的網站預設,今年 9 月以後已經全面採用,也就是說,過往 Google 是透過電腦版的網站來評估網頁與使用者查詢的關聯性,如今,已經全面改成透過行動版網站來評估網頁與使用者查詢的關聯性了。

所以我該怎麼辦?我怎麼知道我的網站有沒有符合 Google 對於行動版的要求?

小朋友,你有道光從天靈蓋噴出來,你知道嗎? 年紀輕輕… 就有一身橫練的筋骨,簡直是百年一見的 SEO 奇才, 如果有一天讓你融會貫通,那還不飛天啦,我看你真是 SEO 的奇才,我這裡有一本「行動網站優先索引最佳做法指南」,我看你跟我有緣,這本就送給你吧!!

例如:不要讓廣告影響使用者體驗、確保電腦版跟行動版顯示的內容一致、排版以及版位數量也相同、正確的結構化資料以及圖片有放置替代文字等,該注意的事項很多,可以透過這份指南一一檢查自家網站是否有達到 Google 的要求。

Google 全面改採行動優先索引,透過行動裝置搜尋的關聯性將被優先索引

內容管理系統 CMS

除了網站建置盡可能符合 SEO 規範以外,網站的內容也是相當重要的一個環節,你的內容如果無法解決使用者的問題,那怎麼有辦法受到使用者喜愛並帶來流量?如果使用者都不愛了,那搜尋引擎又怎麼會愛呢?

但是通常內容編制人員不會具有 SEO 的觀念,他們可能不知道要編寫描述性網址?不知道要在圖片上加替代文字?不知道要盡可能縮小圖片大小?不知道要下 Title 以及 Description?不知道要在文章帶入連結,引導使用者到站內相關內容處?

內容很重要,在編寫內容時加入 SEO 觀念也很重要,因此建立一個對使用者友善的「內容管理系統 CMS」就非常重要了,一個完善的後台系統搭配簡單的訓練,讓上稿人員可以依序填入對搜尋引擎友善的要素,例如:可以填入 hreflang 的欄位可以指定 Canonical Tag 的欄位可以填入圖片替代文字的欄位可以填入描述性網址的欄位等,族繁不及備載,可以搜尋國外知名 SEO 部落客 Aleydasolis 的「SEO Friendly Checklist」一文,又或是直接參考 Wordpress 的後台管理系統照本宣科刻一個出來,都是不錯的參考資源。

做一個連你阿嬤都會用的內容管理系統。
阿嬤跟一個手拿筆電的小孩坐在田間

網站結構

網站架構如果不明,何以得排名,除了對使用者不友善以外,Google 爬蟲進來之後也很容易霧煞煞,如同進入了移動迷宮當中,還沒找到你的主要內容就離去了,因此一個完善的網站層級規劃就是相當重要的一件事。

一般來說,建議網站層級保持在 5 層以內,一來顧及使用者體驗,二來則是蜘蛛也不用耗費太多爬取資源,可以這樣看,從首頁開始算第一層,接下來是主分類、次分類、文章最後是 Tag 頁面,而分類的部分則可以依照你的產品類別來決定你的分類層級,盡可能最遵循主題集中、各自獨立、互無遺漏以及穠纖合度(KW 競爭程度)的原則來規劃。

例如:母分類是電腦硬體,子分類可以是顯示卡、主機板、記憶體、CPU 散熱等,下一層則是相關文章內容,而這篇文章帶有與產品相關的標籤,例如型號、原生品牌等相關訊息,如此一來加入首頁剛好 5 層,而以上每一頁都可以連回首頁。

AMP 行動網頁加速計畫

而 AMP 行動網頁加速計畫則是 Google 針對行動裝置使用者體驗推出的另一項服務,為的是加快頁面載入的速度,讓使用者隨點隨讀,類似 Facebook Instant Article 的概念。

如果你在搜尋結果項目旁邊有看到一個閃電符號,那就代表這個頁面有提供 AMP 版本的頁面,而加快載入速度這件事,對於 Google Ad 也是有很大的幫助,使用者點擊你的廣告之後,能夠越快載入到達頁面可以大大降低使用者的放棄率以及跳出率,更有機會提升你的轉換率,在資源允許之下,建議將幾個較為重要的頁面建立 AMP,帶給使用者最佳的閱讀體驗,同時,也別忘記在標準頁面以及 AMP 之間互相指向,讓爬蟲可以清楚知道之間關係連結。

網站開發各階段 SEO 工作

從計劃階段、設計階段、開發階段到最後的上線階段,每個階段都有建立一個完整 SEO 網站的重要檢查點,確保當前環節準備好了,團隊才進入下一個階段,因此一份完善的 Checklist 就非常重要,避免後面水電都進場了,你才跟我說房子地基要重打。

而上線後也不是就等著結案開香檳,善用尖叫青蛙把整個網站連結再掃一遍,確保運作正常、檢查一下各 Tracking Code 是否都有回傳資料、GSC 是否回報錯誤以及最最最最最重要的是網站有沒有被 Google 正確收錄,忙了大半天,結果網站沒被 Google 檢索以及索引,那…先睡吧(誤)。

寫在最後

「網站開發人員必學的 SEO」完整列出以及說明網站從 0 開始建置到上線時你該注意的項目,針對所有會遇到的問題直接給予解決辦法,讓你少走很多冤忘路,有時候我們只見樹不見林,以致於對於網站的整體規劃不夠周全,後續想要回頭來調整時便要耗費相當大的心力以及資源,這些時間不如拿去好好思考創意,生產對使用者有幫助的內容。

如果你的工作環節當中會接觸到 SEO,那這堂課會是開啟你 SEO 之路的好選擇,結合理論以及實務操作經驗,不打高空不講幹的,直接給你解法,告訴你遇到問題 A 時如何使用解答 A。

SEO 這潭水很深,跟咖啡、葡萄酒、火腿以及起士一樣深,Google 不斷的在優化更新搜尋引擎,SEOer 們也不斷的在更新知識,Try and Error,確保自家網站跟得上 Google ,學習 SEO 約 5–6 年的時間,看到連老師這門課時依然毫不猶豫直接刷下去,因為我知道只要在這裡面獲得一個我不知道的知識點,我可以用這知識點延伸出更多我不知道的事,這投資對我來說就是划算的,用少少的投資換取走錯路浪費的時間,我覺得可以。

我不亂黑白開,但如果能讓我毫不猶豫開下去的絕對是價值超過價格的產品。(延伸閱讀:現代人【消費腦波】測試體驗展

.

不會投資沒關係,但是你最起碼要會投資自己。

.

這不是業配,我何德何能有業配的能耐,只是將上完課的內容做一番整理,確保這些要點有印入自己腦海裡,因為單純讀進去聽進去的都不是你的,唯有消化過後再寫出來的,才是真正屬於你的東西。

好一門投資標的,投嗎?>> 網站開發人員必學的 SEO
3 個學習網站開發人員必學的SEO知識原因

--

--