レスポンシブサイトの構築

レスポンシブサイトの構築方法について、ポイントを整理したいと思います。

ポイントは大きく分けて3つ
1、サーバサイドスクリプトによるコンテンツ出力の振分け
2、CSSによるレスポンシブ仕様
3、検索エンジン対策

Googleのモバイル対策

3つのポイントを見る前に、Googleのモバイル対策を理解した方が良いと思います。
Googleによると、彼らの検索エンジンが対応するモバイルサイトとして取り得る選択肢は、以下の三つ、
A、レスポンシブ ウェブ デザイン
B、動的な配信
C、別々のURL
があります。
A、レスポンシブ ウェブ デザインは、CSSによる端末画面の横幅によるデザインの振り分けで対応することです。これがいわゆるレスポンシブ ウェブ デザインです。
B、動的な配信は、サーバサイドスクリプトを用いて、HTTPリクエストのユーザーエージェントを判別して同一URLで異なるHTMLやCSSを配信することです。
C、別々のURLは、モバイル用とPC用の異なるページを用意して、これらが同一のページであることをlink rel=”canonical”やlink rel=”alternate”のタグで示すことです。その上で、ユーザーエージェントの判別によるHTTPリダイアレクト、補助的にJavaScriptリダイアレクトが推奨されます。
参考ページ:モバイル SEO

サイト構築時の条件によってどのような手段を用いるのが最善かは異なりますが、自由な環境でレスポンシブサイトを構築するのであれば、私はA、レスポンシブ ウェブ デザインとB、動的な配信を組み合わせるのが良いと思います。A、レスポンシブ ウェブ デザインだけで十分かとも思いますが、htmlの大幅な変更やコンテンツ量の調整はB、動的な配信の方がシンプルに片付きます。特に広告を貼り付けたりしたい場合には、display=”none”を使ってはいけない規約になっていたりするので、B、動的な配信が必須となる場合もあります。

1、サーバサイドスクリプトによるコンテンツ出力の振分け

1、サーバサイドスクリプトによるコンテンツ出力の振分けは、phpには管理されたライブラリがあるようです。例えばMobile Detect。ライブラリがない場合には、基本的なモバイルとタブレットのユーザーエージェントを判別してそれ以外をPCとし、抽出漏れが分かり次第、更新していくことになると思います。Javaであればタブレット系をUserAgentで判別する などを参考にしました。

2、CSSによるレスポンシブ仕様

2、CSSによるレスポンシブ仕様は、用心するのであれば1、サーバサイドスクリプトによるコンテンツ出力の振分けによって判別洩れした「小さ過ぎるPC」「大きすぎるモバイル/タブレット」を含めてデザインすると良いと思います。こうすることで1、サーバサイドスクリプトによるコンテンツ出力の振分けの欠点を2、CSSによるレスポンシブ仕様で補完することができます。レスポンシブデザインの作り方は「レスポンシブデザイン 作り方」などで検索すると解説ページがたくさん出てきますが、これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方などを参考にしてみてはいかがでしょうか。

余談ですが、先日、モバイルファーストのレスポンシブデザインでは訴求力のあるPCページができないので、C、別々のURLでモバイルサイトを構築した方が良いとアドバイスされたことがありました。確かに、2、CSSによるレスポンシブ仕様だけのページをPCでみるとどうしても内容の少ないページになってしまいます。かと言って、これだけモバイルの普及した時代にモバイルに最適化されていないページを作ることは得策でないし、C、別々のURLでサイトを構築するのも管理がいかにも非効率です。そこで、効率的でモバイル対応もできたサイト運営を行うには1、サーバサイドスクリプトによるコンテンツ出力の振分けが必要になってきます。どのようなサイトを作るかによりますが、一からサーバサイドスクリプトでコンテンツを管理していくのは小さなサイトを作るには無駄があります。そこで、CMSの活用が以前にもまして増え、サイト作成の必須のツールになりつつあると感じています。

3、検索エンジン対策

3、検索エンジン対策は、C、別々のURLの場合には、タイトルにスマホ用などと入れたりすることでGoogleが勝手に検索結果を最適化してくれたりしていますが、少なくともLinkタグでの関連付けはしておいた方が良いと思います。できれば.htaccessやJavaScriptでもよいので転送を行い、転送をした場合にはHTTPヘッダーにVaryを設定することでGoogleのクローラーやプロキシサーバーがモバイルサイトとPCサイトを判別しやすくなるようです。Vary HTTPヘッダーの設定方法は、スマホ向け表示を分けているときはVary HTTPヘッダーを使うこと など10+4記事(海外&国内SEO情報)などを参考にしてください。B、動的な配信の場合もVary HTTPヘッダーを設定した方が良いとのことです。ちなみに、Googlebotを検出しての振り分けはご法度になります。

ワードプレス 立ち上げ時におすすめのプラグイン10選

ワードプレスで本サイトを立ち上げる時にインストールしたおすすめのプラグイン10個を紹介します。
分野はSEO、リンク切れチェック、URL設定、レスポンシブ広告、サイトマップ、プログラムコード表示、SSLに関連したプラグインです。

使い方

プラグインの入手、インストール方法も簡単で、メニューの「プラグイン」から「新規追加」ボタンを押し、検索して出てきた目的のプラグインの「今すぐインストール」ボタンを押せば完了です。メニューの「プラグイン」に戻り、インストールしたプラグインの「有効化」ボタンを押して使い始められます。

1.All In One SEO Pack

投稿の編集画面で、title,description,keywordsを編集することができるようになります。
その他にも、GoogleやBingのサービスと関連付けを行ったり、canonicalリンクタグを挿入してくれたりなど、色々な設定ができます。title,description,keywordsの挿入はどうすれば良いのか分からなかったときに、便利なプラグインでした。
注意点:トップページ(ホームページ)のtitle,description,keywordsの設定は、All In One SEO Packの一般設定画面で行います。Wordpressのフロントページの表示設定を固定ページにした場合、フロントページに選択したページで設定したtitle,description,keywordsは無視されてしまうようなので、ご注意ください。

2.Broken Link Checker

リンク切れ、リンクのアドレス間違いを検出してくれるプラグインです。投稿時、設定時間毎にリンク切れをチェックしてくれ、間違ったリンクには横線を入れてくれたりします。詳細な設定が可能でとても便利です。

3.Custom Permalinks

これがなければ、Wordpressはとても使いづらかったと思います。既存サイトからの移行時には必須のプラグインではないでしょうか。
既存のページをWordpressのページに移行する場合に、同一のURLへ移動させることができます。具体的には、固定ページ、投稿ページのパーマリンク(URL)を各ページごとに自由にカスタマイズすることができます。.htmlを付けることも可能です。
私の場合は、各デイレクトリのトップページのURLを/で終わらせたページで公開し、/index.htmlを.htaccessの設定で/へRewriteしています。
参照サイト:
index.html「あり・なし」のURL正規化 – 301リダイレクト応用編, 海外SEO情報ブログ, Kenichi Suzuki, 2008年11月13日

4.Google Adsense for Responsive Design – GARD

5.Wp-Insert

Wp-Insertは、広告コードを投稿の上中下右左に挿入することができます。
GARDは、大きさの異なる広告のコードを登録しておくと、(レスポンシブに)画面の大きさに合った広告を選択して表示してくれるプラグインです。簡単な挿入タグを書くだけで、挿入したい箇所に広告を配置することができます。
Wp-InsertにGARDの挿入タグを入れておけば、レスポンシブな広告が投稿の上中下右左に自動で挿入されるようになります。
参照サイト:
WordPressでGoogleアドセンス広告を超絶簡単にレスポンシブにして表示する方法。, ぱんにゃっと/H&Y, 2013年11月14日

6.Google XML Sitemaps

検索エンジン向けのサイトマップを作成してくれるプラグインです。検索エンジンにページの公開を即座に通知してくれたり、詳細な設定ができます。
注意点:サイト製作中に導入すると、未公開にしておきたいページまで検索エンジンに通知してしまうことがあるので、更新通知設定はまずオフにしておきましょう。

7.PS Auto Sitemap

こちらは、閲覧者向けのサイトマップページを自動生成してくれるプラグインです。十分な設定ができ、デザインも10種類ほどあります。

8.SyntaxHighlighter Evolved

プログラムコードを綺麗に表示してくれるプラグインです。codeタグだとタブが無視されてしまい困っていた時に良いプラグインを見つけました。
追記:半角スペース・改行などを表示するpreタグがありました。preタグは整形されたテキストをそのまま表示するための
htmlタグですが、内容もhtmlとして解釈されるのでコードをそのまま書くには問題があります。具体的には、「<」と「>」のhtmlエスケープが必要になり、面倒です。

9.WordPress HTTPS

以前、ワードプレスを触ってみた時に、ログイン画面がSSLでないことに驚いたことがありました。今回、ワードプレスを導入するにあたり、ログイン画面(と管理画面)をSSLにするために導入したプラグインです。
ユーザー閲覧画面をWAF(ウェブアプリケーションファイアウオール)で守り、ログイン画面(と管理画面)をSSLにしています。
注意点:「SSL Host」に間違ったURLを設定して管理画面に入れなくなりました。readme.txtに初期化の仕方が書いてあるので、リセットして設定し直すことができます。
参照サイト:
さくらのレンタルサーバーでWordPressを運用する時のWAFの設定と注意点, Gatespace’s Blog, 2013年7月25日

10.WP Multibyte Patch

初めからインストールされていたプラグインで、

WP Multibyte Patch は、本家版、日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインです。

と書いてあったので、インストールしました。そのせいか、今のところ文字化けなどの不具合は発見していません。

参考サイト:

WordPressの使い方, AdminWeb, Tatsuo Ikura, 2006-