WordPressプラグインなしで記事毎にSEO対策をする方法。

先日、自作のWordPressテーマ「4536」を改良した時、プラグインを使わずにテーマ内でSEO対策ができる仕様にしました。

  • OGP設定
  • カノニカル設定
  • ページネーション最適化
  • 記事毎のSEO対策

など、SEOプラグインの主要機能をほぼほぼ実装したような形です。

その中でも特に頑張った実装したのが「記事毎にSEO対策をする」機能。

  • メタキーワード
  • メタディスクリプション
  • noindex
  • nofollow

の設定項目を追加したかったんですが、ぴったりの情報をネットで見つけることができず、なかなか苦労しました。。

ただ、苦労するのは僕で最後です。今回は僕が頑張って完成させたコードを公開しちゃいます。

2017/10/4クイック編集で公開・更新すると値が削除される不具合の修正

参考になったサイト

と、その前に。コードを書く上で、こちらの記事が大変参考になりました。

functions.phpにコピペ!

では、コードをご紹介します。下記のコードをfunctions.phpにコピペするだけでOKです。(関数化しているので、複数ページで使用することができます)

////////////////////////////////////
// 記事ページにカスタムフィールド追加
////////////////////////////////////
add_action('admin_menu', 'add_custom_fields');
function add_custom_fields() {
add_meta_box( 'seo_setting', 'SEO対策', 'seo_custom_fields', 'post', 'normal', 'high');
add_meta_box( 'seo_setting', 'SEO対策', 'seo_custom_fields', 'page', 'normal', 'high');
}

function seo_custom_fields() {
global $post;
$keywords = get_post_meta($post->ID,'keywords',true);
$description = get_post_meta($post->ID,'description',true);
$noindex = get_post_meta($post->ID,'noindex',true);
 if( $noindex == 1 ) {
 $noindex_check = "checked";
 } else {
 $noindex_check = "/";
 }
$nofollow = get_post_meta($post->ID,'nofollow',true);
 if( $nofollow == 1 ) {
 $nofollow_check = "checked";
 } else {
 $nofollow_check = "/";
 }

echo '<div style="margin:20px 0;">
 <span style="float:left;width:160px;margin-right:20px;">キーワード(コンマ区切り)</span>
 <input type="text" name="keywords" value="'.esc_html($keywords).'" size="60" />
 <div style="clear:both;"></div>
 </div>';

echo '<div style="margin:20px 0;">
 <span style="float:left;width:160px;margin-right:20px;">ページの説明(最大120文字ほど)※何も入力しない場合、先頭の120文字が自動で使われます。</span>
 <textarea name="description" id="description" cols="60" rows="4" />'.esc_html($description).'</textarea>
 <div style="clear:both;"></div>
 </div>';

echo '<div style="margin:20px 0;">
 <span style="float:left;width:160px;margin-right:20px;">NOINDEX(検索結果への表示をブロックします)</span>
 <input type="checkbox" name="noindex" value="1" ' . $noindex_check . '>
 <div style="clear:both;"></div>
 </div>';

echo '<div style="margin:20px 0;">
 <span style="float:left;width:160px;margin-right:20px;">NOFOLLOW(リンクを除外します)ほとんどの場合、チェックを入れる必要はありません。</span>
 <input type="checkbox" name="nofollow" value="1" ' . $nofollow_check . '>
 <div style="clear:both;"></div>
 </div>';
}

////////////////////////////////////
// カスタムフィールドの値を保存
////////////////////////////////////
add_action('save_post', 'save_custom_fields');

function save_custom_fields( $post_id ) {
if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
if(isset($_POST['action']) && $_POST['action'] == 'inline-save') return $post_id;
if(!empty($_POST['keywords']))
update_post_meta($post_id, 'keywords', $_POST['keywords'] );
else delete_post_meta($post_id, 'keywords');
if(!empty($_POST['description']))
update_post_meta($post_id, 'description', $_POST['description'] );
else delete_post_meta($post_id, 'description');
if(!empty($_POST['noindex']))
update_post_meta($post_id, 'noindex', $_POST['noindex'] );
else delete_post_meta($post_id, 'noindex');
if(!empty($_POST['nofollow']))
update_post_meta($post_id, 'nofollow', $_POST['nofollow'] );
else delete_post_meta($post_id, 'nofollow');
}

////////////////////////////////////
// ディスクリプション
////////////////////////////////////

//カスタムフィールドで設定したディスクリプション
function custom_description() {
 $description = get_post_meta(get_the_ID(), 'description', true);
 $description = strip_tags(str_replace(array("\r\n", "\r", "\n"), '', $description));//改行削除
 return mb_strimwidth($description, 0, 240, "...", "utf-8");//多すぎても意味がないので先頭の120文字を取得
}

//先頭の120文字をディスクリプションとして自動で取得
function auto_description() {
 $post_content = get_post(get_the_ID())->post_content;
 $post_content = esc_html(strip_tags(str_replace(array("\r\n", "\r", "\n"), '', $post_content)));
 return mb_strimwidth($post_content, 0, 240, "...", "utf-8");
}

//条件によって読み込むディスクリプションを変更
function description_switch() {
 if ( custom_description() ) {
 $description = custom_description();
 } else {
 $description = auto_description();
 }
 return $description;
}

//ディスクリプション設定
function description() {
if ( is_singular() ) { // 記事ページ
 $get_description = description_switch();
} elseif (is_category()) { // カテゴリーページ
 if (term_description()) { //カテゴリーの説明を入力している場合
 $get_description = term_description();
 } else { //カテゴリーの説明がない場合
 $get_description = single_cat_title('', false)."の記事一覧";
 }
} elseif (is_tag()) { // タグページ
 if (term_description()) { //タグの説明を入力している場合
 $get_description = term_description();
 } else { //タグの説明がない場合
 $get_description = single_tag_title('', false)."の記事一覧";
 }
} else { // その他ページ
 $get_description = get_bloginfo('description');
}
 return $get_description;
}

////////////////////////////////////
// 設定の反映
////////////////////////////////////
function custom_seo_meta() {
// カスタムフィールドの設定値の読み込み
$custom = get_post_custom();
if(!empty( $custom['keywords'][0])) {
 $keywords = $custom['keywords'][0];
}
if(!empty( $custom['noindex'][0])) {
 $noindex = $custom['noindex'][0];
}
if(!empty( $custom['nofollow'][0])) {
 $nofollow = $custom['nofollow'][0];
}

//noindexとnofollow設定
if ( $noindex && $nofollow ) { // 両方チェックしている場合
 echo '<meta name="robots" content="noindex,nofollow">';
} elseif ( $noindex && !$nofollow) { // noindexだけチェックしている場合
 echo '<meta name="robots" content="noindex,follow">';
} elseif ( $nofollow && !$noindex ) { // nofollowだけチェックしている場合
 echo '<meta name="robots" content="nofollow">';
}

//キーワードとディスクリプション設定
if ( is_singular() ) { // 記事ページ
 if (!empty($keywords)) echo '<meta name="keywords" content="'.$keywords.'">';
}
echo '<meta name="description" content="'.description().'">';

}

コピペ後は「カスタムフィールド」として設定項目が追加される

コードをコピペすると、投稿の編集画面に下記の設定項目が追加されます。

 

よく、

  1. 画面上の「カスタムフィールド」にチェックを入れる
  2. カスタムフィールドに〇〇という名前を入力する

みたなコードを紹介している記事もありますが、今回の方法だと、その作業がそもそも必要ありません。コードをコピペするだけですぐに使えます。

ファイルを読み込む

先ほどのコードで、設定値の読み込みを関数化しているので、後は読み込むファイル側に下記のコードを追加するだけでOKです。

<?php custom_seo_meta();?>

※今回はメタ情報なので、header.phpの中にある<head></head>の中に追加すればいいでしょう。

カスタムフィールドの入力欄に何も入力しない場合

ちなみに、何も入力しない場合、

  • メタキーワードのコードを出力しない
  • 記事の先頭120文字をディスクリプションとして設定
  • noindex、nofollowともにコードを出力しない

となります。キーワードやディスクリプションが入力されてないのに、

<meta name="keywords" content="">
<meta name="description" content="">

と、出力しても意味がありませんからね。オリジナルテーマにこの機能を実装するなら、必須の条件分岐でしょう。

まとめ

自分で言うのもなんですが、かなり使い勝手が良いコードになったと思います。

コピペするだけなので、脱プラグインをしたい方はぜひ使ってみてはいかがでしょうか?

以上、ご参考までに!(`・ω・´)ゞ

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!