Instagramの埋め込みは2つの部品で成り立つ
Instagramの埋め込みコードは、投稿の情報を持つblockquote(instagram-mediaクラスのついた引用ブロック)と、それを実際のカードに変換するスクリプトembed.jsの2つで構成されています。
blockquoteだけを貼ると、装飾されていない素のリンクや引用文のまま表示されます。逆にembed.jsだけあってもblockquoteがなければ何も変換されません。両方が揃って初めて、いつものInstagramカードになります。
投稿の埋め込みコードはInstagram側の共有メニューから取得できます。コピー時に片方が抜けていないかを最初に確認しましょう。
blockquote記法の崩れとembed.jsの重複
CMSのビジュアルエディタは、貼り付けたblockquoteの属性やクラスを自動で書き換えたり削ったりすることがあります。instagram-mediaクラスやdata属性が残っているか、HTMLソース編集モードで確認してください。
embed.jsは1ページに1回読み込めば、複数のblockquoteをまとめて変換します。逆に同じスクリプトを何度も読み込むと初期化が二重になり、うまく描画されないことがあります。読み込みは1回にまとめるのが基本です。
埋め込みを後から動的に追加した場合は、変換処理が走らずblockquoteのまま残ることがあります。その場合は再変換の処理を呼ぶか、ページ読み込み完了後にスクリプトを実行する構成にします。
症状別チェック表
Instagramの投稿埋め込みが表示されないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
表示されないときの切り分け手順
Instagramの埋め込み不具合は、コード構成・投稿側・ブロックのどこに原因があるかを分けて考えると整理しやすくなります。
- 貼ったコードにinstagram-mediaクラスのblockquoteとembed.jsの両方が含まれているか確認する
- HTMLソース編集モードでblockquoteのクラスやdata属性が削られていないか点検する
- embed.jsが1ページに1回だけ読み込まれているか(重複していないか)確認する
- 対象の投稿が公開アカウントのもので、削除・非公開になっていないかを別ブラウザのログアウト状態で確認する
- 広告ブロッカーを無効化し、コンソールでCSPやスクリプト読み込みのエラーが出ていないか確認する
非公開・削除された投稿とブロック要因
埋め込み元の投稿が非公開アカウントになっていたり、削除されていたりすると、当然ながらカードは表示されません。投稿のURLをログアウト状態の別ブラウザで開き、第三者から見える投稿かどうかを確認しましょう。
コードと投稿に問題がなくても、広告ブロッカーやトラッキング防止系の拡張がembed.jsの読み込みを止めることがあります。ページにCSPが設定されていると、Instagramドメインのスクリプトやフレームが拒否され、コンソールにエラーが出ます。
サードパーティCookieのブロック設定でも一部の埋め込み機能が制限されることがあるため、Cookie制限のゆるい環境でも表示を試して切り分けると確実です。
埋め込み入りページを安全に共有してレビューする
埋め込みの見え方は閲覧者の環境に左右されるため、公開前に複数のブラウザや端末で確認しておくと安心です。とくにembed.jsの実行を伴うページは、表示までに一瞬の遅延があるので、実際の表示を見てから公開するのがおすすめです。
完成前のページを関係者に見てもらいたいときは、HTMLをそのままアップして認証付きの一時URLを発行できるギガサイト便のような仕組みが便利です。パスワードや期限を設定して限定的に共有でき、修正があれば同じURLのまま中身だけ差し替えられるので、Instagram埋め込み入りのページを実際の表示のままスムーズにレビューしてもらえます。
よくある質問
投稿がただのリンクや引用文のまま表示されます。
blockquoteは貼られているのにembed.jsが読み込まれていない状態です。Instagramのカードはembed.jsがblockquoteを変換して初めて表示されるので、スクリプトがページに1回読み込まれているかを確認してください。
複数の投稿を埋め込むときもembed.jsは投稿ごとに必要ですか?
いいえ。embed.jsは1ページに1回読み込めば、ページ内の複数のblockquoteをまとめて変換します。むしろ同じスクリプトを何度も読み込むと初期化が二重になり、表示が崩れる原因になります。
コードは正しいのにカードが出ません。
埋め込み元の投稿が非公開アカウントになっているか、削除された可能性があります。投稿URLをログアウト状態の別ブラウザで開き、第三者から閲覧できる公開投稿かどうかを確認してください。
自分の環境だけ表示されないのはなぜですか?
広告ブロッカーやトラッキング防止系の拡張がembed.jsの読み込みをブロックしている可能性があります。拡張を無効化したクリーンなブラウザで試し、コンソールにCSPやスクリプト関連のエラーが出ていないかも確認してください。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。