[Rails] 讓 URL SEO 的方法 - via Meta_tags

發表於 | 分類於 | 0 comments |

讓 URL SEO 的方法 - via Meta_tags

目的

　　在之前我有筆記一篇透過 friendly_id 讓 url 不顯示 id，除了美化 url 外，我們也可以透過設定 meta data 讓網站達到 SEO 的目的！

前言

　　meta tag 及 data 的設定很重要，通常網站要能快速得被找到，或是透過分享時顯示重要(正確)的資訊，我們都得在這個部分下點功夫，本篇筆記一下在專案中所學到的相關知識和方法。

筆記

1. 什麼是 Meta Tags 及 Meta Data

　　Meta Data，在全球資訊網上，是指讓機器看得懂的、描述資訊內容的所有相關資訊。

  • Title Tag：該頁標題，英文長度最好是 70 字元內，中文大約 40 字內，關鍵字盡量往前放，而每一頁的 Title Tag 不要重覆為佳。如：XXX美食部落格 :: 痞○幫、XXX | Facebook、徵傳單小弟 | oPartTime 讓打工變得更美好！等。
  • Description Tag：該頁的敘述，包含標點符號英文約 150 字內，中文 12 字內為佳，此 Description Tag 會出現在 Google 搜尋結果中，所以關鍵字的使用很重要，盡量往前擺。
  • Canonical Url：告訴搜尋引擎關於這個頁面的標準網址。
  • Facebook OG：此標籤中的資訊是專門給 Facebook 的，可透過設定 OG (Open Graph) 的內容敘述，調整分享時的縮圖、標題、敘述等。
  • Twitter Cards：此標籤中的資訊則是專門給 Twitter 的，透過設定 Cards 的內容敘述，調整分享的資訊顯示。

2. Gem

　　在 rails 中，除了直接 code html 外，我們可以透過 meta-tags 這個 gem 來對 Meta Data 作設定。

Gemfile
1
gem 'meta-tags'

then, bundle it.

3. 設定 Meta Data

　　簡單的設定來說，可以透過 set_meta_tags 作設定，如下：

page.html.haml
1
2
3
4
5
6
7
8
9
10
11
= set_meta_tags title: '此頁的抬頭'
-# <title>此頁的抬頭</title>
= set_meta_tags site: 'GeorgioWan's Note', title: '此頁的抬頭'
-# <title>GeorgioWan's Note | 此頁的抬頭</title>
= set_meta_tags site: 'GeorgioWan's Note', title: '此頁的抬頭', reverse: true
-# <title>此頁的抬頭 | GeorgioWan's Note</title> <= 較佳的作法
= set_meta_tags description: '此頁的敘述喔！'
-# <meta name="description" content="此頁的敘述喔！" />
-# 而這句"此頁的敘述喔！"會在 Google 搜尋找到網頁時，顯時於搜尋結果中。
-# 如下，搜尋 Facebook 時所出現的資訊範例。

搜尋 Facebook 之資訊範例

　　在 Facebook OG 的簡單設定如下：

Facebook Open Graph
1
2
3
4
5
6
7
8
9
10
11
12
= set_meta_tags og: {
    title: '此頁的抬頭',
    site_name: 'GeorgioWan's Note'
    type: 'website',
    url: 'http://georgiowan-note.logdown.com/',
    image: 'https://test.jpg',
}
-# <meta property="og:title" content="教你怎麼在Rails裡做好基本的SEO"/>
-# <meta property="og:type" content="website"/>
-# <meta property="og:site_name" content="好麻煩部落格"/>
-# <meta property="og:url" content="http://georgiowan-note.logdown.com/"/>
-# <meta property="og:image" content="https://test.jpg"/>

　　由於目前沒有用到 Twitter Cards 所以也不方便多加敘述，詳情請至 Twitter dev 欣賞 XDD

4. Rails 設定 meta tags 小技巧

　　如果每一頁都要手刻 meta tag 的話，就違背了 DRY 的原則了！為了符合此原則，我們可以透過定義一個設定動作的 Action，而後，在需要設定 meta data 的 Controller 中作 before_action 即可，好像在繞口令，詳情見下文。

　　(1) 先在 Application Controller 中定義一個 Action：

application_controller.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class ApplicationController < ActionController::Base
　before_action :prepare_meta_tags, if: "request.get?"
 
　protected
  def prepare_meta_tags(options={})
    site_name   = "GeorgioWan's Note"
    title       = "此頁的抬頭"
    description = "此頁的敘述"
    image       = options[:image] || "your-default-image-url"
    current_url = request.url
    
    defaults = {
      site:        site_name,
      title:       title,
      image:       image,
      description: description,
      canonical:   current_url,
      keywords:    %w[這邊可以打些關鍵字],
      og:          {url: current_url,　　# 設定 Facebook OG 預設資訊內容
                    site_name: site_name,
                    title: title,
                    image: image,
                    description: description,
                    type: 'website'}
    }　# 此為預設資訊內容
    options.reverse_merge!(defaults)　
　　# 透過 options.reverse_merge! 讓其他 controller 中可作設定（若沒有額外設定就是預設）  
    set_meta_tags options
    # 最後透過 set_meta_tags 設定 meta data 資訊
  end
end

　　(2) 接著，在 layout 的 head 中使用 display_meta_tags 設定每頁的 meta data：

application.html.haml
1
2
3
4
%head
  = display_meta_tags
  %meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")
  -# 上面此段 meta 是設定 IE 的兼容性。

　　(3) 現在每一頁都會有 meta data 了，但內容都是預設的資訊，我們可以在 Controller 中作設定：

test_controller.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class TestsController < ApplicationController
　def index
　　prepare_meta_tags title: "HERE IS TEST　INDEX", description: "TEST INDEX DESCRIPTION."
  　# 透過 prepare_meta_tags 傳入想變更的 options
  　@page_title       = "HERE IS TEST INDEX"
  　@page_description = "TEST INDEX DESCRIPTION."
  　# or 我們可以透過 @page_* 作 meta data 設定
　end
 
　def show
　　@page_title       = "HERE IS TEST SHOW"
  　@page_description = "TEST SHOW DESCRIPTION."
　　prepare_meta_tags( og: { title: @page_title,
                             description: @page_description})
    # 也可以對 og 作設定
　end
end

　　以上，就簡單的 SEO meta data 設定就完成了。

That’s it, DONE!

【參考資料】