webページを彩るfavicon、SNS画像設定まとめ【2013年版】

eye-catch

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も対応していますので、一石二鳥です。  

facebook

フェイスブックで『いいね』を押すときに、コメント入れることが出来る『いいねボタン』があると思います。 その際に出てきてかつ、ウォールに流れてくる部分です。

画像サイズ 

最低サイズが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では説明されています。 設定すると以下のような感じになります。  

記述は以下の通り  

<meta name="msapplication-TileColor" content="#123456"/>

<!-- ↑背景色 -->

<meta name="msapplication-TileImage" content="img.png"/>

<!-- ↑画像の指定 -->

  TileColorでタイルの背景色を設定しまして、 TileImageで画像の設定をします。   windowsXPのサポート終了に伴い、windows8ユーザーが増えていきタイルを利用する方も増えるかもしれませんね。  

簡単に設定したい方は 以下のサイトで設定できます。

http://www.buildmypinnedsite.com/

まとめ

こういった細かい設定がユーザーの使いやすさや満足度につながることがありますので、ぜひ設定してはいかがでしょうか。