• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / 管理画面からSEOの設定ができるフィールドを追加する

管理画面からSEOの設定ができるフィールドを追加する

池田祐太郎 | 2018年6月11日 更新 | 2017年12月29日 公開

このサンプルコードはWordPress 4.1から有効になった「add_theme_support( ‘title-tag’ )」が有効になっている前提のコードとなります。設定方法はこちら

参考: タイトルタグ – WordPress Codex 日本語版

WordPressはよく「SEOに強い」と言われますが、果たしてそうでしょうか。
正しいHTML構造やheadタグへの必要タグの出力などは公式テーマや有料テーマを利用していれば、大体は対応しているはずです。
また、オリジナルテーマでも正しく記述ができていれば問題ないでしょう。

しかし、「利用するテーマがSEOフレンドリーに作られている」「SEOプラグインを利用してSEO対策をしている」「カスタマイズし、SEO項目を設定できるようにしている」という前提でない場合、SEOに強い状態とはいえないため対策が必要です。

  • 適切なtitleタグの出力
  • 個別のmeta descriptionの出力
  • 個別のmeta keywordsの出力
  • 重複ページ対策のためのno index処理が可能か

例えば、現在最新の公式テーマであるTwentySeventeenでは上記のような設定方法はないためプラグインもしくは独自カスタマイズによる対応が必要です。

前置きが長くなりましたが、プラグインを利用せずに各個別記事管理画面側からSEOの設定ができるようにする設定方法をご紹介します。
functions.phpのテンプレートファイルを修正する形となりますので、オリジナルテーマではない場合は子テーマを作成して編集することをおすすめします。

[WordPress]カスタマイズを始める前に覚えておきたい子テーマ機能と作成方法

目次

  • 1 管理画面へ追加される箇所
    • 1.1 タイトル設定 – titleタグ
    • 1.2 キーワード設定 – meta keywords
    • 1.3 説明文設定 – meta description
    • 1.4 検索結果から非表示- meta no index
  • 2 サンプルコード
    • 2.1 ソースコードはこんな感じになります
  • 3 注意点や補足
    • 3.1 カスタム投稿タイプの場合は要設定
    • 3.2 投稿ページの場合はサイト名を出力しない設定
    • 3.3 add_theme_support( ‘title-tag’ )が記載されていない場合の設定方法
  • 4 元サイトをご存知の方お知らせください

管理画面へ追加される箇所


今回の設定で投稿や固定ページ等にSEO入力項目が追加されます。
一つずつ見ていきましょう。

タイトル設定 – titleタグ


titleタグには通常であればタイトルに設定したものが反映されますが、「titleタグに別の文言を設定したい」「SEO用に個別に設定したい」というケースがあると思います。その際にこちらに設定すればtitleタグにのみ、反映されるようになります。
未設定時には各記事のタイトルに設定した文字列を表示します。

キーワード設定 – meta keywords


metaタグのkeywordsの設定項目となります。
こちらに入力した文字列が表示されるので、複数入力の場合は間のカンマは全角や読点(、)ではなく、半角のカンマ(,)で設定します。
とはいえ、metaキーワードはこの数年の流れから重要度は低いと見なされており、実際Googleはmeta keywordsを指標に入れていないようです。念のため入れる程度でいいかもしれません。実際現在はクライアントには「設定しなくてもOK。念のため重要なキーワード1つ程度いれておくと安心」というふうに伝えています。
未設定時には何も表示しません。

説明文設定 – meta description


SEOにおいて重要な項目であり、SEO担当者が大好きな(笑)、metaディスクリプションです。
実質、各記事を更新する際に必須入力項目でしょう。文字数はベストというのはありませんが、大体100-120文字程度がいいのではないのでしょうか。
変にキーワードを詰めすぎるのではなく、ユーザーからみてページの概要やまとめをわかりやすく書くようにします。
未設定時には本文の文字列を120文字切り出して表示します。

検索結果から非表示- meta no index


例えばECサイト等で同じ商品でカラーやサイズが違う場合などで複数登録する必要があると思います。または、別サイトで運用している記事と同じ記事を配信するため内容が同じになってしまうなど。
その場合は検索結果に表示されないように検索エンジンに伝える機能である「No index処理」を行います。
このチェックを有効にすると、metaタグのno index設定が吐き出されるようになります。
未設定時には何も表示しません。

サンプルコード

以下のコードをfunctions.phpに記載します。

/*
* 管理画面にオリジナルのSEOセッティングができるフィールドを追加(Title, Keywords, Description, noindex)※WordPress 4.1以降
*/
// カスタムフィールド追加
add_action(‘admin_menu’, ‘add_custom_fields’);
add_action(‘save_post’, ‘save_custom_fields’);function add_custom_fields() {
add_meta_box( ‘my_sectionid’, ‘SEO設定’, ‘my_custom_fields’, ‘page’);
add_meta_box( ‘my_sectionid’, ‘SEO設定’, ‘my_custom_fields’, ‘post’);
//add_meta_box( ‘my_sectionid’, ‘SEO設定’, ‘my_custom_fields’, ‘my-custom-type’); //カスタム投稿タイプを追加したらここに追加する
}function my_custom_fields() {
global $post;
$meta_title = get_post_meta($post->ID,’meta_title’,true);
$meta_keywords = get_post_meta($post->ID,’meta_keywords’,true);
$meta_description = get_post_meta($post->ID,’meta_description’,true);
$noindex = get_post_meta($post->ID,’noindex’,true);
if($noindex==1){ $noindex_c=”checked”;}
else{$noindex_c= “/”;}

echo ‘<div class=”pw_seo_custom”>’;
echo ‘<p class=”label”><label for=”pw_seo_title”>タイトル設定(title)</label>タイトルを個別に設定したい場合ここに入力します。タイトルとページ名が同じで問題ない場合は入力の必要はありません。<br>’;
echo ‘<input type=”text” name=”meta_title” value=”‘.esc_html($meta_title).'” size=”100%” id=”pw_seo_title” /></p>’;
echo ‘<p class=”label”><label for=”pw_seo_keywords”>キーワード設定(meta keywords)</label>設定したいキーワードをカンマ区切りで設定します。2〜5個程 (例:キーワード1, キーワード2, キーワード3)<br>’;
echo ‘<input type=”text” name=”meta_keywords” value=”‘.esc_html($meta_keywords).'” size=”100%” id=”pw_seo_keywords” /></p>’;
echo ‘<p class=”label”><label for=”pw_seo_description”>説明文設定(meta description)</label>このページの説明文を設定します。文字数は多くても100文字前後にします。<br>設定しない場合、最初の120文字を表示します<br>’;
echo ‘<textarea name=”meta_description” size=”100%” id=”pw_seo_description” cols=”80″ rows=”5″/>’.esc_html($meta_description).'</textarea></p>’;
echo ‘<p class=”label”><label for=”pw_seo_noindex”>検索結果に表示しない(noindex)</label>このページを検索結果に表示しないようにする場合チェックすることにより、metaタグに”no index”が追加されます。<br>質の低いコンテンツや、重複しているコンテンツの場合チェックすることをお勧めします。<br>’;
echo ‘<input type=”checkbox” name=”noindex” value=”1″ id=”pw_seo_noindex” ‘ . $noindex_c . ‘> <label for=”pw_seo_noindex”>検索結果から非表示</label></p>’;
echo ‘</div>’;
}

// カスタムフィールドの値を保存
function save_custom_fields( $post_id ) {
if(!empty($_POST[‘meta_title’]))
update_post_meta($post_id, ‘meta_title’, $_POST[‘meta_title’] );
else delete_post_meta($post_id, ‘meta_title’);

if(!empty($_POST[‘meta_keywords’]))
update_post_meta($post_id, ‘meta_keywords’, $_POST[‘meta_keywords’] );
else delete_post_meta($post_id, ‘meta_keywords’);

if(!empty($_POST[‘meta_description’]))
update_post_meta($post_id, ‘meta_description’, $_POST[‘meta_description’] );
else delete_post_meta($post_id, ‘meta_description’);

if(!empty($_POST[‘noindex’]))
update_post_meta($post_id, ‘noindex’, $_POST[‘noindex’] );
else delete_post_meta($post_id, ‘noindex’);
}

//titleタグに出力
function custom_title() {
echo ‘<title>’;
if (is_home()) {
bloginfo(‘name’);
echo ‘ | ‘;
bloginfo(‘description’);
} else {
$has_title = get_post_meta(get_the_ID(),’meta_title’,true);
$no_set_title = wp_title(”,false);
if(wp_title(”,false)) {
$no_set_title .= ‘ | ‘;
$no_set_title .= get_bloginfo(‘name’);
} ;
//投稿ページのみ、設定したタイトルのみを表示(サイト名は出力しない)
if (is_single()) { echo ($has_title) ? $has_title : $no_set_title; }
else { echo ($has_title) ? $has_title . ‘ | ‘ . get_bloginfo(‘name’) : $no_set_title; }
}
echo ‘</title>’ . “\n”;
}
remove_action( ‘wp_head’, ‘_wp_render_title_tag’, 1 );
add_action( ‘wp_head’, ‘custom_title’, 1 );

//keywordsを出力
function custom_keywords() {
$has_keywords = get_post_meta(get_the_ID(),’meta_keywords’,true);
echo ($has_keywords) ? ‘<meta name=”keywords” content=”‘.$has_keywords.'”>’.”\n” : ”;
}
add_action( ‘wp_head’, ‘custom_keywords’, 1);

//descriptionを出力
function custom_description() {
echo ‘<meta name=”description” content=”‘;
if (is_category()) {
$cat = get_the_category();
$cat = $cat[0];
$cat_id = $cat->cat_ID;
echo strip_tags(category_description($cat_id));
} else {
$has_description = get_post_meta(get_the_ID(),’meta_description’,true);
//get_post_content
$the_postid = get_the_ID();
$the_post_content = get_post($the_postid);
$content = $the_post_content-> post_content;
$content = str_replace(array(“\r\n”,”\r”,”\n”), ”, $content); //deleat nbsp
echo ($has_description) ? $has_description : mb_substr(strip_tags($content), 0, 120) . ‘…’;
}
echo ‘”>’.”\n”;
}
add_action( ‘wp_head’, ‘custom_description’, 1);

function custom_noindex() {
if( (get_post_meta(get_the_ID(),’noindex’,true)==1) || (is_archive()) ) {
echo ‘<meta name=”robots” content=”noindex”>’.”\n”;
}
}
add_action( ‘wp_head’, ‘custom_noindex’, 1);

少し長いですが・・・
必ずfunctions.phpはバックアップを取っておきましょう。

ソースコードはこんな感じになります

管理画面側から各項目を設定すると、設定した項目(titleタグ、metaタグkeywords、metaタグdescription、metaタグnoindex)が表示されるようになります。
表側にはこのように表示されます。

注意点や補足

以下、利用するにあたっての注意点です。

カスタム投稿タイプの場合は要設定

上記のコードは通常の「投稿」「固定ページ」は特に設定は不要ですが、カスタム投稿タイプを設定している場合は設定が必要です。

function add_custom_fields() {
  add_meta_box( 'my_sectionid', 'SEO設定', 'my_custom_fields', 'page');
  add_meta_box( 'my_sectionid', 'SEO設定', 'my_custom_fields', 'post');
  //add_meta_box( 'my_sectionid', 'SEO設定', 'my_custom_fields', 'my-custom-type'); //カスタム投稿タイプを追加したらここに追加する
}

この箇所のコメントアウトした部分を解除し、カスタム投稿タイプのスラッグ名を入力します。仮にカスタム投稿タイプ「お客様の声(スラッグ名:case」を作ったとします。
その場合は以下のような修正となります。

//add_meta_box( 'my_sectionid', 'SEO設定', 'my_custom_fields', 'my-custom-type'); //カスタム投稿タイプを追加したらここに追加する
↓
add_meta_box( 'my_sectionid', 'SEO設定', 'my_custom_fields', 'case');

また新しいカスタム投稿タイプを追加した場合は追加しないと表示されないため、同じように都度設定しましょう。

投稿ページの場合はサイト名を出力しない設定

これはサイトの運用ルールで変えてもらえればと思いますが、投稿文字数は大体30文字くらいが検索結果に表示される文字数目安になります。
そのため、サイト名まで出力されていると途切れてしまうため、投稿タイプのみサイト名を出力していません。
出力が必要な場合は以下のように修正します。

//投稿ページのみ、設定したタイトルのみを表示(サイト名は出力しない)
if (is_single()) { echo ($has_title) ? $has_title : $no_set_title; }
else { echo ($has_title) ? $has_title . ' | ' . get_bloginfo('name') : $no_set_title; }
↓
else { echo ($has_title) ? $has_title . ' | ' . get_bloginfo('name') : $no_set_title; }

add_theme_support( ‘title-tag’ )が記載されていない場合の設定方法

テーマの方で有効になっていない場合は、以下参考を元にfunctions.phpに追加してください。この関数が有効になっていると、titleタグをテンプレートファイル内に記述する必要がなくなります。

function setup_theme() {
  add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'setup_theme' );

参考: WordPress:add_theme_support( ‘title-tag’ ); 使用時にタイトルからキャッチフレーズを削除したりセパレータを変更する方法 | NxWorld

結構ソースコードのボリュームがありますね・・・
ご要望があればプラグインにしたいと思います。

元サイトをご存知の方お知らせください

最後に、今回のコードは、数年前にどなたかが公開していただいたサンプルコードを元に改修しています。
記事公開にあたって参考サイトとしてご紹介したかったのですが、検索してもでてきませんでした・・・
もし「このサイトでは?」など情報ありましたら、サイト内で紹介させていただきたいのでお知らせください。

メールコンサルティング
WordPress保守管理サービス

カテゴリTIPS 関連タグ:WordPressカスタマイズ

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

同一ページでMW WP Formのフォームを切り替える方法
2023年8月29日
タグ: WordPressカスタマイズ
カテゴリー: TIPS
WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
2022年1月27日
タグ: WordPressカスタマイズ
カテゴリー: WordPress
フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 2024-2025年末年始の営業のご案内
  • WordPressのプラグイン自動更新のロールバック機能が正しく動くのか確認してみた
  • 遅延読み込み開始させる画像を変更させるWordPressカスタマイズ
  • WordPressで特定の画像やアイキャッチ画像をlink rel=”preload”に設定する
  • WordPressのプラグインがどのくらい表示速度を重くさせるのか22個のプラグインで検証

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css DALL-E elementor gmail google workspace Gutenberg HTML iPhone jQuery Mac Photoshop php SEO SNS ssh SSL Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン セキュリティ ツール ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2025 high five create All rights reserved.