Open in app

Sign in

Write

Sign in

Let’s built some relationships between web & app with structured data

Paul Li
22 min readMar 23, 2020

--

Google Search & Mobile Application

Introduction

單單一個 web solution 可能無法滿足使用者日常的使用習慣，所以行有餘力的公司大多會力行多平台經營的方針，開發出不同平台的 APP。比方說 TW Yahoo 拍賣除了 web 有支援 desktop & mobile view 之外，亦有 Android 以及 iOS APP，對於不喜歡安裝 APP 的朋友，更推出了 PWA 版本，貼心的滿足各個不同族群。

對產品來說，當以在不同平台提供穩健且可靠的服務為最終依歸。

既然是多平台，那麼…維持產品內容呈現的一致性便是最重要亦是不可妥協的基本訴求之一，以 commerce site 來說，不同平台的商品頁所呈現的資訊便必須要一致(除非刻意操作想讓 promote 特定平台)，所以同一商品在不同平台的商品呈現頁面，其實就是互為各自的替身(亦可以說是替代頁面)。

iOS APP、PWA、Android APP (left to right)

Google Search 的起手式之一便是有效建立起不同物件之間的關聯度，一旦清楚建立起關聯網絡，那麼便有機會在搜尋的當下，可以立即掃出其他相關的搜尋結果出來。

Google Search — Rich Snippet (Software App)

如何讓這些替代頁面的關係可以有效的昇華至讓 Google bot 可以理解的關聯呢？這便是今天想跟大家一起討論的主要議題！希望透過以下實作，讓大家知道有哪些方法可以迅速有效的建立出個替代頁面之間的的關聯。

Rich Snippet — Software App

How to build it ？

說到建立關聯，心中的首選當然就是 Structured Data，Google Structured Data 文件中亦明確表示有支援相關的設置。

Google Structured Data — Software App

依文件上面的 sample，照著相關欄位填寫即可。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Angry Birds",
  "operatingSystem": "ANDROID",
  "applicationCategory": "https://schema.org/GameApplication",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.6",
    "ratingCount": "8864"
  },
  "offers": {
    "@type": "Offer",
    "price": "1.00",
    "priceCurrency": "USD"
  }
}
</script>

其中最需要注意的就是 applicationCategory 以及 price 的設定，可以參照 Google 目前支援的 category list 來為自己的 Application 找到適合的分類 。

  • GameApplication
  • SocialNetworkingApplication
  • TravelApplication
  • ShoppingApplication
  • SportsApplication
  • LifestyleApplication
  • BusinessApplication
  • DesignApplication
  • DeveloperApplication
  • DriverApplication
  • EducationalApplication
  • HealthApplication
  • FinanceApplication
  • SecurityApplication
  • BrowserApplication
  • CommunicationApplication
  • DesktopEnhancementApplication
  • EntertainmentApplication
  • MultimediaApplication
  • HomeApplication
  • UtilitiesApplication
  • ReferenceApplication

以 TW Yahoo 拍賣來說，自然便是選擇 ShoppingApplication。此外，如果相關連的 Application 是免費提供的話，則記得 price 要填寫 0 ，不可直接忽略。

從上面的 JSON-LD 看來，它的 type 主要是設置成 SoftwareApplication，如果今天你的 application 是 Mobile APP 的話，筆者會建議將 type 改為 MobileApplication 會來得更為恰當。至於 PWA 的話，亦可調整成 WebApplication，這些都是 Google 目前有支援的 type，所以可以放心的使用。

透過 schema.org 的描述，除了 Google 文件上列出的這些欄位外，尚有其他欄位可以設置，唯有提供愈加豐富的關聯資訊，方能建立出愈加豐富的關聯網絡。所以我們可以再添加其他資訊，待 Google Rich Snippet 需要使用時，便不愁沒資料可用。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "MobileApplication",
  "name": "Yahoo奇摩拍賣",
  "description": "YAHOO奇摩拍賣 APP 主要功能： 1. 即時通一對一聊天： 讓你可以與買家、賣家隨時溝通，一機在手不怕漏掉任何訊息！ 2. 直播購物 即時競標： 觀看主播介紹商品、聊天互動，有喜歡的商品馬上下標就對了！ 3. 拍照、修圖、免費刊登， 一步完成： 沒時間拍照上傳？ 沒時間填一堆資訊？ YAHOO奇摩拍賣 APP結合拍照、修圖功能，一分鐘商品快速上架，免費刊登！ 4. 購物、付款、收貨，一指搞定，YAHOO奇摩拍賣 輕鬆付款有保障： 讓你輕鬆瀏覽分類或搜尋全新或二手商品，並提供ATM、信用卡、超商取貨付款等多元交易選擇。商品一指快速入袋，再享全台唯一5萬元買賣家高額雙向保障喔！ 5. 隨身攜帶我的 YAHOO奇摩拍賣 最愛賣家： 結合個人化專屬資訊，讓你隨時瀏覽最愛賣家的拍賣商品和喜愛的商品類別，隨時隨地好逛好買! 6. 一按FB、Line輕鬆分享： YAHOO奇摩拍賣 APP幫你串接Facebook與Line，輕鬆一按立即在Facebook或Line與好友分享資訊或宣傳商品！ 7. YAHOO奇摩拍賣 千萬件商品，一搜就滿意： 今天想挖什麼寶呢？想當流行教主， 3C達人,還是居家好男女？選定你的目標，配合想要的篩選排序方式，輕鬆比價找最愛！ 正港的 Y拍 一拍即賣，全民一起來當賣家。 更多 Yahoo奇摩拍賣 相關資訊可以上我們的官方相關連結： Yahoo 奇摩 拍賣 FB粉絲團：https://www.facebook.com/Yauction?fref=ts Yahoo 奇摩 拍賣 首頁：https://tw.bid.yahoo.com Yahoo 奇摩 拍賣大學：https://tw.bid.yahoo.com/university YAHOO~~",
  "operatingSystem": "ANDROID",
  "applicationCategory": "ShoppingApplication",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "ratingCount": "87724"
  },
  "offers": {
    "@type": "Offer",
    "availability": "https://schema.org/InStock",
    "price": "0",
    "priceCurrency": "TWD"
  },
  "author": {
    "@type": "Person",
    "name": "Yahoo",
    "url": "https://tw.bid.yahoo.com/"
  },
  "image": "https://s.yimg.com/ma/auc/app/i_19_512x512.png",
  "url": "https://play.google.com/store/apps/details?id=com.yahoo.mobile.client.android.ecauction&hl=zh_TW",
  "downloadUrl": "https://play.google.com/store/apps/details?id=com.yahoo.mobile.client.android.ecauction&hl=zh_TW"
}
</script>

如上所示，我們明確的標示了 author、image、url 以及 downloadUrl，所以 Google bot 便可以在擷取資料的當下補完所需要的資訊了。

author 的部分可以為 Person or Organization，如果設定成 Organization 便可以頁面既有的 Organization 做串連。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "Yahoo奇摩拍賣",
  "url": "https://tw.bid.yahoo.com/",
  "logo": "https://s.yimg.com/ma/auc/app/i_19_512x512.png",
  "contactPoint": [{
    "@type": "ContactPoint",
    "telephone": "+886-2-21927123",
    "contactType": "customer service"
  }],
  "sameAs": ["https://www.facebook.com/Yauction/", "https://aucboard.tumblr.com/", "https://www.instagram.com/iloveauction/"]
}
</script>

如果服務擁有多個 Application 的話，也可透過 JSON-LD 的屬性，以 Array 的呈現方式讓這些資訊可以被集合起來。

<script type="application/ld+json">
[
  {
    "@context": "http://schema.org",
    "@type": "MobileApplication",
    "name": "Yahoo奇摩拍賣",
    "operatingSystem": "ANDROID",
    ...
  },
  {
    "@context": "http://schema.org",
    "@type": "MobileApplication",
    "name": "Yahoo奇摩拍賣",
    "operatingSystem": "IOS",
    ...
  },
  {
    "@context": "http://schema.org",
    "@type": "WebApplication",
    "name": "Yahoo奇摩拍賣",
    "operatingSystem": "Windows 7, OSX 10.6",
    ...
  }
]
</script>

以上便是相關 Structured Data 的設置方式。

接下來要跟大家介紹透過其他資料的建置來加強關聯網絡的建立。再繼續之前，我們先來看看 schema.org 對於 App 相關的 markup (APP 可以透過 deep link 以及 universal link 來實作快速啟動 APP 至相關呈現頁面)。

// android
android-app://{package_id}/{scheme}/{host_path}// iOS
ios-app://{itunes_id}/{scheme}/{host_path}

這些資訊的提供，將有助於 Google bot 可以明確的知道該 APP 的確切資訊。下列商品頁的網址透過相對應的置換，便可以得出相對應的 markup。

https://tw.bid.yahoo.com/item/100529549083

// android
android-app://com.yahoo.mobile.client.android.ecauction/https/tw.bid.yahoo.com/item/100529549083// iOS
ios-app://1033771352/https/tw.bid.yahoo.com/item/100529549083

像 TW Yahoo 拍賣的 Android 以及 iOS APP 均有支援下列 custom scheme 的 deeplink 設置 (如下所示)，當然也可以依照 schema.org 的 markup 進行置換。

yecauction://tw.bid.yahoo.com/item/100529549083

// android
android-app://com.yahoo.mobile.client.android.ecauction/yecauction/tw.bid.yahoo.com/item/100529549083// iOS
ios-app://1033771352/https/tw.bid.yahoo.com/yecauction/100529549083

完成以上步驟後，接下來便要將這些資訊置入頁面的相關位置。透過 link[rel=alternate] 的設置，我們便可以明確的跟 Google bot 說當前頁面其實還有兩個替代頁面，分別是 android-app 以及 ios-app。

<link rel="alternate" href="android-app://com.yahoo.mobile.client.android.ecauction/https/tw.bid.yahoo.com/item/100529549083"/><link rel="alternate" href="ios-app://1033771352/https/tw.bid.yahoo.com/item/100529549083"/>

對 Google 來說這就是一種 ViewAction 資料的呈現，所以當我們進行 Structured Data Testing Tool 測試時，便可以看到相關的資料了。

Structured Data Testing Tool

此外，如果當前頁面的 Structured Data 有設置 WebPage 這個 type 的話，亦可以把這些 APP 的 markup 置入其中，加強其關聯性。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "potentialAction": {
    "@type": "ViewAction",
    "target": [
      "https://tw.bid.yahoo.com/item/100529549083",
      "android-app://com.yahoo.mobile.client.android.ecauction/https/tw.bid.yahoo.com/item/100529549083",
      "ios-app://1033771352/https/tw.bid.yahoo.com/item/100529549083"
    ]
  },
  "speakable": {
    "@type": "SpeakableSpecification",
    "xPath": ["html/head/title", "html/head/meta[@name=\"description\"]/@content"]
  },
  "url": "https://tw.bid.yahoo.com/item/%E5%8C%97%E6%AD%90-%E6%9C%88%E7%90%83-%E5%A4%AA%E7%A9%BA-%E8%A5%BF%E9%A4%90%E7%9B%A4-%E9%99%B6%E7%93%B7%E7%9B%A4-%E6%B9%AF%E7%9B%A4-%E6%B7%B1%E7%9B%A4-%E5%A4%A7%E7%90%86%E7%9F%B3%E7%B4%8B-%E9%A4%90-100529549083"
}
</script>

承上，因為服務有支援 custom scheme，像這類的資訊我們也可以把它餵入 WebPage 的 markup 中

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "potentialAction": {
    "@type": "ViewAction",
    "target": [
      ...
      ...
      {
        "@type": "EntryPoint",
        "urlTemplate": "yecauction://tw.bid.yahoo.com/item/100529549083",
        "application": {
          "@context": "http://schema.org",
          "@type": "MobileApplication",
          "name": "Yahoo奇摩拍賣",
          "description": "Yahoo奇摩拍賣 iOS APP全新推出即時通功能！刊登不用錢，輕鬆付款，購物超安心。全民一起當賣家，為你的二手商品找新家！ YAHOO拍賣 APP 主要功能： 1. 隨拍即賣、免費刊登， 一步完成： YAHOO拍賣 APP讓你在手機上拍照，編輯商品資訊，一分鐘商品快速上架！ 2. 透過即時通討論跟商品/訂單有關的問題： 一對一專屬對話視窗，可以快速針對商品及訂單進行問答，縮短買賣家的溝通距離與成本！ 3. 購物、付款、收貨，一指搞定，YAHOO拍賣 輕鬆付款有保障： 讓你輕鬆瀏覽分類或搜尋全新或二手商品，並提供ATM、信用卡、超商取貨付款等多元交易選擇。商品一指快速入袋，再享全台唯一5萬元買賣家高額雙向保障喔！ 4. 隨身攜帶我的 YAHOO拍賣 最愛賣家： 結合個人化專屬資訊，讓你隨時瀏覽最愛賣家的拍賣商品和喜愛的商品類別，隨時隨地好逛好買! 5. 一按FB、Line輕鬆分享： YAHOO拍賣 APP幫你串接Facebook與Line，輕鬆一按立即在Facebook或Line與好友分享資訊或宣傳商品！ 6. YAHOO拍賣 千萬件商品，一搜就滿意： 今天想挖什麼寶呢？想當流行教主， 3C達人,還是居家好男女？選定你的目標，配合想要的篩選排序方式，輕鬆比價找最愛！ 7. 拍賣直播好看好買又精采： 直播互動邊看邊買，還能搶到好康優惠喔！ 正港的 Y拍 一拍即賣，全民一起來當賣家。 更多 Yahoo 拍賣 相關資訊可以上我們的官方相關連結： Yahoo 奇摩 拍賣 FB粉絲團：https://www.facebook.com/Yauction?fref=ts Yahoo 奇摩 拍賣 首頁：https://tw.bid.yahoo.com Yahoo 奇摩 拍賣大學：https://tw.bid.yahoo.com/university 若有相關問題，您可透過下面信箱與我們聯繫，謝謝！ ios-auc-user@oath.com YAHOO~~",
          "operatingSystem": "IOS",
          "applicationCategory": "ShoppingApplication",
          "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "4.5",
            "ratingCount": "13000"
          },
          "offers": {
            "@type": "Offer",
            "availability": "https://schema.org/InStock",
            "price": "0",
            "priceCurrency": "TWD"
          },
          "author": {
            "@type": "Person",
            "name": "Yahoo",
            "url": "https://apps.apple.com/tw/developer/yahoo/id281970157"
          },
          "image": "https://s.yimg.com/ma/auc/app/i_19_512x512.png",
          "url": "https://apps.apple.com/tw/app/yahoo%E5%A5%87%E6%91%A9%E6%8B%8D%E8%B3%A3/id1033771352",
          "downloadUrl": "https://apps.apple.com/tw/app/yahoo%E5%A5%87%E6%91%A9%E6%8B%8D%E8%B3%A3/id1033771352"
      }
    ]
  },
  ...
}
</script>

如上，我們以 type 為 EntryPoint 進行 data 置入，urlTemplate 裡面自然就是擺放 custom scheme，至於 application 則跟 MobileApplication 一致，developers 又可藉此屬性的建置再次建立一層關聯。

那麼還有什麼地方可以再加強 Mobile Application 關聯性呢？其實還有一個地方，即

Sitelinks search box

這個 markup 僅可以出現在首頁，所以如果 website 的首頁有設置這個屬性時，也可以餵入相關的資料。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "name": "Yahoo奇摩拍賣",
  "url": "https://tw.bid.yahoo.com/",
  "potentialAction": [{
    "@type": "SearchAction",
    "target": "https://tw.bid.yahoo.com/search/auction/product?p={search_term_string}",
    "query-input": "required name=search_term_string"
  }, {
    "@type": "SearchAction",
    "target": "android-app://com.yahoo.mobile.client.android.ecauction/https/tw.bid.yahoo.com/search/auction/product?p={search_term_string}",
    "query-input": "required name=search_term_string"
  }, {
    "@type": "SearchAction",
    "target": "ios-app://1033771352/https/tw.bid.yahoo.com/search/auction/product?p={search_term_string}",
    "query-input": "required name=search_term_string"
  }]
}
</script>

對 Google bot 來說，這些是屬於 SearchAction 的類型，它可以讓 Google bot 知道︰除了當前 web 的 search url pattern 外，尚有其他替代頁面的 search url pattern。

完成這些基礎建置後，相信 website 與 application 之間的關聯便可以很明確地被勾勒出來了。

Conclusion

原則上 MobileApplication 以及 WebApplication 應該在每一個頁面都要實裝上去，畢竟我們不知道 Google bot 會在什麼時間去 parse 什麼樣的頁面資訊，唯有把握每一個可能的機會，方能確切地建立起相對的羈絆。

以上便是筆者針對 Mobile Application 資料關聯的一些實作分享。分享給一同在這領域奮鬥的朋友們，希望對大家有所助益。

Reference

SEO
Mobile Application
Structured Data

--

--

Paul Li

Written by Paul Li

535 Followers

Paul is the lead programmer of the AMP project at Yahoo Taiwan and is always eager for modern web technologies. He is also focusing on UX for vivid user flow.

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams