みなさんWordpress使ってますか?便利ですよね。僕は大好きです。Wordpressはごく普通の人にも広まり、自分のサイトやブログを作るならをWordpress一択!みたいな時代になりました。
そもそもですね、Wordpress(以下WP)はSEOに強い作りになっているので特別な事はしなくて良いんです。SEOに強い作りってどういうことかと言うと、ヘッダー・フッターなど明確にパーツ分けが行われており、タイトルタグが適切でmeta情報にも検索向けにきちんとタグが書かれています。これはデフォルトのテーマの話です。ぐちゃぐちゃにいじった場合は不適切な構成になるかもしれません。
SEOって言葉を知ったら色々勉強しちゃいますよね?沢山の資料を読んでいると思います。色々疑問点があると思いますが、知っていれば良いSEOを紹介します。1サイトで月間300万PVを叩き出している僕のノウハウです。
なおページの最後にガチのSEO対策を記載します。これは知識がある人向けです。
WPのSEOは上げられるのか?
上げられます。それも簡単に。
一言で言えば「高速で良い記事のボリュームがある」サイトを作ればOKです。
例えば何千万も使ってブラックSEOを行ったり、あらゆるSEOサイトを調べまくって少テクニックを駆使する…なんて必要はありません。All in One SEOなどのSEOプラグインを入れる必要もありません。
アクセス数が伸びない場合は単純に競合が強い、もしくはそもそも需要が少ないだけかもしれません。
WPのSEOを上げる方法
1:キャッシュプラグインを入れる
これが8割方のSEOが終わりです。びっくりですね!
キャッシュとはウェブサイトを見ているブラウザに画像などのデータを一時的に保存されることです。次見た時に流用するので高速で表示できます。WPがデフォルトの状態だと画像やCSS、JS辺りは何となくキャッシュされますがページそのものはキャッシュされません。キャッシュプラグインを入れると物理的なページを生成してくれるので全てキャッシュ化される状態になります。
難しいことは知らなくていいです。キャッシュプラグインをとりあえず入れておけば良いんです。
2:ページ内の見出しリンクをつける
↑こういうやつですね。
これはWPのプラグインで自動的に見出しを抽出してリンクを作ってもらっています。このたぐいはいくつかあるのですが、僕は「Table of Contents Plus」をずっと愛用しています。
これを入れているとGoogleの検索ページの項目ににリンクが作られたり、重要ワードとして参考にされます。
3:プラグイン Google XML Sitemapsを入れる
グーグルにサイトのページリストを登録します。無くても良いんですが、あれば早く登録されます。
4:プラグイン WebSub/PubSubHubbubを入れる
爆速でグーグルに登録されます。
5:軽量化して高速化する
サイトが高速で表示されるのはSEOで非常に重要です。1のキャッシュプラグインも高速化のために入れます。
サイトを構成している要素の中で表示速度に影響しているのは主に下記です。
- 画像
- スタイルシート
- Javascript
- HTMLタグの数(DIVを数万個とか置くとカクつく)
- SQL
- サーバーそのものの性能
「あいうえお」などの文字数はプログラム的には一瞬なので長文でも影響は無いです(小説1冊分とか極端でない限り)。知識があれば極限までダイエットが可能なのですが、一般の方が簡単にいじれるは「画像」と「Javascript」と「サーバーそのものの性能」になるかと思います。
画像のダイエット
デザインを崩さないギリギリまで小さい画像を投稿するようにしましょう。横が640px〜800px辺りであればスマホ表示でもそこそこ綺麗に見れます。WPのデフォルトの設定がそもそも小さい画像を作る様になっているので、変にいじっていなければ気にしなくても大丈夫だと思います。
また、無駄な画像は貼らないようにしましょう。おもしろ記事なんかでやたらに外人のキレイな写真などが貼られたりしていますがSEOにはむしろ邪魔です。そういうブームがあったのは事実ですが、今は訪れたユーザーがイラッとしている要素です。
Javascriptのダイエット
スライドなど動きのあるプラグインを入れていたら削除します。プラグインを多く入れたらサイトが重くなる…なんて話がありますが、Javascriptが沢山増えるから表示が遅くなるんです。Javascript/CSSを使ってなくてSQLに接続しないプラグインならどれだけ入れようとサイトはそれほど重くなりません。特別に必要がないプラグインがあれば削除しましょう。
もしランキング系のプラグインがあったら絶対に消してください。あれはやばいです。
サーバーそのものの性能
同じページでもサーバーが違うと表示速度に差が出てきます。無料サーバーなどは速度制限があり、かつ広告が表示されたりするので非常に遅いです。ごく一般的に有名なWP特化のサーバーを利用していれば問題ないでしょう。
ロリポップやお名前ドットコム辺りはオススメできません。ロリポップは単純に遅く、お名前ドットコムは使いにくいです。その他に格安をうたっているところは絶対にやめましょう。
オススメするサーバーはConoHa WING です。普通の共有サーバーなのですがWPに特化していて、サーバー設定など色々やりやすいです。何よりWP管理画面が爆速になるので記事編集のストレスがかなり解消されます!
大事なのは格安じゃない1社に絞ること。そこそこ利用料金が高くても1サーバー内で複数ドメインを登録できます。サイトを複数ぐちゃぐちゃに管理するのは避けましょう。
6:モバイルフレンドリー
スマホやタブレットで見やすいサイトにします。通信が電話回線なのでページ容量が軽いこともモバイルフレンドリーに含まれています。メニュー関連を見やすくしたり、ボタン系を押しやすくすることも評価の対象になっています。
基本的にモバイルに対応しているテーマばかりなのでそんなに気にしなくてもいいでしょう。ただ、テーマを選ぶ際にモバイル表示のデザインで決めるのをオススメします。今はユーザーの7〜8割がスマホからサイトを見ています。
7:タイトルを記事内容にそったものにする
例えば日記系のブログを書くとします。タイトル「12月3日 めっちゃきつかった」という記事を公開したとします。おそらく1PVも稼げないでしょう。
これがもし、タイトル「外泊した妻を追跡!浮気現場を抑え、弁護士呼びました」と書くとどうでしょう。<妻><浮気><弁護士>というワードが入っているのでそのワードで検索ヒットする可能性があります。
つまり、タイトルに書いていない事は検索に100%引っかからないと思ったほうが良いです。もし競合するサイトが無ければ「あああ」ってタイトルでも株の記事が検索に表示されますが、今は絶対に同じような記事をすでに書かれているので適当なタイトルだと誰にも見られません。
すでに自分のサイトに訪れている人に対して別記事に誘導をさせる場合には、また違ったタイトル付けの考え方をしなければなりません。例えばカボチャについて詳細の記事を書いたとします。その記事にたどり着いた人が文末にオススメのカボチャ料理」というリンクがあれば見に行くでしょう。検索へ引っかかるようにするのであれば「お酒に合う!秋カボチャの格安お手軽煮込み料理」なんて書けばニーズに合った人が訪れるでしょう。
8:記事の内容を頑張る
500文字〜1000文字は絶対に書く必要があります。500文字以下ならば検索エンジンに登録されないように対策しなければサイト評価が下がります。文字数の少ないコンテンツ力のないページは確実に評価が下がります。
適当に文字を埋めれば・・・という訳にも行きません。「あああああ」なんて書いたら検索エンジンに無視されます。同じ文章を書いても無視され文字数が少ないと判断されます。
ではどうするのか…言い回しを変えます。
その記事の中で伝えたい重要なことを3回くらい書き方を変えて掲載します。きちんと説明するとかなり長文になるので割愛しますが、「検索エンジンは所詮プログラム」であるということを覚えておいてください。「田中さんと遊びに行った」と「一緒に遊んだのは田中」だと別の文章みなされます。検索エンジンは日々賢くなっているのである程度は通用しない場面もありますが、現状は日本の文章を理解していません。
9:1サイト1テーマにする
何でも取り扱う雑記ブログは検索順位があがりません。そのサイトが何のサイトなのか評価されカテゴライズされます。お肉の記事ばかり書いていればお肉のサイトになります。そんなサイトで野菜を紹介しても検索に引っかからないでしょう。
雑記ブログだと色々なカテゴリーに点数が分けられるイメージで考えてください。お肉のサイトなら100点取れるけど、野菜の記事を書いてしまうとお肉の点数が90点くらいに減るイメージです。
雑記ブログでもアクセス数が多い人はいますが、それは必ずアクセスの多い偏ったカテゴリーがあるはずです。
以上がやるべきSEO対策です
まとめるとキャッシュ系プラグインを一つ入れて、特定ジャンルに特化し、タイトルに気をつけつつ記事の文字数をちゃんと書けよってだけです。
ここからシステム面からのガチSEO書きます。
ガチSEO
- サーバー/クラウドサーバー
- AMP化
- ドメイン力
- SSL、正規化
- WPのいらない読み込みを消す
- meta
- HTMLタグ
- CSS/Javascript
- 読み込みファイル
- 画像の扱い:imgタグの書き方、スプライト
大体上記の事を考えなくてはなりません。SEOで最も重要なことは記事の内容です。
サーバー/クラウドサーバー
サイトそのものは通常のレンタルサーバーでOKです。なるべくWPに特化したサーバーをレンタルします。例えばXserverならWP用に高速化するサーバー設定があるのでオンにするだけで処理が早くなったりキャッシュが作られます。
クラウドサーバーへは基本的にページは置かず、画像やCSSなどの読み込みファイルを置くことでサイトが爆速化します。ただしアクセスが増えるほどにお金がかかるので一般向けではありません。
AMP化
天下のGoogle様が推奨している「モバイルフレンドリー」の施策です。簡単に言ったら専用のキャッシュ化されたページを表示させます。WPをAMP化するのは色々と対策が必要になってきます。一応ワンクリックでAMP対応しますよ〜的な機能がありますが、何かしら表示に問題が出ます。
AMPじゃないから検索に引っかからないという事はないので「お好みで」って言うのが現状です。個人的にAMP化されたページは閲覧しにくいのでどうしても読みたい記事でない限り僕はそのサイトを訪れません。爆速だしトラフィックのエコだなぁとは思います。
ドメイン力
このブログで言えば「pecoegg.com」のパワーです。ドメインの力は実際にあります。ドメインの力が大きいサイトからリンクを張ってもらえば、その力をもらえるし、逆に弱いドメインからはマイナスの力をもらいます。
基本的に長期間有益な記事を更新し続けることでドメインの評価が得られていきます。サーバーは関係なく「○○.○○」という組み合わせの評価がデータベース化されています。そのためサーバーを変えても検索順位が下がることはありません。(引っ越しの瞬間にサイトが消えて検索から一時的に消えることはあります)
ドメインに力があるということは、すでに実績のあるドメインを購入してサイトを作れば初めからアクセスが見込めるということになります。評価の高いドメインはかなり高額で取引されていますが効果はお墨付きです。
じゃあ中古のドメインを買えばいいの?って簡単にはいきません。これから運用するサイトと同じ内容だったドメインでないと時間が立つにつれてドメイン力が減少していきます。
瞬間的にアクセスを稼ぎたいときは何でもいいので中古ドメインを購入して運用する。長期的にしっかりと運用したい場合は新規のドメインを取得して運用したほうが良いでしょう。
もし、ドメイン名、そして使われていたサイトの内容がバッチリ合うのであれば中古ドメインは非常にお薦めです。
SSL、正規化
数年前からSSLが必須になりました。SSL化するとhttp→httpsのアドレスに変更されます。SSLは何かというと暗号通信化です。フォームなどに入力した情報が暗号化された状態で届け先に送られます。
昔はフォームだけSSLにしてたりしましたが(意味わかんないよね)、全ページSSL化にしましょうというのが現状です。最近はSSLを無料でできるので費用は気にしなくていいです。有料と無料の安全性の違いは特にないです。
そして重要なのは正規化です。これは「ページのアドレスは一個にしとけよ」といった意味になります。例えばレンタルサーバーを借りたら<ユーザーID.com>と<独自ドメイン.com>のどちらでもアクセスできる場合があります。httpとhttpsのどちらでも同じページにアクセスできますし、Wordpressだったら次のページが=pageとか付いてページが分割されたりします。
アクセスできるURLが違っても同じページに行ける場合、どれが本当のURLなのか記載しないといけません。それが正規化です。正規化しない場合、それぞれのURLに評価が分散されます。
URLを正規化するには2パターンのやり方があります。一つはGoogle Search Consoleで設定。もう一つはHTMLのhead内で<link rel=”canonical” href=”正規ページURL”>を記述します。Google Search Consoleではドメイン本体の設定を。canonicalは各ページに記載します。
今はレスポンシブが主流ですが、サイトに寄ってはPCとスマホでアドレスが違ったりしています。そういったサイトはcanonicalでどちらのURLが正しいのか記述することでページのSEO評価が統合されます。
WPのいらない読み込みを消す
WPはデフォルトでJavascriptのJqueryを読み込んでいます。またこれが普通のJqueryと違うので自作のJqueryを使おうとするとバッティングします。その他にもいらないようなmeta情報など記載されるのでfunctionsで消します。
動かなくなるプラグインが出てくるかもしれませんが読み込みを消すとページ速度の点数が数点上昇します。
meta
正規化の内容と被りますがHTMLのhead内に記述するmeta情報をしっかり書くのが重要です。canonicalで正規化を指定しないとSEO評価が分散されるなんてことになります。
そうそうないですが<title>タグはちゃんと書かれているか。charsetなどの記述方法が間違っていないか。そういったHTMLの基本的なことはちゃんと書いておきましょう。
また、head内の記述にある外部ファイルは真っ先に読み込まれます。これがページ表示速度に影響するのでjQueryだけHTML下部へ記述させたりなどの対処方もあります。
HTMLタグ
まず基本としてタグが増えるほどにページ表示速度が遅くなります。DIVの中にDIVを繰り返し入れ子にしてタグを組んでいきますが、これらのタグは全てページを開いた瞬間に検索にかけられます。一つ一つを処理していくのでタグが多いほど表示が遅くなるわけです。
ウェブページはHTMLタグをCSSで制御して見た目を変更していますが、この時CSSに書かれたプロパティを反映させるためにHTMLタグのIDやClassも検索されます。
ウェブページが表示されるまでにCSSの記述とHTMLタグの存在をブワーッと処理するわけですが、ここに高速化のコツがあります。
IDやClassを書くとページ表示が早くなる
考えてみて下さい。100個の名無しDIVと、そのうちの数個にClass名が書かれたDIVの中から画像を探す場合はどちらが早そうか。Class名だけを探したほうが早いですよね?
IDやClassを書くとCSSのプロパティは指定された箇所から探します。特定のAタグの文字を買えたい場合はCSSに「#main ul.menu li.__item a.link」と長ったらしいですがきちんと書きます。「#main ul.menu li.__item a.link」と書くと、a.linkを探す>li.__itemを探す>ul.menuを探す>#mainを探す…という動きになります。
あまりにも長い場合はルールを設けて短縮させますが、重要なのは指定したいタグには必ずID/Classをつけるということです。上記の例で言えば「色を変えたいAタグにClass名をつける」ということです。もし「#main ul.menu li.__item a」と書いた場合は、まずページ内の全てのAタグを検索されてしまいます。
こう書くともちろんCSSファイルが肥大化し、それはそれで低速化します。ある程度はやりすぎない気持ちを持つことが重要です。
余談ですがClass指定よりID指定の方が早いようです。しかし全てのタグを#で制御するのはアホっぽいので親タグはIDを書くなどのルールを決めましょう。
HTML内やタグに直接CSSやJavascriptを書かない
head内に<style>.apple{color:red}</style>や<div style=”color:red”>といった記述は絶対にやめましょう。ウェブページのレンダリング回数が単純に増えるのでかなり遅くなります。
CSS/Javascript
絶対条件として外部ファイルに記載します。CSSならstyle.css、Javascriptならcommon.jsなどファイルを作ってから読み込みます。そうすることでブラウザに一時ファイルとして保存されます。これをキャッシュ化と言います。キャッシュ化されたら通信という工程を挟まないので外部ファイルは一瞬で処理されます。
次に重要なのはファイルの中から別ファイルを読まないこと。例えばCSSなら@importで別のCSSを読み込めますよね。昔良く使われていた利用方法ですが、これはキャッシュ化されないので禁止しましょう。
@importを使うくらいならHTMLでファイルを複数読み込んだほうがマシです。
できればつのファイルに全て記載するようにサイトを作るのが大事です。
WPの場合はプラグインの関係で複数のCSSやJavascriptを読み込む状況になりやすいので注意が必要です。なんならfunctionsで消すくらいの気持ちが必要です。
読み込みファイル
ページを遅くしている主な原因はCSSやJavascriptなどのファイルの読み込みです。ブラウザによって一度に読み込めるファイルの数が決まってたりします。各ブラウザの読み込み数が今はどうなってるか知りませんが、昔はIEが同時3個、Chromeが5個とかそんな感じだったと思います。
例えばCSSの読み込みを10個していたとしましょう。すると3〜5個のCSSを読み込んでー…次のCSSを読み込んでー…と段階的に画面を表示します。CSSが10個というのは非現実的ですが、Javascriptと画像も含まれるので余裕で10個以上の読み込みを行ってしまいますね。どんなに高速な回線を使っていても同時に読み込める数は増やせません。
では、対策はどうするのか…
- headにではCSSの読み込みだけ
- Javascriptはフッターで読み込む
- 画像のタグにwidthとheightを必ず記載する(理由は後で記載)
こうすると画面表示が爆速になります。ページ全体の読み込み完了はさほど変わらないのですが、まずCSSでページの主なレイアウトと装飾が表示されるのでユーザーからすると読み込みが終わったように感じられます。
少し経ってからスライドなどが動き出し、画像が少しづつ表示されるといった具合です。Javascriptをフッターに移動するプラグインがあったりするので探してみてください。
※注意点:Jqueryの中にはスクリプトが先に読み込まれないと正常に動かないものがあったりします
圧縮する
CSS、JavascriptはZIP化できます。画像は圧縮とはちょっと違うのですがオプティマイズできます。CSS、JavascriptをZIP化することで10分の1などファイル容量が減るので体感で解るくらい高速化されます。画像のオプティマイズは不要なmeta情報などを消すツールを使うことでかなりダイエットが可能です。PNGは特に軽量化します。方法はググってください。難しくは無いです。ただ手間があるだけ。キャッシュプラグインで自動的にZIP化するのはあった気がします。WP以外は手動です(もしかしたらレンタルサーバー側でやってくれるところがあるかも?)。
画像の扱い:imgタグの書き方、スプライト
画像をふんだんに使っているサイトは画像タグの取り扱いに注意しましょう。画像はページ内で最も容量が大きい外部ファイルです。可能なら画像のみクラウドサーバーに置くなどの対策をしましょう。
imgタグ
実はimgタグの書き方で表示の挙動が変わります。<img src=”apple.jpg”>と<img width=”100″ heigh=”100″ src=”apple.jpg”>ではページの表示速度が大きく変わります。
どういうことかと言うと、widthとheightを書いておくと、その大きさ分の領域を確保しつつ画像は無視してテキストとCSSを読み込みます。サイズを書いていない画像が100個あると引っかかる感じでページが表示されますが、サイズを書いていれば100個の画像スペースだけ作ってページ全体がとりあえず表示されます。凄くないですか?昔、大量の画像で色々検証してて見つけたのですが画像の大きさを記述しているだけでページ表示が早くなるんです。
レスポンシブの場合は画像サイズが可変されるのでwidth=”1280″なんて書いてても大きさ変わってしまうやん!と思うかもしれません。まあ、その通りなのですが、とりあえず書けば画像は無視して他の表示を進めます。
ECサイトなどは画像がメインなのでとりあえずタグにサイズをちゃんと記述しておきましょう!
スプライトを活用する
先述に一度に読み込めるファイル数が決まっていると言いましたが、画像はスプライト化することで1回の読み込みで済ませることができます。基本的にビジュアル的な画像はそのままで、メニュー関連やアイコンなどに使用している画像は1枚の画像に並べて作り、CSSで部分的に読み込みます。
アイコン系は容量が小さいのでそのものは素早くダウンロード完了できるのですが、なにせ数が多いと読み込みの度につまずくのでタイムロスになります。小さくて繰り返しよく使う画像は1枚にまとめることでキャッシュ化されページ表示がスムーズになります。
最後に
かなり長文になりましたがSEOで最も重要なことがあります。
それは「人のためになる記事」を沢山書くこと。多くの人が知りたいことをわかりやすく伝えることが一番のSEOです。
小手先だけのSEOを頑張る時間があるのなら一つでも多く記事を書き、ライティング力を鍛え、そして自身のブランド力を上げてファンを獲得しましょう。
まあ、それが一番むずかしいんですけどね!
コメント