{{ 'fb_in_app_browser_popup.desc' | translate }} {{ 'fb_in_app_browser_popup.copy_link' | translate }}
{{ 'in_app_browser_popup.desc' | translate }}
{{word('consent_desc')}} {{word('read_more')}}
{{setting.description}}
{{ childProduct.title_translations | translateModel }}
{{ getChildVariationShorthand(childProduct.child_variation) }}
{{ getSelectedItemDetail(selectedChildProduct, item).childProductName }} x {{ selectedChildProduct.quantity || 1 }}
{{ getSelectedItemDetail(selectedChildProduct, item).childVariationName }}
我們在操作 SEO 的過程當中,會碰到很多看似很簡單的技術項目,卻可以導致辛苦累積的成效在一夕之間蒸發。這些問題對於專業的技術開發者來說,卻可能只是極為簡單的小細節,不一定會認真看待。
經營網站與內容的你,必須充分瞭解到這些技術對 SEO 可能造成的衝擊,並且妥善的和專業的技術專家溝通、讓他們了解到某些設定對讀者的重要性,就可以避免不必要的致命傷害。
robots.txt 可以告訴搜尋引擎「應該怎麼造訪我的網站」。
如果不小心設成禁止,那麼整站的 SEO 會瞬間歸零!
每個網站都可以用 “robots.txt” 和搜尋引擎溝通,而這個檔案就是一本小小的記事筆記簿,上面會用文字簡單的記載:哪些網頁可以讓搜尋引擎造訪、哪些網頁則不可以造訪。
搜尋引擎在開始接觸每個網頁之前,都會遵守 robotx.txt 上面制定的規則。
“robots.txt” 就像每個網站和搜尋引擎溝通的「說明書」,被造訪過的頁面,會被編入搜尋引擎的資料庫裡面,並顯示在搜尋結果中。
當其他人使用 Google 搜尋的時候,就有機會可以找到這些頁面。
但網站上往往也有許多內容,是不能夠讓別人公開查到的,例如記載私人資訊的會員登入頁面、輸入身分證號碼才能查詢的就醫資料、受密碼保護的心情日記等等,這些都是我們不希望被別人輕易搜尋到的東西。
這時候,我們就可以使用 robots.txt 告訴搜尋引擎:這些頁面謝絕參觀。
要找到各網站的這個「說明書」,其實不會太困難,通常只要在網址後方加入斜線、並打上 robots.txt,就可以看到設定的資訊了。
比如說,我們可以透過以下網址找到政治大學官網的 robots.txt 檔案:
https://www.nccu.edu.tw/robots.txt
根據 Google 搜尋的官方說明,標示 disallow
代表禁止搜尋引擎造訪,而後面的斜線 /
則是指「所有帶斜線網址」都通用的意思。
如果不慎在 robots.txt 上面註記這樣的說明,就等於命令搜尋引擎把所有資料都移除,也就是全站 SEO 歸零的意思,不可不慎!
完整的 robots.txt 設定知識,在 Google 的官方說明中心都有詳細註明,如果操作 SEO 會用到這項功能,記得先和技術工程師做好溝通,或者與有經驗的 SEO 專家共同合作,千萬不要貿然亂改。
noindex
:禁止 Google 收錄與排名的重要指令
如同字面上的意思:noindex
就是告訴搜尋引擎:「不要收錄我的頁面」。
在一些情境下,例如:臨時頁面、測試頁面等,為了避免這些無用頁面被當作重要的資料佔用資源,此時加上 noindex
就是很標準的操作,如此便能避免自己站內的無關頁面出現在搜尋結果。
但萬一不小心在重要頁面上,把 noindex
加上去的話,那麼整頁 SEO 就會瞬間歸零,也會連帶影響到有和這頁串連的其他頁面排名訊號,不可不謹慎。
看到這邊,如果心裡有些不踏實,可以自行檢查一下自家網站 noindex
的設定狀況。
在網頁上按下右鍵,開啟瀏覽器的「檢視原始碼」功能,找找看以下的資訊,就能簡單確認:
<meta name="robots" content="noindex"> |
我們難免會遇上網站搬家的情況,一般來說我們可分兩類:
前者多半由專業主機服務提供商就能解決,但後者則會影響 SEO 排名。
試想:一間老字號店面經營多年,儘管其他條件不變,卻突然把店名改了,在客人心目中是不是可能造成像是突然換新店面的衝擊?
就算網頁內容不變,只有網域名稱改變,搜尋引擎也會將其視為新站,甚至比對之前認識過的資料之後,發現兩個網域裡面有重複內容,直接將其排名拉低,對 SEO 造成重大影響。
這時就要好好的告訴搜尋引擎,網站已經搬家了,請重新更新。而這主要手段,是透過「301 重新轉址」進行。
301 轉址的意思,就是告訴讀者與搜尋引擎:這個頁面已經永久的轉移到另一個頁面去了。
圖片來源:samunderwood
什麼時候會用得到「轉網址」呢?
網站搬家、更換網頁的網址 (URL) 的時候,就要用到 301 來移轉它的 SEO 訊號,告訴搜尋引擎:我們累積的 SEO 要從原本的網址,轉移到新的網址。
有時去餐廳吃飯,遇上喜歡的店家搬家了,餐廳門口就會貼上「本店感謝各位客戶的愛護與支持,但因為某些因素,店址遷到別的地方」。
你不太會因為這家店搬到不同地方,就影響對它的評價。
但如果餐廳突然搬家,卻沒有好好告知忠實的顧客、導致客人上門卻找不到餐廳位置,那麼就會大大影響餐廳的客源與聲譽。
同樣的道理,網站搬家也要「妥善通知」,否則突然改動網址而沒有做好處理,就會產生對 SEO 的嚴重影響。
搜尋引擎的演算法對每個頁面都有特定評價,假設我們今天要換網址,但我們要確保所有訪客都可以知道新的位置,那麼就要使用「301 轉址」:
根據 Google 分析師指出,301 轉網址可以傳遞 100% 的連結訊號。也就是說:正確使用 301 轉址可以把所有頁面的 SEO 訊號「無痛移轉」。
對作者來說,只是文章改一下網址而已、變動很小。但對搜尋引擎來說,是舊文憑空消失、所有累積的 SEO 訊號歸零,而改址後的網頁卻是「新出爐」,Google 要慢慢重新開始認識,形同從頭開始排名。
看似簡單的小動作,其實對 SEO 成效傷害很大,實際上在操作的時候卻常常發生,要特別小心。
搜尋引擎在了解網站結構的時候,以及判斷哪個頁面比較重要、哪個頁面比較次要,使用的依據其實是「連結」,而不是「視覺」。
這個狀況和我們的直覺是不太一樣的,因為我們可能會認為:如果在首頁上有一個很大的版面,那麼這個版面肯定會有很高的重要性。
但是對 Google 來說,就算視覺再明顯,它就是首頁延伸出去的一個普通連結。同樣道理,就算看起來不怎麼起眼的連結,對於 Google 判斷訊號也會起到非常重大的效果。
Google 的搜尋中心有提供詳細的圖解——
匯集最多連結的網頁,基本上就是最源頭的首頁,而從首頁往外延伸出去,需要通過層層關卡才能接觸到的地方,就會是比較次要的頁面。
所以,建構頁面層級最重要的關鍵因素是「連結」,特別是文字所構成的連結項目。網頁上看得到的版面大小、視覺動畫效果等,都不是搜尋引擎用來判斷重要性的依據。
所以,對於重要的頁面,我們應該要確保它能從網站的不同頁面當中,得到足夠的內部連結——只要有文字連結就行了。
如果忽略了建立連結的重要性,那麼就可能導致搜尋引擎很難找到你想強調的重要頁面,進而使整體成效變差,也很可能會讓使用者在網站中有不好的導覽體驗。
知名 SEO 權威 Ahrefs 以電商網站為例,提及商品分類頁面是很重要的。
我們可以從美國亞馬遜的設計看出,側邊的類別欄位讓使用者可以很迅速的找到相關的產品,而這樣的架構也能讓越上層的分類匯集較多的連結,就能夠幫助搜尋引擎快速判斷商品的分類層級。
重複內容就是高度相似、或者完全一樣的內容。它的存在有可能會根本性的影響搜尋演算法對「整個網站」的評價,往往需要透過技術性 SEO 加以處理與規劃。
且重複內容會浪費爬文預算,並分散排名訊號,讓重要的排名訊號被沖淡。
在官方角度來看,我們可以想像:搜尋引擎利用演算法替每位考生寫的內容評分排名,但出現不同考生交出一樣內容的情況,要如何給分?
在茫茫網海,內容可說成千上萬計,不可能用人工一個一個去判斷,這時搜尋引擎就很難判斷優先度。
因為重複內容都一樣,原本一人該得 10 分,由 5 個人來分,可能變成各得 2 分,浪費時間還不說,寶貴運算資源耗費同樣內容上,因此造成日後整個網站的爬蟲效率與排名成效不彰,也不意外。
從實際測試中可以知道,多個網站同時具備一樣內容,搜尋引擎就會自動省略掉重複的項目、只顯示其中一個。
如果我們的內容是被省略的那一項,就等於完全沒有排名。
一些常見重複內容場景如下:
在搜尋引擎眼中,網址定義除了網域以外,還包含通信協定。
網址組成的元素當中,"http" 與 "https" 稱為「通信協定」。如果有一個網站,同時使用了 http 與 https,分別為 http://abc.com、https://abc.com,那麼在沒有做好 301 轉網址的情況下,兩個不同的網頁內容卻都一樣、都含有相同內容,那這就會造成「重複內容」。
解法相當容易,只要在 http 部份設定好「301 轉址」,統一把重複的網址轉到 https 即可。
多數網頁伺服器、架站業者都有支援這項功能。但對於多年同時有 http 與 https 搜尋結果流落在外情況下,還要詳加考慮頁面轉址體驗。
意思是使用者於搜尋結果頁中,,點選 http://abc.com/page1 時,要能對應到 https://abc.com/page1,而非簡單粗暴的直接把所有版本的網址都轉到 https://abc.com 上。
留意到這點,便能在不影響使用者體驗下,順利轉網址,同時也保有排名。
簡單來說,”trailing slash” 就是「網址最後面帶的斜線」。
當我們開啟 https://abc.com/page1 與 https://abc.com/page1/,這兩者網址背後代表的是不同的頁面。
多了一個 /
就是完全不同的網頁。Ahrefs 有詳細說明兩者差異,還有你到底該不該使用與如何使用。網站裡的網址斜線 trailing slash 一旦定下規則,就不要再任意改動。
這樣的重複內容情境,常見於電商網站中,如:一件商品因為系統設計差異,有部份細節不同造成產生網址也不同。
但對於搜尋引擎而言,他們都屬於相同內容,此舉會造成搜尋引擎不知所措,難以判定誰才是「正統」的存在,解法只要在頁面加上標準網址 (Canonical) 即可。
Canonical 就是「標準網址」的意思,它的作用就是告訴搜尋引擎,兩個極為相似的頁面當中,哪一個是標準的版本。
假設 Google 的爬蟲認定 A、B、C 頁面有相似的內容,Google 便只會在搜尋結果中選擇其中一篇 A 作為「標準版本」,其他的 B、C 頁面就會被認定是「重複內容」,而降低網頁排名訊號。
如果有在網頁後台設定「這篇網頁要指向那一篇標準網頁」,便可以對 Google 爬蟲提出建議,讓他知道哪一篇頁面才是你的「標準頁面」,也將其他重複頁面的排名訊號歸給那篇標準頁面。
圖片源自:Sam Underwood
也就是說,標準網址 (Canonical),能讓 Google 爬蟲認識網站中哪一個頁面才是「本尊」,將重複頁面的排名訊號累積到這個頁面上,讓本尊獲得最優先的頁面排名。
電商就是常常會出現重複頁面的網站,例如:
這些頁面在商業用途上,常常會需要用到「不同的網址容納極相似商品」的情況,從 SEO 的角度來看,這些往往都算重複內容。
如果頁面上有設定好標準網址,那麼就能幫助搜尋引擎判斷,將排名訊號累積到希望最優先被看到的「標準頁面」上。
通常來說,設定標準網址能夠協助管理方達成兩項目的:
若有設定標準網址,便能夠協助 Google 知道該將排名訊號集中到那篇頁面上。
此外,網頁如果同時存在「手機版本」與「桌機版本」的兩份內容,在 Google 爬蟲看來也會有「內容重複」的問題。
這時候,便可以在手機板的網頁後台設定標準網址,告訴爬蟲「這篇文章的本尊是桌面板的網頁」,讓 Google 將排名訊號累積到桌面板網頁上。
沒標記標準網址時,由於外部網站引用的連結網址不一定是自己最喜歡的「本尊」,也可能導致稀釋來自反向連結的排名效益。
總而言之,沒有設定好標準網址時,網頁可能會有下列問題:
而當設定好標準網址時,則可以:
你可以透過直接編輯網頁的 HTML 編碼來設定標準網址。
而大部分的內容管理系統也有這樣的設置,像是 Wordpress 可以安裝 "Yoast SEO" 外掛,就能直接在編輯後台設定自訂網址。
如果想要確認自己的網站有沒有設定好 Canonical,則可以按右鍵進入網頁原始碼,並利用 Ctrl+F 輸入 Canonical 查找。
對於網站中比較重要的頁面,像是官網首頁、網站主頁面,管理方也可以用標準網址指向「頁面自己」,便可以讓 Google 的爬蟲知道自己就是「標準頁面」。
要是文章被其他惡意的機器爬蟲複製,它也有可能會自動把這個標準網址的設定也一併「搬運」過去,讓自己的頁面依然保持「本尊」的身份。
知名的內容發佈平台 Medium 也有客製化標準網址的設計
標準網址和 301 有些相像,都可以把網頁的 SEO 訊號轉給另外一個頁面。
它們最主要的差異在於,301 轉址後的「原本頁面」不會顯示在 Google 搜尋結果中,使用者也沒有辦法閱讀到原本舊的頁面。
但加上標準網址的網頁,「理論上」不會被 Google 顯示,但網頁依然可以正常被閱讀,不同版本的重複頁面會「同時存在」。
標準網址 |
301 轉址 |
|
網頁 |
多個網頁仍同時存在,只是 SEO 權重可能會統一被轉移到「標準」頁面。 |
無法讀取已被轉址的原網頁 |
Google 排名 |
Google 傾向只排名「標準」頁面 |
Google 不會排名已搬家、不存在的原網頁 |
SEO 權重 |
轉移到標準網址上 |
轉移到重新導向的頁面 |
多語言是一個非常複雜的 SEO 設定,但是當一個網站面臨使用多種語言的情境,像是企業要拓展海外市場、服務不同地區的客戶時,就很可能會使用到這樣的 SEO 技術。
普通的單一語言網站,搜尋引擎會自動判別語言,讓使用中文的人查到中文的內容、位在歐美地區的人則查到英語內容。
在網站存在多語系的情況下,就有可能面臨到潛在客戶意外查找到同一個品牌提供的內容,但卻是比較不理想的語言版本。
比如說,我們可能希望住在英國的訪客看到「英式英語」的內容,而美國的訪客只要找到「美式英文」的資料就好了,但當一個網站同時提供不同版本的語言,搜尋引擎可能就會搞混。
雖然 Google 也會自動識別語言,但網站的 SEO 設計上,如果能多放點心思,就可以大幅提高排名的效率。
Google 提供了 hreflang
標記,針對性的要克服多語言的問題,其中精髓在於:
多語系頁面除了能建立起彼此的關聯性,更能讓搜尋引擎依照使用者的習慣語言,提供相對應的頁面,讓體驗更好。
也能省下搜尋引擎耗費演算資源來猜測:這些多語言網站間到底有無關聯、是不是重複的內容。
舉例來說,你的網頁可能同時有中文和英文兩種不同的版本,它們使用的網址不一樣、語言也不一樣,但實際上這兩頁的內容是一模一樣的。
透過 hreflang
,就可以讓搜尋引擎知道:它們是來自同樣內容的不同語言版本,而不是毫無相關的不同頁面。
Google 官方在說明文件指出:不同語言的主要判定方式是透過演算法,至於多語言網站的網址選擇上並沒有太多限制,常見方式如下:
你可以用同樣網域的子目錄,或者子網域來架構不同的語言系統,你也可以乾脆使用不同網域來裝載不同語言的內容。
比較麻煩的,在建立好不同語言的內容之後,需要花心思來加入標記。
hreflang
標記至少透過網址讓搜尋引擎知道,它是一個獨立網址,而在網頁標記中會加上此標記,告訴搜尋引擎這些頁面「是一夥的,有不同的語言可供搜尋」。
假設今天網佔有中英文兩種版本,中文頁面中,標記英文 hreflang
,這樣搜尋引擎便會知道,這個網站還有一個英文版的兄弟,https://example.com/page1 為英文版網址也要一起提供。
<link rel="alternate" hreflang="en" href="https://example.com/page1" /> |
同理,英文頁面中,也要標記中文 hreflang
並提供中文版網址
<link rel="alternate" hreflang="zh" href="https://example.com/zh/page1" /> |
其中 en
為語言代碼,細節可查閱 ISO 639-1,地區代碼則可查閱 ISO 3166-1 alpha-2。
用法可將「語言代碼」-「地區代碼」組合而成,例如:台灣慣用的繁體中文為 zh-TW
。
如果要針對「所有中文」,則單獨使用 zh
即可,搜尋引擎會自動判斷,假設在台灣搜尋中文,結果會採用 zh-TW
頁面,台灣以外搜尋中文,則採用 zh
頁面作為結果。
此外,中文與英文頁面均須雙向標記,如果僅有單向標記則會沒有作用,這個機制是為了避免網頁被冒名標記的問題。
多語系標記的意含是告訴搜尋引擎:這個網站同時存在中英文版,且彼此非重複內容。
除了中英文版本相互標記外,官方文件也建議「自己標記自己」,也就是中英文版本網頁同時提供兩組 hreflang
,如下:
<link rel="alternate" hreflang="en" href="https://example.com/page1" /> |
除此之外,如果碰上了非中文或英文的使用者,可用 hreflang
="x-default"
標記,提供一個通用頁面。
如果網站提供的語言版本夠多,在無法提供對應語言情境下,也可設定一個語言選擇頁面,讓使用者自行選取所要呈現語言。
<link rel="alternate" hreflang="en" href="https://example.com/page1" />
<link rel="alternate" hreflang="zh" href="https://example.com/zh/page1" />
<link rel="alternate" hreflang="x-default" href="https://example.com/page1" />
hreflang
標記有針對 sitemap 提供相關方針,詳細可以參考官方文件,與網頁標記概念雷同,而要如何管理好與生成這些 hreflang
標記也成了一門重要課題。
由於現代行動裝置相當普及、人手一機,攤開數據一看,早就有超過 6 成以上的使用者是透過行動裝置上網,這也讓 Google 在決定排名時,會將行動裝置友善度列入重要考量項目。
簡單來說,就是讓網站用手機看也能滑得很方便的意思。
由於行動裝置螢幕比一般電腦更小,在文字部份需要額外放大與排版,如果還沿用一般電腦的排版方式呈現給使用者,則會造成閱讀不順,與操作上的額外負擔。
那麼行動裝置友善,到底誰說了算?
Google 有推出一套針對行動裝置友善測試的工具,只要將網址填入後,稍待幾分鐘測試,便會出現是否友善的結果,如果網站有採用 RWD 響應式設計,基本上對於行動裝置而言,都算友善。
如果要更進一步友善行動裝置搜尋結果,可加入複合式搜尋結果,除了能夠讓使用者在搜尋時,快速獲得資訊之餘,也能為此提昇排名。
複合式搜尋結果可以直接使用 Google 官方工具來測試,複合式搜尋結果也可能會同時出現在一般電腦版本的頁面中,當網頁取得排名時,便會出現連結與描述外的其他資訊,使用者可快速展開閱讀,不必點進網站內。
排名出現在理想的位置的時候,可能已經透過關鍵字的搜尋取得相當高的曝光,如果有透過複合搜尋結果取得更多的版面,這效果就很像路邊的廣告看板,就算沒有真的點進網站,也會讓看到的人心裡留下印象,未來有相關需求就會想到這個品牌。
Google Search Console (GSC) 相比於 Google Analytics (GA),名氣相對小了些,很多網站經營者卻沒串接,或不常關注,甚至忽略,但其實 GSC 對 SEO 的重要性,可能更勝過 GA!
GSC 可以說是「搜尋引擎的後台」,它能給予網站管理者極大價值的數據資料,可以說是操作 SEO 必定要使用的工具。
GSC 和 GA 最大不同之處在於,GSC 看的是「搜尋」與「網頁技術問題」等專注在 SEO 層面的資訊,而 GA 則提供瀏覽行為、使用者分析、點擊轉換等綜合資訊,包含 SEO 以外的流量,比方說社群、廣告、Email 等等。
有別於第三方工具,GSC 提供的是來自 Google 官方的第一手資訊,這些資訊比起第三方工具用推測等方式搜集而來,可以說是準確度更高,更可信也更即時。
透過 GSC,我們能看到使用者透過什麼關鍵字進入網站、該關鍵字排名狀態、點擊數、曝光數量、轉換率等。
在技術層面上,GSC 也會很貼心的告訴你,網站哪些頁面有問題須改善,實用性相當高,如果遇到未收錄、想快點收錄的網頁,也可直接透過介面送出需求。
隨著時代演進,網站技術也越來越先進,從早年的純靜態網站,到今日的動態又兼具設計感的網站,讓視覺呈現效果、互動操作體驗大大推上一個層次。
現代化的網站前端,主要由 HTML、CSS 與 JavaScript (JS) 這三項技術所組成。
HTML 可說 SEO 的重要骨架,乘載了「搜尋」所需要的核心內容。CSS 決定了一個網站的外觀與視覺美感要如何呈現,至於 JavaScript 則是讓網站更增添了動態情境,讓使用者有「互動」感。
HTML 對於 SEO 而言,是極為重要的基本骨幹。
HTML 除了構成網站運作基礎外,同時也作為搜尋引擎爬蟲的標準語言。簡單來說,透過完整的 HTML 標記,爬蟲可以判斷出哪些為文字段落、哪些為內容標題、超連結又連往何處等重要資訊。
HTML 可說佔據 SEO 排名成功要角之一,縱使內容再如何豐富、完美,卻無法成功以 HTML 呈現給搜尋引擎爬蟲收錄,這一切可能都只是徒然而已,畢竟就好比身懷絕技,然而到了一個語言不通的外地謀職,可說完全英雄無用武之地。
相較於 HTML 作為主要內容的核心,CSS 則是用在點綴網站內容的「視覺效果」,讓整體排版、視覺效果更有設計感,使用者瀏覽起來更加舒適。
如同一間餐廳,雖然提供美味的食物是它的本質,但座位編號、專屬的內外場位置、讓人能夠一目了然的動線設計,對於餐點美味度雖然沒有影響,但卻能大大提昇用餐舒適度。
同理,雖然 CSS 對於網站排名往往沒有直接影響,但對使用者而言,能提高瀏覽時的流暢性與賞心悅目程度,這就是 CSS 對於技術面 SEO 最重要的影響。
透過分析可以發現,維基百科使用 CSS 與無使用 CSS 差異,雖然不影響內容呈現,但有開啟 CSS 的話,排版上卻相對賞心悅目不少。
JavaScript (JS) 是能讓使用者和網頁互動最重要的程式語言。
常見的情境包含:頁面互動的視覺特效、無限往下捲動文章的功能、以及內容的即時刷新等。這些資訊沒有辦法透過靜止不動的內容和視覺美化來達成,而需要加入 JS 的成分。
JS 可以說是構成現代人使用網頁不可或缺的必要項目。
不過,由於人的眼睛和搜尋引擎運作的模式非常不同,JS 程式語言在很多情況下,會對 SEO 造成難以預測的影響,也增加了優化操作的難度。
比如說「無限捲動」的功能,人類透過眼睛或手機往下滑動,可以透過「文章畫面」很快的判讀:我們還在同一頁上,但已經滑到下一篇文章了。
但對於看不到文章畫面的搜尋引擎來說,它可能很難判斷這些「無限內容」分別屬於哪幾個網頁,造成後續影響排名的問題。
就好像顧客到一家餐廳點完餐,主廚還不斷的上菜,熟客也許知道店家的營運慣例,知道這是額外的招待,但生客遇到同樣情況就可能不知所措、誤會是主廚上錯餐。
有些更豐富的網頁設計,甚至還「仰賴 JS 來生成 HTML」,打破過往 JS 只用在互動、增添網頁特效的局面。
但透過 JS 來生出構成網頁內容的核心骨幹的問題是,當搜尋引擎沒有辦法「跑完」這些 JS 程式語言,那就看不到對排名而言最重要的 HTML 內容了!
使用 JavaScript,需要經過「轉譯」的步驟之後才能收錄。
「轉譯」是什麼意思呢?
它的意思是:搜尋引擎要先經過運算,把程式語言經過處理,模擬使用者實際看到的頁面樣態,才能知道要把什麼東西收錄進 Google 的資料庫裡面。
Google 官方提供了完整的流程圖,如果今天網頁只有 HTML,那麼整個收錄的流程相對簡單:
但如果網站加入 JavaScript 程式,則會變成:
採用 JavaScript 的網站,搜尋引擎辨識資料必然會用上額外的運算資源。
在排名表現上,就有可能會比純 HTML 搭配 CSS 的網頁來得費時。
如果不幸又遇上轉譯失敗,那麼重要的 HTML 則無法有效辨識,就會直接衝擊到 SEO 的表現。
此外,雖然 Google 花費很多心力在適應各種不同的 JS 環境,但它不能保證每次都能最高效率的收錄 JavaScript 內容,要額外轉譯的 JS 網頁,往往在效率上會比同樣內容的 HTML 頁面慢,最主要就是:除了排隊等爬蟲,還多了「排隊等轉譯」這道流程。
Google 有提供專門的官方測試工具 Mobile-Friendly Test。
如果經過測試確認:HTML 標記與內容可正常呈現,則表示該頁面能正常被 Google 成功轉譯。
如果你是網頁開發人員,那麼建議直接參考 Rendering on the Web 的系列內容,或官方的 JavasScript SEO 影音系列。
URL 全名為 Uniform Resource Locator,簡單來說,瀏覽器「網址列」所呈現的網址,比如:https://abc.com/page 這串網址就是 URL。
其中 https://
表示通信協定,而 abc.com 則為網域名稱,整個 URL 簡單來說,就是告訴瀏覽器:「我要用 https://
這個方式去這個網站」,同理,搜尋引擎想要爬取網站,也會用這方式進行。
根據 Google 的官方說明,URL 命名建議用簡單有意義的英文,如果網址有多個字詞組成,則建議使用「連字號」來進行區隔。
從 SEO 的角度來看,最好是避免使用過多複雜的編碼、參數來構成網址。
常見的不良網址結構像是過多且複雜的數字、符號,或者缺乏字面意義的資訊堆疊,除了可能造成搜尋引擎的爬蟲混淆之外,重要的是它也不利於人類辨識、分享。
網址可以使用不同的文字,比如直接取名繁體中文作為網址的一部份,但要留意的是:繁體中文會採用 UTF-8 編碼。
什麼是 UTF-8 編碼呢?可以理解成,平常將中文網址貼到如 Line 這類通訊軟體中,它會被「轉成一串亂碼呈現」的概念,被轉貼過後的編碼,在判讀上比起純英文可能不太容易。
用「中文字當作網址」的樣貌:
https://www.example.com/薄荷
帶中文字的網址被複製貼上的樣貌:
https://www.example.com/%E8%96%84%E8%8D%B7
標題在 HTML 中被標記為 title
,標題在 SEO 扮演相當重要的角色:它幫助搜尋引擎判斷排名,可以直接幫助網頁排名,也讓內容裡關鍵字的訊號更加精確。
搜尋引擎結果頁面中,所出現的最明顯的文字,就是網頁所設定的標題內容。
Google 有可能會修改我們原先下好的標題,但自己取好一個長短適中,且有助於排名訊號、讓人點進來一窺究竟的標題,就是重要的一個 SEO 設定。
標題同時也在文章中,扮演了一篇文章說明角色,無論對於搜尋引擎,還是網站讀者而言,其存在意義在於簡要闡述文章主旨。
如果網頁的標題是文章的題目,那麼 Headings 段落標題,就可以看成每個小段落的題目了。
標題在呈現上會有層次的設計,數字越小、層級越高,編排方式從 <h1>
、<h2>
、<h3>
...... 往下編排。
一篇文章,理應只會有一個 <h1>
,等同於整篇內容「標題」的定位。
技術面上針對標題的處理,在於要讓每個標籤都正常呈現、被爬蟲正確讀取,呈現面部份,使讀者閱讀起來舒服、流暢方為首要任務。
「描述語」的重點在於,方便使用者閱讀這個連結中的摘要,如果 description
取得好,可增進使用者進一步點進網頁的意願、增加點閱率。
至於描述語會不會影響搜尋排名?官方給出了答案——不會。
如果我們沒有特別填寫描述語,其實搜尋引擎也會替我們進行摘要,但相對我們就無法掌控其內容,如果想要客製化這段內容,還是乖乖在頁面中加上描述語吧!
描述語表達方式,一樣在 HTML 中加入內容如下即可,至於字數不宜過多,把重點放在前面 150 – 200 字即可,後面多的,可能會因版面關係被裁切掉,因此言簡意賅將重點寫入其中,吸引讀者點入閱讀全文方為上策。
Crawl Budget 中文可翻譯為爬文預算,試想假設我們在一座圖書館中,要把每一本書都建檔收錄,方便未來讀者查詢,在人力、物力有限情況下,勢必影響我們更新收錄效率,另外在資源有限下,對於哪些書籍優先建立清單,也會有先後順序。
同理,把圖書館中書籍換成一個個的網站,搜尋引擎會放出爬蟲,爬取每一個網站內容來收錄與排名。
然而 Google 硬體資源也非沒限制,因此自然會對於一些內容採取優先措施,這部官方拍攝的爬文預算影片,也充分顯示出了 Google 爬文策略與目的。
而對於一些內容龐大網站,可參閱這篇大型網站擁有者的檢索預算管理指南,官方明確指出超過百萬頁面的網站、頻繁異動內容網站、大量未建立收錄網站,比較需要留意爬文預算問題。
其實爬文預算的數據,隱藏在 Google Search Console (GSC) 細節處,可以從 GSC → 設定 → 檢索統計資料看到。
權重高的網站,往往擁有極高爬文預算,而低權重則僅有少數,由此可知,爬文預算也可能會隨著權重改變而改變。
404 頁面主要目的在於,友善地告訴使用者「此路不通」。
此路不通的原因可能很多,代碼 404 意義為「找不到頁面」,但如果呈現方式,是由主機網頁伺服器直接發出,那使用者看見的,就會是一個冷冰的狀態碼,體驗上相對不佳。
因此,如果設計成符合使用者體驗的頁面,就會更理想。
Google 官方也提供了建議自訂實用的 404 頁面說明。
官方建議這個頁面,最好提供與網站風格設計一致,而一個好網站,出現這個頁面頻率越低越好,畢竟會出現這樣錯誤,通常在連結出問題時,才會出現的頁面,它僅用於緩解錯誤時的「不適感」,讓使用者不會認為「網站壞了」而離開。
PageSpeed Insights 是一個針對網站效能測試的線上工具,雖然網站效能在排名上,影響並非特別顯著,但過低的效能,卻會對使用者造成體驗上影響,不可過於輕忽。
為此,Google 官方推出了 PageSpeed Insights 這套工具,讓我們隨時可針對某個網站頁面,進行效能測試。
效能測試就像考試一樣,要考到一百分,必須下極大功夫,當然如果哪邊考差了,也會很貼心的跟你說,哪邊能再加強。
其內容通常是專業工程師比較能理解,此時就把它告訴工程師或系統管理者,請他們幫忙調整即可。
Alt Text 主要用來描述圖片的說明文字,讓使用者在無法看見圖片情況下,看著文字也能了解到這張圖片呈現的內容,同時也讓搜尋引擎能透過演算法,理解圖片主題。
從上述內容可得知,Alt tag 在描述上要完整,且不能濫填關鍵字,一般而言 5–10 字進行描述即可,此外圖片檔名如果可以,盡量採用有意義檔名命名,如:green-apple.jpg,而 Alt tag 影響 SEO 層面,只影響圖片搜尋,但僅佔整體 SEO 搜尋流量非常微薄。
Meta Keywords 又稱中繼標記,我們可以把它理解成,這個頁面的關鍵字,然而根據 Google 這篇官方說明,這個作法並不會對排名會產生任何影響,但不表示 Google 未來仍會忽略 keywords meta tag 內容,可能有朝一日會使用這部份的資訊。
會使用 Sitemap 多半會以大規模電商網站,或 UGC(User Generated Content,如:論壇、賣場評論等使用者產生的內容)網站為大宗,此時 Sitemap 就能告知搜尋引擎,哪些內容有修改、新增,爬蟲只要針對部分內容更新,可有效節省爬文預算。
圖片來源:samunderwood
Broken Links 為失效連結,一個正常的連結,我們點開之後,便會正常開啟、顯示內容,而失效連結,則因各種緣故,導致頁面無法開啟、呈現,降低使用者體驗。
如果條件允許,建議定期確認連結是否處在正常狀態。
如果隨著網站越來越龐大,則可借助一些工具、服務進行定期確認,如 Ahrefs 的 Site auditor 功能,可定期確認 Broken links,為網站健檢。