2文字です。
&&
これを書いた瞬間、JavaScriptが丸ごと動かなくなっていました。
原因にたどり着くまで、同じコードを3回書き直しています。
WordPress（SWELL）＋ミックスホスト。カスタムHTMLブロックに自作のコードを埋め込む。私はこの構成をほぼ全サイトで使っています。
そのたびに同じエラーを踏んでいました。
結論を先に書きます。AIに毎回説明するのをやめて、ルールを記憶させたら止まりました。
指示文は最後にそのまま置いてあります。
◆&&を1箇所書くだけでスクリプト全体が死ぬ
症状はこうです。
コードは普通に貼れる。エディタ上でもエラーは出ない。でも公開すると動かない。
F12でConsoleを開くと、赤字で Uncaught SyntaxError が出ています。
原因は、WordPressが保存時に && を && にエスケープすることでした。
貼った瞬間に別の文字列に書き換わる。
JSから見れば意味不明な記号なので、その行で構文解析が止まり、スクリプト全体が停止します。
厄介なのは、コメント内に書いた && でも同じことが起きる点です。
1箇所でもあればアウト。
対処は単純で、複数条件をネストしたifに書き換えるだけです。
// NG
if (a === 1 && b === 2) { ... }
// OK
if (a === 1) {
if (b === 2) { ... }
}
|| は問題なく動きます。壊れるのは & が連続する形だけです。
つまりこれは、AIが書いたコードが下手なのではありません。
WordPressの保存処理の仕様です。
裏返せば、最初から && を禁止しておけば二度と起きません。
同じ理由で、シングルクォートと生の & も避けています。文字列はダブルクォートのみ。HTMLを文字列で組み立てず、document.createElement と textContent で作る。こうすると手動エスケープが一切不要になります。
見出しが見にくいのはテーマと二重になっているから
埋め込みブロックの中で h2 を使うと、自分で設計したデザインの上にSWELLの装飾が重なります。
背景色、枠線、::before の飾り。
SWELLは .post_content h2/h3 に :where() でこれらを当ててくるので、何もしなければ必ず干渉します。
結果、その見出しだけ浮いて、読みにくくなる。
私は最初、h2/h3 を使わず div class="xxx-h2" で代替していました。
見た目の問題はこれで消えます。
ただ、これは損をします。
見出しが div だと、検索エンジンにもLLMにも「ここが節の区切り」と伝わりません。
見た目の問題を、構造を壊して解決してはいけません。
なので2026年9月に、このルールは廃止しました。
今の方針は4つです。
h2/h3は実タグで書く- SWELLの装飾は
!importantで完全に潰す h1は本文に置かない（SWELLが記事タイトルで出力済み。書くと二重h1）- 全ての
h2/h3にidを付ける（目次・アンカー・LLMの節参照に効く）
リセットCSSはこの形で固定しています。スコープ名だけ都度差し替えます。
.ao-block h2,
.ao-block h3 {
background: none !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
.ao-block h2::before,
.ao-block h2::after,
.ao-block h3::before,
.ao-block h3::after {
content: none !important;
display: none !important;
}
このリセットを書いた後に自前のデザインを当てる。順序が逆だと効きません。
詳細度だけなら :where() に既に勝っていますが、テーマ更新やプラグイン競合で崩れる事故を防ぐため !important を明示しています。
id は sec-01 のような連番より、内容が分かる英小文字スラッグ（price-plan など）にしてください。目次のアンカーもLLMの節参照も、こちらの方が効きます。
入れてはいけないタグと貼ってはいけないブロック
記事本文に入れるコードに、次のタグを含めてはいけません。
<!DOCTYPE> <html> <head> <body> <title> <meta>
AIに「HTMLを書いて」と頼むと、まず間違いなくこれらが付いてきます。
完全なHTMLファイルとして出力しようとするからです。
WordPressはこれらを除去するか、壊します。レイアウトが崩れる原因のかなりの部分がこれでした。
貼り付け先も固定です。必ずカスタムHTMLブロック。
段落ブロックに貼ると、自動整形で <p> が挟まって崩れます。
CSSは全セレクタを .スコープ名 配下に入れ、.スコープ名 *, .スコープ名 *::before, .スコープ名 *::after { box-sizing: border-box; } も明示してください。
SWELLのcontainer paddingでレイアウトが崩れるのを防げます。
ミックスホスト側で起きること：Imunify360
ここからはSWELLではなくサーバーの話です。
ミックスホストは全サーバーにImunify360というAI型の保護機能が標準で入っています。
「少々お待ちください…」という緑のスピナー画面。あれです。
問題は、この画面がHTTPステータス200で返ることでした。
検索エンジンから見ると「このページの内容はcaptcha画面である」と解釈されかねません。
私の環境では、GPTBot・ClaudeBot・PerplexityBotのUser-Agentで高い割合でこれが返っていました。
そして、これはcPanelでは設定できません。
cPanelに「Imunify360」の項目はありますが、マルウェアスキャンの結果を見るだけの画面です。無効化も頻度変更もできないと公式ヘルプに明記されています。
ここでModSecurityを触ってはいけません。
cPanelに項目があってON/OFFできるので間違えやすいのですが、別物です。ModSecurityは弾くとき403を返します。captcha画面は200なので犯人ではありません。切っても解決せず、防御が落ちるだけです。
対処はサポートへの依頼になります。
依頼内容は4つ用意して、通るものから拾う形にしました。
- 当ドメインをcaptchaの対象外にしてもらう
robots.txtsitemap.xmlllms.txtと/wp-content/配下を対象外にしてもらう- GPTBot・ClaudeBot・PerplexityBot等をホワイトリストに追加してもらう
- 上記が難しい場合、captcha画面を200ではなく503で返してもらう
4番が一番現実的で、一番効きます。503は「一時的に応答できない」という意味なので、Googleは既存の評価を保持したまま再訪します。1〜3が断られても、4は粘る価値があります。
あわせて、LiteSpeed Cacheの「すべてパージ」を一度実行してください。captcha画面が一度キャッシュされると、全員に配信されます。
ただし、連絡する前に確認してください。
Search Consoleの「公開URLをテスト」→「テスト済みのページを表示」→「HTML」タブ。ここに正常なHTMLが出るなら、実害はありません。放置で構いません。
数回試して判断してください。確率的に出るので、1回では分かりません。
AIクローラーはJavaScriptを実行しない
最後にもう1つ。
本文の主要コンテンツをJSで生成してはいけません。
カード一覧、内部リンク、比較表。こういったものをJSで組み立てると、AIクローラーからは空白のページに見えます。
ブラウザでは完璧に見えているので、気づけません。
主要コンテンツは静的HTMLで直書き。JSは装飾と補助だけ。
これは埋め込みに限った話ではなく、LLMO全体の原則です。
コピペ用：Claudeに記憶させる指示文
ここまでの全てを、AIへの指示に落としたものです。
そのままコピーして、Claudeに「これを記憶してください」と渡してください。以降、毎回説明する必要がなくなります。
SWELL（WordPress）埋め込み用HTML/JSを書くときの必須ルール【最重要】
(1) JSで && 演算子を絶対に使わない。コメント内も含めて1箇所も書かない。
WordPressが && にエスケープしてJS全体が構文エラーで停止する。
複数条件はネストifで書き換える。|| は問題なし。
(2) 記事本文に入れるコードに <!DOCTYPE> <html> <head> <body> <title> <meta>
を含めない。WordPressが除去するか壊す。
(3) 見出しは h2/h3 の実タグで書く（SEO・LLMO評価のため）。h1〜h3の文書構造を
意識すること。h1はSWELLが記事タイトルとして出力するため本文内には置かない
（二重h1回避）。SWELLの .post_content h2/h3 による背景色・枠線・::before
等の装飾は、スコープ内で !important 付きのリセットCSSを書いて完全に無効化
する。全 h2/h3 に内容が分かる英小文字スラッグの id を付与し、アンカーリンク・
目次・LLMの節参照に対応させる。
(4) 全CSSセレクタを .スコープ名 でスコープ化し、
.スコープ名 *, .スコープ名 *::before, .スコープ名 *::after
{ box-sizing: border-box; } も明示する。
(5) JSは IIFE で包み、"use strict" を宣言し、var を使う。
全ての getElementById の戻り値に null チェックを入れる。
document.readyState をチェックし、DOMContentLoaded 発火済みでも動くようにする。
(6) 貼り付け先は必ず「カスタムHTML」ブロック前提で書く。
(7) JSでHTML文字列を組み立てない。document.createElement / textContent /
setAttribute / appendChild で構築する。
(8) JSの文字列はダブルクォートのみ。シングルクォートを1箇所も使わない。
(9) 正規表現や文字列に生の & を書かない。DOM APIを使えば手動エスケープは不要。
(10) 本文の主要コンテンツ（カード一覧、内部リンク等）はJSで生成せず静的HTMLで
直書きする。AIクローラーはJSを実行しないため。
記憶させてから、何が変わったか
以前は、1つの埋め込みコードを完成させるのに3〜4往復かかっていました。
書く、貼る、動かない、Consoleのエラーを貼る、直してもらう。
今は1回で通ります。
見出しの装飾崩れも起きません。
これは根性や慣れの問題ではなく、指示の設計の問題でした。
同じことを毎回説明しているなら、それは記憶させる対象です。
AIに毎回説明している内容をメモに書き出して、丸ごと記憶させてください。
