Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

俺はMETAだ!

5,059 views

Published on

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

Published in: Technology
  • Dating direct: ❶❶❶ http://bit.ly/39pMlLF ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

俺はMETAだ!

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

×