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

讓 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
[email protected]_title = "HERE IS TEST INDEX"
[email protected]_description = "TEST INDEX DESCRIPTION."
 # or 我們可以透過 @page_* 作 meta data 設定
 end
 def show
[email protected]_title = "HERE IS TEST SHOW"
[email protected]_description = "TEST SHOW DESCRIPTION."
  prepare_meta_tags( og: { title: @page_title,
description: @page_description})
# 也可以對 og 作設定
 end
end

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

That’s it, DONE!

【參考資料】