閉じる

WordPressにYouTubeやSNSの投稿を埋め込む方法|プラグイン不要の簡単手順

WordPressを利用してブログやWebサイトを運営する際、YouTube動画やSNSの投稿を記事内に取り入れたい場面は非常に多いものです。

動画やSNSのリアルな声を引用することで、記事の説得力や視覚的な魅力を大幅に高めることができます。

かつては専用のプラグインを導入するのが一般的でしたが、現在のWordPressでは標準機能だけで驚くほど簡単に埋め込みが可能です。

本記事では、サイトの動作を重くすることなく、余計な負荷をかけずに外部コンテンツを埋め込むための具体的な手順を詳しく解説します。

WordPressの標準機能「oEmbed」とは

WordPressには、特定のURLを貼り付けるだけで外部コンテンツを自動的に表示する「oEmbed」という仕組みが備わっています。

この機能により、複雑なHTMLコードや専用のスクリプトを記述することなく、メディアファイルを記事内に呼び出せます。

プラグインを増やしすぎるとサイトの読み込み速度が低下する原因となるため、標準機能の活用はSEO対策としても非常に有効です。

基本的には、投稿エディタ上でSNSのURLを1行貼り付けるだけで、システムが自動的に最適な形へと変換してくれます。

ブロックエディタでの基本操作

現在の主流であるブロックエディタ(Gutenberg)では、埋め込み専用のブロックが多数用意されています。

「/(スラッシュ)」を入力した後にサービス名を入力するか、ブロック追加ボタンから「埋め込み」カテゴリーを選択するだけです。

特定のサービス専用ブロックを使わなくても、通常の段落ブロックにURLを貼り付けるだけで自動変換されるケースがほとんどです。

YouTube動画を埋め込む具体的な手順

YouTubeはWordPressと非常に相性が良く、最も簡単に埋め込みができるコンテンツの一つです。

まずは共有したいYouTube動画のページを開き、ブラウザののアドレスバーにあるURLをコピーしてください。

WordPressの投稿編集画面で、動画を挿入したい位置にカーソルを合わせ、コピーしたURLを直接貼り付けます。

URLを貼り付けた瞬間にエディタ上で動画プレイヤーがプレビュー表示されれば成功です。

動画のサイズや配置を調整する方法

配置されたYouTubeブロックを選択すると、右側のサイドバー設定パネルでいくつかの調整が行えます。

「モバイル未対応のデバイスでもアスペクト比を維持する」設定を有効にすることで、スマートフォンの画面でも動画がはみ出す心配がなくなります。

また、キャプション機能を使って動画の下に説明文や引用元を記載することも可能です。

より詳細なカスタマイズを行いたい場合は、以下のコードのようにYouTubeの埋め込み用iframeをカスタムHTMLブロックで使用する方法もあります。

HTML
<!-- 任意のサイズで動画を固定したい場合 -->
<div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>
</div>

X(旧Twitter)の投稿を埋め込む方法

X(旧Twitter)の投稿も、YouTubeと同様にURLを貼り付けるだけで簡単にインライン表示させることができます。

埋め込みたいポストの右上にあるメニューから「リンクをコピー」を選択してください。

投稿画面の新しい段落にそのURLを貼り付けると、自動的にポストのカード形式で表示されます。

この際、前後にテキストを入力せず、URL単体で1行を使用することが正しく変換させるコツです。

スレッド(連投)を埋め込む際の注意点

スレッド形式の投稿を埋め込む場合、特定の1つだけでなく一連の流れを見せたいことがあります。

現在の仕様では、URLを貼り付けるだけだと個別のポストしか表示されないため、文脈を説明する補足テキストを添えるのが望ましいでしょう。

サイト訪問者が直接X上でスレッドを確認できるよう、「返信を表示」などのリンクが自動で付与されるため、ユーザビリティを損なうことはありません。

InstagramやTikTokの投稿を表示させるコツ

InstagramやTikTokといったモバイル中心のSNSも、WordPressへの埋め込みに対応しています。

ただし、Instagramの場合はMeta社(Facebook)の仕様変更により、埋め込みの認証が必要になる場合があります。

認証を求められた際は、公式の「埋め込み」コードを取得し、WordPressの「カスタムHTMLブロック」に貼り付ける方法が確実です。

Instagramの埋め込み手順

Instagramの投稿の右上にある「…」ボタンをクリックし、「埋め込み」を選択します。

表示されたコードをコピーし、WordPressのエディタで「カスタムHTML」ブロックを呼び出して貼り付けてください。

この方法であれば、キャプション(投稿本文)を含めるかどうかも選択できるため、用途に合わせた自由な表示が可能です。

埋め込みコンテンツが表示されない時のチェックリスト

URLを貼り付けても「埋め込みを読み込めませんでした」というエラーが表示されることがあります。

その原因の多くは、参照元のコンテンツがプライバシー設定によって制限されていることにあります。

以下の表に、主な原因と対策をまとめましたので参考にしてください。

原因内容対策
非公開アカウントSNS側で鍵付き設定になっている。公開設定の投稿のみを使用する。
埋め込み無効設定YouTubeなどで埋め込みが許可されていない。別の動画を探すか、リンクのみ掲載する。
URLの不備短縮URLや検索結果のURLを使用している。動画や投稿の直接のURLをコピーする。
キャッシュの影響古い情報がブラウザに残っている。ブラウザのキャッシュをクリアして再読み込み。

表示速度を落とさないための工夫

YouTubeやSNSの埋め込みを1つの記事に大量に設置すると、ページの読み込み速度が低下する恐れがあります。

読み込みが遅くなるとユーザーの離脱率が高まり、検索エンジンからの評価にも悪影響を及ぼします。

特に動画コンテンツはデータ量が多いため、遅延読み込み(Lazy Load)の活用が推奨されます。

現在のWordPressでは、標準で画像の遅延読み込みが有効になっていますが、iframe(埋め込みコード)についても同様の配慮が必要です。

必要に応じて、最新のWordPressテーマが備えている高速化機能や、ブラウザ標準の loading="lazy" 属性が適用されているか確認しましょう。

コンテンツの引用と著作権について

SNSの埋め込みは、各サービスが提供する公式な機能を利用している限り、基本的には著作権法上の「引用」として認められます。

しかし、投稿者が意図せずアップロードした無断転載動画などを埋め込むことは避けるべきです。

公式サイトや公式アカウントが発信している、信頼性の高い一次情報を埋め込むように心がけてください。

また、埋め込み元が削除されると記事内でも表示されなくなるため、定期的な記事のメンテナンスも重要です。

まとめ

WordPressにYouTubeやSNSの投稿を埋め込む作業は、プラグインなしでもURLを貼り付けるだけで完了する非常にシンプルなものです。

まずは「oEmbed」機能を活用し、記事の文脈に合わせて適切なメディアを配置してみましょう。

プラグインを最小限に抑えることで、サイトのセキュリティ向上や高速化にもつながります。

エラーが発生した際は、投稿の公開設定やURLの形式を再確認し、必要に応じてカスタムHTMLブロックでの埋め込みを試してください。

外部コンテンツを効果的に活用して、読者にとってより価値のある魅力的なコンテンツ作りを目指しましょう。

URLをコピーしました!