almost 3 years ago

pic by thenextweb.com

目的

  在之前我有筆記一篇透過 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
gem 'meta-tags'

then, bundle it.

3. 設定 Meta Data

  簡單的設定來說,可以透過 set_meta_tags 作設定,如下:

page.html.haml
= 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 OG 的簡單設定如下:

Facebook Open Graph
= 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
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
%head
  = display_meta_tags
  %meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")
  -# 上面此段 meta 是設定 IE 的兼容性。

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

test_controller.rb
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!

【參考資料】

← [Rails] 解決 modal update 時 FB plugin (share, like) reload [Rails] 寄信小札記 - via ActionMailer →
 
comments powered by Disqus