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

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

少し古いデータだけど、きちんと対応することでサービスへの流入を増やせることは間違いなさそう。
[流入が174%増加！もうFacebook OGPは設定していますか？](http://jb-labo.com/facebook-open-graph/)

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

| 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<br>Custom URL Scheme<br>apple-app-site-association<br>Smart App Banner | Custom URL Scheme<br>App Links (Google) |
| **iOS Search**                | App Links<br>Scheme.org | Search APIs  (NSUserActivity, CoreSpotlightAPI) | - |
| **Android Search**            | SEO | - | App Indexing API<br>Google Now<br>Intent |


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

```html
<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>`内に以下の要素を挿入する。

```html
<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)**

```html
<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)**

```html
<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`というスキーマを指定すると、以下のリンクでアプリを起動できるようになる。かなり昔からある仕様。

```html
<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に見て欲しい】](http://qiita.com/mmusasabi/items/fd35037aecc1772dd11b#%E5%AE%9F%E8%A3%85%EF%BC%92app-indexing-api-%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AEurl%E3%82%92%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%A7%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B)

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

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