Rails 開發 Google 的 structured data 結構化資料

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


如果你要讓 Google 能更正確的讀取你的網站資訊,structured data(結構化資料)是對很重要的,也是新一代網站優化 SEO 中的必需品。

下文,為了統一,我都用 “structured data” 來稱呼「結構化資料」介紹,老是要寫兩個文,有點煩。

structured data = 結構化資料

話說,建立 structured data 的目的,就是要將網頁內容內的相關資訊,很明確的提供線索給 Google,讓 Google 搜尋能夠正確的使用,甚至,以更容易閱讀的方式顯示,至於會不會排名比較好,我想,多少會有幫助啦。

Schema.org

話說從頭,很久很久以前,Google、Yahoo、Yandex 跟 Bing,這四大家搜尋引擎,共同建立了一個組職,叫做:Schema.org,他們想透過這樣的一個組職,來建立一個「共通」的資料交換「語意」標準,這幾家也都支援使用 JSON-LD, Microdata or RDFA 來做 structured data 的溝通「語言」,簡單來說,就是只要網站內有遵守 Schema.org 的規定,將網頁內容內的相關資訊以 JSON-LD(Google 建議使用) 或Microdata 等語法寫好,這四大家搜尋引擎就都可以看懂,所以,要完整的了解 structured data,可以到 Schema.org 查查,他是一個參考標準:連結

只是,Schema.org 內的文件資料一大堆,如果不是真的對資料交換有很深的興趣,沒必要研究那麼深啦,而且,Google 也不是 Schema.org 內的都懂,我超級懶,也完全就是目的導向,我的目的就是要讓 Google 找到我的網頁,並且,正確的解讀我的網頁,所以,我只要知道那些是 google 支援的「項目」, 很幸運的,Google 有提供很清楚的文件說明,下面就是網址連結,而且,還有中文翻譯,很讚:

Explore the search gallery  |  Search for Developers  |  Google Developers — ~
Google Developers

這份文件內,很清楚的列出 Google 有支援(看得懂)的 structured data 「項目」,Google 稱呼為「功能」,總共有:Article、Book、導覽標記、Recipe、...... 等等,共約 30 個「功能」,所以,網站開發者只要找跟你網站相對應的「功能」,這樣,開發網頁的 structured data 就快速多了。

各位應該跟我想的一樣,我的第一個問題就是,那能夠一次放很多個 structured data 進同一個網頁嗎?答案是:「可以」,所以,你要是願意、想要,可以放好,放滿! 

用不用 Gem?

我們要以 Rails 來寫 structured data,我又很懶,所以當然就是先找以前神人們所開發的 gem,以下就是我所找到的幾個:

ruby-rdf/json-ld — Ruby JSON-LD reader/writer for RDF.rb. Contribute to ruby-rdf/json-ld development by creating an account on GitHub.
GitHub

這是超級 gem,可以讀取跟建立 JSON-LD,對我們的目的來說,有點太大了。

public-law/schema-dot-org — Validated structured data for websites. Contribute to public-law/schema-dot-org development by creating an account on GitHub.
GitHub

這是一個好玩的 Gem,可以建立跟檢查 structured data 對不對,可惜的是,他只支援五種organization,person,place,search_action,web_site.rb,真是太少了。

ukstudio/structured-data — Contribute to ukstudio/structured-data development by creating an account on GitHub.
GitHub

這個 Gem 更少,只支援兩個:breadcrumb 跟 site navi,我想這些 Gem 都是以前開發的,Google 一路新增了不少 structured data 的「功能」,除非一路跟著加,不然一定不能完全涵蓋,如果對各位這些功能就夠用了,這兩個 gem 都是好的選項。

還有一個 gem 是可以將 structured data 以 microdata 的方式寫入網頁:

Paxa/green_monkey — Rails 4 & 5 microdata helpers. Contribute to Paxa/green_monkey development by creating an account on GitHub.
GitHub

什麼是 microdata?就是將 structured data 的資料以 html5 的方式寫入網頁,如:

<div itemprop="director" itemscope itemtype="http://schema.org/Person">

這會改不少地方,就看你喜不喜歡了。

土法煉鋼

我研究了一下,其實 structured data 並不算太麻煩,我覺得直接內建在 head 中,應該是最簡單也最容易維護了,至少,先以這樣開始開發,未來再來 refactor。

Google 也提供了一個「食譜」的開發參考:Add structured data to your web pages,有空就看看,重點也就是告訴你,structured data 要放在 <head> 裡,只是我們是要用 Rails 寫,所以,看我的比較快。

我不想跟 Javascript 混在一起,所以,最簡單的做法就是如下了:

# 在 app/views/layouts/application.html.erb 中,<head> 內,加入:

<%# structured data %>
<% if content_for? :structured_data %>
  <%= yield :structured_data %>
<% end %> 

# 在任何要有 structured data 的 view 中,加入:(舉例)

<%# JASON LD - google structured data %>
<% content_for :structured_data do %>

    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "headline": "Headline",
      "@type": "Article",
      "alternativeHeadline": "Alternative Headline"
    }
    </script>

<% end %>

 這樣寫很土,但是,是一個好改好用的開始。

再來,就是要寫入正確的資料了,這就要參考 google 及 schema.org 的資料了,例如,我們要建立一個「文章」網頁的 structured data,這時:

  1. 以 Google 為主要參考:包含結構化資料的文章網頁
  2. 看不懂,再來看 Schema:文章(article)屬於 Creative Work,又被細分成很多種

看似簡單,其實問題蠻多的,就以文章來說,乍看之下,很簡單啊,但是 Google 就細分成:Article、NewsArticle、BlogPosting,到 Schema 上查,更多,所以到底要用那一個,還真是傷腦筋,我是都先選最陽春基本的,不對再改吧。

程式碼開發與測試

產生出來的 structured data 可以用瀏覽器另外產生 HTML 原始碼中找到,要測試這個 structured data 對不對,可以用 google 的這個「複合式搜尋測試」:Rich Results Test - Google Search Console,用這個測試的好處是,你可以直接更改要測試的 structured data,簡單又快速,我甚至都是用假的資料先在這測試,確定正確後,再來寫 code。

我想你應該很快就碰到問題了,例如:structured data 都是包在 double quote (“)內,如果你的內容有 double quote (“),就出錯了,於是我乾脆就寫了一個 helper,把 double quote 給濾掉,如下:

# 移除 tags, double quote
def structured_data_string_sanitize(sd_string)
  raw(strip_tags(sd_string))&.gsub(/"/, '')
end

這樣,以後要用就很簡單了,下面的 rails 碼,能產生陽春版的 article structured data 了:

<% content_for :structured_data do %>

    <script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "Article",
          "headline": "<%= structured_data_string_sanitize(@blog.title) %>",
          <% if @blog.img.present? %>
            "image": [
              "<%= @blog.img %>"
             ],
          <% end %>
          "datePublished": "<%= @blog.created_at.to_formatted_s(:iso8601) %>",
          "dateModified": "<%= @blog.updated_at.to_formatted_s(:iso8601) %>"
        }
    </script>

<% end %>

那些結構性資料要放進去呢?

這真的就是大哉問了,簡單來說,你可以放天放地,放一大堆,但是可能都沒用,有用沒用,一切都由 google 大神自行決定,這是 google 的官方說法:「即使複合式搜尋結果測試顯示您的網頁已正確加上標記,Google 也不能保證您的結構化資料一定會出現在搜尋結果中」,而且,各位必須要遵守 google 的規定,詳細的網址我就再放一遍了。

General structured data guidelines  |  Search for Developers — ~
Google Developers

務必要照這個文件開發,google 才會看懂你的 structured data,也才會有效,所以,你還是要自己看啦,文件不長,基本上,最重要的就是說:structured data 必須要跟網頁內容直接相關,不得作假,也不能搞壞事,否則,google 會直接把這網頁標示為垃圾;還提到了巢狀結構與個別 structured data 的使用方式,不難懂。

哈,說了半天,那到底那些資料要放入 structured data 中呢?答案是我真的不知道,而且,根據我的「網上爬文」爬很多的結論,大家都是上線後一路摸索的,例如:文章出版社的 logo 在 AMP 時有規定如下:「標誌不得超出 60x600px 矩形範圍,且要剛好 60px 高 (建議) 或剛好 600px 寬。 例如,450x45px 雖然未超出 600x60px 矩形範圍,但並不符合規定。」,可是,如果不是 AMP 呢?答案是:「我不知道,也找不到答案」;又例如:作者的圖像到底要用 image_object 還是用 image: [],又是一個謎⋯⋯,我也打算上線後再來看 google 的回應了。


上線及測試

我是建議先做一個 view 的 structured data 就好,先上線,不要一次整個 project 都寫完後再上線,這種跟 SEO 有關的開發,最重要的還是要看 google 接不接受,所以,先上線一些,跟 google 確定正確後,再複製到別的網頁比較好。

上線後,找一個有 structured data 的網頁,用 Google Search Console 的網址檢查,就是以下這個:

你就可以看到有沒有問題了,沒問題,就要求建立搜引,再來就是等等等了,一旦 google 找到了你的 structured data,就會在 Google Search Console 新增找到的資料「項目」,你也需要常常回來看Google 是不是又發現什麼錯誤了,下面這個 google 的網址是說明:Rich result status reports,只是越看越昏頭,我覺得看這個 video 比較快懂:

Monitoring Rich Results in Search Console - Google Search Console Training Google Webmasters — YouTube

只是 video 的內容跟我網上看到的,有一些些差異,不多就是了。

要等一陣子,才會在 Google Search Console 上看到新增的資料「項目」,資料會顯示在:

要先點選 Performance (成效)下的 Search results (中文沒有)

就可以在 Search Appearance(搜尋外觀)下看到 Rich results,新增的資料「項目」如果有錯,也會顯示在左邊的「enhancement」。

就這樣!

好了,就先寫到這裡,老話一句,希望對大家有幫助。




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

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

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


文章資訊

本文摘自:
Categories:
Tags:
Date:
Published: 2020/09/06 - Updated: 2020/09/07
Total: 2367 words


分享這篇文章:
關於作者

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




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


看看作者的其他文章


看看思書的其他文章



×
登入
申請帳號

需要幫助
關於思書

暗黑模式?
字體大小
成人內容未過濾
更改語言版本?