2025年07月16日[水曜日]

WordPressのタイトル設定とSEO最適化 – 階層構造を反映した動的生成の実装方法

  • 2025/07/13
  • BASICS
  • WordPressの基礎
  • 0comments
  • 25views
  • 約13分で読めます
  • 22

前回の記事では、wp_nav_menuの「分析→理解→実装」のワークフローを通じて、WordPressが出力するHTMLの分析とパラメーター制御技術を学習しました。

今回は、SEOにおいて非常に重要な要素である「タイトル」について詳しく解説します。

SEO効果を最大化するためには、各ページに適切なタイトルを設定する必要があります。WordPressのようなCMSでは、多数のページを手動で管理するのは現実的ではないため、ページの種類に応じてタイトルを動的に生成する機能が重要になります。その具体的な実装方法を実践的に学んでいきましょう。

今回の目標

  • Webサイトのタイトルとページのタイトルの違いを理解する
  • HTMLの基本ルールとSEOベストプラクティスに従った正しいタイトル設定を習得する
  • SEO効果を最大化するタイトル構造を実装する
  • WordPressで階層構造を反映した動的なタイトル生成を実現する

タイトルについて

Webサイトにおけるタイトルは、大きく分類して2つあります。

ヘッダー（headタグ）内のタイトル（titleタグ）

  • ブラウザのタブに表示されるタイトル
  • 検索エンジンの検索結果に表示されるタイトル
  • Webサイトのタイトルとして機能

コンテンツ（bodyタグ）内の見出し（h1タグ）

  • ページ内で最も重要な見出し
  • ユーザーがページを見た時に最初に目にする大見出し
  • 各ページのメインコンテンツを表現

この2つを適切に設定することで、ユーザーにとって分かりやすく、SEO効果の高いWebサイトを構築できます。

ヘッダーのタイトル

HTMLの基本ルールとSEOベストプラクティス

HTMLの基本ルールとして、Webサイト内のすべてのWebページは異なるタイトル（一意のタイトル）を持つ必要があります。これは技術的要件であり、どのWebサイトでも守るべき基本ルールです。

また、SEOの観点から、階層構造を反映したタイトル設定が推奨されています。階層構造を含むタイトルは、検索エンジンとユーザーの両方にとってページの位置づけを明確にし、Webサイト全体の利便性を向上させます。

具体的なメリットは以下の通りです。

  1. 検索エンジンの理解促進：ページの階層関係が明確になる
  2. ユーザビリティの向上：ユーザーが現在の位置を把握しやすい
  3. 検索結果での表示最適化：タイトルタグが検索結果に表示される際の見やすさ
  4. ブラウザタブでの識別：複数タブを開いている際の識別性

このような理由から、単純なページタイトルよりも階層構造を含むタイトルの方が、SEO効果とユーザー体験の両面で優れていると言えます。

検索エンジンとユーザーにとって分かりやすいタイトル構成

検索エンジンがページの内容を正確に理解し、ユーザーが迷わずに目的の情報を見つけられるように、以下のような階層構造でタイトルを設定します。

  • トップページ：サイトのタイトル（例：サンプルサイト）
  • 下層ページ：ページのタイトル＋サイトのタイトル（例：会社概要｜サンプルサイト）
  • 階層がある場合：すべての階層のタイトル＋サイトのタイトル（例：沿革｜会社概要｜サンプルサイト）

WordPressでの現在の問題点

現在のheader.phpのtitleタグを確認してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php the_title(); ?></title>
    <?php wp_head();?>
</head>
<body>
    <header class="global-header">
        <h1><?php the_title();?></h1>
        <?php wp_nav_menu( 'header-menu' ); ?>
    </header>    
    <main>

6行目のtitleタグがヘッダータイトルです。

この状態では、すべてのページでthe_title()、すなわち固定ページのタイトルが表示されてしまいます。

具体的には、

  • トップページ：「ようこそ」（固定ページのタイトル）が表示される
  • 会社概要ページ：「会社概要」が表示される
  • 沿革ページ：「沿革」が表示される

となります。

しかし、検索エンジンとユーザーにとって分かりやすいタイトル構成は、

  • トップページ：「サンプルサイト」（サイトタイトルのみ）
  • 会社概要ページ：「会社概要｜サンプルサイト」
  • 沿革ページ：「沿革｜会社概要｜サンプルサイト」（階層も含む）

であり、ページおよびページの階層に合わせたヘッダータイトルにする必要があります。

WordPressでのサイトタイトル基本設定

おさらいになりますが、管理画面でサイトのタイトルを設定できます。

  1. 管理画面 → 設定 → 一般
  2. サイトのタイトルでWebサイト全体のタイトルを設定

この設定により、PHPコード内でサイトタイトルを取得できるようになります。

get_bloginfo()関数について

WordPressにはget_bloginfo()という関数が用意されており、サイトの基本情報を取得することができます。主な使用例は以下の通りです。

  • get_bloginfo('name')：サイトのタイトルを取得
  • get_bloginfo('description')：サイトのキャッチフレーズを取得
  • get_bloginfo('url')：サイトのURLを取得

今回のヘッダータイトルでは、get_bloginfo('name')を使用してサイトタイトルを動的に表示します。

WordPressでのヘッダータイトル実装方法

WordPressでヘッダータイトルを動的に設定する方法は、主に2つあります。

  1. header.phpに直接PHPコードを記述する方法：理解しやすく、初心者向け
  2. functions.phpでフィルターを使用する方法：WordPress標準の推奨方法

まずは理解しやすい方法1から始めて、その後により良い方法2を学んでいきましょう。

WordPressでの実装方法1：header.phpに直接PHPコードを記述

最初に、header.phpファイルに直接PHPコードを書いて動的なタイトルを生成してみましょう。

Step 1：現在の状態を確認

現状のheader.phpのtitleタグ部分を確認します。

<title><?php the_title(); ?></title>

Step 2：基本的な分岐を追加

トップページかどうかを判定し、タイトルを動的に変更します。WordPressでは、この判定にis_front_page()関数を使用します。

<title>
    <?php if (is_front_page()) : ?>
        <?php bloginfo('name'); ?>
    <?php else : ?>
        <?php the_title(); ?>｜<?php bloginfo('name'); ?>
    <?php endif; ?>
</title>

この実装により

  • is_front_page()関数で、トップページかそれ以外のページを判断できます。
  • トップページの場合は、bloginfo('name')でを表示します。を表示します。
  • トップページ以外は、the_title()｜bloginfo('name')でページタイトル｜サイトタイトルを表示します。

Step 3：階層構造に対応

親ページがある場合の階層も反映するように改良します。

前提条件：

  • 現在のサイトはすべて固定ページで構成されている
  • 2階層目までの場合のみ対応（3階層以上の場合は省略）
親ページの判定について

現在表示中のページに親ページがあるかを判断するために、以下の手順を使用します

  • wp_get_post_parent_id(get_the_ID())で現在のページの親ページIDを取得
    • get_the_ID()は現在表示中のページIDを取得します
    • wp_get_post_parent_idは指定したページIDの親ページのIDを取得します
  • 親ページのIDが存在する（0以外）場合、親ページのタイトルを追加します

この処理を実現するコードは以下の通りです。

<title>
    <?php
    	if (is_front_page()) {
    		// サイトタイトルを表示
			bloginfo('name');
		} else {
    		// 現在表示中のページタイトルを表示
        	the_title();

        	// 現在ページの親ページIDを取得
        	$parent_id = wp_get_post_parent_id(get_the_ID());
        	// 親ページが存在する場合（IDが0以外）、親ページのタイトルを追加
        	if ($parent_id) {
        		// 親ページのタイトルを表示
            	echo '｜';
            	echo get_the_title($parent_id);
        	}

			// サイトタイトルを表示
			echo '｜';
			bloginfo('name');
		}
	?>
</title>

動作確認

ヘッダータイトルが正しく反映されているか確認してみましょう。

トップページ、会社概要ページ、沿革ページそれぞれで正しくタイトルが反映されています。

WordPressでの実装方法2：functions.phpでフィルターを使用（推奨）

header.phpに直接書く方法は理解しやすいですが、WordPressのベストプラクティスとしてfunctions.phpでフィルターを使う方法があります。

なぜfunctions.phpの方が良いのか？

この方法の本質的なメリットは、WordPressのタイトル管理システムとの統合にあります。

  1. WordPressの自動出力機能との連携：wp_head()で自動出力される<title>タグの内容を安全に制御できる
  2. SEOプラグインとの互換性：Yoast SEO、RankMath等のSEOプラグインが参照するタイトル情報に反映される
  3. SNS連携の統一性：Facebookのog:title、TwitterのCardなど、SNSシェア時のメタタグで統一したタイトルを使用
  4. WordPress機能との統合：AMPページやREST APIでも同じタイトルルールが適用される
  5. 一元管理による整合性：一つのフィルターでサイト全体のタイトルルールを統一管理
  6. 設置漏れの防止：WordPressの<title>タグ自動設置機能と連携し、設置漏れを防ぐ
  7. プラグイン干渉の回避：他の機能やプラグインとの干渉を最小限に抑制

header.phpに直接書く方法は「その場しのぎの解決」で、WordPressのタイトル管理システムを迂回してしまいます。一方、フィルターを使う方法は「WordPressの設計思想に沿った解決」で、システム全体との統合を実現します。

Step 1：functions.phpに基本的な関数を追加

まずfunctions.phpに以下の関数を追加します。

function custom_document_title($title) {
/* ここにタイトル取得処理 */
}
add_filter('pre_get_document_title', 'custom_document_title');

'pre_get_document_title'は、WordPressがタイトルを取得するアクションです。

WordPressがタイトルを取得するとき、custom_document_titleを実行するようになります。

Step 2：タイトル取得処理を記述

基本的にはheader.phpに記述したコードと同じです。大きな違いは「表示」ではなく「取得」になることです。

表示はWordPressが行うため、functions.phpでは取得するだけになります。

<?php
function custom_document_title($title) {
    $custom_title = '';

	if (is_front_page()) {
		// サイトタイトルを取得
        $custom_title = get_bloginfo('name');
	} else {
		// 現在表示中のページタイトルを取得
        $custom_title = get_the_title();

    	// 現在ページの親ページIDを取得
    	$parent_id = wp_get_post_parent_id(get_the_ID());
    	// 親ページが存在する場合（IDが0以外）、親ページのタイトルを追加
    	if ($parent_id) {
    		// 親ページのタイトルを取得
        	$custom_title = $custom_title . '｜';
        	$custom_title = $custom_title . get_the_title($parent_id);
    	}

		// サイトタイトルを取得
        $custom_title = $custom_title . '｜';
		$custom_title = $custom_title . get_bloginfo('name');
	}

    return $custom_title;
}
add_filter('pre_get_document_title', 'custom_document_title');

表示から取得に変えるために、bloginfoがget_bloginfoにthe_titleがget_the_titleに変わっています。

get_をつけ忘れるとタイトルが2重に表示されることになるので注意してください。

Step3：タイトルの表示はWordPressに任せる

これまでは、headタグにtitleタグを入れてヘッダータイトルを表示していました。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php the_title(); ?></title>
    <?php wp_head();?>
</head>

これはデフォルトの設定では、wp_head()がtitleタグを出力しないからです。

wp_head()がtitleタグを出力するように設定を変更できます。

<?php
// 外観→メニューの有効化
add_theme_support( 'menus' );
// titleタグの有効化
add_theme_support( 'title-tag' );

functions.phpにadd_theme_support( 'title-tag' ) を入れることで、wp_head()がtitleタグを出力するようになります。

注意

wp_head()がtitleタグを出力するようになるとheadタグに手動でtitleタグを設置した場合、titleタグが重複するため注意が必要です。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head();?>
</head>

wp_headがtitleタグを出力するため、titleタグを消します。

動作確認

それでは各ページを表示してヘッダータイトルの表示を確認してみましょう。

ページのタイトル

HTMLの基本ルールとユーザビリティの向上

HTMLの基本ルールとして、1つのWebページにH1タグは1つだけが推奨されています。これは技術的要件であり、どのWebサイトでも守るべき基本ルールです。

また、検索エンジンとユーザーにとって分かりやすいサイト構造にするため、H1タグの適切な使い分けが重要です。

トップページ：サイトタイトルやロゴがH1でOK

下層ページ：ページのタイトルをH1にする。サイトタイトルやロゴはH1以外（例：<div class="logo">）にする

よくある間違い

多くのWebサイトで間違った実装が見られます。

  • すべてのページでサイトタイトルやロゴをH1にしている
  • 1つのページに複数のH1がある
  • H1がまったく使われていない
  • ページタイトルが重複しているページがある

WordPressでの実装方法：is_front_page()による分岐

現在のheader.phpを確認してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head();?>
</head>
<body>
    <header class="global-header">
        <h1><?php the_title();?></h1>
        <?php wp_nav_menu( 'header-menu' ); ?>
    </header>    
    <main>

この状態では、すべてのページでthe_title()がh1タグになってしまいます。

具体的には

  • トップページ：「ようこそ」がH1で表示される
  • 会社概要ページ：「会社概要」がH1で表示される
  • 沿革ページ：「沿革」がH1で表示される

となっています。

しかし、SEOベストプラクティスに従った正しいH1の使い方は

  • トップページ：サイトタイトル（「サンプルサイト」）がH1であるべき
  • 会社概要ページ：「会社概要」がH1で、サイトタイトルはH1以外であるべき
  • 沿革ページ：「沿革」がH1で、サイトタイトルはH1以外であるべき

このように、現在のWordPress実装では適切なH1の使い分けができていません。

ページのタイトルを表示してみよう

現状のタイトルの問題と理想のタイトルが明確になりましたので、さっそく実践してみましょう。

Step 1：基本的な分岐を実装

トップページではサイトタイトルをh1タグ、それ以外のページではサイトタイトルをdivタグにします。

ただし、同じスタイルになるようlogoクラスを付与します。

<header class="global-header">
    <?php if (is_front_page()) { ?>
        <h1 class="logo"><?php bloginfo('name'); ?></h1>
    <?php  } else { ?>
        <div class="logo"><?php bloginfo('name'); ?></div>
    <?php } ?>
    <?php wp_nav_menu('header-menu'); ?>
</header>

このコードはさらに効率的に書くことができます。

<header class="global-header">
    <?php $tag = is_front_page() ? 'h1' : 'div'; ?>
    <<?php echo $tag; ?> class="logo"><?php bloginfo('name'); ?></<?php echo $tag; ?>>
    <?php wp_nav_menu('header-menu'); ?>
</header>

トップページかそれ以外かによって、h1タグとdivタグのようにタグだけが変われば良いのです。

Step 2：ページタイトルの表示

トップページ以外は、mainタグの中にh1タグでページタイトルを表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head();?>
</head>
<body>
    <header class="global-header">
        <?php $tag = is_front_page() ? 'h1' : 'div'; ?>
        <<?php echo $tag; ?> class="logo"><?php bloginfo('name'); ?></<?php echo $tag; ?>>
        <?php wp_nav_menu('header-menu'); ?>
    </header>
    <main>
        <?php if (!is_front_page()) : ?>
            <h1 class="page-title"><?php the_title(); ?></h1>
        <?php endif; ?>

Step 3：見た目の調整

スタイルシートでサイトタイトルとページタイトルの見た目を調整します。

/* サイトタイトル */
.global-header .logo {
    font-size: 3.0rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

/* ページタイトルのスタイル */
.page-title {
    font-size: 2.0rem;
    color: #333;
    margin-bottom: 2.0rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 1.0rem;
}

念のためsub.cssのコードはすべて削除します。

動作確認

この実装により、HTMLの基本ルールに従い、検索エンジンとユーザーにとって分かりやすいタイトル設定が完成します。

各ページを表示してサイトタイトルとページタイトルを確認しましょう。

まとめ

今回は、WordPressにおけるタイトル設定の実践的な方法を学習しました。

学んだ重要なポイント

  • HTMLの基本ルールに従い、すべてのページで一意のタイトルを設定
  • 階層構造を反映した動的なタイトル生成
  • 1つのページに1つのH1という原則
  • トップページとその他のページでのH1の使い分け

WordPressでの実装方法

  • functions.phpでのpre_get_document_titleフィルターを使用した実装が推奨
  • is_front_page()による適切な分岐
  • WordPressの階層構造を活用した動的なタイトル生成
  • CSSクラスの調整による適切なスタイル適用

これらの技術をマスターすることで、検索エンジンとユーザーにとって分かりやすく、HTMLの基本ルールに従ったWordPressサイトを構築できるようになります。

次回予告

次回は「投稿」について解説します。

WordPressでは投稿機能がブログとして使われることが一般的ですが、ビジネス系サイトでは「お知らせ」や「ニュース」などの用途で活用されることが多くあります。

まずは投稿の概要について、固定ページとの違いを中心に説明する予定です。

  • 時系列による表示：投稿日時による自動的な並び替え
  • カテゴリー分類：投稿をカテゴリーで整理する機能
  • POST ID：投稿特有のIDシステム

これらの違いを理解することで、コンテンツの性質に応じた適切な使い分けができるようになります。

次回もお楽しみに！

成果物

この記事で作成した成果物は、以下のページでまとめて確認することができます。

成果物をまとめて確認する

［成果物］WordPressのタイトル設定とSEO最適化 – 階層構造を反映した動的生成の実装方法

【WordPressのタイトル設定とSEO最適化 – 階層構造を反映した動的生成の実装方法】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。

この記事の評価をお願いします

評価をすると「既読」となり、まだ読んでいない記事を区別できます。

この投稿をシェアする

コメントを残す

CAPTCHA


WordPressのHTML出力分析とカスタマイズ実践 – wp_nav_menuで学ぶ制御技術

WordPressのHTML出力分析とカスタマイズ実践 – wp_nav_menuで学ぶ制御技術  BASICS

wp_nav_menuを例にWordPressの関数が生成するHTMLを分析し「分析→理解→実装」のワークフローを体験します。WordPressが付与するCSSクラスの意味を理解し、ドロップダウンメニューを段階的に実装します。検証ツールを使った構造分析から、効率的なCSS設計まで、他の関数でも応用できる普遍的なスキルを習得できます。

  • 2025/07/13
  • 0comments
  • 52views

WordPress投稿の基本概念と固定ページとの違い

WordPress投稿の基本概念と固定ページとの違い  BASICS

WordPressの投稿と固定ページの基本概念と違いについて詳しく解説します。それぞれの技術的特徴、URL構造、階層構造の有無、分類機能（カテゴリー・タグ）、SEO的な違いを比較表とともに説明。カスタム投稿の概念や投稿一覧ページとの関係、投稿タイプ（pageとpost）の概念についても触れ、効率的なWordPress運用のための基礎知識を学習できます。

  • 2025/07/14
  • 0comments
  • 24views

STAY CONNECTED

wp-ch Admin

現役のフリーランスエンジニアがWordPressによるWebサイト構築を基礎から実践テクニックまで徹底解説します。

たくさんの方がフォローしてくれています。あなたもぜひ、情報を受け取ってください。

STORY｜ストーリー

WordPressを効率よく確実に学ぶためには、学習の順序が大切です。知識が自然に積み上がるよう、学習ステップに沿って記事を順番に並べています。

学習ストーリー第24話まで掲載中

全ストーリーを見る

SERIES｜シリーズ

CATEGORY｜分類

TAGS｜タグ