Rails SEO 第三步: 麻煩的 Meta tag 及 OG

Rails SEO 第三步: 麻煩的 Meta tag 及 OG

紅寶鐵軌客

寫程式中、折磨中、享受中 ......

1.15K 0

2017/05/01

4 mins read

☕

有沒有辦法讓Google 關鍵字搜索找的到的第三篇：寫 Metatag 及 OG

Metatag 及 OG 基本上就是告訴搜索引擎個別網頁要怎麼被他們看到，這部分就很麻煩了，在開發的一開始，就要想的很清楚，你的每一個不同的網頁，要怎麼“被呈現”出來，再加上，Metatag及OG都是建議性的，搜索引擎不見得就會照你要的方法來“被呈現”，而且，特別是OG，它還在長大中，所以這篇文章，只能是一個參考，你開發出來的，應該會與我的做法很不同，只能希望我寫的這篇文章有幫助。

名詞重點：

Metatag：是老式的網頁註解，Google 會參考，但是，聽說，用處不大了。

OpenGraph (OG)：是新的註解方式，主要是 Facebook跟Twitter等用，但是，會一直有新標示法的出來。

Structured Data：這是Google 的 OG，將資料更結構化表現，如：價格、品名... 這篇文章沒有使用這，如果是購物網，就應該要用了。

在 Rails 中寫Metatag及OG，我強烈的建議用 meta-tags gem，原因是 Turbolink，Rails 4 開始的Turbolink 不會改變網頁中 <head> 內容，如果自己寫，會相當的麻煩，但是，用meta-tags gem也是有討厭的地方，新的OG內容不一定會支援，這是兩難，本文選擇使用 meta-tags gem，他可以同時產生metatag及OG。

meta-tags gem - https://github.com/kpumuk/meta-tags

安裝：

增加 gem 'meta-tags' 在 gemfile
bundle install
>Installing meta-tags 2.4.0

接下來，就是將每一個你要搜索引擎看到的網頁，也就是你 Sitemap 中指到的網頁，加上Metatag吧，我是寫在view中，我認爲那很合理，你也可以寫在Controller中，看你喜歡了，一樣，以下是我的 metatag 程式碼，提供參考，我覺得，這是最簡單實用的介紹了。

 <% if @blog.tag_string.blank? then %>
   <%= provide(:title, strip_tags(@blog.title) ) %>
 <% else %>
   <%= provide(:title, strip_tags(@blog.title)+","+@blog.tag_string ) %>
 <% end %>
 <%-# meta description and keywords as "content", squish is to remove spaces, and line break/return %>
 <% set_meta_tags description: (strip_tags(@blog.content).squish),keywords: @pc_blog.tag_string %>
 <%-# meta Canonical URL & alternate (mainly for herflang) %>
 <% set_meta_tags canonical: blog_url(@blog.friendly_id).split('?').first+"?locale="+@blog.language, alternate: { @blog.language => blog_url(@blog.friendly_id).split('?').first+"?locale="+@blog.language } %>
 <%-# facebook tags %>
 <% set_meta_tags fb: {
  app_id: '你的FB app id，要去FB申請'
 } %>
 <%- # get the blog.content 1st image out %>
 <% doc = Nokogiri::HTML(@blog.content) %>
 <% @img1 = doc.at_css("img") %>
 <%- # @img1.attr('src') can be embedded image, og need url only %>
 <% set_meta_tags og: {
  site_name: if @blog.language == 'zh-TW' then '中文網名' else 'site name' end,
  title: strip_tags(@blog.title),
  description: truncate(strip_tags(@blog.content).squish, length: 180),
  type: 'article',
  image: if (@img1 != nil) then
    if File.exist?(@img1.attr('src'))
      image = MiniMagick::Image.open(@img1.attr('src'))
      { _: @img1.attr('src'), width: image[:width], height: image[:height]}
    else
      if @blog.language == 'zh-TW' then
      { _: image_url('/chinese.png'), width: 1200, height: 628 }
      else
      { _: image_url('/english.png'), width: 1200, height: 628 }
      end
    end
  else
    if @pc_blog.language == 'zh-TW' then
    { _: image_url('/chinese.png'), width: 1200, height: 628 }
    else
    { _: image_url('/english.png'), width: 1200, height: 628 }
    end
  end,
  url: blog_url(@blog.friendly_id).split('?').first+"?locale="+@blog.language
 } %>
 <% set_meta_tags article: {
  published_time: @blog.created_at.strftime("%FT%T%:z"),
  modified_time: @blog.updated_at.strftime("%FT%T%:z"),
  tag: @blog.tag_string,
  # author: '作者fb url',
  publisher: 'https://www.facebook.com/site's FB url/'
 } %>
 <%-# twitter tags %>
 <% set_meta_tags twitter: {
  card: "summary_large_image",
  title: truncate(strip_tags(@blog.title).squish, length: 140),
  description: truncate(strip_tags(@blog.content).squish, length: 180),
  image: if (@img1 != nil) then
    if File.exist?(@img1.attr('src'))
      @img1.attr('src')
    else
      if @pc_blog.language == 'zh-TW' then
        image_url('/chinese.png')
      else
        image_url('/english.png')
      end
    end
  else
    if @pc_blog.language == 'zh-TW' then
      image_url('/chinese.png')
    else
      image_url('/english.png')
    end
  end,
  site: "@你的twitter"
 } %>

我很不喜歡Ruby style，但我愛用Rails，我認為程式碼就是要好讀好懂，所以我的寫法都很“原始”，但我認為好懂，我也喜歡直接寫，少用helper，我覺得，難抓蟲。

程式中可以看見，圖是很討厭的部分，我寫成這樣麻煩的原因有很大一部分是，當讀者要分享這網頁到臉書與Twitter時，圖才會顯示在送出頁面上，討厭的臉書一定要知道圖的大小，如果把圖這部份取消不用，問題其實不大，各位就自行決定了。

還有，是的，每一個網頁都要寫... 很煩啊！

恭喜，你已經完成第三步了！

這也是我寫的最後一步了，這幾步都是最基本的SEO，一定要做的，不同的網頁，手機app，就又要再細分了，懶得寫了，就先這樣，我覺得，如果寫得好，有這幾步，這網站就算是有SEO了！

這一篇文也寫得很好，對Rails SEO有很原則性的介紹，對暸解SEO很有幫助 - http://gogojimmy.net/2013/09/26/basic-seo-for-rails-developer/

前一篇：Rails SEO 第二步: 關於 sitemap

WriterShelf™ is a unique multiple pen name blogging and forum platform. Protect relationships and your privacy. Take your writing in new directions. ** Join WriterShelf**

WriterShelf™ is an open writing platform. The views, information and opinions in this article are those of the author.

Rails 的 unscope

Rails 如何簡單的轉換 HTML 到 text

Article info

This article is part of:

Rails 實作

Categories:

科技

⟩

程式開發

⟩

Web 後端

Tags:

seo og metatag rails rails seo

Date:

Published: 2017/05/01 - Updated: 2019/05/02

Total: 1045 words

About the Author

很久以前就是個「寫程式的」，其實，什麼程式都不熟⋯⋯
就，這會一點點，那會一點點⋯⋯

More to explore

How Often Should I Post On Social Media For My ...

Being a business owner in the time of a highly connected social world is a massive advantage if you take advantage of all opportunities. Both small and large companies are increasingly utilizing social media forums such as Facebook, Twitter, and I...

Foundations of Real Estate Institute Launched T...

FORE Institute (Foundations of Real Estate Institute) provides accelerated training for new and returning real estate agents that want to get it right the first time.
They help new real estate agents accelerate production and make money fast. FOR...

Kxe3q4eqxw0ortf2d4laqr ftu5r 0nlqeirxe11zpvpvksk5ka4b22mvhgnq1o6jr9hdmmunzh1exvyxzyarrcelotgecbgcrzuu7oi0zku4kuwoqm 854yln8m2g