1. はじめに
ウェブサイト最適化の世界では、SEOとパフォーマンスの両立が常に課題となります。
最近私はYoast SEOプラグインとCocoonテーマを使用したWordPressサイトで、思わぬトラブルに遭遇しました。
この記事ではその問題の詳細と解決までの道のりを共有します。
解決策が知りたい人は7. 解決策まで飛んでください。
2. 背景
Yoast SEOは、WordPressサイトのSEO最適化に欠かせないプラグインの一つです。
一方Cocoonテーマは日本で人気の高いWordPressテーマで高速化機能もあります。
両者は通常問題なく共存できるはずでした。
JSON-LDは構造化データの一形式で、検索エンジンがウェブページの内容を理解するのに役立ちます。
Yoast SEOはこのJSON-LDを自動生成する機能を持っています。
3. 問題の詳細
問題はYoast SEOプラグインを最新バージョン(23.4)にアップデートした直後に発生しました。
Google Search Consoleで構造化データのエラーに気づいたのです。
エラーの詳細は以下の通りでした。
構文にエラーがある構造化データが検出されました
無効なアイテムは Google 検索のリッチリザルトの対象外です。詳細
値の型が正しくありません
このエラーメッセージは、JSON-LDの中の特定の値が正しくない型で記述されていることを示唆していました。
さらに詳しく調査すると、Yoast SEOが生成したJSON-LDの中で、
"valueRequired": true
となるべき箇所が
"valueRequired": !0
になっていることが分かりました。
Google Search Consoleの「HTML」タブで確認したところ以下のような記述が見つかりました:
{
"@type": "SearchAction",
"target": {
"@type": "EntryPoint",
"urlTemplate": "https://day-2-day.info/?s={search_term_string}"
},
"query-input": {
"@type": "PropertyValueSpecification",
"valueRequired": !0,
"valueName": "search_term_string"
}
}
ここで
"valueRequired": !0
という部分が問題でした。
JavaScriptでは!0
はtrue
と等価ですが、
JSON-LDの文脈では無効な値となります。
これがGoogle Search Consoleでエラーとして検出された原因でした。
4. Yoast SEOのコード変更
この問題の背景を理解するため、Yoast SEOの更新前(23.3)後(23.4)のコードを比較しました。
更新前のコード(23.3)
private function internal_search_section( $data ) {
if ( \apply_filters( 'disable_wpseo_json_ld_search', false ) ) {
return $data;
}
$search_url = \apply_filters( 'wpseo_json_ld_search_url', $this->context->site_url . '?s={search_term_string}' );
$data['potentialAction'][] = [
'@type' => 'SearchAction',
'target' => [
'@type' => 'EntryPoint',
'urlTemplate' => $search_url,
],
'query-input' => 'required name=search_term_string',
];
return $data;
}
更新後のコード(23.4)
private function internal_search_section( $data ) {
if ( \apply_filters( 'disable_wpseo_json_ld_search', false ) ) {
return $data;
}
$search_url = \apply_filters( 'wpseo_json_ld_search_url', $this->context->site_url . '?s={search_term_string}' );
$data['potentialAction'][] = [
'@type' => 'SearchAction',
'target' => [
'@type' => 'EntryPoint',
'urlTemplate' => $search_url,
],
'query-input' => [
'@type' => 'PropertyValueSpecification',
'valueRequired' => true,
'valueName' => 'search_term_string',
],
];
return $data;
}
更新後のコードでは、
query-input
の構造がより詳細になり、
valueRequired
プロパティが明示的に追加されました。
この変更自体は適切なものでしたが、何らかの理由でJavaScript最適化の過程で予期せぬ変換が起こったのです。
5. トラブルシューティングの過程
最初はこの Yoast SEO の変更自体が問題だと考えました。
しかし他のユーザーから同様の報告がなかったため、私のサイト特有の問題である可能性が高いと判断しました。
そこでサイトの他の要素との相互作用を調査し始めたのです。
以下のようなフィルターを試してみましたが、効果がありませんでした:
add_filter('wpseo_json_ld_search_url', 'fix_yoast_json_ld', 10, 1);
function fix_yoast_json_ld($json) {
return str_replace('"valueRequired":!0,', '"valueRequired":true,', $json);
}
6. 原因の特定
長時間のデバッグを繰り返します。
原因としては「valueRequired":true」
が「"valueRequired":!0」
に置き換えられてしまうことなので、置き換える原因を探すことにしました。
- フィルターの付け方を変更⇒失敗(サイトが起動しなくなる事態にも)
- 置き換えられないようPHP直接編集してもよいかを調べる⇒壊れそう
- 海外のサイトまで広げて検索⇒同様の事象で悩んでいる人を発見(未解決)
だが、同じCocoonを使っている??
同じCocoonを使っている人がいたので原因はそれでは無いかと推測。
そこで調べたところ驚くべき事実が判明しました。
問題の原因は、Cocoonテーマの JavaScript縮小化機能だったのです。
この機能がtrue
を!0
に置き換えていたのです。
7. 解決策
短期的な解決策として、JavaScriptの縮小化をOFFにしました。
Cocoon設定⇒高速化⇒JavaScriptの縮小化
上記のチェックを外すだけです。
長期的にはCocoonテーマの開発者にこの問題を報告すること(してませんが)
JSON-LDを最適化対象から除外するよう提案する必要がありそうです。
8. 学んだこと
- テーマとプラグインの相互作用が予期せぬ問題を引き起こす可能性がある
- 最適化と機能性のバランスの重要性
- 構造化データの正確性がSEOに大きな影響を与える
9. 他の開発者へのアドバイス
- テーマやプラグインの最適化機能を使用する際は構造化データへの影響を必ず確認してください。
- 問題が発生したら単一のコンポーネントだけでなくシステム全体を見る必要があります。
- 定期的にGoogle Search ConsoleやSchema検証ツールでサイトをチェックすることをおすすめします。
10. まとめ
この経験は現代のウェブ開発の複雑さを物語っています。
一見無関係に見える最適化が、重要なSEO要素に影響を与える可能性があるのです。
常に警戒し問題が発生したら根気強くデバッグすることが大切です。
最後にこの記事が他の開発者の助けになれば幸いです。
ウェブ開発コミュニティでの知識共有は、私たち全員をより良い開発者にしてくれるのです。
11. その後(対応後の結果)
SearchConsoleに修正後の確認を依頼していましたが、「修正を確認しました」という案内が来ていました。
これでほぼ問題無く対応が出来たと考えられます。
解決に導くまで5時間以上かかりました。
ただでさえGoogleの検索にかからないサイトであるため小さな問題でも潰さなければいけないという所が零細サイトの厳しい所です。