モバイルフレンドリーのSEO効果検証に着手

今や当たり前となったiPhoneやAndroidなどのスマホにサイトを最適化するモバイルフレンドリーですが、そんなこと何も考えずに作ったサイトも多い時代遅れの私が今さらながらスマホにも対応するため改良に着手しSEO効果を検証したいと思います。

私がDreamweaverで作っているサイトはHTMLやCSSの知識が浅く手探りで作った株式投資のサイトをベースに改良を重ねて作っているものの、基本はwidthで幅をがっつり固定したもので、レスポンシブはおろかリキッドレイアウトすら無視の構成だったから。

「アクセス数の伸び悩みも感じているし、ここらでいっちょモバイルフレンドリーっちうのをやってみますか」ってのが実情。モバイルにもしっかり対応したレスポンシブに大きなSEO効果があるのであれば、下手にページを追加するよりよほど意義があるのかなと。

複数のサイトのレスポンシブ化に着手していますが、新しいサイトではなく、1年以上運営しアクセス数が安定しているもののほうが効果が分かりやすいということで、一生懸命CSSとにらめっこしています。

とりあえずの目標はモバイルフレンドリー認定

検索において絶大な力を持っているGoogle様が「モバイル対応が検索順位に影響する」と以前おっしゃられていたので今回の改造に至ったわけで、そのGoogle様には「モバイルフレンドリーテスト」なるものが存在します。

それ以外にもウェブマスターツールでモバイルユーザビリティを確認できたりするわけですが、私のHTMLサイトは前時代的なPCのみを考えたレイアウト固定のため「ビューポートが設定されていません」「クリック可能な要素同士が近すぎます」「テキストが小さすぎて読めません」の3重苦。

本来であればこれらを解消しつつ訪問者にとっても見やすいサイト構成にするべきなのですが、レスポンシブに触れたばかりの私にとって完全なるモバイルユーザーフレンドリーは壁が高い。

というわけで、とりあえずモバイルフレンドリーテストにおいて「あなたのサイトはモバイルフレンドりーです」という評価を貰えるレベルをまずは目指します。

まずスマホにも対応したレスポンシブなサイトにするためにはviewport（ビューポート）を設定しないことには始まらないのだが、「何それ美味いの？」というレベルの私ですから、レスポンシブに対応するのに苦労したのは言うまでもありません。

サイトをレスポンシブにするにあたって考えられる選択肢は大きく2つ。

前者のように「スマホ用」「タブレット用」「PC用」と分けてCSSを作ればきめ細かいレイアウトに対応できそうな気もしますが、1つのサイトにつきCSSを3つ管理とかどう考えても面倒なので、とりあえず後者で。

で、実際にこれでレスポンシブ化するにあたり、感触を確かめるために比較的新しめでページ数の少ないサイトを使って試してみたのですが、まあ色々と上手くいかない。

とりあえず@mediaで幅の指定をしつつ「width:100%;」を使ってリキッドレイアウトにしていくも、あっちを直せばこっちが崩れる、こっちを直せばあっちが崩れるという状況で、3歩進んで2歩下がる状態。

800pxなど一定の幅より狭くなるとサイドメニューがメインカラムの下に回り込む仕様なのですが、サイドバーは250～300pxであるため、そのまま下に回り込ませるとスカスカ感満載で、それに合わせて幅を調整したり2列にしたりと、まあクソ面倒くさい。

レイアウトの崩れに頭を抱えながらもある程度見れるようになってはきたのですが、ここでひとつ大きな問題が発生しました。

「決してベストではないが実用に耐える」というレベルまでレスポンシブに対応したところで、ある壁にぶち当たります。

私のPCで主に使用しているブラウザはFirefoxですが、サイトがスマホでどう表示されるかはFirefoxと併用してGoogle Chromeのデベロッパーツールという優秀な機能を使っていました。

問題になったのはサイトでよく使う下図のようなtableで作った表。

FirefoxではCSSでtableに「width:100%;」を記述すればリキッドになり、Internet Explorerでも幅の縮小に合わせて可変してくれていたのですが、Google Chromeでは下図のように一切可変しない。

当然この表だけが横に飛び出る形になってしまうため、これを解決すべくwidth:100%;を記述したdiv要素で囲ってみたりとか、ネットで色々調べながらやったみたのだが効果なし。

「この際Chromeは捨て置くか」とも考えましたが、検索において最も重要なGoogleのブラウザを無視することは賢明ではないと判断し、試行錯誤し悩むこと数時間。

結局「Google Chromeではtableのwidthをpxなどで指定してしまうとwidth:100%;を記述しても無視される」という結論に達し、widthはすべて%で指定しなおすことで解決しました。

HTMLやCSS、他のプログラム言語に詳しい人なら他の解決策があったのかもしれませんが、私レベルではこの辺が限界だった…Dreamweaverだから「サイトをレスポンシブに改良してみて

とりあえず色々苦労しましたが、当該サイトではモバイルフレンドリー判定を頂きました。

1つ作り終えたことで他のサイトへの移行は比較的スムーズに進むと思われ、これから徐々にモバイル対応にしていこうと思っています。

現在1年以上運営しアクセスが低空飛行で安定している悲しいサイトのレスポンシブ化を行っていますので、これがSEO的にどういう形で数字に現れてくるか、結果は追って報告したいと思います。

本気でサイト運営をしている人でモバイルフレンドリーを気にしていない人は少ないと思いますが、これから取り組むという人は参考にしてみて下さい。

Dreamweaverで作るとついついこういったことを後回しにしがちで、そういった面でワードプレスを使いSEOに強い賢威や、レスポンシブデザインのテンプレートが無料でダウンロードできるシリウスは優秀だなーと感じた次第です。

…まあ宣伝だが…