WordPressサイトのSEO プラグインや子テーマによるテンプレート改造

WordPressサイトのSEO プラグインや子テーマ

ロングテールSEOは検索キーワードのコーディング次第。レスポンシブ対応では棲まないスマホユーザー最適化。WordPressサイトはプラグインや子テーマでテンプレートを改造

WordPressのSEOとインターネットビジネス

WordPressサイトでECサイトを運営していることを想定。
アフィリエイトサイトやアダルトサイトなども含む。

SEOとしては、狙いのキーワードで上位表示されること、とくに外部リンクを作為しない(できない)2語や3語の検索ワードのロングテールで成果を上げたい。

また、スマートフォンが隆盛となっているので、まずはレスポンシブWebデザインが求められる。もちろん、スマホ表示最適化、さらにはスマホユーザー最適化である。

それをメインテーマに、WordPressのECサイトとして、SEOとレスポンシブのWordPressプラグインを紹介し、WordPressテンプレート(テーマ)の改造も、書き残したことを述べておく。

繰り返し警告しておくが、ソースを見て、ナビゲーション箇所がコンテンツ箇所の上にあるものは、内部対策のSEOとして不利である。
内部リンクの1番目のアンカーテキストが、ナビゲーション用の短い端折ったテキストになりがちで、検索キーワードとして設定しにくいからである。

こてこてのソースを吐き出すページをメタボにするプラグインも、使わないほうが無難である。
さらに、この無駄なソースに無頓着な人は、SEOに向いていないかもしれない…

スポンサーリンク

コンテンツは当たり前、とにかく検索ワードのコーディングを

2語や3語の検索ワードのロングテールSEOで、外部リンクが期待できないとなると、キーワードのコーディング次第となる。

SEO塾のノウハウとしては、検索ワードをできるかぎり見出しタグに入れることである。
そして、コンテンツ箇所では、これでもかっというようなスパムっぽいキーワード埋め込みをひかえる。
もっとも無難で効果的な場所は、ヘッダー箇所である。

ヘッダー箇所で、タイトルをh1に入れている。
SEO塾/アルゴリズム社のSEOテンプレートでは、最初からそうなっているのだが、他社製のテーマでも、テーマを改造してそのように設定すると、とくにロングテール検索では順位アップがかなり期待できるようになる。

抜粋やサムネイルにも工夫を施している。
また、HTML5では、セクション要素も使い道がある。
これは、テーマそのものもカスタマイズしている。
(テーマは、それぞれ独自仕様なので、テーマのつくり方をよく調査する)

結局は、検索ワードのコーディングで、とくにロングテールのSEOの決定力に近づく。

検索キーワードのコーディングはSEOモジュール

お気づきかもしれないが、最近ブログの投稿が多いのだが、テンプレートを改造して(じつはサイトオープン時の改造から修正前に戻している箇所もある)、SEOの効果を測定している。

上のh1などなどは、SEO塾のモジュールであり、HTML5仕様を取り入れて、ロングテール検索では外部リンクなしで20位以内に入ることが多いことを確認している。

繰り返すが、やはり検索キーワードのSEOコーディングこそが、モジュールこそが、上位表示の決定力となる。

レスポンシブだけではない、スマホユーザー最適化

パソコン版のWebサイトを、スマホでも見えるようにする、レスポンシブのテーマを導入するというだけでなく、最初からスマホで確認しながらつくることが必要だろう。

傾向としては、テキストだけ、やたら長い、そういったページは敬遠されがちである。
画像を多用すること、また指でタップできる分かりやすい大きめのナビゲーションを心がける。

ビジネスサイトとしては、AdSenseなどはタップされたら完了だからいいのだが、ECサイトでは住所氏名など入力するものが多くて面倒臭いようだと、離脱されてコンバージョンもなにもなくなる。

メールアドレスだけの問合せ受付や、直接電話をかけてもらうように、ハードルを下げておくべきである。

Googleが、スマホ検索でモバイルファーストを「指導(アドバイス)」しているが、パソコン版のWebサイトの運営が染みついていると、衰退ないし滅亡しかねないので、ご注意を。

省テキストにして、多画像、サムネイルもWebページの看板にもなり、SNS投稿ではクリック率が高くなる。

スマートフォンは既存ビジネスの破壊者? パソコン版サイト運営はレジェンドかレトロか

スマホで見えるWebサイトではなく、スマホユーザーという人間にとって違和感がない、そういった最適化が要求される。

とにかく、スマホ検索経由でも、FacebookやTwitterやInstagramなどのSNS経由でも、Webサイトがスマホユーザー最適化されていなければ、どうしようもない。

どちらかといえば、スマートフォンは、従来型パソコンベースのインターネットビジネスを破壊しつつある…
つまり、レジェンドではなく、レトロになりそうだ。

WordPressのSEOの方向性

WordPressによるECサイトづくり(アフィリエイトなども)、SEOやアクセスアップ、サイト内遷移(ナビゲーション)とページビュー増、レスポンシブWebデザインやスマホユーザー最適化などをメインテーマとして、まずプラグインをリストしておく。

WordPressプラグインを一部紹介

All in One SEO PackSimple TagsWP-PageNaviGoogle XML Sitemaps などの有名プラグインはあらためてリストすることもないだろう。

SEO/アクセスアップ/ナビゲーションなど

もちろん、SEOに役に立ちそうなプラグインを入れたからといっても、すぐに順位アップするわけではないが…

Single Post Templateは、投稿ページのテンプレートが個別に変更できるようになる。
固定ページは、デフォルトで可能であるが…

Table of Contents Plusは、ある意味で、見出しのテキストが二度書きになっていてSEOに効果あり、それよりもなによりも、目次によってコンテンツの内容を概観でき、ユーザー利便性が高くなる。
(なお、Max Mega Menuなど、fixedでメニューバーを固定したときに、ジャンプ先のテキストがメニューに隠されてしまう不都合があるので、その改善策は後述

Custom widgetsは、ウィジェットごとに、表示するページを指定できる、すばらしいプラグイン。
AdSenseなど、数を調整するときにも、トップページや続くホーム、カテゴリー、タグ、個別記事投稿ページなど、大くくりできるし、個別にも設定できる。

YARPPは、YARPPカスタマイズ WordPress関連記事サムネイル/アイキャッチ(横長)と画像設定 を参照していただければ。

Fix Duplicatesは、タイトルが重複している投稿ページを抽出。一気に新しい(投稿IDが大きいほう)を削除してくれるし、個別に選んで削除することもできる。
重複コンテンツ防止としてありがたいプラグイン。

WP External Linksは、外部リンクに「rel="nofollow"」や「target="_blank"」を設定する嬉しいプラグイン。
ドメインやURLで、除外することもできる。
(巨大アフィリエイトサイトをお手伝いしたときに、活用)

レスポンシブWebデザイン/画像およびサムネイル/アイキャッチ

スマホユーザーには、とくに画像関連で注意をはらう必要がある。

Max Mega Menuは、レスポンシブのメインメニューを実現。
テーマによっては使えないときもあるので、Responsive Menuが代替。

そのほかは、スマホサイトで重要な、画像とサムネイル/アイキャッチ関連である。

WordPressの弱点などを補う

上の4つは、好みも分かれるかもしれないが、
1番目は、固定ページやタグなどのURLのお尻に「/」を付加するもの。
2~4番目は、「ドメイン/category/カテゴリー」となるWordPressの嫌なURLを改善するもので、どれかひとつ具合がいいものを使えばいいだろう。

下の3つは、コンテンツをCSV形式で、エクスポートしたり、インポートしたりできる。
WP CSV Exporterは、ほぼReally Simple CSV Importerと連携できる。後者は、重複を排除し、かつ投稿IDが一致したものは上書きになるので、嬉しくてたまらない。

WP All Importは、テンプレートを使って(つくって)、自分仕様でCSVをインポートできる。
また、設定次第で重複投稿を防ぐこともできるし、インポートのCSVを指定して投稿を削除することもできる。

ちなみに、CSVのインポートはUTF-8なので、Excelは弱い。
LibreOffice を、強くお勧めする。Shift_JISもUTF-8で保存し直しもできる。

ともかくCSV管理では、手元でサイトのコンテンツのすべてを俯瞰できて、修正して、投稿を上書きしたり、追加したり、超便利である。

使わなくなったWordPressプラグイン

更新が滞っていたり、代替の方法が見つかったプラグインを、できるだけ使わない、また削除するようにしている。

Export to Textは、CSVでインポートする前にエクスポートする定番プラグインだが、WP CSV Exporterをお勧めしたい。

テーマファイルではなく、記事の中にphpを埋め込みたいときがあるが、プラグインではなくショートコードで処理することが、今のトレンド。
PHP Code Widgetは、更新もにぶい。

なぜか、固定ページには抜粋欄がないが、PJW Page Excerptがやっていることを、functions.phpで代替できる。

Simple Custom CSSも、テーマのデフォルトCSSとは別に追加するものだが、子テーマのstyle.cssで代替。

最初から使えなかったプラグイン

つい先ほど(2017-01-03 16:30くらい)、ソースやコードの表示を少しクールに見えるように変更した。

じつは、使いたかったのは次のプラグイン。

ところが、解説ページと違って日本語にならないわ、貼り付けても有効にならないわ、検索すると重いと評判が悪すぎるわ、使うのを諦めた。

最終的に導入したのは

色づけはかなりの種類があって、下記ページで好きなStylesを参照して選ぶ。

実際のコーディングは、次のように「code」にclass(css、html、phpなどなど)をつける。

<pre><code class="css">
ごにょごにょ
</code></pre>

classがつけにくいものは、なしでいいようだ。

横スクロールバーの設定

先ほどまでは、ただの「code」タグを使っていたので、右いっぱいになると折り返して表示されていた。

しかし、WP Code Highlight.js では右が切れてしまう。

パソコン用のブラウザーは親切に、横スクロールバーを出してくれるのだが、iOSのSafariは唯我独尊である。
ソースのところを指で左右に動かさなければならない。
(そんなことは、ほとんど誰も気づかないと思う…)

そこで、またCSS

~ code { overflow-x: auto; }
~ code::-webkit-scrollbar { height:8px; }
~ code::-webkit-scrollbar-track { border-radius:8px; background:rgba(238,238,238,1); }
~ code::-webkit-scrollbar-thumb { border-radius:8px; background:rgba(169,170,161,1); }

これで、横に長そうなコードの箇所を選んでセレクタを設定しなくても、短いものはそのまま、長いものだけスクロールバーが出るようになる。

ちなみに、今後はRGBaが主流になりそうなので、新しいCSSではRGBaを採用するようにしている。

カラーピッカーでは、色取鳥iに10年以上もお世話になっている。
未だに、これをしのぐソフトには出会っていない…

スポイトでカラーを取得し、プログラミングメニューのところから、「g.getColorOfRGB」を書き出し、RGBa書式に修正する。
手放せないツールである。

画像ディレクトリーを「wp-content/uploads」から変更

画像ディレクトリーは、WordPress内の深い階層に設定されていて、書き出されるURLも長くなりがちである。年月ベースに設定していると、さらに鬱陶しい。
これを変更したいと思うときもある。

そのときに、030 Ps Display Upload_path For WP3.5などがあるが、「~/wp-admin/options.php」のページを開いてスクロールさせると、次の項目が見つかる。

  • upload_path
  • upload_url_path

SEO塾.comサイトの例では次のようになっている。

upload_pathは、WordPressをルート直下のディレクトリーにインストールしている場合は「../images」になるが、ディレクトリーをつくらずにルートにインストールしている場合は「images」となる。
もちろん、ディレクトリー名は「images」以外でもかまわない。

一度この設定をすると、WordPressの管理画面、設定→メディアに「ファイルアップロード」という項目が表示される。

次に変更したいときは、ここで変更すれば反映される。

じつは、030 Ps Display Upload_path For WP3.5 は、上記のようにメディアの箇所に画像のディレクトリーを設定できるようにするものだ。
options.phpを表示させなくても、いきなり画像ディレクトリーを変更できる。またそのあとにプラグインを削除しても、メディアでの画像ディレクトリーの上記画面は消えない。

WordPressのプラグインを探すとき

なにかのWordPressのプラグインを探すとき、検索することが多いと思うが、ほとんど同じものが出てくることが多い。
しかも、使い方を詳しく解説しているページはありがたいが、ただWordPressのプラグインの場所にリンクしているだけのページも多い。

最近見つけた下記ページは、網羅されている量が半端ではない。お勧めである。

スポンサーリンク

WordPressのSEOと子テーマによるテンプレート改造

次は、WordPressによるECサイトづくりで、同じようにSEOやアクセスアップ、サイト内遷移(ナビゲーション)とページビュー増、レスポンシブWebデザインやスマホユーザー最適化などがメインテーマで、WordPressテンプレート(テーマ)の改造を解説する。

WordPressはかならず子テーマを

とにかく、検索キーワードをコーディングしなければならないので、十分ではないテーマを使っているときは、テンプレートを改造するべきである。

その際は、かならず子テーマをつくり、本体からコピペしてそれを修正加工する。

以下に、子テーマのstyle.cssfunctions.phpで設定するカスタマイズ案を記載しておく。

fixedなどの改善策

画面両端いっぱいのメニューバーを、「fixed」で固定すると、ページ内ナビゲーションで着地点のテキストがメニューで隠される。

メニューバーの適切なセレクタ { position:fixed; top:0; width: 100%; z-index: 10000; }

メニューバーは、該当するセレクタで、fixedを設定。

そして、CSSやJQueryなどで、対応できるようだが、当サイトの場合はCSSの下記のみで改善。

適切なセレクタ span {
padding-top: 65px !important;
margin-top: -65px !important;
} 

Table of Contents Plusが、見出しタグ内のテキストをspanでマークアップしてidをつけているので、それをmarginで下げてpaddingで上げて、うまくいったようだ。
ちなみに、メニューの高さは40pxだが、それ以上に動かして着地した見出しテキストが見やすいようにしている。

ちなみに、はまりやすいのは「!important」。
セレクタも、刻むというか細かくピンポイントに近いかたちで指定する必要があるが、強制上書きというか「!important」をつけるとよく効くことが多い(笑)

style.cssに記述。

Max Mega Menuの裏技

WordPressのテーマ、テンプレートでは、呼び名はいろいろだろうが、メインメニューは「グローバルナビゲーション」であり、最上部に表示されるのは「プライマリナビゲーション」あるいは「ヘッダーナビゲーション」などと称されている。

メニュー関係のプラグインは、テーマが設定しているメインメニュー、主にグローバルナビゲーションで機能する。

このサイトで使っているSEO×WPレスポンシブでは、最上部がプライマリ、ヘッダー下部がグローバルになるので、メニュープラグインはあえてプライマリを指定している。

ところで、Max Mega Menuは複数のメニューセット(menu theme)をつくることができるので、プライマリのほうは上部固定、グローバルのほうはサイドバーに、設置している(笑)
とにかく、サイドバーにアコーディオンメニューが欲しかった。
なおMax Mega Menuは、メニューバーはテーマ次第だが、サイドバーなどにも置きたい場合は、WordPress側で好きにメニューをつくり、それを指定することも可能である。

ほんとうは、クールなアコーディオンメニューを置きたいところだが、またプラグインやJQueryや、いろいろなソースいじりやら、面倒臭くてかなわないので、使い回しで楽をした次第。

つまり、ベストではなくても、ベターで済ますことにした。

固定ページに抜粋を表示

検索キーワードをコーディングしなければならない。
固定ページの抜粋も、meta description以外、本文で活用する意味があるので、functions.phpに下記を記述する。

 add_action( 'init', 'my_add_excerpts_to_pages' );
function my_add_excerpts_to_pages() {
add_post_type_support( 'page', 'excerpt' );
}

functions.phpに記述。

RSSフィードにサムネイル/アイキャッチ画像を表示させる

念のため、フィードにもサムネイルが表示されるようにして、アクセスアップを期待したい。

function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<p>' . get_the_post_thumbnail($post->ID,'medium') .
'</p>' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail')

functions.phpに記述。

サイト内検索で特定ページを除外

サイト内検索で、Googleと連携する方法もありだが、広告が表示されたり、コンテンツ以外のヘッダー・フッター・サイドバー、あるいはプラグインなどによる追加の記述など、余計なものも検索対象になるので、ユーザー側からは使えない。

やはり、WordPressデフォルトのサイト内検索が、ユーザー利便性が高いと言えるだろう。

しかし、廃止商材のページや、削除はしていないが閲覧はされないほうがいいページもある。

 function fb_search_filter($query) {
if ( !$query->is_admin && $query->is_search)
{
$query->set('post__not_in', array(記事ID) );
}
return $query;
}
add_filter('pre_get_posts', 'fb_search_filter');

functions.phpに記述。

WordPressの無駄な記述を削除

「DNSプリフェッチ」は、Google発祥のウェブページ読み込みが速くなるという都市伝説のようなもので、いろいろ試したが効果はないようなもの。
よって、WordPressが吐き出す余計なソースなので削除。

add_filter( 'wp_resource_hints', 'remove_dns_prefetch', 10, 2 );
function remove_dns_prefetch( $hints, $relation_type ) {
if ( 'dns-prefetch' === $relation_type ) {
return array_diff( wp_dependencies_unique_hosts(), $hints );
}
return $hints;
}

また、「絵文字」も趣味道楽、使う必要がないサイトでは、つまらないソース(scriptとcss)を掻き出さないように設定するといいだろう。

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles', 10 );

なお、テーマによっては、これらが最初から無効になっているか、設定で無効化できるものも多いので、最初に確認しておこう。

functions.phpに記述。

WordPressテーマ phpファイルのコメントアウト

子テーマによるWordPressテーマ、phpファイルを修正加工することによって、テーマ本体の更新などによるカスタマイズ全滅の危機をまぬかれることができる。

ただし、テーマ本体でコーディングがかなり変更されることもあるので、やはり元ファイルをもう一度修正加工することもある。

そのときに、肝心の修正加工、あるいは追加ソースなど、後日分かりやすくするためにコメントを入れておきべきだ。

<!--波紋用-->
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ; ?>/waves.min.css" />

リンクをクリックすると波紋が広がる、そのCSSを読み込む記録である。

コメントアウトは、通常は「<!–コメント–>」のように書く。
しかし、このコメントアウトのテキストは、ブラウザーには表示されないが、ソースを見るとしっかり残っている。

それを避けたい。

コメントを活かしながら、ソース表示でも書き出されない。
そのコーディングは、こうなる。

<?php /*?>波紋用<?php */?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ; ?>/waves.min.css" />

<?php /*?>コメント<?php */?>

Dreamweaverの場合は、コメントアウトを補助してくれる。
右クリック、あるいはコーディング・ツールバーで。

上図が右クリック、下図がコーディング・ツールバー。

Dreamweaverでは、もちろんコメントアウトの削除は、右クリックにもコーディング・ツールバーにもあるので、作業が楽である。

子テーマのphpファイルに記述。

WordPress投稿日付の変更 現在の日時へ

このSEOブログのトップを開くと、iOSのCSSハックのページが最新となっている(今はおそらく2番目)。
並び順を決めるほんとうの公開日時は「2015年7月24日 @ 15:23:」であり、今は「公開日時: 2017年1月4日 @ 15:39」となっている。

このページも、やはり偽装してみよう。

おかしなボタンがついているが、とにかく「公開日時: 2017年1月3日 @ 00:16」ということである。

JavaScriptを読み込んで、その読み込み設定を子テーマのfunctions.phpにfunctionを追加すると現在の日時のボタンが現れ、それを押すとたった今の日時が一端セットされる。

OKを押して更新すると、現在の日時に変更されて、ブログトップなどアーカイブページでは最初に表示されるわけだ。

ところで、肝心のJavaScript(timestamp-set.js)は他の方がおつくりになったもの、しかも今はいくら探しても配付元が見つからない。

かなり時間をかけて検索して見つけたのが、おそらく最初の配布元のJavaScriptをベースにプラグイン化して公開している下記ページである。

ここからゲットして、新規プラグインとしてインストールすれば、おそらくこのプラグインのディレクトリーに、「js」フォルダごとJavaScriptがインストールされて、読み込み設定はfunctions.phpに書き込まれると思う。

うまくいかないときや、子テーマで管理したい場合は、子テーマのディレクトリーに「js」フォルダをつくり、timestamp-set.jsをそこにアップロードする。

子テーマのfunctions.phpには、次のように記述する。

function my_scripts(){
wp_enqueue_script('my-admin-script', get_bloginfo('stylesheet_directory') . '/js/timestamp-set.js', array('jquery'), false, true);
}
add_action('admin_print_scripts', 'my_scripts');

では、このページも現在の日付で更新しよう。

SEOテンプレート×WordPressテーマ

SEO×WPレスポンシブ(イーティーネット社開発、SEO塾/アルゴリズム社販売)は、サイト全体でコラム数などが決定される。

他社テンプレートでは、トップページ、固定ページ、投稿ページで、コラム数を設定できるものが多い。

ところがじつは、SEO×WPレスポンシブは簡単に固定ページでも投稿ページでも、1コラム・2コラム(右や左のサイドバー)、3コラム(左右または右2つのサイドバー)に設定が可能である。

Single Post Templateで、投稿ページが個別にテンプレートを変更できるようにして、このサイトのブログでは、通常は2コラムのサイドバーありだが、コンテンツボリュームが少なくてサイドバーが長々しく感じるものは1コラムにしてサイドバーを表示させていない。

しかも、2コラムテンプレートでも、途中で2コラムを終了して1コラムを復活させている。
最大の目的は、YARPPのサムネイルつき関連記事の並びで、右側が空いて不細工になるのを阻止するためである。

本物のSEOテンプレート

WordPressテーマ、テンプレートを選ぶときのポイントは、もっとも需要が多いのは自分ができるだけなにもしなくていいものだろう。
ただし、なにかをやろうとするとき、テンプレートの仕様がお節介で邪魔をするときがある。

SEO×WPレスポンシブは、そのままでは素っ気なく、デザイン的にもの足らないと思われがちだが、生命線にも等しいヘッダー箇所では、SEOコーディングもデザインも、テーマ設定画面からピクセル単位で指定できる、本物のSEOテンプレートになっている。

また、ピンポイントで、デザインパーツの色や画像を設定できるので、やる気さえあればクールなWebサイトができあがる。

そのように、ユーザーがやりたいことを邪魔しない、カスタマイズは自由自在とも言える、すぐれたテンプレートになっている。

カテゴリートップやタグトップ

カテゴリーやタグは、単に傘下ページのリンク集にならない、独自のコーディング、テキストやHTMLソースが上部と下部に追加可能となっており、ECサイトがブログに成り下がることもない。

しかも、このカテゴリー・タグの上部下部の追加コンテンツは、最初のページだけに表示させる設定も可能。

さらにカテゴリーとタグは、WordPress内のカテゴリー名やタグ名に対して、Webとしてのtitleを別途設定できるので、WordPress内では簡略なネーミング、検索用にはキーワードを十分に含ませたSEO効果を発揮できる。

とにかく、ECサイトでは、一般的にはカテゴリートップやタグトップがビジネスの重要ページになる。

WordPressサイトの沙汰もCSS次第!?

WordPressでECサイトを運営するには、まずWordPressの仕様に限定される。
次は、選んだテーマ、テンプレートである。

そして、Web標準という昔からの流れから、構造はHTML、見栄えはCSSということで、最終的にはCSS次第と言える。

このCSS次第と言っても、テーマ本体のCSSにも制約されるので、ドツボにはまると無間地獄で苛まれることもある。

そして、結局は、WordPressも必要なことだけでなく余計なことを加えて肥大化し、プラグイン頼りでさらにメタボ化し、CSSに堪能でなければこれも長大になりかねない。

最後の決め手は、売上につながるホームページであり、SEOも手段、スマホユーザー最適化が最高目標となるだろう。

スポンサーリンク