Rails 開發網站所需的 SEO 實務技巧

2017-10-05

Ruby on Rails

seo

基本上只要你的國家普遍瀏覽器搜尋資料時是使用 Google 的，在做專案時通常會有 SEO 的需求，SEO的全名是（Search Engine Optimization），也就是將你的網站權重提高，能夠在搜尋業面前幾筆就能被曝光。

SEO的規則基本上一直在變化，權重的給分也隨著技術升級而有了新的規則，像以往的網站只是網站，現在的網站還要能夠支援 RWD 來讓行動裝置瀏覽時能夠更加輕鬆，也免去了做 mobile app 的勞力（有能力兩個都做當然好囉）。

Google 會定時有 bot 來爬網站，爬完之後依照權重進去排名，權重大致上要在乎的就是幾點

善用 Meta Tag / Meta Data 幫網頁劃重點
Url 具有意義
HTML tag 沒有亂用，例如一大堆 h1
採用 HTTPS 連線
支援 RWD（Responsive Web Design）
網站開啟速度
語系與國家
Sitemap
爬蟲
瀏覽量

搞定 Meta Tag / Meta Data

Title Tag: 當前頁面的標題，關鍵字請往前放，字數不宜過長，否則有可能視為權重作弊，建議

英文字數 70 以內
中文字數 40 以內

範例

<title> Rails 網站 SEO 實務技巧 | Nic 的部落格</title>

Meta Description Tag: 每個頁面的敘述，文案好壞間接影響點閱率

含標點符號的英文在 150 字內
中文十二字內，關鍵字往前放

範例：

<meta name="description" content="SEO不是玄學，是一個 Rails Developer 該學會的搜尋引擎優化技巧">

以上兩個標籤非常重要，每一個頁面一定要不一樣，如果過多重複，搜尋引擎會認為你在作弊，是會扣分的哦

Canonical Url: 告訴搜尋引擎關於這個頁面的標準網址，有時候我們一個頁面會帶很多參數，可能是語系、搜尋參數、等等，這個標籤可以讓搜尋引擎只收錄正確的網址就可以了

例如：

https://www.example.com/products?category=dresses&color=green

後面就夾帶了 category 與 color 的參數傳遞，這樣的網址看起來會非常噁心

那麼 Canonical Url 這個 tag 就可以這樣寫

<link rel="canonical" href="https://www.example.com/products" />

這樣子就不會把一些帶有參數的網址收錄到搜尋引擎下了

Facebook Open Graph: 這是專門給 Facebook 抓取用的，可以在這些 meta tag 裡面調整你要分享出去的內容長什麼樣子，如果都沒有設定，他會預設抓取你的 title description tag 來作為參考。

可以用 Facebook debug tools 來作為偵錯改善的工具

Facebook 分享縮圖設定範例：

<meta property="og:image" content="https://example.me/img/about.jpg">

Twitter Cards: 這個就是專門給 Twitter 抓的，一樣可以調整分享後的樣式。

在 Rails 實作部分可以用

讓 URL 具有意義

禁用連結，如果有一些連結你不想被計入SEO，那麼你可以使用 nofollow 標籤。

情況大概會是，付費連結、留言裡的連結，或是登入登出這種沒有必要被收入的連結會用到

範例

link_to "不想被收錄", awesome_path, rel: 'nofollow'

關於 nofollow

在一般 CRUD 出來的網址，通常都會是 http://example.com/products/1

那這個產品的URL是用數據庫的 ID 作為依據，這樣一來光看 URL 是沒有任何意義的，也無法提升權重，比較好的作法是讓網址具有意義

http://example.com/products/aeron-chair http://example.com/products/xbox-360-white

這樣一來，不僅網址就能夠看得出來這個 product 是什麼，也能提升搜尋的權重。

怎麼做呢？

在 Rails 上面可以使用 friendly_id 這隻 Gem，

詳細的實作我在之前有寫過一篇 [Gem] 使用 Friendly_id 與 Babosa 美化你的Rails 網址

在這裡面的教學還可以讓 URL 帶中文的 slug。

幾點需要注意的是，如果要提升網域的權威性，請在主網域使用例如：

http://example.com/products/aeron-chair

會比

http://shop.example.com/products/aeron-chair

來的更好，因為他可以直接提升 http://example.com 的網域分數

慎用 HTML tag

HTML tag 如果亂用，例如在同一個頁面有一大堆 h1，是相當扣分的行為

因為 HTML tag 其實就是拿來替你的網頁劃清楚的重點，他是一個「具有意義的語言」

HTML 當初在設計時，本身就帶有「語意」

你可以這樣理解

h1 是大標題
h2, h3 是中標題
h4, h5, h6 是小標題
p 是指 paragraph (段落)
strong 是重點部分，他與 b 不同的是， b 只有粗體，但 strong 是加重語語氣，如果是盲人使用閱讀器在觀看你的網站時，加重語氣可以讓輔助導讀的軟體能夠正確的念出這段話
img 中的 alt 是指替代文字, title 是標題

開發者希望他的網站能夠正確被收錄，那麼你就應該，正確的使用 HTML 語意標籤。

by the way, <div> 是對SEO沒有特別的加分或扣分效果，因為從以前就很流行以 div + CSS 來達到網站前端畫面開發，畢竟 div 沒什麼包袱嘛，他就是區塊囉

所以 <div> 與 <span> 是沒有語意的，他只是容器

規則標準：

h1 一個頁面只能有 1 個
h2 一個頁面只能有 2~3 個
h3 一個頁面可以有 6~10 個

HTML 標籤權重由高至低

title > meta description > h1 > h2 > h3 > strong > p

採用 HTTPS 連線

因為近年來非常重視資安問題，尤其現在很多金流行為是可以透過網站傳輸完成的，這當中可能會有輸入信用卡等交易的機密資料，那麼用 HTTPS 可以避免被第三方監聽，因為這過程是加密傳輸的。

HTTPS 是指你的網站有沒有安裝 SSL（Secure Sockets Layer , 傳輸層安全協議），如果你有確實安裝SSL的認證，通訊協定就會從 HTTP 改變為 HTTPS（Hypertext Transfer Protocol Secure , 超文字安全傳輸協定）。

在 2014 年時， Google 官方正式宣布 HTTPS 已被列入搜尋引擎演算法之一

但如果你的網站只是「內容型網站」，沒有涉及到用戶資安問題（例如交易），就目前來說，不使用 HTTPS 並不會有「超大的影響」。

不過值得注意的是，從 2017 年 10 月起，從 Chrome 62 開始，只要是需要輸入任何資料的網頁，若未使用HTTPS，即會被標示為不安全。

參考 Google Chrome 官方文章

也因為 SSL 的憑證基本上都是要錢的，但也有很佛心的公司 Let’s Encrypt 大力推廣這種加密憑證的安全，也有釋出三個月免費的版本，過期的話就要重新簽名。

申請憑證的流程大致上是：

先自己生成一個私鑰、一個申請用的憑證CSR
將 CSR 傳上去給憑證機構
憑證機構認證你真的擁有這個網域
下載 SSL 憑證
將私鑰和 SSL 憑證安裝到網站服務器上

如果主要客戶不是在中國，那麼可以更簡單的申請使用 Cloudflare 這個 CDN 服務，這包含免費的 SSL 憑證，可以免去申請安裝的麻煩。它的 Flexible SSL 模式，可以讓終端使用者到 CloudFlare 是加密連線，而你的服務器不需要安裝。使用 Cloudflare 需要將 DNS 也給它管理，在註冊的流程中會要求你去修改 Namecheap 改用 Custom DNS。

支援 RWD 響應式網頁設計

做 RWD 的好處是可以保有連結單一性，讓原本的流量不會因為行動裝置而沖散，因為這個連結的瀏覽量會讓他的權重變高，更容易出現在搜尋排名上面，但如果分別做 mobile/desktop 版，就會有兩種不同的網址連結，會讓 SEO 的效果打折。

RWD，也不是有做就好，而是會去依照載入速度有不一樣的評分。

詳細可以到 Google 提供的簡易測試工具來測試一下你的讀取秒數吧，依照 Google 說法是人的耐性只有三秒XD，那就盡可能的壓到 3 秒以下吧 XDrz。

網站開啟速度

通常一個網站會慢多半不是後端處理 query 的速度，都會是在前端資源情況吃太緊，既然要作最佳化就必須要用科學化的方式量測，這樣一來我們才知道最佳化有沒有成功。

Chrome 的除錯器本身就很詳細，可以觀察 Network 在 Load page 花了多長的時間。

對前端來說，重視的是 Page load time, 而不是單一 request 的時間，因為網頁的組成有 HTML + CSS + JavaScript

Google 提供的好用工具 PageSpeed Insights

PageSpeed Insight 評分標準

或是用 Chrome 外掛 Lighthouse

都有清楚的報表以及提示你如何改善。

知識點，在 HTTP2 以後，有 async 和 defer 屬性可以用。

以往的關鍵渲染會是把 <script> 移出 <head>, 讓 CSS 優先加載達到畫面快速渲染，在載入能夠有互動式效果的 JS file。

不過新的屬性可以讓瀏覽器知道要異步加載

例如

-  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', :async => true %>

或是

-  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', :defer => true %>

async 與 defer 差別在於

async, 瀏覽器不會阻擋 HTML 渲染，當 JavaScript 下載完時就會直接執行，不會等 HTML DOM加載
defer, 瀏覽器也不會阻擋 HTML 渲染，但是當 JavaScript 下載完成後，會等 HTML 加載完成，才會執行 JavaScript。如果你的 JavaScript 裡面有依賴 DOM 的話，適合用這個方式。

CSS 也被瀏覽器視為一種 render blocking 的資源，當瀏覽器解析 HTML 看到 <link href="style.css" rel="stylesheet" 時，就會等待完整解析這個 CSS 後才會繼續渲染頁面。

語系與國家

如果你的網站本身有支援多語系，那麼沒有設定好的情況會變成說，不論哪個國家的搜尋引擎搜到你，進來都還要自己調整語系，而且在 google 搜尋結果上面也會變得怪異，例如：美國 IP 搜出來的標題是中文之類的。

所以別忘記在你的 html tag 裡面加入

<html lang="zh">

可以參考 Apple 官方網站的作法，該網站是很標準的能夠支援多語系 SEO 的寫法，具體如下

<link rel="canonical" href="https://www.apple.com/">
<link rel="alternate" href="https://www.apple.com/" hreflang="en-US">
<link rel="alternate" href="https://www.apple.com/ae-ar/" hreflang="ar-AE">
<link rel="alternate" href="https://www.apple.com/ae/" hreflang="en-AE">
<link rel="alternate" href="https://www.apple.com/am/" hreflang="en-AM">
...

這樣就能夠讓搜尋引擎正確在每個國家直接顯示相對應語系的網站了。

這個方法不是唯一，你也可以選擇用 Sitemap 的方法來讓搜尋引擎正確收錄。

擇一即可。

Sitemap

Sitemap基本是描述一個網站的架構，它可以是任意形式的網頁頁面，通常是採用分級或分類的形式，能夠消化龐大的往架構，對於網站的訪問者在網站瀏覽上的資訊需求也能快速獲得，且能提高SEO搜尋引擎優化的效果，對網站的幫助是非常大。

參考 Apple 繁體中文官網的 Sitemap

在這部份用 Gem “sitemap_generator” 可以輕鬆幫你完成，並且有 rake task 能夠讓你每次產生新內容的時候更新上去。

爬蟲

在 Rails 的路徑 public/robots.txt 是專門拿來給搜尋引擎爬蟲讀取的，這隻檔案會告訴他什麼資源不需要被收錄。

參考 Apple 官方網站的 robots.txt

不過有時候我們除了 Production 環境以外，可能還有 Staging ，避免被收錄的話可以依照環境動態生成 robots 這隻檔案。

get '/robots.txt' => 'home#robots'

def robots                                                                                                                                      
  robots = File.read(Rails.root + "config/robots.#{Rails.env}.txt")
  render :text => robots, :layout => false, :content_type => "text/plain"
end

分別在 public/ 下生成 robots.staging.txt, robots.production.txt

就可以做到環境控制 robots.txt 生成囉

參考 Gist

瀏覽量

你的網域權重的提升也會因為瀏覽量的高低有不一樣的排名，所以適時的導流進去，讓更多用戶喜歡上這個產品能夠不斷回訪網站，會讓權重分數慢慢往上爬，這就跟養小孩一樣，需要一點時間才會成長。

Google 是會將大量的垃圾連結或不優質的內容降低權重的，所以非常重視網站經營者生成的內容，他們的演算法會一直更新，阻擋那些嘗試作弊欺騙權重的網站，最後一點就是認真經營網站囉。

Nic Lin's Blog