【WordPress】Yoast SEO「タイトルの強制書き換え」機能｜レイアウト崩れの解決策
■現象：ブロックエディタのレイアウト崩壊
WordPressサイトにおいて、突如としてサイトのデザインが崩れる不具合が発生することがあります。具体的には、ブロックエディタ（Gutenberg）で配置した「カラム」ブロックが横並びにならず縦積みになったり、要素間の余白（gap）が効かずにコンテンツ同士が密着してしまうという症状です。この問題は、CSSを直接編集していないにもかかわらず発生するため、原因の特定が困難なケースがあります。
■原因の特定：重要CSSの欠落
正常に表示される状態（設定OFF）と、レイアウトが崩れる状態（設定ON）のHTMLソースコードを比較検証した結果、不具合発生時には<head>内に出力されるべき重要なCSSスタイル定義が完全に消失していることが判明しました。
具体的に欠落していたのは、以下のインラインスタイル群です。
global-styles-inline-css：WordPress 5.9以降で導入された「グローバルスタイル（theme.json）」。サイト全体の色設定や、レイアウト構造（.is-layout-flex等）の定義、余白のCSS変数（--wp--preset--spacing--...）を含みます。wp-block-columns-inline-css：カラムブロックをフレックスボックスで横並びにするためのスタイル。wp-block-image-inline-css：画像ブロックの表示制御スタイル。
これらのスタイルが読み込まれないことで、ブラウザはレイアウトを構成するためのクラス定義や変数を参照できず、表示崩れを引き起こしていました。
■技術的メカニズム：出力プロセスの競合
この不具合の根本原因は、SEOプラグイン「Yoast SEO」の**「タイトルを強制的に書き換える（Force rewrite titles）」**機能が有効化されていることにあります。
この機能は、PHPの「出力バッファリング（Output Buffering）」という仕組みを利用しています。これはページのHTML生成プロセスに割り込み、全出力を一時的にメモリに保持して<title>タグを書き換えた後に出力するという挙動をとります。
検証の結果、この強力な割り込み処理が、近年のWordPressコアがwp_headフック等を通じて動的にCSS（グローバルスタイル）を生成・注入するプロセスと競合し、処理を阻害またはスキップさせてしまっている可能性が高いことが分かりました。
■解決策と推奨設定
解決策は非常にシンプルで、Yoast SEOの設定画面（検索での見え方 > 一般）から、「タイトルを強制的に書き換える」機能を「OFF（無効）」にすることです。
そもそもこの機能は、テーマ側でタイトルタグの出力制御が未対応だった「WordPress 4.0以前」の古いテーマに向けた救済措置（レガシー機能）です。add_theme_support( ‘title-tag’ );に対応している現代の標準的なテーマを使用している場合、この機能は不要であり、むしろ今回のような不具合の温床となります。
■結論
Web制作や運用の現場では、WordPress本体の進化（ブロックエディタ化）に伴い、過去に必須とされていた設定が逆に不具合を引き起こすケースがあります。不要なレガシー設定を見直し、常に最新の仕様に合わせた環境を整えることが重要です。
こちらの記事も読む