WP初心者の為のインデックス開始前・要チェック項目&ガイダンス

WordPressサイトインデックス開始直前チェックガイド

ここまでのステップでWordPressの設定・SNSの設定などが終わり、ようやくWordPressのブログとしての体裁が整い、ブログが書き始められるかな?という状態になってきました。

晴れてインデックス開始・・・のその前に、ステップ中で触れてはいますが、やっていない事、改めて確認しておきたいことがいくつかあります。

最初からつまづいて、後で困らないための重要なチェック項目とその説明をまとめましたので、最後の仕上げにチェックしていきましょう。

各種ブラウザでの表示を確認する

browsers
IE(インターネットエクスプローラー)、Google Chrome、Firefox、safariなど複数のブラウザでPC、モバイルで正常に表示されているかどうか確認することを「クロスブラウザテスト」と言います。

普段使っているブラウザで正常に表示されていても、別のブラウザでは表示がぐったぐたといったことを避けるために行います。

まず、ブラウザの日本国内でのシェアを把握しておくことで、テストするべきブラウザを絞り込んでおきます。

以下のサイトによると、2016の上四半期のシェアは下のグラフのようになっているとのこと。

WebブラウザシェアランキングTOP10(日本国内・世界)

Webブラウザシェアランキング(2016年3月):日本国内

つまり、日本でできるだけ多くの人に、サイトをストレスなく見てもらいたいのであれば、以下のブラウザでページの表示が問題なく行われるかどうかを確認しておいた方が良いということです。

◆ PC

  • Internet Explorer 11.0、9.0
  • Edge 13
  • Google Chrome 48.0、49.0(現在の最新Ver.は50.0)
  • Firefox 44.0、45.0
  • Safari 9.x

◆ モバイル

  • Google Chrome(現在の最新Ver.は50.0)
  • Safari 9.x
  • Google Chrome for Android

テストするには、

  • インターネット上のクロスブラウザ・テストサイトを利用する
  • Google Chrome、Firefox、safariなどのモダンブラウザはダウンロードが出来るので、DLして確認する

となります。

以下、実際にクロスブラウザテストに使っている方法を紹介します。

クロスブラウザ・テストサイトを利用する

crossbrowsertesting.com」は気軽にチェックができるテストサイト。

E-MAILの登録(無料)が必要ですが、なんといっても使いやすくて軽いです。

Macが手元にないので、Mac表示のチェック用でもあります。

CrossBrowserTesting https://crossbrowsertesting.com/
crossbrowsertesting

経験上Chrome、Firefox、safariのモダンブラウザで、そのうちのどれかで表示がちゃんとしていれば、他のブラウザで表示がガッタガタになることはほぼないのですが、

Safariの場合のみ、ガッタガタ、ではないのですが、微妙に「ん?」ということがあるので、サクッとチェックできるこのサイトは重宝します。

◆ SafariとCSS
基本的に、WordPressのデフォルトテーマや、作者さんの管理が行き届いているテーマ(特にお試し用のテーマが無料配布されていて、もっと便利でリッチな有料バージョンがあるタイプ)は表示崩れが起こることはほぼほぼありません。

ただ、そういったテーマを使っていても、CSS設定をカスタマイズまたは変更した場合には、Safariだけ効かないCSSがいくつかあり、Safari以外のブラウザで表示確認できていてもiPhoneで見たら悲惨なことになっているということもあり得る、ということに注意が必要です。(^^ゞ

中でも背景:backgroundは比較的簡単に設定できるCSSでもありますが、Safariではposition等が効きません。高速化プラグインなどのCSS設定も含めて、CSS設定を変更した際にはSafariでの表示をチェックすることをおススメします。

モバイルテストの無料で使えるデバイスの種類がちょっと古め、確認できるサイト数が限定されているという点が残念・・有料版ならもっと確認できるブラウザ・サイト数を増やせます(^^ゞ

もっとたくさんのクロスブラウザテストをしたい、という場合には、以下のクロスブラウザテストに関する秀逸なまとめページが参考になります!

Webサイトのブラウザチェック方法まとめ 【クロスブラウザテスト】
http://chusho-it.net/post_crossbrowser.html

ご自分の環境にマッチしたテスト、作業項目にマッチしたテストが選べるので助かります!

モダンブラウザをダウンロードして確実に視認したい場合

確実に視認したい場合には、ブラウザをPCにダウンロードして表示確認します。

ダウンロード自体が面倒ですが、1回ダウンロードしてしまえばOKですからね(^^ゞ

IE以外の各種ブラウザのダウンロードして確認する場合のダウンロードリンクはこちら

Google Chrome、Firefox、safariは自動更新されるので、最新版で表示がOKならほぼ問題ないです。
※中には自動更新を拒否している方がいらっしゃいますので、100%ではありません(^^ゞ

さて、いつも特別扱いのIEについては以下の通り。

Internet Explorerの場合

IEのバージョン毎のチェックはIEのエミュレーション機能を使うか、以下のページでチェックできます。

IE NetRenderer
https://netrenderer.com/

PCでIEを使えるようにするには、使用しているOSによって異なります。

WindowsPC&IE

IEは、WindowsPCには最初から入っており、最近は自動的にWindowsアップデートの時にIEもバージョンアップされるので、最新版でないことの方が珍しいかとは思いますが、Windowsアップデートをしていない場合は最新バージョンではないかもしれません。

また、OSのWindowsのバージョンによって使用できるIEが異なります。

IEのダウンロードについてのページ

お使いのPCでダウンロードできる最上位のIEが自動的に表示されるので確認してみて下さい。

IEのエミュレーション機能を使って、以前のバージョンのチェック出来ます。

エミュレーション機能は以下の手順で使えます。

  1. ブラウザを表示
  2. F12キーを押す
  3. エミュレーションタブ
  4. ドキュメントモード変更(バージョンを変更)

旧バージョンはIE9までで良いと思いますが、その点については後述します。

Mac&IE

Macユーザーさんの場合は、以下のページが参考になるのでは?と思います。Mac持ってないんで、「違うぞ?」と思われたら教えていただけると助かります(^^ゞ

「MacでInternet Explorer 11を使用する簡単な方法」http://ottan.xyz/how-to-use-ie-mac-2848/

使用できるのはIE11のようですが、IEのエミュレーション機能を使用すれば以前のバージョンのチェックも出来るはずです。

IEの以前のバージョンをチェックする必要ってあるの?どのバージョンまで見ればいいの?

http://gs.statcounter.com/で過去1ヶ月のブラウザシェアを調べてみると、以下のようになります。
StatCounter-browser_version-JP-daily-20160417-20160516-bar
IE11ユーザーがまだ25%もいるという状況ですね。

MicrosoftはとうとうIEを見限り、Edgeへと舵を切りましたが、旧WindowsPCにプリインストールされていたIEから、わざわざインストールしてまでブラウザを変える必要性を感じない方も結構いらっしゃるようです^^;

さらに、グラフによれば、IE9のシェアは1.5%ほど。

サポートされている一番古いWindows OSはVistaで、このVistaのブラウザがIE9なので、そのためでしょう。

サイトのターゲットユーザーにもよりますが、インターネットエクスプローラーを使用するユーザーが多いと考えられるECサイトなどでは、IE11~IE9までは注意を払う必要があると思います。

◆ IE8について

IEはWindowsのバージョンによって使用できるバージョンが異なりますので、まだXPユーザーです、といった場合は、ちゃんとアップデートしていたとしてもIEのバージョンは8になりますが、

グラフを見る限り、さすがにIE8ユーザーはほぼいないようなので、考えなくてもいいと思います。

ちなみに、XPをまだ使用しているのは、サポートが終っていても、XPにあわせて作った社内専用プログラムなどのからみがあり、

プログラムがIEブラウザを利用するように設計されているので、バージョンアップするとプログラムが動かなくなる・・のでそのままにせざるをえない→XPを使いたい、といったことが考えられます。

この場合にXPをオンラインにしておくのはデンジャラスなので、IE8を検索で使う、ということもない → IE8でのチェックもしなくてもいいと考えられます。

さて、PC画面だけでなく、スマートフォンでの表示もエミュレーションだけではなく、実際に表示させてみた方が確実です。

出来ればiPhoneとアンドロイドの両方の確認をしておきたいものです。

WPでも相変わらずIEは頭痛の種
WordPressのデフォルトテーマの場合はもともと、たとえIE8でも正常に表示されるようになっているのですが、

デザインのカスタマイズでCSSを追加したり、プラグインの影響で表示崩れが起こる場合があります。

これは、旧バージョンのIEだけに通用しないCSSやjQueryがあるためで、他のブラウザではOKでも、旧バージョンのIEだけは表示崩れが発生!ということもよくある話です。

そして、表示崩れを発生させるのが、

  • ページ高速化に関わるプラグインだったり(jsが原因)
  • ユーザーエクスペリエンスを高めるためのデザインに関わるプラグインだったり(cssが原因)

てなこともよくある話で、「おいおい、どうしたらいいんだ!?」の素になるわけです。

むやみにプラグインを入れたくないなぁ・・と思う、その理由のひとつがこれです。

まだ旧バージョンのIEを使用しているユーザーが数%いるとはいえ、今年はじめにIE11へのアップグレード通知と、

昨年夏には他のモダンブラウザと同じようにWebページを表示する『Edge』が登場したことで、WEB制作者の悩みもこれからは減っていくのではないかという希望が出てきました(笑)

旧バージョンの Internet Explorer のサポート終了について

2016 年 1 月 12 日をもって、Internet Explorer は、その Windows にインストール可能な最新のバージョンのものしかサポートされなくなります。

マイクロソフト公式ブログ – 「最新の” Internet Explorer “をご利用ください」

これによりサポート対象となるバージョンの Internet Explorer は HTML5 が動作するものだけになりますので、Web コンテンツを作成する際にレガシーブラウザを意識する必要はなくなります。

-引用:「Edge と IE:まるっと理解する、Windows 10 に搭載される Web ブラウザーについて

とのことなのですが、「サポートされない?なにそれおいしいの?いや、まずいの?」という方もまだまだ多いので、

サポートを終了させて強制的にEdgeにバージョンアップさせる方向に持っていったからといって、「レガシーブラウザを意識する必要がなくなる」というのは楽観的過ぎると思いますし、

2017年4月11日まではVistaのサポートが続くことになっていますので、少なくともそれまではクロスブラウザチェックは続けざるを得ないような気もします(^^ゞ

表示崩れを発見して慌てて以下のようなタグをheader.phpに追記する必要もなくなる未来が早く来ることを願いたいものです^^;

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

htmlのソースコードを見て、titleタグ・h1タグ・descriptionメタタグが現在ある記事に適切に入っているかを確認する

WordPressには、SEO施策を簡単に実現できる様々なプラグインがありますが、適正に設定が行われ、機能を活用しなくては当然ですがhtmlに内容は反映されません。

titleタグ&h1タグ

例えば書籍に「吾輩は猫である」といったタイトルがあるように、ウェブページにも固有の「タイトル」が必要とされます。

他のウェブページとの識別や、端的に内容を表すものとして、また、インデックスされるデータとしても重要です。

WordPressの大概のテーマはデフォルトで、

投稿のタイトルを入力

titleタグ&h1タグ生成

という仕組みになっていますので、特に意識しなくても固定ページ、投稿記事においてはtitleタグとh1タグはタイトル欄に入力した時点でhtmlに反映されるようになっています。

後述する確認方法できちんとhtmlに生成されていることが確認できればOKです。

descriptionメタタグ

ページの概要を検索エンジンに知らせるための記述です。

検索結果下に表示されたり、されなかったりするので重要視する必要はないという意見もありますが、

  • キーワードにマッチしたディスクリプションなら検索結果に表示される
  • 重要キーワードを織り込ませることで、検索ユーザーにそのキーワードに関する記事だということを強く伝えられる

を考えると、この記述に手を抜いていてはせっかく検索上位に表示されてもクリック率が下がります。

逆説的ですが、手を抜いたdescriptionメタタグを書くくらいなら、書かずに検索エンジンにコンテンツから勝手に作ってもらうほうがマシです。

手を抜いていなくてもHTML上になかったら、検索エンジンに内容を拾ってもらえない → 検索結果に出ないので、ちゃんとHTML上に載っているかどうかをチェックします。

WordPressのdescriptionメタタグの生成の仕組み

大抵の場合、投稿記事の抜粋(excerpt)をdescriptionメタタグとして利用するので、抜粋(excerpt)≒descriptionメタタグととらえている方もおられるかもしれませんが、

抜粋(excerpt)は基本、WordPressのアーカイブページや検索結果ページに記事を一覧表示させた時に記事内容を端的に伝えるために表示させるためのものです。
抜粋の説明図解

descriptionメタタグとして使うのに抜粋(excerpt)が適しているので、自動でそのようになっているテーマもあり混同しがちですが、excerpt=descriptionメタタグではありません。

そのためプラグインを入れたり、phpファイルに追記してこんな感じで↓抜粋(excerpt)をdescriptionメタタグに転用するわけです。

例)<meta name=”description” content=”<?php echo $excerpt; ?>” />

このように転用するには、まず抜粋(excerpt)を出力させる必要があります。

それには、以下の2種類のステップのどちらかをします。

  • 投稿記事の導入部分をそのまま抜粋として使う → 導入部分の終わりにmoreタグ<!–more–>を挿入。
  • 抜粋欄に抜粋文を入力して、その文章を使う → 投稿時に抜粋欄に抜粋の入力が必要。

その上で抜粋(excerpt)をdescriptionメタタグとしてhtmlに生成させるために、プラグインで設定または、header.phpにdescriptionメタタグを生成するタグ(上記の例)を書き込みます。

プラグインで設定する場合でも、<!–more–>を挿入するか、抜粋欄に入力するかしないと個別のdesctriptionメタタグは出力されませんので、注意して下さい。

この『抜粋(excerpt)を生成→descriptionメタタグ』に転用の仕組みがわかっていれば、ソースコードにdescriptionメタタグが出てない!といった場合もどの時点でつまづいたのかがわかりやすいかと思いますので、参考にしてみて下さい。

htmlソースコードでtitleタグ・h1タグ・descriptionメタタグを確認するページ

titleタグ・h1タグ・descriptionメタタグがちゃんと生成されているかどうかを、htmlソースコードを確認するのは、インデックスさせる以下のページだけでOKです。

また、WordPressはCMSですので、以前のHTMLサイトのように全てのページを確認する必要はありません。

各ページの種類の1ページにタグが生成されているのが確認できれば、他のページも同様に生成されていると考えてOKです。

ただ、投稿記事のdescriptionメタタグは各ページそれぞれの内容に沿った記述をする必要があります。

プラグインなどで、抜粋欄に記述がない場合、デフォルトの記載を予め用意しておいて使用する設定があるものがありますが、その機能はむしろ使わないようにすべきです。

これは、抜粋を入力し忘れた際に、デフォルトの記載が複数のページで「重複」する事になるためです。

投稿時に抜粋欄に記述するのを忘れないように注意するのは、慣れれば当然のことですが、最初の頃はケアレスミスというものが発生しがちです。プラグインの設定を今一度確認しておくことをおすすめします。

◆ 投稿ページ
最も確認が必要なページです。
任意の投稿ページにtitleタグ・metaタグ・h1タグがきちんと出力されているか見ておきましょう。

◆ サイトトップページ
ブログページ(ホームアーカイブ)をトップにしている場合 → ブログのトップページ
任意の固定ページをサイトトップページにしている場合 → トップにした固定ページとブログのトップページ

◇ カテゴリページ

カテゴリーページはインデックスさせるさせないは意見が分かれるところです。

カテゴリページはもともとインデックスされるような作りになっていないことが多いので、カスタマイズが必要ですし、ブログ立ち上げ直後で記事数が少ない場合は、カテゴリページも貧弱なものです。

無料ブログシステムからレンサバ+独自ドメイン+WordPressに引越ししてきたブログサイトで最初から記事数が多い、といった場合はともかく、

ページとして認められる作りにまだなっていないうちや、内容の薄いページをインデックスさせるのは避けたほうが良いので、初期の記事数が少ないうちはインデックスはさせない方が良いと思います。

記事数が多くなればカテゴリページのコンテンツも充実しますので、それからインデックスさせるようにしても遅くありませんし、SEO的にも好ましいと思います。

HTMLソースコードの確認方法

では、ソースを確認してみましょう。

PCでHTMLソースを見る

確認したいページをブラウザに表示させ、ページのソースを表示させます。
※画像はChromeの場合。右クリックで表示させたメニューから「ページのソースを表示」をクリックします。
ページのソースを表示

◆ FireFoxの場合
右クリック → ”ページのソースを表示”

◆ Safari の場合
メニューのSafari → 環境設定をクリックして開く → 環境設定画面の詳細 → 「メニューバーに”開発”を表示」にチェック

開発ボタンがメニューに表示されるのでクリック → 「ページのソースを表示」

◆ IEの場合
右クリック → ソースの表示

HTMLソースが表示されますので、

  • Macなら「command」+「F」
  • Windowsなら「Control」+「F」

で検索欄を表示させます。

検索欄にtitle、h1と半角英数で入力すると、入力した単語の記述がハイライト表示になりますのでtitle、description、h1がどのように表示されているかをチェックしてみましょう。
ページ内の検索

以下のような感じで表示されます。

例)
◆ タイトルの場合
<title>タイトル | ブログタイトル</title>

◆ descriptionメタタグの場合
<meta name=”description” content=”moreタグまでの冒頭の文章または、抜粋欄の文章”>

◆ h1タグの場合
<h1>タイトル</h1>

スマホでHTMLを確認する方法

PCで確認できれば、スマホでHTMLを確認する必要はありませんが、

前述のクロスブラウザテストで、スマホでだけ何故か思ったとおりの表示になっていないといった場合、スマホでHTMLを確認したいという場合も有るかと思いましたので、参考までに。

◆ androidの場合

URL欄のURLの前にview-source:と入力する

例)http://example.com/ → view-source:http://example.com/

◆ iPhoneの場合

インデックスさせないページにnoindexメタタグが入っているかどうかを確認する

タグや年別、月別などのアーカイブページ、画像ページ、404ページ、固定ページで内容のない/少ない、お問い合わせページ等はnoindexメタタグを入れて、検索結果に表示させないようにした方がSEO上好ましいので、

SEO対策用プラグインで設定したり、タグをheader.phpに記述してあると思います。

これらもそれぞれのページに以下のような記述が、ちゃんと生成されているか一通り目を通して確認しておきましょう。

<meta name=”robots” content=”noindex,follow” />

パーマリンクは本当にそれで大丈夫?

実はパーマリンクで失敗した!と後になって叫ぶ人が後を絶ちません。

パーマリンクはカテゴリを含む、

example.com/category/postname/

が一時期SEOに良いと言われ主流でしたが、現在では

example.com/postname/

の方が後々困らずにすむという方向になっています。

サイト作成直後には思いもよらないことかもしれませんが、カテゴリ名をもっと特化したものにしたくなったり、キーワードの流行り廃りでカテゴリー名を変更したくなったりするものです。

例)

  • 人気スマホアプリ
    • → スケジュール管理アプリ
    • → メールアプリ
    • → 写真加工アプリ

パーマリンクにカテゴリ名が入っていて、カテゴリの変更を敢行した場合、

URLが変更になるため、SNSのカウントがゼロになるのはもちろん、

元のURLから現在へのURLへの、カテゴリ内の全記事分の301リダイレクトの設定をやらなくてはならなくなるので、作業がガッツリ増えます。

※カテゴリ名がパーマリンクに入っていない場合で、カテゴリページをインデックスさせている場合は、カテゴリページの301リダイレクトを行いますが、この場合はカテゴリページだけです。

カテゴリの変更をしない、という選択肢ももちろんありますが、検索されるために入れるのであれば、

トレンドでなくなった=検索されなくなったキーワードを入れておいても無意味かもしれません。

Googleはゆらぎも考慮に入れてくれるので、ページのコンテンツの質とボリュームが群を抜いてすばらしければ、検索キーワードから少しずれていても検索結果に表示させてくれますが、

コンテンツの質とボリュームがほぼ同じレベルで、キーワードがドンピシャリの他の記事が出てくれば、そちらが上位表示され、徐々に掲載順位は下げられていきます。

総合的に考えれば、パーマリンクはカテゴリ無しのポスト名(半角英数)にしておき、ポストタイトルにキーワードをいれる方がSEO的にも運営上の効率上にも最適だといえます。

パーマリンクの設定などについては、以下の記事を参考にしてみて下さい。

重要・WordPressの設定・パーマリンク設定

WordPressとプラグインはアップデート・有効化忘れ・設定ミスはないか?

WordPressのアップデートが頻繁に行われるのは、オープンソースであるが故のセキュリティ上の脆弱性をカバーするのが大きな理由のひとつです。

これにあわせて管理がきちっとされているプラグインであれば、プラグインもアップデートされます。

アップデートをせずに長く放置しておいてサイト乗っ取りなどの憂き目に会わないよう、公開後もこまめにアップデートにするようにしましょう。

※ただし、WordPressのアップデートはメジャーなアップデートとマイナーなアップデートがあり、メジャーなアップデートの場合はバージョン番号が大きく変わります。

例)バージョン4.4.3. → バージョン4.5

このような時には、テーマやプラグインのアップデートが追いつかず、不具合が出る場合もありますので、バージョン名が変わるような大きなバージョンアップの場合においてのみ、様子を見つつアップデートすることをおすすめします。

プラグインもサイト公開後に初めて必要になる、以下のようなものの有効化を忘れないようにしましょう。

  • PubSubHubbub
  • サイトマップ作成・発信用プラグイン

FacebookアプリケーションIDをLIVEにする

OGP設定の為のfacebookアプリケーションid(app-id)取得・fb-admins確認方法」で、FacebookのアプリケーションIDを取得し、サイトの準備が整ったら、LIVEにする、と記述しましたが、LIVEにする手順も上記ページに記載してありますので、LIVEにしておきましょう。

チェックしておきたいその他の項目

◆ お問い合わせフォームのテスト送信

テスト送信して、設定どおりお問い合わせが届くかを確認します。

◆ Broken Link Checkerプラグインなどでリンク切れがないことを確認

◆ SNSのボタンの設定、OGP設定などは問題ないか?

出来ればフォロワーさんがいない時間を見計らって、ボタンをクリックしてシェアがちゃんとできるかどうか、シェアした投稿が思い通りのものになっているかを確認します。

◆ サイト解析のためのGoogleアナリティクスの設定はOKか?

Googleアナリティクスを使うには、サイトの登録し、発行されるトラッキングコードをサイトに設定する必要があります。

プラグインを使わずにトラッキングコードを設定する方法については以下の記事をどうぞ。
ワードプレス子テーマへのユニバーサル・アナリティクスの設定方法

All in one SEOやyoastなどのSEO対策用プラグインを使用している場合には、トラッキングコードを入力するだけで設定が完了します。

トラッキングコードが2つページ内に表示されるようなことがあると、アクセス数が実際の数値の2倍に計算され、解析に支障が出ます。上の設定はどちらかだけでOKですのでご注意を。

また、設定後は前述の方法でソースコードを見て確認しておくことをおすすめします。

トラッキングコードを読み込むためのスクリプトが、新しいものにたま~に変更されることがあるので、直書きした場合は変更があったらスクリプトを書き換える必要があります。

プラグインの場合は、プラグインオーサーさんが対応してくれるのを待ち、プラグインが更新通知が来たらなるべく早くアップデートします。

もし、スクリプトが新しくなっているのにプラグインがあまりにも更新されない場合には、プラグインを変更することを検討した方が良いかもしれません。

ここまででOKでしたら、設定 → 表示設定 の「検索エンジンでの表示」の✔を外し、インデックスOKな状態にします。
検索エンジンでの表示

やれやれ・・お疲れ様でした(^^ゞ

ではでは、素敵なコンテンツを満載した、あなたのブログに出会えることを楽しみにしています(^^)

お役に立ちましたら、シェアなどしていただけると、うれしいです(≧▽≦)

Published:2016/06/03

Written by

コメントを残す