LoginSignup
332
326

More than 5 years have passed since last update.

@herablog(Kazunari Hara)in株式会社サイバーエージェント

ネイティブ・ソーシャル時代にWeb・アプリでやっておくべきことまとめ (ネイティブSEO)

Last updated at Posted at 2015-07-31

かつてSEOといえば、サーチエンジン(特にGoogle)向けの対応のことだったが、モバイル時代ではWebに加えてネイティブアプリへの対応が不可欠。さらに、多くの人々がFacebookやTwitterなどの巨大プラットフォーム上で時間を費やしてる現在では、それらの中でコンテンツがどのように表示されているのか、きちんとリンクが設定されているかなど注意を払う必要がある。

少し古いデータだけど、きちんと対応することでサービスへの流入を増やせることは間違いなさそう。
流入が174%増加！もうFacebook OGPは設定していますか？

そこで、各プラットフォームの仕様をまとめてみた。

From\To Browser (Web) iOS App Android App
Facebook Open Graph App Links App Links
Twitter Twitter Cards (Web) Twitter Cards (App) Twitter Cards (App)
Google Search (Web) SEO App indexing App indexing
Browser Anchor Links Universal Links
Custom URL Scheme
apple-app-site-association
Smart App Banner		 Custom URL Scheme
App Links (Google)
iOS Search App Links
Scheme.org		 Search APIs 
(NSUserActivity, CoreSpotlightAPI) -
Android Search SEO - App Indexing API
Google Now
Intent

Facebook

Open Graph

Open Graphは主にFacebook上で投稿、シェアされた時の表示内容を指定できる。これはよく知られており、既に多くのサイトで対応されているはず。

<head>
  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta property="og:site_name" content="">
  <meta property="og:description" content="">
  <meta property="og:locale" content="">
  <meta property="fb:app_id" content="">
</head>
App Links

Facebook内のWebviewでサイトを見ようとした時に、アプリがあればアプリを起動してくれるというもの。直接開いたり、サブメニューでポップアップ表示してからいったりちょくちょく仕様変わっているっぽい。Open Graphと同様にHTMLの<head>内に以下の要素を挿入する。

<head>
  <meta property="al:ios:url" content="example://"> <!-- Custom URL Scheme -->
  <meta property="al:ios:app_store_id" content=""> <!-- App Store ID -->
  <meta property="al:ios:app_name" content="">
  <meta property="al:android:url" content="example://"> <!-- Custom URL Scheme -->
  <meta property="al:android:package" content=""> <!-- Package name -->
  <meta property="al:android:app_name" content="">
</head>

ドキュメント: https://developers.facebook.com/docs/applinks?locale=ja_JP

Twitter

こちらは、Twitter版。Facebookと同様に<head>内に以下のタグを入れる。

Twitter Cards (Web) 
<head>
  <meta name="twitter:card" content="">
  <meta name="twitter:site" content="">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="">
  <meta name="twitter:description" content="">
  <meta name="twitter:image" content="">
</head>

最近は、タイムライン画面でもこの情報が使われるようになったので、結構重要。

Twitter Cards (App) 
<head>
  <meta name="twitter:app:name:iphone" content="">
  <meta name="twitter:app:id:iphone" content=""> <!-- App Store ID -->
  <meta name="twitter:app:url:iphone" content=""> <!-- Custom URL Scheme -->
  <meta name="twitter:app:name:googleplay" content="">
  <meta name="twitter:app:id:googleplay" content=""> <!-- Package name -->
  <meta name="twitter:app:url:googleplay" content=""> <!-- Custom URL Scheme -->
  <meta name="twitter:app:country" content="">
</head>

ドキュメントはこちら: https://dev.twitter.com/ja/cards/overview

(きちんと上記のmetaタグが入っているか確認するツールを作ったのでちょびっと宣伝。
https://chrome.google.com/webstore/detail/meta-tag-analyzer/fjaojohahonilkanpijpfhkekbegbkfa)

Google Search (Web)

Googleの検索結果からアプリに遷移させるには、以下の対応が必要。

App Indexing

後述のApp Indexing APIと似てるけど、これはブラウザのGoogle検索結果にアプリを起動するためのリンクを追加するためのもの。ネイティブ側(Custom URL Scheme)、ウェブ側(<link>タグ)、管理画面(Webmasterツール, Google Play Console)の対応が必要。

対応手順: http://qiita.com/srea/items/279ff38f05d449db840a

iOSも限定的に開始されている模様。対応手順はこちら。http://qiita.com/mmusasabi/items/38c3d5067199366f6d14

Browser (Mobile Safari, Mobile Chrome)

モバイルブラウザからネイティブアプリを起動するには、以下の対応が有効。

iOS

Custom URL Scheme

アプリで独自のカスタムスキーマを指定し、アプリを起動できるようにする。例えば、exampleというスキーマを指定すると、以下のリンクでアプリを起動できるようになる。かなり昔からある仕様。

<a href="example://">アプリ起動</a>

iOSの対応方法: http://tech-gym.com/2012/02/ios/709.html

Universal Links (apple-app-site-association), Smart App Banner

WWDC 2015で発表された仕様たち。サイトrootにapple-app-site-associationというファイルを置いておき、Webページアクセス時にアプリがあればアプリを立ち上げるというのがUniversal Links。SSL対応必須。Smart App Bannerは前からある、アプリかStoreに飛ぶページ上部のバナーのこと。
Universal Linksが浸透してくれば、Custom URL Schemeを使う頻度は減ってくるはず(?)

とてもよくまとまってるQiita: http://qiita.com/mono0926/items/2bf651246714f20df626

Android

Custom URL Scheme

iOSと同様。Androidの対応方法: http://blog.asial.co.jp/1415

App Links

Google I/O 2015で発表された新たな仕様。サイトにstatements.jsonを置いておくとマッチした場合、アプリを起動してくれますよっていうもの。iOSのUniversal Linksと似てる。
FacebookのApp Linksと間違えやすいので注意。詳しくは http://qiita.com/fkm/items/a82481eb71453a4f974c を参照あれ。

iOS Search (Spotlight, Safari Search)

iOS9からはSpotlightとSafariの検索結果に、Webのコンテンツやアプリから登録した情報を表示できるようになった。

Search API

端末内に限られたDevice Indexと全ユーザーに公開されるCloud Indexがある。
端末内におさめておきたいユーザー固有のデータなどは、NSUserActivity, CoreSpotlight APIでDevice Indexにインデックス。全ユーザーに公開するデータはNSUserActivity内でeligibleForPublicIndexing = tureでCloud Indexに登録。

Sheme.org

AppleはすでにApplebotというUAでクロールしているよう。とくにリッチなコンテンツを優先するっぽいので結果に載せたければ、Sheme.orgに則ってしっかりマークアップするべきらしい(JSON-LDでもよし)。
また、上述App LinksやTwitter Cardsの情報も見てるよとAppleさんは述べていた。これらのデータはCloud Indexに登録される。

これらのまとめ参考にさせていただきました。
http://qiita.com/mono0926/items/27af791065ed919255e0
http://ameblo.jp/ca-1pixel/entry-12047222782.html

Android Search

登録したデータを幅広い用途で使う可能性もあるはずなので、できるだけ対応しておいた方がよさそう。

App Indexing API

App Indexing APIではアプリ内でユーザーが開いたviewを元に、Android Searchの結果に出てくる情報を登録できる。その際には、以下の対応をする。

  • Web URLとApp URIの紐付け
  • そのApp URIで指定のviewを表示できるように(起動画面や他のviewを挟まない)
  • 登録するキーワードtitleの指定

ちなみに、WebとAppのURIを決めるときには、先述のCustom URL Schemeのルールもこれと一緒にしておいたほうがいいと思われる。pathのルールがバラバラだと管理が大変だと思う。

詳しいQiita: 【Androidアプリを】AppIndexingを使ってみた。【Googleに見て欲しい】

Google Now

データを登録しておくと、Googleアプリ内で、適切なタイミングで適切なカードを出してくれる機能。今のところAPIは公開されていない。

「Google Now」で何ができる？: http://www.itmedia.co.jp/mobile/articles/1308/28/news011.html

332
326
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
332
326