WordPressでページをデザインしたり、記事を書き終えたところで、プレビューしたところ、ページタイトルがまったくの場違いでせっかくのデザインが台無しに。そんな経験もあるかもしれません。

残念ながら、WordPressにはタイトルを非表示にする簡単な機能はありません。また、タイトルを簡単にカスタマイズする方法もなく、どのように見えるかはテーマに依存します。では、タイトルが大きすぎて邪魔になったらどうすればいいのでしょうか。WordPressサイトでページタイトルを非表示にする術が必要になります。

直感として、ページから見出しを削除すればいいのではと思った方もいるかもしれません。その方法は、SEOの観点からいえば絶対に避けるべきです。他の選択肢をおすすめします。

WordPressそのものには「タイトルを隠す」オプションはありませんが、方法さえ理解すれば対処は難しくありません。1つの記事のタイトルを非表示にすることも、すべてのタイトルを非表示にすることもできます。

それでは、WordPressサイトの固定ページや投稿のタイトルを非表示にする5つの方法をご紹介します。

ページタイトルの非表示が必要になる理由

サイトのすべてのページに必ずしもタイトルが必要なわけではありません。ブログ記事(投稿)にはほぼ間違いなくタイトルが必要ですが、他のページでは必ずしも見栄えが良いとは限りません。ブログではきれいに表示されても、他のページではそうとは限りません。

例えば、ホームページに「Home(ホーム)」というタイトルをつけることは不必要であり、少し「アマチュアな印象」を与えることさえあります。「About(当サイトについて)」や「Services(サービス)」と似たようなもので、このようなページのトップに見出しをつけることは冗長になりかねません。

また、タイトルの見た目が全体的なデザインと調和しないこともあるかもしれません。CSSを使ってスタイルを調整することもできますが、完全に隠してしまうのも手です。タイトルを非表示にして、そのスペースを使ってヒーロー画像や他のスタイリング要素を活用することができます。

ほとんどの場合、タイトルを削除する必要はありません。主に問題となるのは配置場所やデザインです。ページタイトルが変な場所にあったり、デザインに合わない場合は、非表示にして別の場所にH1の見出しを挿入することも可能です。

しかし、ページからタイトルを隠すのは、画像やテキストの段落を削除するほど簡単ではありません。見出しはSEOに、つまり検索エンジンによるコンテンツの読み取りに影響を与えます。すべてのタイトルを非表示にする前に、考慮すべきことがいくつかあります。

SEOに関して考慮すべきこと

Googleのような検索エンジンは、クローラーと呼ばれるボットを使ってウェブサイトを訪問し、そのページをインデックスします。サイトをインデックスする際、クローラーはタイトル、ページテキスト、ページ階層などの要素を読み取り、ページの内容を把握します。

このプロセスは、特定の用語で検索した人に関連性の高いページを表示するために欠かせないものであり、SEOのベストプラクティスに従っているサイトは、通常、表示順位が上がります。

WordPressサイトを高速化する方法などで検索すると、表示されるスニペットのタイトルと記事のタイトルがたいてい一致していることに気づくはずです。

ページのタイトルは、HTMLのタイトルタグ、またはそれがない場合はH1の見出しによって決定されます。どちらも存在しない場合、検索エンジンは最初に見つけた見出しかランダムな文字列をタイトルにします。これでは、検索エンジンのスニペットでは非常に見栄えが悪くなります。

つまり、H1の見出しを削除し、それに代わるものを何も用意しないと、SEOとクリック率に悪影響を及ぼす可能性があります。

ページタイトルだけを非表示にして削除しなかったとしても、検索エンジンのクローラーは通常、非表示の要素を無視するので問題は解決しません。適切な階層構造─H1要素、そして適切な場所にH2やH3の見出しがあるページ─は、クローラー(そしてサイトの訪問者)に喜ばれます。

実際には、H1の見出しは厳密にSEOに必要なものではありません。ただし、ページの構造をわかりやすく提供するために有用あり、強く推奨されることは確かです。

では、どのような解決策があるのでしょうか。最も簡単なのは、Yoast SEOのようなプラグインを使うことです。プラグインを使って、すべてのページに「SEOタイトル」を設定することができます。検索結果画面にきれいに表示され、何のペナルティもなく、煩わしい見出しを取り除くことができます。

タイトルタグとH1の見出しの違いとは

タイトルタグとH1の見出しはどちらも、検索エンジンによるコンテンツ理解を助けるものです。

タイトルタグはHTMLの<title>要素で定義されます。これはウェブサイトの基本的なコードの一部であり、通常は人間には見えません。しかし、クローラーはこれを読み、検索エンジンのスニペットのタイトルを設定するのに使用することができます。ほとんどのテーマで通常、バックエンドで設定した投稿やページのタイトルと一致するように設定されるものです。

一方で、H1の見出しはサイト訪問者が見ることができます。見出しは、セクションを入れ子にしてコンテンツを分割することで、読みやすいようにページを構造化するためのもので、H1はコンテンツを紹介するタイトルの役割を果たします。

ほとんどのWordPressテーマの構成で、投稿/固定ページの上部にあるタイトルを取得することでH1のタグを挿入し、さらに<title>タグが自動で設定されます。

検索エンジンは、H1よりもHTMLの<title>タグを優先します。<title>タグがない場合は、代わりにH1の見出しが参照されます。

機能的な違いはあまりありませんが、この違いは実は重要です。

WordPressですべての固定ページタイトルと投稿タイトルをまとめて非表示にする方法

これからご紹介する方法は一般的に安全で、問題を引き起こすことはあまりありませんが、コードを追加したりプラグインをインストールしたりする前に、必ずサイトのバックアップを取るようにしてください。

投稿や固定ページのタイトルを選択的に非表示にする方法もあるので、追ってご紹介します。

しかし、まずはCSSのちょっとした技を使って、WordPressサイトのすべての投稿と固定ページのタイトルを非表示にする方法を見てみましょう。たった1行のコードで、タイトルを非表示にできます。

WordPress管理画面から、「外観」>「カスタマイズ 」>「追加CSS」へと進みます。そこに表示されたコードボックスに、以下のコードを貼り付けてください。

.entry-title {
display: none;
}

右側のプレビューでタイトルが消えるはずです。個々の投稿やページにアクセスすると、見出しが消えていることが確認できます。ちなみに、「最近の投稿」のようなウィジェットでは、バックエンドで設定したタイトルが問題なく使用されます。

このコードが機能しない場合には、テーマでタイトル表示に使用されているCSSクラスを確認する必要があります。テーマカスタマイザーの右側のウェブサイトプレビューで、投稿タイトルを右クリックし、「検証」をクリックします。ブラウザによっては、代わりに文言に多少の違いがあるかもしれません。

ページ要素の検証
ページ要素の検証

コードがポップアップ表示されます。ハイライトされたコードのあたりを見て、例えばH1やH2のクラス名を探します。<h2 class="entry-title heading-size-1">などです。

他にも、「entry-title」の代わりに「post-title」や「page-title」などと書かれているかもしれません。

上記のCSSコードを使いますが、「entry-title」を実際のテーマのCSSクラスに置き換えてください。

投稿タイトルのCSSクラスを編集する
投稿タイトルのCSSクラスを編集する

WordPressのすべての「固定ページ」でタイトルを非表示にする方法

サイトのタイトルを(すべてのページからではなく)「固定ページ」でのみ非表示にしたい場合について考えてみましょう。上記のCSSコードを少し修正するだけでOKです。コードの前に「.page」を追加するだけです。例えば、以下のようになります。

.page .entry-title {
display: none;
}

これで、WordPressサイトのすべての固定ページのタイトルが一瞬で非表示になります。

特定の固定ページでタイトルを非表示にする方法

WordPressサイトの特定の固定ページのタイトルを非表示にする方法はいくつかあります。まずは、プラグインをインストールする方法です。もしくは、上記のCSSコードに手を加えて、IDによって特定のページをターゲットにすることもできます。

Hide Page And Post Titleのように、タイトルを非表示にする専用のプラグインもあります。

このプラグインをダウンロードする代わりに(プラグインが多すぎると、ウェブサイトのセキュリティリスクになる可能性があります)ページビルダーを使ってみることもできます。

その一例がElementorです。簡単なトグルでページタイトルを非表示にする機能が搭載されています。バックエンドの任意のページに移動し「Elementorで編集」をクリックし、左下隅にある「設定」のギアをクリックします。

「タイトルを隠す」をオンにすると、ページタイトルが非表示になります。

Elementorでタイトルを非表示にする
Elementorでタイトルを非表示にする

最後の選択肢は、CSSコードを編集して、すべてのページではなく特定のページだけをターゲットにするようにすることです。

これを行うにはまず、ページのIDを把握する必要があります。管理画面から「固定ページ一覧」を開き、タイトルにカーソルを合わせます。

左下にリンクアドレスのプレビューが表示されます。その中に、”post=”という文字列があります。この数字がページIDです。

WordPressの固定ページID
WordPressの固定ページIDの確認のしかた

このIDを使って、CSSを特定のページに適用します。次のように「0」の部分を見つけたIDに置き換えてください。

.page-id-0 .entry-title {
display: none;
}
対象とする固定ページのID
対象とする固定ページ(または投稿)のIDをCSSに反映する

この方法でうまくいかない場合は、テーマで別のCSSクラスが使われている可能性があります。

対象のページにアクセスし、F12キーを押してChromeの開発者コンソールを表示します。Ctrl-F押しながら「body」と入力し、ナビゲーション矢印を使って「<body class=」と大きなクラスの一覧が表示されるまで下に進みます。

ページIDの部位を探し、コードにあるクラスをそれに置き換えてください。

例えば「page-id-113」というクラスが一覧にあったら、使用するコードは以下のようになります。

.page-id-113 .entry-title {
display: none;
}

【非推奨】WordPressの固定ページからタイトルを“削除”する方法

ページタイトルを削除する方法ももちろんあります。やり方は簡単です。「固定ページ一覧」を開きます。ページ名の下にある「クイック編集」をクリックし、タイトルを空白にして「更新」をクリックします。

または、タイトルをクリックするか、その下にある「編集」をクリックし固定ページの編集画面に移動してから、一番上に表示されているタイトルのテキストを削除し、「更新」をクリックすることもできます。「固定ページ一覧」画面に戻ると、「(タイトルなし)」と表示され、実際のサイトでも消えていることがわかります。

ある意味で最も簡単な手段ですが、おすすめはしませんパーマリンクはSEOにとって重要であり、WordPressでは通常タイトルに基づいてパーマリンクが生成されます。パーマリンクがないと代わりに数字やランダムな文字列でパーマリンクが生成され、これがある種のペナルティにつながる可能性があります。

パーマリンク(または「URLスラッグ」)を手動で変更することもできますが、毎回忘れずに行う必要があります。

見栄えのよくないパーマリンク
見栄えのよくないパーマリンクが生成されてしまう

それ以外にも、タイトルのない投稿や固定ページはバックエンドで「(タイトルなし)」として表示されます。サイトに何十、何百ものパーマリンクがある場合、ごちゃごちゃした中から特定のものを見つけるのは至難の業です。

タイトルがない状態の管理画面
タイトルがない状態の管理画面

これはサイト訪問者にとっても問題です。テーマにもよりますが、タイトルのない固定ページや投稿は、フロントエンドのウェブサイトでも「(タイトルなし)」と表示されます。これでは、まともにウェブサイト内の固定ページや投稿を見て回ることができません。

ウィジェットにタイトルが表示されていない例
ウィジェットにタイトルが表示されていない例

さらに、タイトルがあった場所に大きな空白ができてしまいます。このような理由から、WordPressのページタイトルを削除するのは推奨されません。

タイトルを空白にするのはたしかに簡単ですが、そうする代わりにプラグインをインストールしたり、CSSを挿入したりする他の方法を選択することをお勧めします。通常、タイトルを削除するよりも非表示にするのが得策です。

WordPressのすべての「投稿」でタイトルを非表示にする方法

すべての投稿のタイトルを非表示にするのは、すべての固定ページの場合と同じように簡単です。先ほどと同じCSSを使い、コードの前に.pageを使用する代わりに、以下に示すように.postを記述します。

.post .entry-title {
display: none;
}

これで、すべての投稿にタイトルが表示されなくなります。固定ページは影響を受けず、通常どおりタイトルが表示されます。

投稿のタイトルが非表示になっている
投稿のタイトルが非表示になっている

特定の投稿でタイトルを非表示にする方法

特定の投稿のタイトルを非表示にする方法は、上で説明した固定ページのタイトルを非表示にする方法とほとんど同じです。タイトルを非表示にするプラグインを使うか、ページビルダーを使うか、CSSで投稿IDをターゲットにして非表示にすることができます。

CSSを使用する場合は、使用するコードが少し異なります。管理画面でタイトルを非表示にしたい投稿にカーソルを合わせてIDを確認して、以下の「0」を対象の投稿IDに置き換えてください。

.postid-0 .entry-title {
display: none;
}

うまくいかない場合は、対象としたい投稿上でF12を押して開発者コンソールを見てください。Ctrl-Fを押し「body」と入力し、「<body class=」を見つけましょう。そのページで使用されているクラスの一覧が表示されます。post-11のようなID番号を検索し、上記のコードを置き換えてください。

【非推奨】WordPressの投稿からタイトルを“削除”する方法

前述したように、投稿や固定ページからタイトルを削除するのは賢い判断とは言えません。パーマリンクやSEO、さらにはサイトのレイアウトに問題が生じる可能性があるため、避けることを強くお勧めします

しかし、どうしてもそうしたい場合は、固定ページのタイトルを削除するのと同じような手順で行います。

「投稿一覧」に移動し、サイト上のすべての投稿を探します。タイトルを削除したい投稿のタイトル下にある「クイック編集」をクリックし、タイトルを空白にしてから「更新」をクリックします。または、「編集」をクリックして編集画面に移動し、一番上の見出しをクリックしてタイトルテキストを削除します。

投稿からタイトルを削除する
投稿からタイトルを削除する

「更新」をクリックすると、タイトルが削除された状態で保存が完了します。すべての投稿のタイトルが「(タイトルなし)」に置き換わります。固定ページの例と同じように数百もの投稿があると識別が難しくなりますので、代わりにプラグインやCSSセレクタを使って非表示にすることをおすすめします。

まとめ

WordPressにはページタイトルを非表示にするボタンは組み込まれていませんが、それを実現する方法はたくさんあります。個々の投稿や固定ページについては、タイトルの表示/非表示を自由に切り替えることのできるプラグインが利用できます。また、CSSを利用してすべてのページタイトルを非表示にしたり、非表示にしたい特定のページを指定することも可能です。

バックエンドでタイトルを削除するのは是非とも避けてください。SEOやパーマリンクの問題を引き起こし、バックエンドが乱雑になり、メニューや最近の投稿ウィジェットのような投稿/固定ページタイトルを呼び出す機能で見た目が悪くなります。

いずれにせよ、検索エンジンからペナルティを受けないためには、H1の見出しかHTMLタイトル要素が必要であることは覚えておきましょう。タイトルを非表示にする際には、SEOプラグインをインストールするなどして、すべてのページに「SEOタイトル」または「HTMLタイトル」要素を設定することをお忘れなく。