遊び心でアフィリエイト

田舎暮らしで悠々自適に生活するアフィリライフの記録簿

WEBページのスマホ化に向けた対応その1

2015年4/21から、グーグルのスマホに対する検索アルゴリズムにスマホ対応サイトであることが考慮されるそうです。

つまり、スマホサイト向けの検索には、スマホ対応ほWEBページを優先しますよってことですね。

自分のサイトがスマホに最適化しているのか調べてみる

私のページでも半分くらいはスマホからのアクセスですので、ページがスマホ対応していないと、検索ランキングも落とされて、アクセスが減ることはまちがいないでしょう。

ということで、スマホに対応しているのかどうかをこちらでチェックできますのでやってみました。

モバイル フレンドリー テスト

結果は・・・

<% metaKeywords %>

とりあえず大丈夫でしたb

さすが、シリウスです。

でも、ツイッターなどみているとシリウスでも、フレンドリーではない警告が出るという事例もあるようです。

また、対応していないサイトの場合は、スマホ向けのサイトを新たに設置しなければならないですね(たいへn><

スマホサイトに「フレンドリー」というのはどういうものかと調べてみたら、

いろいろと、細かくあるのですけど、まずは、こんなこどでした

�@操作の中心的な起点となるようにする

<% metaKeywords %>

わずらわしさはNGってことでしょうか

�A簡潔で使い勝手の良いメニューにする

<% metaKeywords %>

ボタンやカーソルが押しにくいようなものもNGですね

�B簡単にホームページに戻れるようにする

<% metaKeywords %>

すぐにホームに戻れるようにボタンを設置するか、パンくずリストなどですかね。

�Cプロモーションを目立たせない

<% metaKeywords %>

イヤミな広告やPRも嫌われるってことですね。

画面サイズのマッチング

それから、重要なのが、画面サイズなんですが、通常スマホといえば横幅が320ピクセルとかなようなんですが、

これも、最近は一概にはいえなくなっています。

さらに、スマホを縦と横にしたときの見易さとか、ズームしないでも見えるとか、水平方向に動かさないなど、操作性と見易さが一番肝のようですね。

ビューポートの設定を変える

そのためには、メタタグである”meta viewport”というのを設定する必要があるようです。

content=のところをwidth=320からwidth=device-widthに変更。これは、320ピクセル以外の画面幅にもマッチさせる必要があるからです。シリウスでは320の設定ですので、これを全部変えてしまいました。

initial-scale=1 が無い場合は追加

initial-scale=1というのは、スマホによって、画面を横にすると、画面幅が固定されていて、ズームしたように表示されるのを防ぐようです。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

シリウスのスマホのHTMLテンプレート

シリウスの場合はこのようになっています。

<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

maximum-scaleとuser-scalable

というのがあります。

ウェブマスターツールによると

minimum-scale

maximum-scale

user-scalable

”これらの属性を設定するとユーザーがビューポートをズームできなくなる場合があるため、ユーザー補助関連の問題が生じる可能性があります。”

といっています。

つまり、スマホ画面をピンチして拡大したり出来なくなるので、補助できなくなるよ、ということなのでしょうが、

これはデメリットなのでしょうか?

ヤフーなどのスマホ最適化された多くのサイトはズームできない仕様になっていますし、どうなんでしょう。

とりあえず、ウェブマスターに従っておいたほうがよさそうですけど(汗

さらに、属性の区切りにはコンマを使いなさいといっていますので、修正したらこうなります

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0" />

まだまだ、勉強中です。

くわしくはグーグルデベロッパーのサイトに掲載してあります。

<% categoryListTitle | tag_insert(h3) %>

<% AQEntries %>

<% pageTitle | shorten(40,true) %>

<% pageThumbnail | addAtribute(align="left") | tag_insert(span class="txt-img") %>

<% pageBody | tag_strip | str_replace( ,) | oneline | shorten(150,true) %>

≫続きを読む

<% /AQEntries %>