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


Rails SEO 第三步: 麻煩的 Metatag 及 OG


紅寶鐵軌客
來關注...
關注:紅寶鐵軌客
關注有什麼好處?:當作者有新文章發佈時,「思書日報」就會匯總自動通知您,讓您更容易與作者互動。
x
紅寶鐵軌客
Rails 使用中,折磨中,享受中......
Victorian vintage round cut ruby engagement ring in 14k yellow gold 7mm center vs g h 984
    很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
     
    就,這會一點點,那會一點點⋯⋯
作者最新發佈的文章:
  • 真不該直接用 JavaScript...
  • Rails 如何過濾你要的 HTML tag 內容
  • 要用 Faraday 還是 Net HTTP 呢?
作者最近參與的討論:
  • Rails 常見資安陷阱與解決方法
現在就加入《思書》,你就可以關注本作者了!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,讓你寫作不再受限,討論更深入真實,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入
Rails 使用中,折磨中,享受中......
2017/05/01
78   0  


 

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

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


標籤: seo x 4 og x 1 metatag x 1 rails x 29 rails seo x 3

分享:


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