Google IO 2015のページには<head>タグ内に多数の<meta>, <link>の記述があります。
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Google I/O 2015 brings together developers for an immersive, two-day experience focused on exploring the next generation of technology, mobile and beyond. Join us online or in person May 28-29, 2015.">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1">
<meta name="google-site-verification" content="AdXcVeRpEoy56o6g9c0lls3IiAATCVtB45HWJFwZmsM" />
<title>Google I/O 2015</title>
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#eceff1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Google I/O 2015">
<link rel="icon" sizes="192x192" href="images/touch/homescreen192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Google I/O 2015">
<link rel="shortcut icon" href="images/touch/homescreen72-fav.png">
<link rel="apple-touch-icon" href="images/touch/homescreen48.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/touch/homescreen72.png">
<link rel="apple-touch-icon" sizes="96x96" href="images/touch/homescreen96.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/touch/homescreen144.png">
<link rel="apple-touch-icon" sizes="192x192" href="images/touch/homescreen192.png">
<meta name="msapplication-TileImage" content="images/touch/homescreen144.png">
<meta name="msapplication-TileColor" content="#eceff1">
<meta name="msapplication-tap-highlight" content="no">
<meta itemprop="name" content="Google I/O 2015">
<meta itemprop="description" content="Google I/O 2015 brings together developers for an immersive, two-day experience focused on exploring the next generation of technology, mobile and beyond. Join us online or in person May 28-29, 2015.">
<meta itemprop="image" content="/io2015/images/io15-color.png">
<meta itemprop="startDate" content="2015-05-28T16:00:00Z">
<meta itemprop="endDate" content="2015-05-29T23:59:59Z">
<meta property="og:title" content="Google I/O 2015">
<meta property="og:site_name" content="Google I/O 2015">
<meta property="og:type" content="website">
<meta property="og:url" content="/io2015">
<meta property="og:description" content="Google I/O 2015 brings together developers for an immersive, two-day experience focused on exploring the next generation of technology, mobile and beyond. Join us online or in person May 28-29, 2015.">
<meta property="og:type" content="Event">
<meta property="og:image" content="/io2015/images/io15-color.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@googledevs">
<meta name="twitter:title" content="Google I/O 2015">
<meta name="twitter:description" content="Google I/O 2015 brings together developers for an immersive, two-day experience focused on exploring the next generation of technology, mobile and beyond. Join us online or in person May 28-29, 2015.">
<meta name="twitter:image:src" content="/io2015/images/io15-color.png">
この様々な記述はこれからのWeb制作にあたって知っておくと便利なことばかりですので、かいつまんで説明していきます。
ビューポート
もはやモバイルサイト制作者にとってはお馴染み。
モバイルサイトをモバイルサイトのように表示させるために必要な記述です。
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1">
ゲーム等ではcontentの中身にmaximum-scale=1.0を付けて拡大まで禁止することもありますが、通常のWebページではアクセシビリティ的な観点で拡大は許しておくのが良いのです。
テーマカラー
Android 5.0のChromeで、タブの色を変えることができます。ユーザーに「お！？」と思わせることができます。
<meta name="theme-color" content="#eceff1">
ホーム画面へ追加
この記述をすることで、SafariやChromeでホーム画面へ追加する機能を使ってブックマークをアプリっぽい感じでホーム画面に置くことができます。
ホーム画面へ追加をするとブラウザーのUIが表示されなくなって他のネイティブアプリのような見た目になったり、タスクマネージャーからもブラウザーとは独立したアプリのように見えたりして、よりアプリ感が出るようになります。
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Google I/O 2015">
<link rel="icon" sizes="192x192" href="images/touch/homescreen192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Google I/O 2015">
<link rel="shortcut icon" href="images/touch/homescreen72-fav.png">
<link rel="apple-touch-icon" href="images/touch/homescreen48.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/touch/homescreen72.png">
<link rel="apple-touch-icon" sizes="96x96" href="images/touch/homescreen96.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/touch/homescreen144.png">
<link rel="apple-touch-icon" sizes="192x192" href="images/touch/homescreen192.png">
なお、Chrome 39からはアプリケーションマニフェストでアイコン等を指定する方法が推奨されています。
アプリケーションマニフェスト
ホーム画面へ追加する際に、より細かな指定をするための記述です。Chrome 39で導入された新しい機能で、今後は上記<meta>タグ関連の指定がこちらのマニフェストに移行していくと思われます。
<html>タグに指定するキャッシュマニフェストとは別物なので混同しないようにしてください。
<link rel="manifest" href="manifest.json">
その肝心のmanifest.jsonの中身はというとこんな感じ。//以降の部分はこちらで付け加えました。実際には入れないでください。
{
"name": "Google I/O 2015", // アプリケーション名
"short_name": "I/O 2015", // 短縮名
"start_url": "./?utm_source=web_app_manifest", // エントリーポイント(省略可)
"display": "standalone", // これを指定するとブラウザーの枠がなくなり、よりアプリっぽくなる
"icons": [{ // 解像度別に用意しておくとブラウザーが必要に応じて選択してくれる
"src": "images/touch/homescreen48.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
}, {
"src": "images/touch/homescreen72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
}, {
"src": "images/touch/homescreen96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
}, {
"src": "images/touch/homescreen144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
}, {
"src": "images/touch/homescreen192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4"
}],
"chrome_related_applications": [{ // 関連するアプリを指定するものと思われる
"platform": "web"
}, {
"platform": "android",
"location": "https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched"
}]
}
Open Graph
Open Graphとは
要はFacebook対応。FacebookでこのページのURLをシェアされた場合に表示されるコンテンツを制御します。Facebook以外のサイトでもこの情報が利用される場合があります。
<meta property="og:title" content="Google I/O 2015">
<meta property="og:site_name" content="Google I/O 2015">
<meta property="og:type" content="website">
<meta property="og:url" content="/io2015">
<meta property="og:description" content="Google I/O 2015 brings together developers for an immersive, two-day experience focused on exploring the next generation of technology, mobile and beyond. Join us online or in person May 28-29, 2015.">
<meta property="og:type" content="Event">
<meta property="og:image" content="/io2015/images/io15-color.png">
Twitterカード
Twitterカードとは
Open GraphのTwitter版です。動画やオーディオに対応できたりモバイルアプリのダウンロードリンクを誘導できたりするのが便利っぽいです。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@googledevs">
<meta name="twitter:title" content="Google I/O 2015">
<meta name="twitter:description" content="Google I/O 2015 brings together developers for an immersive, two-day experience focused on exploring the next generation of technology, mobile and beyond. Join us online or in person May 28-29, 2015.">
<meta name="twitter:image:src" content="/io2015/images/io15-color.png">
こういう細かなところまで作りこめてこそ、一流のWeb制作者なんじゃないかなと思います。皆さんも積極的に記述していきましょう。