かつてSEOといえば、サーチエンジン(特にGoogle)向けの対応のことだったが、モバイル時代ではWebに加えてネイティブアプリへの対応が不可欠。さらに、多くの人々がFacebookやTwitterなどの巨大プラットフォーム上で時間を費やしてる現在では、それらの中でコンテンツがどのように表示されているのか、きちんとリンクが設定されているかなど注意を払う必要がある。
少し古いデータだけど、きちんと対応することでサービスへの流入を増やせることは間違いなさそう。
流入が174%増加！もうFacebook OGPは設定していますか？
そこで、各プラットフォームの仕様をまとめてみた。
| From\To | Browser (Web) | iOS App | Android App |
|---|---|---|---|
| Open Graph | App Links | App Links | |
| 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 |
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版。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