その際、twitterやFacebookの機能でURLを貼り付けた時に自動的にカードのような表示に置換えられます。
iOSとAndroidでリリースしている場合に記事内に両OSのURLを載せてもどちらかのURLだけカード表示され、異なるOSのダウンロードページへ飛ばしても意味がありません。
ユーザに判断させるのも違いますし、折角アクセスしてもらってもダウンロードに至らない、なんてのは無くしたいですね！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="(アプリタイトル)" />
<meta property="og:description" content="(アプリ説明)" />
<meta property="og:image" content="(カード画像URL)" />
<meta property="og:url" content="(リンクURL)" />
<meta property="og:type" content="game" />
<meta property="og:site_name" content="(サイト名)" />
<title>(サイト名)</title>
<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
window.onload = function(){
if(userAgent.indexOf("android") > -1){
// Google Play
launch_frame.location.href = "(URLスキーム)";
setTimeout(function(){
location.href = "(GooglePlay URL)";
}, 500);
}else if(userAgent.search(/iphone|ipad|ipod/) > -1){
// App Store
launch_frame.location.href = "(URLスキーム)";
setTimeout(function(){
location.href = "(AppStore URL)";
}, 500);
}else{
location.href = "(AppStore URL)";
}
}
</script>
</head>
<body>
<div style="width:0; height:0; overflow:hidden;"><iframe id="launch_frame" name="launch_frame"></iframe></div>
</body>
</html>
metaタグ内のogから始まるpropertyはOpenGraphProtocolというものでSNSでシェアされた際にサイト名やURLを正しく伝えるための設定です。twitterカードの仕様についてはこちら(公式)
コードの簡単な説明をするとUserAgentによってAndroidとiOSを振り分けています(UA偽装していたら正常に判定出来ません)
また、AndroidでもiOSでもない場合(PCからアクセス等)はAppStoreに飛ばしています。
OS判定後、URLスキームを用いてアプリの起動を試みます。
アプリ起動出来ない場合(500ms応答なし)はダウンロードURLへリダイレクトしています。
端末の設定にもよりますがダウンロードURLへリダイレクトした場合、自動でアプリが起動するはずです(AndroidならGooglePlay、iOSならAppStore)
また、上記コードではSummary Card with Large Imageというカードタイプを利用しています。
twitter内で目立って良いかなという程度の理由です。
カード画像については1024x500の画像を使用しています。
(仕様的には最低280x150で容量1MB以内らしいです)
URLスキームについては別記事にしましたのでご参考までにm(_ _)m
OS毎のアプリURLの形式については言わずもがなですが一応。。。
GooglePlay URLは以下の形式
https://play.google.com/store/apps/details?id=XXX
AppStore URLは以下の形式
https://itunes.apple.com/jp/app/XXX/idXXX?l=ja&ls=1&mt=8
設定出来たらWebサーバにアップロードして構文チェックを行いましょう。
Card Validator(公式)
twitterカードの仕様にもありますApp Cardですが、これを用いれば上記コードと同等の振り分けがmetaタグだけで出来そうですが、Facebookとかで同様の振り分けを行えるかは試してないので分からないです。。。
カード画像を用意しなくてもアプリロゴを補完してくれそうな雰囲気もしますが、せっかくスクリーンショット用などで横長の画像も用意しているかと思いますのでインパクト重視でLarge Imageを使うのも良いかなと思います！
0 件のコメント:
コメントを投稿