最近WEBサイト作ってて、そろそろOGPとかmanifest.jsonあたりは設定したほうがいいよってアドバイスももらい始めたのでマジメに実装していこうと思います。
そんで、自分用のメモ。いつもググってしまうので記事にどっちも書いておこう！と思い立ったわけです。以前作成しましたあの楽器のWebに実装してみました。結構カンタンにできますので、参考に。
なお、あの楽器をWeb実装した記事は以下になります。
【初音ミク】Innocence【3DPV】に出てくる「あの楽器」のWeb版
タイトル／説明／OGPを設定していこう。
OGPとは
OGPは、TwitterやFacebook、その他サイトなどでURL参照を貼った時に表示される画像／タイトル／説明です。これを設定しておくと拡散時に「このサイトは何のサイトなのか」といった情報がパット見で判別できるようになるため設定をおすすめします。
<meta property="og:" (ryと記述があるところがOGP内容になります。
コード解説
実際のコードから。最低限、これぐらいは欲しいかな感で実装しました。補足など大歓迎です。
<head>
<title>あの楽器 on Web</title>
<meta name="description" content="あの楽器をWebブラウザで使おう">
<meta property="og:title" content="あの楽器 on Web">
<meta property="og:description" content="あの楽器をWebブラウザで使おう">
<meta property="og:type" content="website">
<meta property="og:url" content="https://shinoharata.github.io/Ano-web/">
<meta property="og:image" content="https://shinoharata.github.io/Ano-web/site.png">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@SHINOHARATTT" />
</head>
title
<title>あの楽器 on Web</title>
<meta property="og:title" content="あの楽器 on Web">
ここがタイトルになります。表示するときのサイト名や、Google検索時に出てくる説明に使用されます。どちらも同じものを設定しましょう。これはブラウザのタブにも表示されます。むしろ推奨というより、必須で忘れたくない内容ですね。
description
<meta name="description" content="あの楽器をWebブラウザで使おう">
<meta property="og:description" content="あの楽器をWebブラウザで使おう">
説明内容です。キャッチコピーのセンスと、興味を引くような文章力が求められます。かなり重要
og:type
サイトタイプの説明です。これは設定できる内容が決まっていまして、適宜ページに合わせたものを選択すると良いでしょう。
よく使われるのは以下の二種類。
- website
WEBページ（単一のページなど）に使用されます。 - article ブログサイトや、Wordpress等に使用されます。
その他、動画サイトや音楽系のサイトなどもあるようです。以下リンクをご参照下さい。（全文英語）
ogp.me
og:url
サイトのURLを指定します。絶対パスのみ可能。相対パスは動作しませんので注意！
<meta property="og:url" content="https://shinoharata.github.io/Ano-web/">
og:image
画像を指定します。絶対パスのみ可能。相対パスは動作しませんので注意！
サイズは正方形、適宜設定して下さい。
<meta property="og:image" content="https://shinoharata.github.io/Ano-web/site.png">
Twitterに貼り付ける時用に使用します。
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@SHINOHARATTT" />
だいたい普段使いそうなのはcard/summaryを設定することぐらい。
twitter:siteはアカウント名を書きます。
OGPまとめ
とりあえず何かWEBページなり、Webで動作するツール作りましたってときはこれだけで良さそう。
ラクなので設定しておいたほうがいいかと思った次第です。
PWA実装する（AMPなし）
PWAとは、Androidでホーム画面に追加した時にそのままアプリとして起動する設定。SPAでWebアプリなどを作成した場合はプラットフォームなり、Google Playを介さないのでラク。必須ではないですが、Webのブックマークを設定する必要もないため使えるようになっておきたいので実装することにしました。
実装方法
HTML
にコードを追加していきます。以下の内容でおｋ <!-- for iOS -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!-- for Android -->
<link rel="manifest" href="favicon/manifest.json">
manifest.jsonに設定などを記載します。フォルダパスは相対PASSでおｋ
{
"name": "あの楽器 on Web",
"short_name": "あの楽器 on Web",
"description": "あの楽器をWebブラウザで",
"theme_color": "#86cecb",
"background_color": "#000000",
"display": "standalone",
"start_url": "https://shinoharata.github.io/Ano-web/",
"icons": [
{
"src": "https://shinoharata.github.io/Ano-web/favicon/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "https://shinoharata.github.io/Ano-web/favicon/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "https://shinoharata.github.io/Ano-web/favicon/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "https://shinoharata.github.io/Ano-web/favicon/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "https://shinoharata.github.io/Ano-web/favicon/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "https://shinoharata.github.io/Ano-web/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://shinoharata.github.io/Ano-web/favicon/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
}
]
}
name
アプリ実行時のタイトルとなる部分です。
short_name
ホーム画面に表示されるタイトルです。短く設定できるといいでしょう。
(二文字ぐらい。よくあるアプリ名など）
description
アプリの説明文を記載します。
theme_color / background_color
アプリのテーマカラーを設定します。
display
画面の表示方法を設定します。
standaloneを設定した場合は、ブラウザのWebページではなくアプリっぽく表示されます。
start_url
アプリとして開始時のホームURLを指定します。AMPする場合はまた別の方法で記載するようですが、Webサーバーにアクセスして直接表示する場合は絶対パスで記述しています。
icon
各アイコンサイズを指定します。めんどくさいですが記述しましょう。
私は念の為、絶対パスで記載しました。
まとめ
本当に設定するのはこれだけ。やっておくとそれなりの価値はあるので実装をおすすめします。
今後なにかしらのWebサービスを作る際などは積極的に実装していったほうがいいでしょう。利用者の手間を考えてもこれは是非オススメしたい内容ですね。