X（Twitter）埋め込みが表示されないときの対処

Xの埋め込みは2つの部品でできている

Xのポストを埋め込むと、コードは2つの部分に分かれます。1つはポストの内容を持つ blockquote(class が twitter-tweet)のHTML、もう1つは twitter.com 系の widgets.js を読み込む script タグです。

blockquoteだけがあってもスクリプトが動かなければ、リンク付きの引用テキストとして素朴に表示されるだけです。逆に言えば、装飾されない素のテキストで出ているなら、widgets.jsが読み込めていないと判断できます。

• blockquote(twitter-tweet): ポストの中身を持つHTML本体
• script(widgets.js): 見た目を整え、埋め込みカードに変換する
• 両方が揃って初めて整形された埋め込みになる

widgets.jsが読み込めているか

公式の埋め込みコードをコピーしたとき、script タグごと貼れているかをまず確認します。AI生成HTMLや手作業の編集では、scriptタグだけ削られていることがよくあります。1ページに同じscriptを何度も書く必要はなく、1つあれば複数の埋め込みに効きます。

scriptのsrcは https から始まる形になっている必要があります。http のままだとブロックされます。また、scriptを head に置いても body の最後に置いても動きますが、blockquoteより前に読み込まれた場合に表示が遅れることがあります。

症状別チェック表

X（Twitter）埋め込みが表示されないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

blockquoteの書き方と動的描画の注意

blockquoteのclassが twitter-tweet になっているか、中のポストURLが正しいかを確認します。AIが整形のためにclassを書き換えたり、URLを途中で切ってしまうと表示されません。

JavaScriptで後からポストを差し込む(動的にDOMへ追加する)構成だと、widgets.jsが最初の読み込み時にしか走らず、後から追加した分が描画されないことがあります。その場合はXが提供する再描画用の関数を呼ぶ必要がありますが、まずは静的にHTMLとして書いて表示されるかを試すのが切り分けの近道です。

切り分けの手順

素のテキストで表示される、あるいは何も出ないときは、次の順で確認してください。

1. 開発者ツールのコンソールとネットワークタブで widgets.js が読み込めているか確認する
2. 公式の埋め込みコード(blockquote と script の両方)を丸ごと貼り直す
3. scriptのsrcが https から始まっているか確認する
4. blockquoteのclassが twitter-tweet で、ポストURLが正しいか確認する
5. 動的に差し込んでいる場合は、静的なHTMLとして書いて表示されるか試す

確認用に共有するときのポイント

widgets.jsのような外部スクリプトは、httpsで配信されるページのほうが安定して読み込まれます。ローカルのファイルをそのまま開くと、混在コンテンツの扱いで弾かれることがあります。

ギガサイト便にHTMLをドロップすると 〇〇.giga-site.com のhttpsの共有URLが発行され、CDNのエッジ配信で素早く表示されます。外部スクリプトが本番に近い条件で動くか確かめやすく、レビュー用に関係者へ渡すのに向いています。コードを直したら同じURLのままファイルを差し替えられるので、リンクを送り直さずに再確認を依頼できます。