Webページにはそのページを表示して利用する以外にも、SNSを利用して共有したり、いつでも見やすいようにブックマークすることができます。 そのブックマークする時や、共有するときもひと目見て、目的のwebサイトってわかるとユーザー的にはとてもわかりやすく、SNSでの共有効果もあがるんではないかと思います。そのために設定できるHTMLタグがいくつもあります。というわけで、
2013年版、favicon、SNS画像設定まとめです!
favicon(ファビコン)
これは定番中の定番。 設定すると何がいいのか？
- ブラウザのタブや、ブックマークにアイコンが表示される。
- windowsでブックマークショートカットを設定すると、アイコンとして表示される。
現在のブラウザは一つのウインドウに複数ページをタブで管理しています。そのため、いくつものページを開くとページタイトルを把握できないこともあります。そういった時にfavcionが設定されていると、ユーザーはタブを見てもすぐに探せると思います。 また、ブックマークにもアイコンが付くようになるので、名前を見ないでも探せるのは利点だと思います。
サイズについて
基本は16×16 windowsのデスクトップ用のショートカットアイコンは48×48となってます。
ファイル名と拡張子と記述について
ファイル名と拡張子は『favicon.ico』 記述はHTMLのhead上に下記を記述します。 hrefのパスには注意してください。
<link rel=”shortcut icon” href=”favicon.ico” />
androidWebClipアイコンとiphoneのアイコン
画像サイズについて
57×57 が基本で自動で拡大縮小が行われます。しかし、スマートフォンはサイズがまちまちなので、 retinaに合わせて144×144で作成し、残りは縮小のみにすればキレイにできるかと思います。 ファイル名と拡張子と記述について ファイル名は任意で、拡張子はpngで大丈夫です。 記述は以下の通り
<link rel=”apple-touch-icon” href=”/任意のファイル名.png”/>
パスについては任意の位置でも大丈夫です。
android対応について上記の記述でandroidも対応していますので、一石二鳥です。
フェイスブックで『いいね』を押すときに、コメント入れることが出来る『いいねボタン』があると思います。 その際に出てきてかつ、ウォールに流れてくる部分です。
画像サイズ
最低サイズが200×200px
推奨サイズは1500×1500pxとなってます。 (画像の容量5Mまで)
参照: creating-object-type 【facebook Developers】
大きなデバイスを基準として、小さなデバイスの時には縮小されるわけですね。
facebookでは仕様が変わることも良くあります。あくまで2013年現在の推奨サイズと考えておきましょう。
ファイル名と拡張子記述についてファイル名と拡張子は任意です。 記述は以下の通り
<meta property=”og:image”
content=”xxx.jp/facebook_cover.png” />
facebookではコレをやるとやらないとでは、『いいね』されたときの印象も変わってくるのでfacebook関連の設定には必須項目だと思います。
google+
google+にもfacebookと同様にサムネイル画像を指定することができます。 【+1 snipet】 https://developers.google.com/+/web/snippet/?hl=en 簡単にやる場合は上記のURLからタイトルなどが設定できるようになっております。
画像サイズ
最低限、高さを120px以上で幅が100px未満にならないようにと公式では記載されておりますので、
これもfacebook同様ある程度大きく作成しておくのがいいかと思います。
記述方法 また、タグを手動で挿入しても設定できます。その場合は四つの方法があり、
以下の順番の設定から優先されていきます。
1.Schema.orgにのっとった記述 microdata (schema.org)のマイクロデータを利用した記述。 これだけでも長い説明になってしまうので、詳しく知りたい方は schema.org(日本語訳)サイトへ
2.Open Graph protocol Facebookの設定でも出てきたタグですね。記述方法も同じです。
3.head内に以下のタグを記述する
<meta itemprop=”image”
content=”http://sample.com/img/thumb.png”>
これはタグの種類が違うだけで上記のogタグと同様の使い方です。
4.自動取得(非推奨) 先の三つを設定しなかった場合でも、自動的にスニペットの画像を設定してくれます。
ただし、どんな画像になるかはわかりませんので、一見してページの内容がわかるようなものがでるとは限りませんので注意。 もちろん、googleでも非推奨とされています。
mixi
今までのSNSサイト同様にmixiにもサムネイルの設定することができます。
画像サイズ
76×76px以上で、180×180pxが推奨されてます。
また、画像容量が400KB未満でないといけません。それ以上は無視されるようです。
記述方法
方法は2種類
1.OGタグの設定。
先のfacebookでも、google+でも出ていましたね。
2.mixiタグでの設定
まずhtmlタグの中に以下の属性を追加します。
<html xmlns:og=”http://ogp.me/ns#”
xmlns:mixi=”http://mixi-platform.com/ns#”>
つづいて、画像を設定するために
<link rel=”mixi-check-image” type=”image/jpeg”
href=”http://example.com/images/sample.jpg” />
またはmeta要素で
og:imageで設定する場合
<meta property=”og:image”
ontent=”http://example.com/images/sample1.jpg” />
mixi:imageで設定する場合
<meta property=”mixi:image”
content=”http://example.com/images/sample2.jpg” />
リンク：mixiチェック技術仕様
win8タイル
win8のスタート画面用に画像を設定することができます。
画像サイズ
144×144pxで作成してくださいと、modern.ieでは説明されています。 設定すると以下のような感じになります。
記述は以下の通り
<metaname="msapplication-TileColor"content="#123456"/>
<!-- ↑背景色 -->
<meta name="msapplication-TileImage" content="img.png"/>
<!-- ↑画像の指定 -->
TileColorでタイルの背景色を設定しまして、 TileImageで画像の設定をします。 windowsXＰのサポート終了に伴い、windows8ユーザーが増えていきタイルを利用する方も増えるかもしれませんね。
簡単に設定したい方は 以下のサイトで設定できます。
http://www.buildmypinnedsite.com/
まとめ
こういった細かい設定がユーザーの使いやすさや満足度につながることがありますので、ぜひ設定してはいかがでしょうか。
