俺はMETAだ!
-
Upload
kazunari-hara -
Category
Technology
-
view
3.716 -
download
0
Transcript of 俺はMETAだ!
![Page 1: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/1.jpg)
俺は META だ!
Photo by European Southern Observatory
2015-06-26 @herablog
![Page 2: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/2.jpg)
META とは
Photo by LifeinMovie
「高次な-」「超-」「-間の」「-を含んだ」等の意味の接頭語。ギリシア語から。(wikipedia)
![Page 3: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/3.jpg)
Photo by LifeinMovie
![Page 4: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/4.jpg)
![Page 5: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/5.jpg)
META とはその文書に関する情報(メタ情報)を指定して、 ブラウザや検索ロボットに知らせるためのタグです。(http://www.htmq.com/)
![Page 6: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/6.jpg)
古きよきMETA
Photo by http://www.toychan.net/archives/2009/09/28_2359.php
![Page 7: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/7.jpg)
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
![Page 8: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/8.jpg)
Photo by http://matome.naver.jp/odai/2138823589537557001/2138823963839725503
よいサイトを作っても
人が集まらない
![Page 9: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/9.jpg)
提供
![Page 10: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/10.jpg)
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
FromTo Apps Apps
![Page 11: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/11.jpg)
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" />
![Page 12: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/12.jpg)
Open Graph
![Page 13: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/13.jpg)
Open Graph<meta property="og:title" content=“『「AWA」のデザインは…” /><meta property="og:site_name" content="1 pixel" />
og:title - ブランド名は入れないog:site_name - ブランド名はこちらに
![Page 14: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/14.jpg)
Open Graph<meta property="og:locale" content="ja_JP" />
og:locale - Facebookのアルゴリズムできちんと評価される
![Page 15: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/15.jpg)
Open Graph<meta property="fb:app_id" content="311629842256842" />
fb:app_id - ドメインインサイトにアクセスし、トラフィックソースをトラックできる
![Page 16: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/16.jpg)
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" />
![Page 17: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/17.jpg)
App Links
![Page 18: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/18.jpg)
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 - ディープリンクできるようにネイティブ側を実装しておく
![Page 19: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/19.jpg)
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" />
![Page 20: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/20.jpg)
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" />
![Page 21: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/21.jpg)
Twitter Card (App)
![Page 22: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/22.jpg)
App Indexing
<link rel="alternate" href="android-app://jp.ameba/http/ameblo.jp/ca-1pixel/entry-12042291572.html" />
![Page 23: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/23.jpg)
App Indexing
<link rel="alternate" href="android-app://jp.ameba/http/ameblo.jp/ca-1pixel/entry-12042291572.html" />
ネイティブ側の実装が必要
![Page 24: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/24.jpg)
モダンな 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" />
![Page 25: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/25.jpg)
チェックリスト✔ Open Graph ✔ App Links
✔ Twitter Card (Web, App)
✔ Deep Link (Scheme, App Indexing)
![Page 26: 俺はMETAだ!](https://reader033.fdocument.pub/reader033/viewer/2022052913/55cc73c4bb61eb2f538b4691/html5/thumbnails/26.jpg)
チェックリスト✔ Open Graph ✔ App Links
✔ Twitter Card (Web, App)
✔ Deep Link (Scheme, App Indexing)