テクノロジー・動画・写真・デザインとか

SEOも含めてWordPressテーマを作成する前にチェックしておきたい事

ここのところWordpressのテーマを一から作成していたが、見た目にはあまり変わってないものの、見えない部分で色々といじってみた。

WordPressテーマ作成は外観のデザインはもちろん、SEOを考慮する必要もあるだろうし、スマートフォンの対応も必要だ。

そんなわけで、テーマを一から作成する際に参考にしたい内容や記事などを、まとめてみた。

WordPressのテーマを一から作成する理由

軽量化

小さなランキング要因として、Googleはページの表示スピードも影響していると言っている。

小さな要因だとしても、UXで体感的に遅いとブラウザバックしたくなる。
「Above the foldのコンテンツは1秒以下で表示させること」、モバイルサイトの高速化をGoogleが推奨 | 海外SEO情報ブログ

なので、不要な要素が多いデフォルトのWordPressのテーマではなく、一から作成することで軽量化を図った。

また、Wordpressは動的に動作するCMSだが、それはつまりDBに負担がかかるということ。
なので、ほんの少しでも軽減できるように静的に置換できるところは、可能な限り静的に書き換えた。

例えば下記の内容が考えられる。
・タイトル
・サイトのURL
・JSやCSSファイルの指定
・サイトデスクリプション
・メニュー
・etc

続きを読む


他の理由として、ソースの把握がしやすくなる、WordPressをより理解できるようになることが挙げられる。

SEO効果のあるWordpressテーマを作成するための考え

最近あまり投稿がないみたいだが、下記のリンクは5ヶ月で100万PVを達成した「バズ部」さんの記事だ。
テーマを作成する前に呼んでおきたい。
SEO効果抜群のWordpressテーマを作るために抑えておくべき7つの項目

脱プラグインによるメリット

プラグインによる不要な要素を増やさない

WordPressの魅力の一つは、様々な機能を簡単に追加できるプラグインがあるのだが、逆に追加し過ぎると不要な要素が増えて重くなる原因となる。

なので、なるべくプラグインを使用しない方向で作成した。

サイト移行が楽

それほど機会はないだろうが、脱プラグインのもう一つのメリットに、サイト移行が楽だということが挙げられる。
プラグインを有効化したり、設定をする必要がないから。

コーディングがしやすくなる

また、デザインやコーディング上、プラグインではやりにくい場合には、やはりプラグインを使用せずにカスタマイズするのがお薦めだ。

下記のサイトでは、プラグインなしの基本的なカスタマイズ機能についての紹介があるので参考にするといいだろう。
プラグインを使わずWordPressに9の機能をつける | Webクリエイターボックス

HTML5 BOILERPLATEのススメ

サイトを構築するためのひな形的なHTMLファイルとして、HTML5 BOILERPLATE(ボイラープレート)がある。
主な特徴としては以下が挙げられ、素早くサイトを構築できるということで、GoogleやMicrosoft、NIKEなども使用している。
・HTML 5に対応
・IE対応

BOILERPLATEの詳細については、こちら。
HTML5のサイトが素早く作れるフレームワーク「HTML5 Boilerplate」をちゃんと触ってみた – WEBCRE8.jp

HTML5 BOILERPLATE

http://html5boilerplate.com/

今回は、上記のBOILERPLATEを使ってデザインに沿ったHTMLファイルを完成させて、Wordpress化した。

上記のBOILERPLATEは、WordPress化されているものもあるが、やはり先ほど述べた理由から今回は見送っている。
おれはHTML5 Boilerplate(ボイラープレート)を使い始めるぞ!ジョジョーッ!! | WP-D

WordPress化のやり方

HTMLファイルのWordpres化については、Webクリエイターボックスさんの記事がシンプルで分かりやすい。
WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス

必須で入れておきたいnoindexのmetaタグ

先ほどの「バズ部」さんのサイトを見てもらうと分かるのだが、記事、カテゴリ、そして投稿者の記事一覧への主なリンクのみという、とてもシンブルな作りになっている。

Googleは過剰でスパム的なリンクを嫌う。
例えば、無駄にあるWordpressの年別、月別の一覧ページなどは、過剰なリンクとして捉えられ、アクセス減少の原因になる可能性がある。

なので、metaタグのnoindexを使って、それらのインデックスを拒否して検索結果に表示させないようにする。

下記コードをheader.phpに挿入することで、カテゴリ一覧ページ以外の、年別、月別、画像の個別ページ、投稿者ページ一覧をnoindexにすることで、無駄なリンクのインデックスを制御することができる。

noindexの詳細については、こちら。
“noindex,follow” robots metaタグを使うのはどんな時? | 海外SEO情報ブログ

パンくずもSEOの重要な要素

サイトをナビゲートするパンくずもSEOの重要な要素の一つで、検索結果の表示にも影響する。
Googleでは、パンくずを構造化データでマークアップすることが推奨されている。
リッチ スニペット – パンくずリスト – ウェブマスター ツール ヘルプ

サンプル。

レスポンシブデザイン対応

例えば、PCでは、www.example.comを表示させ、スマートフォン向けのページは、m.example.comへリダイレクトさせると、Googleの検索でランキングの下がる要因にも影響する。

詳しくは、こちらを参照。
Google ウェブマスター向け公式ブログ: スマートフォン向け検索でのランキングの変更について

そんなわけで、テーマ作成は端末によってレイアウトが変わるレスポンシブデザインがお薦め。
レスポンシブデザインのお勉強はこちら。
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

面倒なら、定番のWPtouchプラグインを使用するのもいいだろう。

テーマをスマホで確認するならTheme Test Driveは必須

これは以前に紹介したプラグインだが、運用中のサイトでも作成中のテーマの動作確認をすることができるプラグインだ。
特にスマートフォンでの確認で威力を発揮するのでお薦め。
WordPressテーマ作成に絶対お薦めなプラグインTheme Test Drive

スマホのみに表示させるためのUA判別

スマホ対応をしていると、どうしても端末判別を要する場面が出てきたりする。
Wordpress3.4から下記のコードを利用すると、簡単な記述でスマホのみの表示が簡単にできる。

ただし、wp_is_mobileは、タブレットもモバイルとして認識されてしまうので、気をつける必要がある。
もう少しカスタマイズしたい人は、下記の記事をチェックするといいだろう。
wp_is_mobileをカスタマイズ!タブレット端末にPC用コンテンツを表示させる関数を作った |ウェブシュフ

WordPressテーマ「Stinger」を参考にしてみる

最近、話題のSEOに強いWordPressテーマ「Stinger」を研究してみるのもいいだろう。
SEO対策に強い無料WordPressテーマ「Stinger」

中身を分析してみると、Web上で見かけることのできるソースをうまく組み合わせて作成しているようで、なるべくプラグインを使用せずに軽量化がなされている。

作者の本人曰く、魔法のテンプレートではない、良質な記事を積み重ねたブロガーの記事を最適化しているだけだと。
「PVが3倍に!」がなぜ起こるのか?WordPressテーマStinger2について作者が語るよ | ENJILOG

最後に

いくらSEOに強いWordPressのテーマを作成してもダメなわけで、良質のコンテンツありきであるということは、言うまでもない。

thumbnail credit

カテゴリ:WordPress