俺は META だ！

Photo by European Southern Observatory

2015-06-26 @herablog

META とは

Photo by LifeinMovie

「高次な－」「超－」「－間の」「－を含んだ」等の意味の接頭語。ギリシア語から。(wikipedia)

Photo by LifeinMovie

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

古きよきMETA

Photo by http://www.toychan.net/archives/2009/09/28_2359.php

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

Photo by http://matome.naver.jp/odai/2138823589537557001/2138823963839725503

よいサイトを作っても

人が集まらない

提供

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

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" />

Open Graph

Open Graph<meta property="og:title" content=“『「AWA」のデザインは…” /><meta property="og:site_name" content="1 pixel" />

og:title - ブランド名は入れないog:site_name - ブランド名はこちらに

Open Graph<meta property="og:locale" content="ja_JP" />

og:locale - Facebookのアルゴリズムできちんと評価される

Open Graph<meta property="fb:app_id" content="311629842256842" />

fb:app_id - ドメインインサイトにアクセスし、トラフィックソースをトラックできる

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" />

App Links

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 - ディープリンクできるようにネイティブ側を実装しておく

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" />

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" />

Twitter Card (App)

App Indexing

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

App Indexing

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

ネイティブ側の実装が必要

モダンな 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" />

チェックリスト✔ Open Graph ✔ App Links

✔ Twitter Card (Web, App)

✔ Deep Link (Scheme, App Indexing)

チェックリスト✔ Open Graph ✔ App Links

✔ Twitter Card (Web, App)

✔ Deep Link (Scheme, App Indexing)