リンクで貼るか、埋め込むかの違い
外部サービスを紹介する場合、
WordPressでは大きく分けて「リンクで貼る」か、「埋め込む」かの2つの方法があります。
まずは、この違いを理解しておくことが重要です。
リンクで貼る場合
URLをリンクとして貼った場合、
クリックすると外部サービスのページへ移動します。
YouTubeであれば未ログインでも再生できますが、
Instagramの場合は、ログインを求められることがあります。
この方法は、
・表示が軽い
・将来の仕様変更の影響を受けにくい
というメリットがあります。
埋め込む場合
埋め込みを行うと、
ページ内に動画や投稿が表示され、
その場で内容を見ることができます。
YouTubeやX(旧Twitter)は、
WordPress標準の「埋め込みブロック」で対応しています。
Instagram・Facebookは、
公式が提供している埋め込み用HTMLコードを、
カスタムHTMLブロックに貼り付ける方法で表示できます。
ただしこの方法は、
Instagram側の仕様変更により、
将来表示されなくなる可能性があります。
なぜ「埋め込み」関連のブロックが複数あるのか
WordPressで外部サービスを表示しようとすると、
- 「埋め込み(Embed)ブロック」
- 各サービス専用の埋め込みブロック
- カスタムHTMLブロック
と、似たようなブロックが複数表示されます。
見た目は似ていますが、役割と使う場面が違います。
まずは全体像を整理しましょう。
埋め込みブロックと専用ブロックの違い
結論から言うと、多くの場合どちらを使っても結果はほぼ同じです。
埋め込みブロックの正体
埋め込みブロックは、
oEmbed(オーエンベッド) という仕組みを使っています。
URLを貼るだけで、
WordPressが「対応サービスかどうか」を判定し、
自動で表示してくれる仕組み
YouTube や X(旧Twitter)などは、
この oEmbedに公式対応している ため、
- 「埋め込み」ブロック
- YouTube埋め込み・X埋め込みなどの専用ブロック
どちらを使っても表示結果はほぼ同じになります。
埋め込みブロックが使えないサービスがある理由
すべての外部サービスが、
oEmbedに対応しているわけではありません。
また、過去に対応していたが、現在は制限されているサービスもあります。
「埋め込みブロックが無い」「貼っても表示されない」場合、
多くはWordPressの不具合ではなく、外部サービス側の仕様が理由です。
なぜInstagram・Facebookは埋め込みブロックが使えないのか
Instagram・Facebookは、
Meta社がoEmbedの仕様を変更したため、
- 開発者アカウント
- アプリID
- 認証トークン
を必要とする形になりました。
そのため、
WordPress標準の「埋め込みブロック(URLを貼るだけ)」では利用できません。
これは不具合ではなく、外部サービス側の仕様変更によるものです。
なお、ここで言われている「使えない」とは、
URLを貼るだけで自動変換される oEmbed が使えないという意味です。
Instagramには、別途
公式が提供している「埋め込み用HTMLコード」があり、
それを カスタムHTMLブロックに直接貼り付ける方法であれば、
プラグインを使わずに表示できる場合があります。
ただしこの方法は、
Instagram公式の表示スクリプト(embed.js)に依存するため、
将来にわたって表示が保証されるものではありません。
そのため、InstagramやFacebookは、
メインコンテンツとして常に表示する用途には向かず、
補足的な紹介やリンクとして利用するのが現実的です。
なぜGoogleマップ・公式LINEはカスタムHTMLなのか
Googleマップや公式LINEは、
そもそもoEmbedに対応していません。
提供されているのは、
- iframe
- JavaScript
による埋め込みです。
この場合、
HTMLコードをそのまま貼り付けられる
「カスタムHTMLブロック」を使う必要があります。
まとめ|サービス別・使うブロックの考え方
| サービス | 使うブロック | 理由 |
|---|---|---|
| YouTube / X | 埋め込み or 専用ブロック | oEmbed対応 |
| カスタムHTML | oEmbed制限 | |
| カスタムHTML | oEmbed制限 | |
| Googleマップ | カスタムHTML | oEmbed非対応 |
| 公式LINE | カスタムHTML | iframe / JS |
この記事では、
2ページ目に しまだ事務所の運営サイト一覧 を「見本記事」として掲載し、
3ページ目で「見本記事に使っているブロックの使い分けと実装方法」を解説します。


コメント