LoginSignup
41
38

More than 5 years have passed since last update.

@lni_T

Webサイトのページ内容以外での見た目向上方法(ogp, favicon) - facebook,twitter対応済

Last updated at Posted at 2015-07-22

ogp

  • Open Graph Protocolの略称
  • サイトがFacebook等のSNSでシェア・URL貼り付けされた際に、画像やタイトル、サイトの概要を表示するための仕組み
    • FacebookにURLを貼り付けると画像や説明が表示されるアレ

設定方法

基本

  • <head>内に各種<meta>タグを埋め込んで設定する
  • 基本となるタグは以下の4つ
    • og:title ページのタイトル
    • og:type ページのタイプ
    • og:image ページのサムネイル画像
    • og:url ページのURL

  • この4つをmetaタグの property属性に指定し、content属性に表示させたい値を指定する(meta name属性ではないので注意)

    <meta property="og:title" content="My App" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://myapp.com" />
<meta property="og:image" content="/ogimage.png" />

  • 上記の4タグだけではページの説明が表示されないので以下のタグも使用するのがオススメ

    • og:description ページの説明

  • 日本語の解説サイトではこちらがわかりやすい

og:type
  • og:typeに指定できる値はいろいろあるので、ここやここを参考に当てはまるものを探す。
    • website: Webサイト/ページ
    • article: 「記事」のあるサイト/ページ
og:image
  • 表示したい画像をサイトに配置し、そのURLを記載する。
  • 画像サイズはFacebookが1200x630pxを推奨しているのでそれに合わせると楽(参考リンク)
動作確認
  • Facebookの発言フォームに貼り付けてみて、プレビュー表示されればOK

Twitter向け (Twitter Cards)

  • Twitterで同様のは別途Twitter Cardsというものの設定をする必要がある
  • Facebook向けogp設定は完了している前提で下記の2つのタグを追加する
    • twitter:card カードの種類(一覧はこちら)
    • twitter:site Twitterアカウント
  • metaタグの name属性に指定し、content属性に表示させたい値を指定する(こっちはmeta name属性なので注意)
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@Twitterアカウント">
  • 検証ツールにURLを貼り付けサイトの検証を行い、OKならカードの申請を行う。
  • 承認を受けたらURLをツイートして確認する。

favicon

  • タブのアイコンやブックマークのアイコンに表示される画像のこと
  • 以下それぞれ設置方法を説明
  • 面倒くさい人は飛ばしてこちらまで移動。

favicon (Webブラウザ向け)

  • タブとかにアイコンを表示するために使われる画像

設置方法

  • favicon.ico を作成し、ルートフォルダに配置する。
    • 16x16, 32x32, 48x48

  • <head>内にタグを記載

    <link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

より細かく設定

  • その他サイズ毎にそれぞれ別の画像も指定できる
    • favicon-16x16.png: タブ表示用
    • favicon-32x32.png: Mac版Safari用
    • favicon-96x96.png: Google TV用
  • それぞれ<head>内に記載
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

apple-touch-icon (iOS向け)

  • iOS端末でWebクリップ化したりブックマークしたりした時に表示される画像

設置方法

  • apple-touch-icon.png を作成し、ルートフォルダに配置する。
    • 使われる可能性のある最大サイズにしておくとよい(2015/06/29現在だと180x180 ?)
    • iOS系の端末はタグの記載がなければブックマーク時にこのファイルを取りに来てくれるっぽい
  • 古いiOS端末(iOS6以前)はアイコンに自動で光沢処理を行うが、それが嫌なら apple-touch-icon-precomposed.png をルートフォルダに配置する。
    • が、最近のiOS端末はprecomposedなしでも光沢処理は行わないのでもう気にしなくて良さそう

より細かく設定

  • その他サイズ毎にそれぞれ別の画像も指定できる
    • apple-touch-icon-57x57.png
    • apple-touch-icon-60x60.png
    • apple-touch-icon-72x72.png
    • apple-touch-icon-76x76.png
    • apple-touch-icon-114x114.png
    • apple-touch-icon-120x120.png
    • apple-touch-icon-144x144.png
    • apple-touch-icon-152x152.png
  • ちょっと多すぎない…？
  • それぞれ<head>内に記載
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

mstile, browserconfig.xml (Windows8 向け)

  • Windows8やIE11でサイトを「ピン留め」した時のタイルアイコン等を指定する

browserconfig.xml作成方法

  • browserconfig.xml を配置する。
browserconfig.xml
    <?xml version="1.0" encoding="utf-8"?>
    <browserconfig>
      <msapplication>
        <tile>
          <square70x70logo src="/mstile-70x70.png"/>
          <square150x150logo src="/mstile-150x150.png"/>
          <square310x310logo src="/mstile-310x310.png"/>
          <wide310x150logo src="/mstile-310x150.png"/>
          <TileColor>#da532c</TileColor>
        </tile>
      </msapplication>
    </browserconfig>

<meta>タグ指定方法

  • 以下の<meta>タグを指定する。
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

manifest.json (Android Chrome 向け)

  • AndroidChrome等で「ホームに追加」した際の設定を記載する。
  • なくても動くっぽいのでなくてもいいかも

作成方法

  • manifest.jsonを配置する。
    • nameとiconsを記載しておく
    • nameは「ホームに追加」した時の名称になる。
    • 144x144のアイコンは必須っぽい
manifest.json
    {
        "name": "My App",
        "icons": [
            {
                "src": "\/android-chrome-144x144.png",
                "sizes": "144x144",
                "type": "image\/png",
            }
        ]
    }
  • 指定したサイズのアイコンをルートフォルダに配置する。
  • <head>内にタグを記載する。
    <link rel="manifest" href="/manifest.json">

より細かく設定

  • その他サイズ毎にそれぞれ別の画像も指定できる

    manifest.json
    {
    "name": "My App",
    "icons": [
        {
            "src": "\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

こんなの面倒くさい人に！

使い方

  1. アイコンの元となる画像を作っておく
  2. http://realfavicongenerator.net/ を開く
  3. 「Select your Favicon picture」から元画像を選択
  4. オプションが選べるので画像の見え方を調整
  5. 「Generate your Favicons and HTML code」で作成
  6. 完成品のzipのダウンロードし、出力されるHTMLコードを控えておく
  7. zipを解凍するとfavicon一式が出てくるので、設置したいサイトのルートフォルダに配置する
  8. 設置したいサイトにHTMLコードを貼り付け(または作成中のWebアプリに合った形式で記載)
  9. 完成
  • 同サイトで正しく配置されているかのチェックも可能。

できあがり

41
38
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
41
38