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

紅寶鐵軌客
紅寶鐵軌客
來關注...
關注／停止關注：紅寶鐵軌客
關注有什麼好處？：當作者有新文章發佈時，「思書」就會自動通知您，讓您更容易與作者互動。
現在就加入《思書》，你就可以關注本作者了！
《思書》是一個每個人的寫作與論壇平台，特有的隱私管理，讓你寫作不再受限，討論更深入真實，而且免費。 趕快來試試！
還未加入《思書》？ 現在就登錄！ 已經加入《思書》── 登入
寫程式中、折磨中、享受中 ......
1.15k   0  
·
2017/05/01
·
4分鐘
☕


 

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

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

名詞重點：

  1. Metatag：是老式的網頁註解，Google 會參考，但是，聽說，用處不大了。
  2. OpenGraph (OG)：是新的註解方式，主要是 Facebook跟Twitter等用，但是，會一直有新標示法的出來。
  3. 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 實作
Rails 實作
分類於:
科技
⟩
程式開發
⟩
Web 後端

標籤:
seo og metatag rails rails seo
日期:
創作於：2017/05/01，最後更新於：2019/05/02。
合計：1045字


現在就加入《思書》，馬上讓作者知道你的喜愛或不！
《思書》是一個每個人的寫作與論壇平台，特有的隱私管理，用筆名來區隔你的意見與想法，表達你自己，而且免費。 趕快來試試！
還未加入《思書》？ 現在就登錄！ 已經加入《思書》── 登入
分享這篇文章:
現在就加入《思書》，馬上標注這篇文章，讓你方便以後找尋！
《思書》是一個每個人的寫作與論壇平台，特有的隱私管理，用筆名來區隔你的意見與想法，表達你自己，而且免費。 趕快來試試！
還未加入《思書》？ 現在就登錄！ 已經加入《思書》── 登入
關於作者

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




參與討論！
現在就加入《思書》，馬上參與討論！
《思書》是一個每個人的寫作與論壇平台，特有的隱私管理，用筆名來區隔你討論內容，讓你的討論更深入，而且免費。 趕快來試試！
還未加入《思書》？ 現在就登錄！ 已經加入《思書》── 登入


看看作者的其他文章


看看思書的其他文章



×
搜尋

主分類

文學與故事
說心事
政治時事
生活
運動
汽車
機車
自行車
相機
科技
理財
旅遊美食
娛樂
健康
美麗時尚
人際關係
《思書》

Topics in detail

熱門標籤

現代言情 總裁 藍光雨 思書 免費閱讀 文學 現代詩 情詩 愛情 現代文學 生活 公主 甜文 兄妹戀愛 心情

標籤搜尋



×
登入
申請帳號
需要幫助
關於思書
暗黑模式？
字體大小
成人內容未過濾
更改語言版本？