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

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

紅寶鐵軌客

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

1.15k 0

2017/05/01

4分鐘

☕

有沒有辦法讓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

喜歡作者的文章嗎？馬上按「關注」，當作者發佈新文章時，思書™就會 email 通知您。

思書是公開的寫作平台，創新的多筆名寫作方式，能用不同的筆名探索不同的寫作內容，無限寫作創意，如果您喜歡寫作分享，一定要來試試！ 《加入思書》

思書™是自由寫作平台，本文為作者之個人意見。

Rails 的 unscope

Rails 如何簡單的轉換 HTML 到 text

文章資訊

本文摘自:

Rails 實作

Categories:

科技

⟩

程式開發

⟩

Web 後端

Tags:

seo og metatag rails rails seo

Date:

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

Total: 1045 words

關於作者

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

看看作者的其他文章

Rails SQL DB 簡易效能判斷

在 Rails 中可以很方便的知道 SQL 中的效能，就是使用 explain，舉個例子：
User.where(last_name: "xx").explain
就會有以下的輸出：

很方便，但是，這些數字到底是什麼呢？
我是用...

Rails 的 .html_safe 跟 raw() 的差別

Rails 最有趣也是討厭的就是有很多幾乎相同的功能，很多時候，幾乎也就是那個用的順手，就用那個，這次我在用 .html_safe 時，就一直想，這到底跟 Raw() 有什麼不同啊？
當然，最明顯的就是用法不同，.html_safe 一看...

看看思書的其他文章

《卷一潛鋒勿用》第一章月服與黑衣(四)

夜幕垂籠，缺月微星沉太湖。
　　客船停泊於太湖之中，湖面一片寧靜，唯賸湖水流動之聲。
　　慕無徵站在船首，單手拄著置地的劍架，蒙著布條的雙眼向著前方漆黑景色，也不知道是想要看見什麼？或是感應到什麼？
　　月兒將手中燈籠掛於船首，靜靜站...

2020 新冠病毒的記錄與觀察 3 - 恐慌與機會

2020-3-19
台灣昨天一口氣新增 23 人確診新冠肺炎，感染人數正式破百，今天很好，只新增了 8 人確診，沒有等比級數上升，但是激起了些許的恐慌，雖然，新冠肺炎早就是每天新聞的頭條，但是真正感到貼近，還是很可怕的。
有人開始搶購物...