BomBox

WordPressでのブログ運営のノウハウやWeb開発、IT関連の情報を発信

BootstrapはSEOに強いのか?

2017/08/18

Bootstrap SEO

Webデザインフレームワークとして簡単に美しいサイトを作れることから世界的に定評のある「Bootstrapブートストラップ」。

今回はそのBootstrapが果たしてSEO対策的に選ぶべきなのか否なのかを考えてみたいと思います!

スポンサーリンク

Bootstrapとは?

Bootstrapとは、先ほども述べた通りWebデザインフレームワークの一種です。

無償で公開されており、誰でも利用することができます。いわゆるオープンソースというものです。現在Bootstrapには主流であり正式版である「Bootstrap 3」と、アルファ最新版として公開されている「Bootstrap 4」があります。

WordPressテーマにもBootstrapをベースにした無料・有料テーマが非常に多く存在していて、世界的に見ても最も人気のあるWebデザインフレームワークと言えるでしょう。

Bootstrapは果たしてSEOに強いのか?

今回は表示速度、ユーザビリティ、モバイルデザインの3つの観点からBootstrapのSEOについて判断します。

あまり比べる対象を増やしすぎると、それこそ本当にBootstrapが良いのか悪いのかわからなくなるため、3つに抑えておくことにします。

ページの表示速度

Loading

Webデザインフレームワークを使うことの欠点の代表例として、「ファイルサイズが大きいからロードが遅くなる」ことが挙げられます。

Bootstrap 3かBootstrap 4を選ぶかによるところも大きいのですが、今回はどちらも調べることにします。検証にはMaxCDN、jQueryはjQuery公式CDNを使用したいと思います。また、tether.jsはcode.google.comにホストされています。

オールCDNの時間だけを計測するのもアレなので、サーバー側にファイルを設置する方も試してみたいと思います。

CDNを利用

実験環境

  • HTMLでページ読み込み時にjQuery, Bootstrap, tether.jsを読み込ませる(tether.jsは、Bootstrap 4からTooltipsに採用されました)。
  • ページには何も表示しない(コンポーネントやテキスト等なし)。
  • 拡張子は.html

で実行してみます。この読み込み速度をGTmetrixで計測します。するとすると…

GTmetrix ページスコア CDN利用時

ロードタイムは0.6秒、サイズは74.6KBとなりました。

サーバーにBootstrapとjQueryを設置

こちらもCDNを利用していない事以外は全て同じ条件、同じJavaScriptやCSS、HTMLを実験に使っています。HTML設置サーバーは日本のデータセンターにあります。

すると驚くべきことに…!?

GTmetrix スコア

スコアがBまで下がり、ページサイズも増加し、リクエストも1上がってしまいました。Bootstrap自体のサイズは変わっていません。やはりサーバー機器の違いがあると、ページスコアにもたらす影響も大きくなってくるようです。

この結果から言えることは、ファイルをサーバーに設置せずCDNを利用した方がページの表示速度を更に上げることができるということです。

ただし、CDNは世界中の国のユーザーが活用しています。時間帯によっては、CDNの方が格段に遅くなってしまうなどの情報も見かけました。

インターネット

ページに掲載するコンテンツの量や内容に応じて柔軟な対応をするのが最も望ましいと思います。

ユーザビリティ

そもそもユーザビリティとは何なのか。

Webユーザビリティとは、Webサイトの使い勝手のよさのこと。

Webユーザビリティとは:eWordsより

例えば、Yahoo! ニュースのスマートフォン画面での広告。

スクロール広告 邪魔

http://news.yahoo.co.jp

この画面下の広告は、大きくユーザビリティを下げていると考えられます。何故なら、ニュースサイトは情報がメインのサイトです。一度に多くの情報を視認できた方が当然ユーザビリティは向上するはずです。

しかし、それをわざわざ広告のために面積を取ってしまい、とても勿体無いです。そのため、私はスクロール広告をおすすめしません。クリックがあったとしても、コンバージョン(達成)があるかどうか怪しいですしw

いやー、かつてYST (Yahoo Search Technology)で全盛を誇っていたYahoo! JAPANも、ここまで落ちぶれたのですね…。

モバイルWebデザイン

将来的にインターネットへの接続の70%がスマートフォンになると予測されているこの時代に、レスポンシブWebデザインにしないというのは時代遅れ、いわゆる古くさいサイトに分類されてしまうでしょう。

モバイルWebデザインでは、先ほど述べたユーザビリティを考慮することが重要です。機能的なサービスを提供する場合は、よりその色が濃くなります。

iPhone

例えば、メニュー(ナビゲーション)。Bootstrapではハンバーガーメニューがデフォルトで設定されていますが、これでは割とメニューを開くアイコンとわかる人が少ないようで、A/Bテストでも立証されています。

これではサイトの回遊率 (サイト内の他のページを見てもらえる確率)が下がるだけでなく、「お問い合わせ」等の重要なページにもアクセスしてもらうことが難しくなります。恥ずかしながら当サイトではハンバーガーメニューを採用しているのですが、いずれアイコンを変更しようと考えています。

なぜアクセスしてもらうのが難しいのか?どうやらこれが理由のようです。

ハンバーガーメニューは、リテラシーの高いユーザーであれば他サイトからの経験でそれが何かを理解できますが、何も知らない人が見れば「3つの横棒が並んでいる」だけです。

mislead.jpより引用

Googleのフレームワークである「Material(マテリアル)」もハンバーガーメニューを採用しているので、本当にハンバーガーメニューが悪いのかどうかはそちらの判断に委ねます…(´・ω・`)

また、グリッド(サイトコンテンツのレイアウト)の適応も重要です。Bootstrapにはcol-mdというグリッドを制御するためのクラスが標準で用意されています。これを活用することで、パソコンでは横に3つパーツを並べて、スマートフォンでは縦一列に並べる、という複雑そうなことが簡単にできます。

Bootstrap4 Jumbotron

横に3つのコンテンツを並べている例

最近のモダンブラウザはスマートフォンからサイトを見る、いわゆるエミュレータのような機能を搭載しているのでモバイルコンテンツ制作も昔よりずっと簡単になりました。

また、つい最近、Googleは「モバイルファーストインデックス」を発表しました。これは今までサイト評価の基準にしていたPC版サイトを、スマートフォンサイトを基準とした評価に移行するというものです。詳しく書くと長くなってしまうので、Suzuki Kenichiさんのブログをご覧ください。

BootstrapはSEOに強いかどうかのまとめ

今回の記事でわかっていただきたいことは、SEO対策というのはただ単に目指しているキーワードをできるだけ多く入れ、meta descriptionを書いたり被リンクを集めるだけということではなく、訪問するユーザーのことも考えるのもSEO対策の一貫だということです。

Googleの方ばかり向いて、ユーザーの方をないがしろにしては、PVが上がるはずがありません!!

SEOの本質を思い出し、ユーザーにフレンドリーなサイトを提供することを目指してください。

Web開発が大好きです。主にHTML+CSS、Bootstrapを使っています。仮想通貨関連も最近はいじくりまわしている。

-SEO対策