WordPressに埋め込みできない？YouTube・Googleマップ・SNSを簡単に表示する方法と対処法
はじめに
WordPressでは、YouTube動画、Googleマップ、SNS投稿、PDF、Googleフォームなど、さまざまな外部コンテンツを記事や固定ページに埋め込みできます。うまく使えば、文章だけでは伝わりにくい情報を視覚的に補足でき、読者にとってわかりやすいページを作ることができます。
一方で、「URLを貼ったのにリンクになるだけ」「埋め込みコードがそのまま表示される」「iframeが消えて保存できない」「スマホで表示が崩れる」といったトラブルもよくあります。特にWordPressのブロックエディター、クラシックエディター、テーマ、プラグイン、外部サービス側の仕様によって、埋め込みの動作が変わることがあります。
この記事では、WordPressに埋め込みできる主なコンテンツの種類から、YouTube、Googleマップ、SNS、PDF、Googleフォームなどの具体的な埋め込み方法、表示されないときの原因と対処法、きれいに表示するためのカスタマイズまで解説します。
1. WordPressの埋め込みとは？できることと基本の仕組み
WordPressの埋め込みとは、外部サービスのコンテンツを自分のサイト内に表示させる機能のことです。たとえば、YouTube動画を記事内で再生できるようにしたり、Googleマップをアクセスページに表示したり、SNS投稿を引用のように見せたりできます。
単にURLを貼るだけのリンクとは異なり、埋め込みではページ内に動画プレーヤー、地図、投稿カード、フォームなどが直接表示されます。読者は別ページへ移動しなくても、WordPressサイト上でコンテンツを確認できます。
WordPressでは、URLを貼るだけで自動表示される方法と、iframeなどの埋め込みコードを貼り付ける方法があります。どちらを使うかは、埋め込みたいサービスや表示のカスタマイズ度によって変わります。
1-1. WordPressに埋め込みできる主なコンテンツ
WordPressに埋め込みできる代表的なコンテンツには、次のようなものがあります。
YouTube動画、Vimeo動画、Googleマップ、X（旧Twitter）の投稿、Instagram投稿、Facebook投稿、TikTok投稿、PDFファイル、Googleフォーム、Googleカレンダー、Googleスライド、外部サービスの予約フォーム、口コミウィジェット、広告タグ、チャットボットなどです。
特にブログ記事でよく使われるのは、YouTube動画やSNS投稿の埋め込みです。商品レビュー記事では動画を入れることで使用感を伝えやすくなり、店舗サイトではGoogleマップを埋め込むことでアクセス情報がわかりやすくなります。
ただし、すべての外部コンテンツがWordPressにそのまま埋め込めるわけではありません。サービス側が埋め込みを許可していない場合や、WordPress側の権限設定、セキュリティ設定、テーマの仕様によって表示できないケースもあります。
1-2. URLを貼るだけで表示できる「埋め込みブロック」とは
WordPressのブロックエディターには「埋め込みブロック」が用意されています。これは、YouTubeやSNSなどのURLを貼り付けるだけで、WordPressが自動的に埋め込み表示へ変換してくれる機能です。
たとえば、YouTube動画のURLを記事本文に貼り付けると、自動的に動画プレーヤーとして表示されます。難しいHTMLコードを触る必要がないため、初心者でも簡単に使えるのが大きなメリットです。
使い方はシンプルです。投稿編集画面でブロックを追加し、「埋め込み」または「YouTube」などの専用ブロックを選び、URLを貼り付けます。問題なく認識されれば、編集画面上にプレビューが表示されます。
ただし、URLの形式が正しくない場合や、サービス側が埋め込みに対応していない場合は、通常のリンクとして表示されることがあります。その場合は、埋め込みコードを使う方法や、カスタムHTMLブロックを使う方法を試す必要があります。
1-3. iframeやHTMLコードを使った埋め込みとの違い
URLを貼るだけの埋め込みと、iframeやHTMLコードを使った埋め込みには違いがあります。
URL貼り付けによる埋め込みは、操作が簡単で初心者向けです。WordPressが自動で表示形式を判断してくれるため、HTMLの知識がなくても使えます。一方で、細かいサイズ調整や表示オプションの変更には限界があります。
iframeやHTMLコードを使った埋め込みは、外部サービスが発行するコードをWordPressに貼り付けて表示する方法です。Googleマップ、Googleフォーム、カレンダー、外部ウィジェットなどでは、この方法を使うことが多くなります。
iframeを使うと、幅や高さ、枠線、表示位置などを細かく指定できます。ただし、貼り付ける場所を間違えるとコードがそのまま表示されたり、WordPressの権限設定によってiframeタグが削除されたりすることがあります。
初心者はまずURL貼り付けを試し、うまく表示されない場合や細かく調整したい場合にHTMLコードを使うとよいでしょう。
1-4. 埋め込みとリンク掲載の違い
埋め込みとリンク掲載は似ていますが、役割が異なります。
リンク掲載は、テキストやボタンをクリックして外部ページへ移動してもらう方法です。たとえば「YouTubeで動画を見る」「Googleマップで開く」といったリンクを設置する形です。
一方、埋め込みは外部コンテンツをWordPressの記事内に直接表示する方法です。読者はページを離れずに動画を再生したり、地図を確認したり、SNS投稿を見たりできます。
読者の離脱を防ぎたい場合や、ページ内で情報を完結させたい場合は埋め込みが便利です。ただし、埋め込みが多すぎるとページの表示速度が遅くなる可能性があります。必要な場所では埋め込みを使い、補足程度でよい場合はリンク掲載にするなど、目的に応じて使い分けることが大切です。
2. WordPressにYouTube動画を埋め込む方法
WordPressにYouTube動画を埋め込む方法は、主に2つあります。ひとつはYouTube動画のURLをそのまま貼り付ける方法、もうひとつはYouTubeの共有メニューから取得できる埋め込みコードを使う方法です。
もっとも簡単なのはURLを貼り付ける方法です。通常のブログ記事であれば、これだけで十分きれいに表示できます。サイズや開始位置などを細かく調整したい場合は、埋め込みコードを使うと便利です。
2-1. YouTube動画のURLを貼り付けて埋め込む手順
YouTube動画を簡単に埋め込む手順は次の通りです。
まず、YouTubeで埋め込みたい動画を開きます。ブラウザのアドレスバーに表示されている動画URLをコピーします。次に、WordPressの投稿または固定ページの編集画面を開き、本文内の表示したい場所にURLを貼り付けます。
ブロックエディターを使っている場合は、URLを貼るだけで自動的にYouTubeブロックへ変換され、動画プレーヤーが表示されます。表示されない場合は、「＋」ボタンから「YouTube」ブロックを選び、そこにURLを貼り付けて「埋め込み」をクリックします。
正しく埋め込まれると、編集画面上でも動画のプレビューが表示されます。公開前にプレビュー画面で再生できるか確認しておきましょう。
URLを貼ってもリンクになるだけの場合は、動画URLが短縮URLになっていないか、非公開動画や限定公開設定に問題がないか、WordPressが対応している形式かを確認してください。
2-2. YouTubeの埋め込みコードを使って表示する方法
YouTubeの埋め込みコードを使うと、動画サイズや開始時間などを調整しやすくなります。
まず、YouTube動画ページを開き、「共有」をクリックします。表示されたメニューから「埋め込む」を選択すると、iframe形式のコードが表示されます。そのコードをコピーします。
次に、WordPressの編集画面で「カスタムHTML」ブロックを追加します。そこにコピーしたiframeコードを貼り付けます。
例として、YouTubeの埋め込みコードは次のような形です。
HTML<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
貼り付けたあとは、プレビューで正しく表示されるか確認します。ビジュアル表示ではなくHTMLコードとして貼り付ける必要があるため、通常の段落ブロックに貼るとコードがそのまま表示される場合があります。
2-3. 動画サイズや中央寄せを調整する方法
YouTube動画のサイズを調整したい場合は、iframeコード内のwidthとheightを変更します。ただし、固定幅のままだとスマホ表示で画面からはみ出すことがあります。そのため、現在は横幅を100%にして、レスポンシブ対応させる方法がよく使われます。
簡単に中央寄せしたい場合は、ブロックエディターの配置設定を使います。YouTubeブロックを選択し、ツールバーから「中央揃え」を選べば、動画を中央に配置できます。
カスタムHTMLで埋め込んでいる場合は、次のようにdivタグで囲む方法もあります。
HTML<div class="youtube-wrap">
<iframe src="https://www.youtube.com/embed/動画ID" allowfullscreen></iframe>
</div>
CSSは次のように設定します。
CSS.youtube-wrap {
max-width: 800px;
margin: 0 auto;
}
.youtube-wrap iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
これにより、PCでは見やすい幅に収まり、スマホでは画面幅に合わせて表示されます。
2-4. YouTubeショート動画を埋め込むときの注意点
YouTubeショート動画をWordPressに埋め込む場合、通常の動画とはURL形式が異なることがあります。ショート動画のURLは、youtube.com/shorts/動画IDのような形になっています。
このURLをそのまま貼って表示できる場合もありますが、うまく埋め込み表示にならない場合は、通常の埋め込みURLに変換して試します。
たとえば、次のようなURLがあるとします。
https://www.youtube.com/shorts/動画ID
埋め込みコードでは、次のようにします。
HTML<iframe src="https://www.youtube.com/embed/動画ID" allowfullscreen></iframe>
ショート動画は縦長の比率で作られていることが多いため、通常の16:9の横長サイズで表示すると余白が多くなる場合があります。スマホ向けに見せたい場合は、縦長比率に合わせてCSSで調整すると見やすくなります。
CSS.youtube-short iframe {
width: 100%;
max-width: 360px;
aspect-ratio: 9 / 16;
height: auto;
}
通常動画とショート動画では見せ方が違うため、記事の目的に合わせてサイズを調整しましょう。
3. WordPressにGoogleマップを埋め込む方法
店舗サイト、会社概要ページ、イベント案内ページなどでは、Googleマップの埋め込みがよく使われます。住所をテキストで掲載するだけでなく、地図を表示することで、読者が場所を直感的に把握しやすくなります。
Googleマップは、共有機能から埋め込みコードを取得し、WordPressのカスタムHTMLブロックに貼り付ける方法が基本です。
3-1. Googleマップの共有機能から埋め込みコードを取得する
まず、Googleマップで埋め込みたい場所を検索します。店舗名、会社名、住所などで検索し、正しい場所が表示されていることを確認します。
次に、「共有」ボタンをクリックします。共有画面が表示されたら、「地図を埋め込む」タブを選択します。そこにiframe形式の埋め込みコードが表示されるので、「HTMLをコピー」をクリックします。
Googleマップの埋め込みコードは、次のような形になっています。
HTML<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
このコードをWordPressに貼り付けることで、記事や固定ページ内に地図を表示できます。
3-2. カスタムHTMLブロックに貼り付ける手順
WordPressのブロックエディターでGoogleマップを埋め込む場合は、「カスタムHTML」ブロックを使います。
投稿または固定ページの編集画面を開き、地図を表示したい位置で「＋」ボタンをクリックします。検索欄に「カスタムHTML」と入力し、ブロックを追加します。そこにGoogleマップからコピーしたiframeコードを貼り付けます。
貼り付けたら、ブロックの「プレビュー」をクリックして地図が表示されるか確認します。編集画面では表示が崩れて見える場合でも、公開ページでは正常に表示されることがあります。必ず公開前にプレビュー画面で確認しましょう。
段落ブロックや通常のテキスト入力欄に貼り付けると、コードがそのまま文字として表示される可能性があります。Googleマップの埋め込みコードは、必ずカスタムHTMLブロックに貼るのが基本です。
3-3. 地図のサイズや表示位置を調整する方法
Googleマップのサイズは、iframeコード内のwidthとheightで調整できます。たとえば、横幅を100%にすると、親要素の幅に合わせて地図が広がります。
HTML<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
スマホでも見やすくしたい場合は、横幅を固定値ではなく100%にするのがおすすめです。高さは、PCとスマホの両方で見やすいように300px〜500px程度で調整するとよいでしょう。
中央寄せしたい場合は、次のようにdivタグで囲みます。
HTML<div class="map-wrap">
<iframe src="https://www.google.com/maps/embed?pb=..." loading="lazy"></iframe>
</div>
CSSは次のように設定します。
CSS.map-wrap {
max-width: 900px;
margin: 0 auto;
}
.map-wrap iframe {
width: 100%;
height: 450px;
border: 0;
}
これにより、PCでは横幅が広がりすぎず、スマホでは画面幅に合わせて表示できます。
3-4. 店舗サイトやアクセスページで使うときのポイント
店舗サイトやアクセスページでGoogleマップを埋め込む場合は、地図だけでなく、住所、最寄り駅、駐車場、営業時間、電話番号なども一緒に掲載すると親切です。
地図だけを表示しても、読者がすぐに必要な情報を得られるとは限りません。たとえば、スマホで見ているユーザーは「現在地からの経路を開きたい」「電話をかけたい」「営業時間を確認したい」と考えていることが多いです。
そのため、Googleマップの下に次のような情報を整理しておくと使いやすくなります。
住所：東京都〇〇区〇〇1-2-3
最寄り駅：〇〇駅から徒歩5分
営業時間：10:00〜19:00
定休日：水曜日
駐車場：近隣にコインパーキングあり
また、地図の埋め込みだけでなく、「Googleマップで開く」というリンクも併設しておくと便利です。スマホユーザーがナビアプリで経路検索しやすくなります。
4. WordPressにSNS投稿を埋め込む方法
WordPressでは、X（旧Twitter）、Instagram、Facebook、TikTokなどのSNS投稿を記事内に埋め込むことができます。SNS投稿を埋め込むことで、口コミ、公式発表、キャンペーン情報、ユーザーの反応などをリアルな形で紹介できます。
ただし、SNS埋め込みはサービス側の仕様変更や投稿の公開範囲によって表示されないことがあります。公開投稿であること、埋め込みが許可されていること、正しいコードを使っていることを確認しましょう。
4-1. X（旧Twitter）の投稿を埋め込む方法
Xの投稿をWordPressに埋め込むには、投稿URLを貼り付ける方法と、埋め込みコードを取得する方法があります。
簡単なのは投稿URLを貼り付ける方法です。Xで埋め込みたい投稿を開き、投稿のURLをコピーします。WordPressの編集画面で「埋め込み」ブロック、または通常の段落にURLを貼り付けると、自動的に投稿カードとして表示される場合があります。
うまく表示されない場合は、Xの投稿メニューから「ポストを埋め込む」を選び、表示されたコードをコピーします。そのコードをWordPressの「カスタムHTML」ブロックに貼り付けます。
Xの投稿が表示されない場合は、投稿が削除されていないか、非公開アカウントの投稿ではないか、ブラウザの広告ブロック機能やセキュリティ系プラグインが影響していないか確認しましょう。
4-2. Instagram投稿を埋め込む方法
Instagram投稿をWordPressに埋め込む場合は、Instagram側で埋め込みコードを取得します。
まず、埋め込みたいInstagram投稿をブラウザで開きます。投稿のメニューから「埋め込み」を選択し、表示されたHTMLコードをコピーします。WordPressの編集画面で「カスタムHTML」ブロックを追加し、コードを貼り付けます。
Instagram投稿は、アカウントや投稿の公開設定によって埋め込みできないことがあります。非公開アカウントの投稿、削除された投稿、埋め込みが制限されている投稿は表示されません。
また、Instagramの埋め込みは外部スクリプトを読み込むため、ページ表示速度に影響することがあります。1ページに多くのInstagram投稿を埋め込む場合は、表示速度にも注意しましょう。
4-3. Facebook投稿を埋め込む方法
Facebook投稿をWordPressに埋め込むには、公開投稿の埋め込みコードを使います。
Facebookで埋め込みたい投稿を開き、投稿メニューから「埋め込み」を選択します。表示されたコードをコピーし、WordPressの「カスタムHTML」ブロックに貼り付けます。
Facebook投稿を埋め込む際に重要なのは、投稿が公開設定になっていることです。友達限定、グループ内限定、非公開ページの投稿などは、埋め込んでも表示されない場合があります。
また、Facebookページの投稿を埋め込む場合は、ページ自体の公開設定や地域制限、年齢制限によって表示できないことがあります。表示されないときは、別のブラウザやログアウト状態でも確認してみましょう。
4-4. TikTok投稿を埋め込む方法
TikTok動画をWordPressに埋め込む場合も、TikTok側の共有機能から埋め込みコードを取得します。
埋め込みたいTikTok動画を開き、共有メニューから「埋め込む」を選択します。表示されたコードをコピーし、WordPressの「カスタムHTML」ブロックに貼り付けます。
TikTokの埋め込みコードには、動画を表示するためのHTMLとスクリプトが含まれることがあります。通常の段落ブロックではなく、カスタムHTMLブロックに貼り付けるようにしましょう。
TikTok動画は縦長で表示されることが多いため、記事内での配置に注意が必要です。PCでは横幅が広がりすぎないように最大幅を設定し、スマホでは自然に画面幅に収まるようにすると見やすくなります。
4-5. SNS埋め込みが表示されないときの確認ポイント
SNS埋め込みが表示されないときは、まず投稿の公開状態を確認しましょう。非公開アカウント、削除済み投稿、限定公開投稿、年齢制限や地域制限のある投稿は、WordPressに埋め込んでも表示されないことがあります。
次に、URLや埋め込みコードが正しいか確認します。余計な文字が入っていたり、コードの一部が欠けていたりすると、正常に表示されません。コピーするときは、サービス側が発行したコードをそのまま使うのが基本です。
また、セキュリティ系プラグイン、キャッシュ系プラグイン、広告ブロック、Cookie制限、ブラウザ拡張機能が原因で表示されないこともあります。別のブラウザやシークレットモードで確認すると、原因を切り分けやすくなります。
WordPress側では、カスタムHTMLブロックに貼っているか、権限の低いユーザーでiframeやscriptが削除されていないか、テーマやプラグインが外部スクリプトを制限していないかを確認しましょう。
5. WordPressにその他のコンテンツを埋め込む方法
WordPressには、動画やSNS以外にもさまざまなコンテンツを埋め込めます。PDF資料、Googleフォーム、Googleカレンダー、スライド、外部サービスのウィジェットなどを活用すると、サイトの用途を広げることができます。
ただし、外部サービスの埋め込みは、基本的にサービス側が発行するiframeやHTMLコードをWordPressに貼り付けて表示します。コードの貼り付け場所を間違えないことが重要です。
5-1. PDFファイルを埋め込む方法
WordPressにPDFを埋め込む方法はいくつかあります。もっとも簡単なのは、PDFファイルをメディアライブラリにアップロードし、そのファイルへのリンクを記事内に掲載する方法です。
ブロックエディターでは、「ファイル」ブロックを使うとPDFをアップロードして、ダウンロードボタン付きで表示できます。テーマやWordPressの環境によっては、PDFのプレビューが表示される場合もあります。
PDFをページ内に直接表示したい場合は、PDF埋め込み用のプラグインを使う方法が便利です。プラグインを使うと、PDFビューアーのようにページ内でスクロール表示できることがあります。
また、GoogleドライブにPDFをアップロードし、共有リンクや埋め込みコードを使って表示する方法もあります。ただし、共有設定が非公開のままだと読者には表示されないため、公開範囲を確認してから使いましょう。
5-2. Googleフォームを埋め込む方法
GoogleフォームをWordPressに埋め込むと、問い合わせ、アンケート、イベント申し込み、予約受付などに活用できます。
まず、Googleフォームを開き、右上の「送信」ボタンをクリックします。送信方法の中からHTML埋め込み用のアイコンを選択すると、iframeコードが表示されます。そのコードをコピーします。
WordPressでは、フォームを表示したいページに「カスタムHTML」ブロックを追加し、コピーしたiframeコードを貼り付けます。
Googleフォームの幅や高さは、iframeコード内のwidthとheightで調整できます。スマホ表示を考えるなら、横幅は100%にするのがおすすめです。
HTML<iframe src="GoogleフォームのURL" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
フォームの項目数が多い場合、高さが足りないとフォーム内にスクロールが発生します。読者が入力しやすいように、十分な高さを設定しましょう。
5-3. Googleカレンダーを埋め込む方法
GoogleカレンダーをWordPressに埋め込むと、営業日、イベント予定、予約可能日、セミナースケジュールなどを表示できます。
Googleカレンダーの設定画面を開き、埋め込みたいカレンダーを選択します。「カレンダーの統合」または埋め込みコードの項目からiframeコードをコピーします。
WordPressでは「カスタムHTML」ブロックを追加し、コピーしたコードを貼り付けます。
カレンダーを一般公開する場合は、Googleカレンダー側の共有設定も確認しておく必要があります。非公開のままだと、自分には見えていても他のユーザーには表示されないことがあります。
また、カレンダーに個人情報や非公開予定が含まれていないかも確認しましょう。サイトに埋め込むカレンダーは、公開しても問題ない予定だけを登録した専用カレンダーにするのがおすすめです。
5-4. スライドや資料を埋め込む方法
GoogleスライドやSlideShareなどの資料も、WordPressに埋め込むことができます。セミナー資料、会社紹介、サービス説明、授業資料などをサイト上で見せたい場合に便利です。
Googleスライドの場合は、スライドを開いて「ファイル」から「ウェブに公開」を選び、埋め込み用のコードを取得します。そのコードをWordPressのカスタムHTMLブロックに貼り付けます。
資料を埋め込む場合は、表示サイズに注意しましょう。横長のスライドを小さな幅で表示すると文字が読みにくくなります。PCでは大きめに表示し、スマホでは横スクロールやリンク掲載も検討するとよいでしょう。
資料の内容を検索エンジンに伝えたい場合は、埋め込みだけでなく、ページ本文にも要点をテキストで記載することが大切です。埋め込み資料だけでは、読者にも検索エンジンにも内容が伝わりにくくなる場合があります。
5-5. 外部サービスのウィジェットを埋め込む方法
予約システム、口コミ表示、チャットボット、決済ボタン、ランキングパーツ、広告タグなど、外部サービスが発行するウィジェットもWordPressに埋め込めます。
多くの場合、外部サービスの管理画面でHTMLコードやscriptタグを取得し、WordPressのカスタムHTMLブロックやウィジェットエリアに貼り付けます。
ただし、scriptタグを含むコードは、WordPressの権限やセキュリティ設定によって保存できないことがあります。また、テーマやプラグインとの相性によって正常に動作しない場合もあります。
外部サービスのウィジェットを使うときは、提供元が信頼できるか、表示速度に悪影響がないか、個人情報を扱う場合にプライバシーポリシーへ反映する必要がないかを確認しましょう。
6. WordPressで埋め込みできない原因と対処法
WordPressで埋め込みできない場合、原因はひとつとは限りません。URLの形式、貼り付け場所、ユーザー権限、テーマ、プラグイン、キャッシュ、外部サービス側の制限など、複数の要素が関係します。
ここでは、よくある症状別に原因と対処法を解説します。
6-1. URLを貼ってもリンクになるだけの場合
URLを貼っても埋め込み表示にならず、通常のリンクになるだけの場合は、まずURLの形式を確認しましょう。
YouTubeであれば、動画ページのURLを使います。再生リストや共有用の特殊なURL、短縮URL、パラメータ付きURLではうまく認識されないことがあります。表示できない場合は、通常の動画URLをコピーし直して試してください。
また、WordPressが自動埋め込みに対応していないサービスの場合、URLを貼るだけでは表示されません。その場合は、サービス側が発行している埋め込みコードを取得し、カスタムHTMLブロックに貼り付けます。
ブロックエディターでは、専用の埋め込みブロックを使うと解決する場合があります。YouTubeなら「YouTube」ブロック、Xなら「X」または「Twitter」系の埋め込みブロックを試してみましょう。
6-2. 埋め込みコードがそのまま表示される場合
iframeやHTMLコードを貼り付けたのに、ページ上にコードがそのまま文字として表示される場合は、貼り付ける場所が間違っている可能性があります。
埋め込みコードは、通常の段落ブロックではなく「カスタムHTML」ブロックに貼り付けます。クラシックエディターの場合は、ビジュアルモードではなくテキストモードに切り替えて貼り付けます。
また、コードが自動的にエスケープされている場合もあります。たとえば、<iframe>が<iframe>のように変換されていると、HTMLとして認識されず文字として表示されます。
対処法としては、カスタムHTMLブロックを使う、テキストモードで貼り付ける、コードをコピーし直す、不要な改行や文字が入っていないか確認することが有効です。
6-3. iframeタグが消える・保存できない場合
iframeタグが保存時に消える場合は、WordPressのセキュリティ機能やユーザー権限が関係している可能性があります。
WordPressでは、管理者以外のユーザーが危険なHTMLタグを保存できないように制限されることがあります。編集者や投稿者の権限で作業している場合、iframeやscriptタグが削除されることがあります。
この場合は、管理者権限のユーザーで編集するか、必要に応じて権限設定を見直します。ただし、セキュリティ上の理由で制限されているため、むやみにすべてのHTMLタグを許可するのはおすすめできません。
また、セキュリティ系プラグインがiframeをブロックしている場合もあります。プラグインの設定でHTMLタグの制限や投稿内容のフィルタリングが有効になっていないか確認しましょう。
6-4. 画面が真っ白・何も表示されない場合
埋め込み部分が真っ白になったり、何も表示されない場合は、外部サービス側の読み込みに失敗している可能性があります。
まず、埋め込み元のURLが正しいか、コンテンツが削除されていないか、公開設定になっているかを確認しましょう。非公開動画、削除済み投稿、限定公開コンテンツなどは正常に表示されないことがあります。
次に、ブラウザの広告ブロックやプライバシー保護機能が影響していないか確認します。SNSや動画サービスの埋め込みは、外部スクリプトやCookieを利用することがあり、ブラウザ設定によってブロックされる場合があります。
WordPress側では、キャッシュ系プラグイン、遅延読み込み機能、JavaScript最適化機能が原因になることがあります。表示されない埋め込みがある場合は、一時的に該当機能を停止して確認してみましょう。
6-5. スマホで表示が崩れる場合
PCでは問題なく表示されるのに、スマホで埋め込みがはみ出したり、横スクロールが発生したりする場合は、iframeの幅が固定されていることが原因かもしれません。
たとえば、width="600"のように固定幅が指定されていると、画面幅の狭いスマホでは表示がはみ出すことがあります。この場合は、width="100%"に変更するか、CSSでレスポンシブ対応させます。
YouTube動画なら、次のようなCSSが有効です。
CSS.embed-responsive {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.embed-responsive iframe {
width: 100%;
height: 100%;
border: 0;
}
HTMLは次のようにします。
HTML<div class="embed-responsive">
<iframe src="https://www.youtube.com/embed/動画ID" allowfullscreen></iframe>
</div>
Googleマップやフォームでも、横幅を100%にするだけでスマホ表示が改善されることがあります。
6-6. キャッシュやプラグインの影響を確認する
WordPressで埋め込みが表示されない場合、キャッシュやプラグインが原因になっていることがあります。
キャッシュ系プラグインは、ページを高速化するためにHTML、CSS、JavaScriptを最適化します。しかし、外部サービスの埋め込みコードやスクリプトと相性が悪いと、表示が崩れたり読み込まれなかったりすることがあります。
特に注意したいのは、JavaScriptの遅延読み込み、結合、圧縮、非同期読み込みです。SNS埋め込みや外部ウィジェットはJavaScriptに依存していることが多いため、最適化によって動作しなくなることがあります。
原因を調べるには、キャッシュを削除する、プラグインを一時停止する、シークレットモードで確認する、別のブラウザで確認する、といった方法が有効です。
プラグインを停止する場合は、いきなり本番サイトで行うのではなく、可能であればバックアップを取ってから行いましょう。
6-7. テーマやWordPress本体の不具合を確認する
テーマやWordPress本体の不具合によって、埋め込みがうまく表示されないこともあります。
まず、WordPress本体、テーマ、プラグインが古いままになっていないか確認しましょう。古いバージョンでは、ブロックエディターや外部サービスの埋め込みに不具合が出る場合があります。
次に、テーマを一時的に標準テーマへ切り替えて確認すると、テーマが原因かどうかを切り分けられます。標準テーマでは表示されるのに現在のテーマでは表示されない場合、テーマ側のCSSやJavaScriptが影響している可能性があります。
また、テーマ独自のブロックやページビルダーを使っている場合、通常のWordPressブロックとはHTMLの扱いが異なることがあります。埋め込みコードを貼る場所が専用のHTMLウィジェットやコードブロックになっているか確認しましょう。
7. 埋め込みコンテンツをきれいに表示するカスタマイズ方法
WordPressに埋め込みできても、表示サイズが大きすぎる、中央に配置されない、スマホで崩れる、余白が詰まって見づらいといった問題が起きることがあります。
埋め込みコンテンツをきれいに見せるには、幅、高さ、余白、中央寄せ、レスポンシブ対応を整えることが大切です。
7-1. 幅・高さを調整して見やすくする
iframeで埋め込むコンテンツは、widthとheightでサイズを調整できます。PCだけでなくスマホ表示も考えるなら、横幅は固定値ではなく100%にするのがおすすめです。
GoogleマップやGoogleフォームでは、次のように設定すると扱いやすくなります。
HTML<iframe src="埋め込みURL" width="100%" height="450" style="border:0;"></iframe>
動画の場合は、横幅だけでなく縦横比も重要です。YouTubeの通常動画は16:9が多いため、CSSのaspect-ratioを使うと簡単に比率を保てます。
CSS.video-wrap iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
フォームやカレンダーは内容によって必要な高さが変わるため、実際にプレビューしながら調整しましょう。
7-2. レスポンシブ対応させる方法
レスポンシブ対応とは、PC、タブレット、スマホなど画面サイズが違っても見やすく表示されるように調整することです。
埋め込みコンテンツでよくある失敗は、iframeに固定幅を指定してしまい、スマホで画面からはみ出すことです。これを防ぐには、iframeの幅を100%にし、親要素に最大幅を設定します。
CSS.embed-box {
max-width: 900px;
margin: 0 auto;
}
.embed-box iframe {
width: 100%;
border: 0;
}
YouTube動画のように比率が重要なものは、次のようにします。
CSS.video-box {
max-width: 900px;
margin: 0 auto;
}
.video-box iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
これにより、PCでは見やすい幅で表示され、スマホでは画面幅に合わせて縮小されます。
7-3. 中央寄せ・余白を整える方法
埋め込みコンテンツが左寄せになっていると、ページ全体のバランスが悪く見えることがあります。特に動画や地図は、中央寄せにすると見栄えがよくなります。
ブロックエディターでは、ブロックを選択して配置設定から中央揃えを選べる場合があります。テーマによっては、幅広や全幅表示を選択できることもあります。
CSSで中央寄せする場合は、親要素にmargin: 0 auto;を指定します。
CSS.embed-center {
max-width: 800px;
margin: 0 auto;
}
また、上下の余白も大切です。本文と埋め込みコンテンツの間が詰まりすぎると読みにくくなります。
CSS.embed-center {
max-width: 800px;
margin: 32px auto;
}
余白を適度に取ることで、動画や地図が自然に本文になじみます。
7-4. CSSでデザインを調整する方法
埋め込みコンテンツは、CSSで見た目を調整できます。たとえば、角丸、影、余白、最大幅などを設定すると、サイトのデザインに合わせやすくなります。
CSS.custom-embed {
max-width: 900px;
margin: 32px auto;
}
.custom-embed iframe {
width: 100%;
border: 0;
border-radius: 12px;
}
ただし、SNS投稿など外部サービスのデザインが固定されているものは、CSSで大きく変更できない場合があります。無理にデザインを変えると、表示崩れや利用規約上の問題につながることもあるため注意が必要です。
CSSを追加する場所は、テーマの「追加CSS」、子テーマのCSSファイル、またはカスタマイズ用プラグインなどです。直接テーマファイルを編集すると、テーマ更新時に消えることがあるため、子テーマや追加CSSを使うのが安全です。
7-5. 埋め込み用プラグインを使うべきケース
WordPressの標準機能だけでも多くの埋め込みは可能です。しかし、次のような場合は埋め込み用プラグインを使うと便利です。
PDFをページ内で見やすく表示したい場合、YouTubeギャラリーを作りたい場合、SNSフィードを一覧表示したい場合、Googleマップに複数のピンを表示したい場合、予約フォームや口コミウィジェットを管理したい場合などです。
プラグインを使うメリットは、専門知識がなくても高度な表示ができることです。一方で、プラグインを増やしすぎるとサイトが重くなったり、セキュリティリスクが増えたりする可能性があります。
プラグインを選ぶときは、更新頻度、利用者数、レビュー、WordPressの対応バージョン、サポート状況を確認しましょう。不要になったプラグインは停止するだけでなく、削除しておくと管理しやすくなります。
8. WordPressに埋め込むときの注意点
WordPressの埋め込みは便利ですが、使いすぎると表示速度、著作権、セキュリティ、SEO、ユーザー体験に影響することがあります。
埋め込みは「便利だから入れる」のではなく、「読者にとって必要だから入れる」という視点で使うことが大切です。
8-1. 表示速度が遅くなるリスク
YouTube、SNS、Googleマップ、外部ウィジェットなどの埋め込みは、外部サービスからデータを読み込みます。そのため、埋め込み数が多いページは表示速度が遅くなることがあります。
特にSNS投稿を大量に埋め込んだページや、複数の動画を同時に表示するページは注意が必要です。ページの読み込みが遅いと、読者が離脱しやすくなり、SEOにも悪影響を与える可能性があります。
対策としては、埋め込み数を必要最小限にする、動画はサムネイル画像とリンクにする、遅延読み込みを使う、不要な外部ウィジェットを減らすなどがあります。
YouTube動画を複数掲載する場合は、すべてを埋め込むのではなく、重要な動画だけを埋め込み、その他はリンクで案内する方法も有効です。
8-2. 著作権や利用規約に注意する
外部コンテンツをWordPressに埋め込むときは、著作権や各サービスの利用規約に注意が必要です。
YouTube動画やSNS投稿は、埋め込み機能が提供されているからといって、どのような使い方でも許されるわけではありません。投稿者の意図に反する使い方、誤解を招く引用、無断転載のように見える掲載は避けるべきです。
特に、他人の画像、動画、投稿、資料を自分のコンテンツの一部として見せる場合は、引用の範囲や文脈に注意しましょう。必要に応じて出典を明記し、本文で埋め込み内容の説明を加えると安心です。
また、外部サービスによっては商用利用や表示方法に制限がある場合があります。企業サイトや収益化ブログで使う場合は、サービスごとの規約も確認しておきましょう。
8-3. セキュリティ面で気をつけること
iframeやscriptタグを使った埋め込みは、外部のコードを自分のサイト内で読み込むことになります。そのため、信頼できないサイトのコードを貼り付けるのは危険です。
悪意のあるコードを貼り付けると、読者を不正なサイトへ誘導したり、サイトの表示を改ざんしたり、個人情報の入力を促したりするリスクがあります。
埋め込みコードは、必ず信頼できる公式サービスから取得しましょう。知らないサイトで配布されているコードや、メールで送られてきた不審なコードは貼り付けないようにしてください。
また、管理者以外のユーザーが自由にHTMLやscriptを貼れる状態にするのも危険です。複数人でWordPressを運営している場合は、ユーザー権限を適切に管理しましょう。
8-4. 外部サービス停止時の影響
WordPressに埋め込んだコンテンツは、外部サービスに依存しています。埋め込み元のサービスが停止したり、投稿が削除されたり、URLが変更されたりすると、WordPress側でも表示されなくなります。
たとえば、YouTube動画が削除されると動画は再生できません。SNS投稿が削除されると、埋め込み部分にエラーが表示されることがあります。Googleフォームを停止すれば、フォームは回答を受け付けなくなります。
重要な情報を外部埋め込みだけに頼るのは避けましょう。動画やSNS投稿の内容が記事の理解に必要な場合は、本文でも要点を説明しておくことが大切です。
外部サービスが使えなくなっても、読者が最低限の情報を得られるようにしておくと、ページの品質を保ちやすくなります。
8-5. SEOへの影響とユーザー体験を考える
埋め込みコンテンツは、読者の理解を助ける一方で、SEOに直接プラスになるとは限りません。検索エンジンはページ内のテキスト情報を重視するため、動画や地図、SNS投稿を埋め込むだけでは内容が十分に伝わらない場合があります。
たとえば、YouTube動画を埋め込む場合は、動画の内容を本文でも説明しましょう。Googleマップを埋め込む場合は、住所やアクセス方法をテキストでも記載します。SNS投稿を埋め込む場合は、その投稿がなぜ重要なのかを本文で補足します。
また、埋め込みが多すぎるとページが重くなり、ユーザー体験が悪くなります。読者にとって本当に必要な埋め込みだけを選び、本文の流れを妨げないように配置することが重要です。
SEOを意識するなら、「埋め込み＋テキスト説明」の形にするのがおすすめです。
9. WordPress埋め込みに関するよくある質問
WordPressの埋め込みについては、動画の重さ、コードの貼り付け場所、iframeの制限、テーマとの関係など、初心者がつまずきやすい疑問が多くあります。
ここでは、よくある質問に答えます。
9-1. WordPressに動画を埋め込むとサイトは重くなる？
動画を埋め込むと、サイトが重くなる可能性があります。特にYouTube動画を複数埋め込むと、外部スクリプトやサムネイル、プレーヤーの読み込みが増えるため、ページ表示速度に影響することがあります。
ただし、動画ファイルをWordPressに直接アップロードするより、YouTubeなどにアップロードして埋め込むほうがサーバー負荷を抑えやすいです。WordPressに動画ファイルを直接置くと、サーバー容量や転送量を圧迫する場合があります。
動画を使う場合は、必要な動画だけを埋め込む、遅延読み込みを使う、サムネイル画像から動画ページへ誘導するなどの工夫をするとよいでしょう。
9-2. 埋め込みコードはどこに貼ればいい？
WordPressのブロックエディターを使っている場合、iframeやscriptを含む埋め込みコードは「カスタムHTML」ブロックに貼り付けます。
通常の段落ブロックに貼ると、コードがそのまま文字として表示されることがあります。YouTubeのURLだけを貼る場合は段落ブロックでも自動埋め込みされることがありますが、GoogleマップやGoogleフォームのiframeコードはカスタムHTMLブロックを使うのが基本です。
クラシックエディターの場合は、ビジュアルモードではなくテキストモードに切り替えて貼り付けます。ページビルダーを使っている場合は、HTMLウィジェットやコードブロックに貼り付けます。
9-3. iframeが使えないのはなぜ？
iframeが使えない原因として多いのは、ユーザー権限、セキュリティ設定、プラグインの制限です。
WordPressでは、セキュリティ上の理由から、一部のユーザー権限ではiframeやscriptなどのHTMLタグが削除されることがあります。管理者権限では保存できるのに、編集者や投稿者では消える場合があります。
また、セキュリティ系プラグインが危険なタグとしてiframeをブロックしている可能性もあります。サーバー側のWAFやセキュリティ設定が影響することもあります。
iframeを使う場合は、信頼できるサービスのコードだけを使用し、管理者権限で編集する、セキュリティ設定を確認する、必要に応じてプラグインの設定を見直すとよいでしょう。
9-4. 無料テーマでも埋め込みはできる？
無料テーマでも、基本的な埋め込みは可能です。WordPressの埋め込み機能はテーマではなくWordPress本体の機能として使えるため、YouTube動画やGoogleマップ、SNS投稿などは無料テーマでも表示できます。
ただし、テーマによっては埋め込みコンテンツの幅、余白、中央寄せ、レスポンシブ表示の見え方が異なります。無料テーマでも問題なく表示できることが多いですが、デザインを細かく整えたい場合はCSSの調整が必要になることがあります。
表示が崩れる場合は、テーマの追加CSS、ブロックの配置設定、埋め込みコードの幅指定を見直してみましょう。
9-5. クラシックエディターでも埋め込みできる？
クラシックエディターでも埋め込みは可能です。YouTubeのURLを本文に貼り付けるだけで自動的に埋め込み表示になる場合があります。
iframeやHTMLコードを使う場合は、クラシックエディターの「テキスト」タブに切り替えて貼り付けます。「ビジュアル」タブに貼ると、コードが文字として表示されたり、タグが正しく反映されなかったりすることがあります。
また、クラシックエディターではブロックエディターのような専用ブロックがないため、コードの貼り付け位置やHTMLの扱いに注意が必要です。埋め込みがうまくいかない場合は、テキストモードで貼り付け直し、プレビューで確認しましょう。
まとめ
WordPressの埋め込み機能を使えば、YouTube動画、Googleマップ、SNS投稿、PDF、Googleフォーム、Googleカレンダー、スライド、外部ウィジェットなどを記事や固定ページ内に表示できます。
基本的な埋め込みは、URLを貼り付けるだけで簡単にできます。YouTube動画や一部のSNS投稿は、WordPressの埋め込みブロックを使うと初心者でも扱いやすいです。一方、GoogleマップやGoogleフォーム、外部サービスのウィジェットなどは、iframeやHTMLコードを取得し、カスタムHTMLブロックに貼り付ける方法が基本です。
埋め込みできない場合は、URLの形式、貼り付け場所、カスタムHTMLブロックの使用、iframeの制限、ユーザー権限、プラグイン、キャッシュ、テーマ、外部サービス側の公開設定を確認しましょう。
また、埋め込みコンテンツは便利ですが、入れすぎるとページ表示速度が遅くなったり、スマホで表示が崩れたりすることがあります。横幅を100%にする、レスポンシブ対応させる、中央寄せや余白を整えるなど、見やすさにも配慮することが大切です。
WordPressで埋め込みを活用すると、記事の説得力や使いやすさを高められます。読者にとって必要な情報を、動画、地図、SNS、フォームなどでわかりやすく補足しながら、快適に閲覧できるページを作りましょう。