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

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

紅寶鐵軌客

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

952 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，這時：

以 Google 為主要參考：包含結構化資料的文章網頁，
看不懂，再來看 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