WEBサイト制作

ショッピングサイト制作

システム開発

コンテンツ制作

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

wordpressでdescription、keywordをページごとに設定する方法

2021年06月14日

投稿者: アンディ

今回はWordPressでプラグインを使わずにページごとにdescription、keywordsを設定する方法のご紹介です。

プラグインを導入すると簡単に設定できますが、カスタマイズ性の低さや、サイトが重くなってしまう原因になったり、アップデート時に不具合が生じたりします。そのためなるべくプラグインは使用せずサイトを構築することを目指すのがよいかと思います。

サイトの検索順位を上げるために重要とされているのが「TDK」と呼ばれる要素です。

TDKとはそれぞれ、title(タイトル)、description(ディスクリプション)、keyword(キーワード)の頭文字をとった略語です。

この三つの要素はWEBサイトの表示やSEOにおいて重要な役割があります。正しく設定することで、検索順位向上に繋がります。

管理画面よりページごとに設定する方法

functions.phpにコードを追加

functions.phpにカスタムフィールドを追加するコードを追記します。下記のコードをそのままコピペしてください。

※functions.phpを触る前には必ずバックアップをとりましょう。

// functions.phpに追加
add_action('admin_menu', 'add_custom_fields');
add_action('save_post', 'save_custom_fields');
 
// 記事ページと固定ページでカスタムフィールドを表示
function add_custom_fields() {
  add_meta_box( 'my_sectionid', 'メタ設定', 'my_custom_fields', 'post');
  add_meta_box( 'my_sectionid', 'メタ設定', 'my_custom_fields', 'page');
}
 
function my_custom_fields() {
  global $post;
  $keywords = get_post_meta($post->ID,'keywords',true);
  $description = get_post_meta($post->ID,'description',true);
   
  echo '<p>キーワード(半角カンマ区切り)<br>';
  echo '<input type="text" name="keywords" value="'.esc_html($keywords).'" size="60"></p>';
   
  echo '<p>ページの説明(description)160文字以内<br>';
  echo '<input type="text" style="width: 600px;height: 40px;" name="description" value="'.esc_html($description).'" maxlength="160"></p>';
}
 
// カスタムフィールドの値を保存
function save_custom_fields( $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');
}
 
function page_description() {
 
// カスタムフィールドの値を読み込む
$custom = get_post_custom();
if(!empty( $custom['keywords'][0])) {
  $keywords = $custom['keywords'][0];
}
if(!empty( $custom['description'][0])) {
  $description = $custom['description'][0];
}
?>
  <?php if(is_home()): // トップページ ?>
  <meta name="robots" content="index, follow">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <?php elseif(is_single()): // 記事ページ ?>
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="<?php echo $keywords ?>">
  <meta name="description" content="<?php echo $description ?>">
  <?php elseif(is_page()): // 固定ページ ?>
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="<?php echo $keywords ?>">
  <meta name="description" content="<?php echo $description ?>">
  <?php elseif (is_category()): // カテゴリーページ ?>
  <meta name="robots" content="index, follow" />
  <meta name="description" content="<?php single_cat_title(); ?>の記事一覧">
  <?php elseif (is_tag()): // タグページ ?>
  <meta name="robots" content="noindex, follow" />
  <meta name="description" content="<?php single_tag_title("", true); ?>の記事一覧">
  <?php elseif(is_404()): // 404ページ ?>
  <meta name="robots" content="noindex, follow">
  <title><?php echo 'お探しのページが見つかりませんでした'; ?></title>
  <?php else: // その他ページ ?>
  <meta name="robots" content="noindex, follow">
  <?php endif; ?>
  <?php
}

管理画面よりdescription と keywordを入力する

上記コードを追加すると管理画面の固定ページや投稿ページに入力項目が追加されます。

表示されない場合は、右上の表示オプションより該当のカスタムフィールドにチェックを入れると追加されます。

この入力項目へ追加されたものをそれぞれページのdescription, keywordとして設定されます。

headに表示させるコードを追加

header.php 内の title タグ下あたりに下記タグを入れます。

<?php page_description(); ?>

このタグの位置に description と keywords が表示されます。

これでdescritpionとkeywordの設定は完了です。

header.phpで表示させる

header.phpでページごとに設定することも可能なので併せてご紹介します。

固定ページ別や、投稿の種類別のdescription と keywords設定もheder.php内で完結します。

<?php /*トップページ home▼*/
if(is_page('home')): ?>
<title><?php the_title(); ?></title>
<meta name="description" content="ページの説明(description)160文字以内" />
<meta name="keywords" content="キーワード(半角カンマ区切り)">

<?php /*固定ページ serviceは任意のページ*/
elseif(is_page('service')): ?>
<title><?php the_title(); ?></title>
<meta name="description" content="ページの説明(description)160文字以内" />
<meta name="keywords" content="キーワード(半角カンマ区切り)">

<?php /*固定ページ その他*/
elseif(is_page()): ?>
<title><?php the_title(); ?></title>
<meta name="description" content="ページの説明(description)160文字以内" />
<meta name="keywords" content="キーワード(半角カンマ区切り)">

<?php /*投稿ページ postは任意の投稿種類▼*/
elseif(is_singular('post')): ?>
<?php while (have_posts()) : the_post(); ?>
<title><?php the_title(); ?></title>
<meta name="description" content="ページの説明(description)160文字以内" />
<meta name="keywords" content="キーワード(半角カンマ区切り)">
<?php endwhile; ?>


<?php /*上記以外*/
else:?>
<title><?php the_title(); ?></title>
<meta name="description" content="ページの説明(description)160文字以内" />
<meta name="keywords" content="キーワード(半角カンマ区切り)">

<?php endif; ?>

ページ数が多くて各固定ページごとに設定するのが大変な場合などはheader内で管理できると作業の効率化になると思われます。

まとめ

プラグインを使わずにページごとにdescription、keywordを設定する方法のご紹介でした。singleページ、投稿ページ以外はkeywordを同じとし、投稿ページのみカスタムフィールドで設定することなどの実装も可能です。サイトの規模や状況に合わせたdescription、keywordの設定を行いSEO対策につなげましょう。

この記事の投稿者

フロントエンドエンジニア

アンディ

2020年10月8日 アンディ

2020年1月7日 アンディ

WordPressの「メディアの追加」トラブル時の対処

2015年9月6日 TORAT

WordPressの管理画面のカスタマイズ

2015年4月23日 TORAT

ブログ一覧へ

書いた人

WRITERS