Android
Facebook
Twitter
iOS
SEO

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

More than 3 years have passed since last update.

かつて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 APIDevice Indexにインデックス。全ユーザーに公開するデータはNSUserActivity内でeligibleForPublicIndexing = tureCloud Indexに登録。


Sheme.org

AppleはすでにApplebotというUAでクロールしているよう。とくにリッチなコンテンツを優先するっぽいので結果に載せたければ、Sheme.orgに則ってしっかりマークアップするべきらしい(JSON-LDでもよし)。

また、上述App LinksTwitter 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