モダンなMETAタグについて。 ソーシャル対応 (Open Graph, Twitter Card) ネイティブアプリ対応 (App Links, Twitter Card, App Indexing)

1. 俺はMETAだ！
Photo by European Southern Observatory
2015-06-26 @herablog

2. METAとは
Photo by LifeinMovie
「高次な−」「超−」「−間の」
「−を含んだ」等の意味の接頭語。
ギリシア語から。(wikipedia)

3. Photo by LifeinMovie

5. METAとは
その文書に関する情報（メタ情報）
を指定して、 ブラウザや検索ロ
ボットに知らせるためのタグです。
(http://www.htmq.com/)

6. 古きよきMETA
Photo by http://www.toychan.net/archives/2009/09/28_2359.php

7. Photo by http://www.toychan.net/archives/2009/09/28_2359.php
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="keywords" content=“”>
<meta name="description" content=“”>
.
.
.
古きよきMETA

8. Photo by http://matome.naver.jp/odai/2138823589537557001/2138823963839725503
よいサイトを
作っても
人が集まらない

9. 提供

10. Open Graph App Links App Links
Twitter Card Twitter App Card Twitter App Card
SEO (App Indexing) App Indexing
Anchor Link URL Scheme URL Scheme
Search APIs Search APIs —
Google Search —
Intent
Google Now
App Indexing API
From
To
Apps Apps

11. Open Graph
<meta property="og:title" content=“『「AWA」のデザインは…” />
<meta property="og:type" content="article" />
<meta property="og:url" content=“http://ameblo…" />
<meta property="og:image" content=“http://….png” />
<meta property="og:site_name" content="1 pixel" />
<meta property="og:description" content=“こんにちは。AWAで…” />
<meta property="fb:app_id" content="311629842256842" />
<meta property="og:locale" content="ja_JP" />

12. Open Graph

13. Open Graph
<meta property="og:title" content=“『「AWA」のデザインは…” />
<meta property="og:site_name" content="1 pixel" />
og:title - ブランド名は入れない
og:site_name - ブランド名はこちらに

14. Open Graph
<meta property="og:locale" content="ja_JP" />
og:locale - Facebookのアルゴリズム
できちんと評価される

15. Open Graph
<meta property="fb:app_id" content="311629842256842" />
fb:app_id - ドメインインサイトにアク
セスし、トラフィックソースをトラック
できる

16. App Links
<meta property="al:ios:url" content=“jpameblo://ameblo/
ca-1pixel/entry/12042291572" />
<meta property="al:ios:app_store_id" content="349442137" />
<meta property="al:ios:app_name" content="Ameba" />
<meta property="al:android:url" content="jpameblo://ameblo/
ca-1pixel/entry/12042291572" />
<meta property="al:android:package" content="jp.ameba" />
<meta property="al:android:app_name" content="Ameba" />

17. App Links

18. App Links
<meta property="al:ios:url" content=“jpameblo://ameblo/
ca-1pixel/entry/12042291572" />
<meta property="al:android:url" content="jpameblo://ameblo/
ca-1pixel/entry/12042291572" />
url - ディープリンクできるようにネイ
ティブ側を実装しておく

19. Twitter Card (Web)
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="http://ameblo.jp/ca-1pixel/
entry-12042291572.html" />
<meta name="twitter:title" content="「AWA」のデザインはどのように
して作られたのか。" />
<meta name="twitter:description" content=“こんにちは。AWAで…” />
<meta name="twitter:image" content="http://stat.ameba.jp/
user_images/20150622/10/ca-1pixel/52/38/p/
o0600042013344459424.png" />

20. Twitter Card (App)
<meta name="twitter:app:country" content=“JP" />
<meta name="twitter:app:name:iphone" content="Ameba" />
<meta name="twitter:app:id:iphone" content="349442137" />
<meta name="twitter:app:url:iphone" content="jpameblo://
ameblo/ca-1pixel/entry/12042291572" />
<meta name="twitter:app:name:googleplay" content="Ameba" />
<meta name="twitter:app:id:googleplay" content="jp.ameba" />
<meta name="twitter:app:url:googleplay" content="jpameblo://
ameblo/ca-1pixel/entry/12042291572" />

21. Twitter Card (App)

22. App Indexing
<link rel="alternate" href="android-app://jp.ameba/http/
ameblo.jp/ca-1pixel/entry-12042291572.html" />

23. App Indexing
<link rel="alternate" href="android-app://jp.ameba/http/
ameblo.jp/ca-1pixel/entry-12042291572.html" />
ネイティブ側の実装が必要

24. モダンなMETA
Photo by http://matome.naver.jp/odai/2127485134588918301/2127535504594900003
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content=“”>
<meta name="description" content=“”>
<meta property="fb:app_id" content="311629842256842" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:title" content=“『「AWA」のデザインは…” />
<meta property="og:type" content="article" />
<meta property="og:url" content=“http://ameblo…" />
<meta property="og:image" content=“http://….png” />
<meta property="og:site_name" content="1 pixel" />
<meta property="og:description" content=“こんにちは。AWAで…” />
<meta property="al:ios:url" content=“jpameblo://ameblo/ca-1pixel/entry/12042291572" />
<meta property="al:ios:app_store_id" content="349442137" />
<meta property="al:ios:app_name" content="Ameba" />
<meta property="al:android:url" content="jpameblo://ameblo/ca-1pixel/entry/12042291572" />
<meta property="al:android:package" content="jp.ameba" />
<meta property="al:android:app_name" content="Ameba" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="http://ameblo.jp/ca-1pixel/entry-12042291572.html" />
<meta name="twitter:title" content="「AWA」のデザインはどのようにして作られたのか。" />
<meta name="twitter:description" content=“こんにちは。AWAで…” />
<meta name="twitter:image" content="http://stat.ameba.jp/user_images/20150622/10/ca-1pixel/52/38/p/
o0600042013344459424.png" />
<meta name="twitter:app:country" content=“JP" />
<meta name="twitter:app:name:iphone" content="Ameba" />
<meta name="twitter:app:id:iphone" content="349442137" />
<meta name="twitter:app:url:iphone" content="jpameblo://ameblo/ca-1pixel/entry/12042291572" />
<meta name="twitter:app:name:googleplay" content="Ameba" />
<meta name="twitter:app:id:googleplay" content="jp.ameba" />
<meta name="twitter:app:url:googleplay" content="jpameblo://ameblo/ca-1pixel/entry/12042291572" />

25. チェックリスト
✔ Open Graph ✔ App Links
✔ Twitter Card (Web, App)
✔ Deep Link (Scheme, App Indexing)

26. チェックリスト
✔ Open Graph ✔ App Links
✔ Twitter Card (Web, App)
✔ Deep Link (Scheme, App Indexing)