WordPressでXを埋め込む方法と失敗しないコツ・注意点

WordPressにX（旧Twitter）の投稿を出したいのに、埋め込みがうまくいかずモヤモヤしていませんか。私も最初は「ただのリンクになる」「タイムラインが真っ白のまま」といったトラブルでかなり悩みました。

この記事では、WordPressでXを埋め込む基本から、タイムライン表示、プラグイン活用、エラー時の対処まで、私が実際の案件でよく使っているやり方をまとめて紹介します。

先に結論だけ言うと、やり方さえ押さえればXの埋め込み自体は難しくありません。ただし、仕様変更やログインの有無の影響を受けやすいので、「メイン情報はサイト内テキストで完結させて、Xはあくまで補助」と考えると運用が安定します。

WordPressでXを埋め込み表示すると何ができる？

WordPress×Xの埋め込みでできること一覧

よく使う埋め込みパターンを整理すると、だいたい次の4種類に分けられます。

種類	できること	向いている場面
単一ポストの埋め込み	特定のポストを記事中にカード状で表示	お知らせ記事、レビュー記事、事例紹介
タイムライン埋め込み	アカウントの投稿一覧を縦長のボックスで表示	サイドバーのお知らせエリア、トップページの更新欄
ハッシュタグやリストの埋め込み	特定のテーマに絞った投稿だけをまとめて表示	イベント・キャンペーン・特集ページ
プラグイン経由のフィード	複数アカウントや他SNSとまとめて表示	店舗サイトやブランドサイトの「SNSウォール」的な見せ方

Xの埋め込みは、単にポストを見せるだけでなく、サイトの「動き」や「にぎわい」を出すのに役立ちます。特に店舗サイトや個人ブログでは、「ちゃんと今も動いているサイトなんだ」と伝えるサインとしてけっこう効きます。

埋め込みとスクリーンショット貼り付けの違い

Xの内容をサイトで紹介したいとき、選択肢は埋め込みだけではありません。よく使うのが「ポストをスクリーンショットで撮って画像として貼る」やり方です。

それぞれの違いを、よく相談を受けるポイントに絞って整理します。

• 埋め込みの主なメリット
  • リンクやいいね、リポストなどの情報がそのまま動く
  • タイムラインなら、新しい投稿に自動で入れ替わる
  • クリックでX側の画面に飛ばせるので、フォロー導線にもなる
• スクリーンショットの主なメリット
  • 表示が安定していて、X側の不具合や仕様変更の影響を受けにくい
  • ページの読み込みが比較的軽い
  • 必要な部分だけをトリミングできるので、レイアウトの自由度が高い

私がよくやるのは、次のような使い分けです。

• 「キャンペーンのお知らせ」「イベントのリアルタイム情報」→ 埋め込みで動きを見せる
• 「何年も読まれるコラム」「ランディングページ」→ スクリーンショット＋Xへのリンクを下に置く

このくらいざっくりした基準を1本持っておくと、毎回迷わずに済みます。

WordPressの記事にXポストを埋め込む基本の2パターン

URLをそのまま貼るシンプルな埋め込み

一番ラクなのは、XのポストURLをWordPressのエディタにそのまま貼る方法です。環境によっては、URLを貼るだけで自動的に埋め込みに変わることもありますが、X側やWordPress側の仕様が変わりやすく、期待どおりに動かないケースも正直増えています。

まずは、基本の流れから確認しておきましょう。

うまくいく環境では、ここでポストがカード状の表示に変わります。ただ、XのAPIやoEmbedまわりの変更の影響で、URL方式が急に動かなくなることもあります。その場合は、次に紹介する「埋め込みコード」方式に切り替えた方が安定します。

同じ「URLを貼る」でも、ブロックエディタでは次の2パターンがあります。

方法	特徴	向いている人
段落ブロックにURLを貼る	成功すればもっとも手軽だが、環境依存の影響を受けやすい	まずは試してみたい人、サブサイトで検証したい人
「埋め込み」ブロックにURLを貼る	X用の埋め込みブロックを用意しているテーマもあり、表示が安定しやすい	エディタ上の見た目も重視したい人

もしURL方式でエラーが出る場合は、「URLのドメインがx.comになっている」「キャッシュやセキュリティ系プラグインが邪魔をしている」といったケースもあります。試しにtwitter.comドメインのURLに変える、プラグインを一時的に止めてみる、などもチェックポイントです。

Xの埋め込みコードを使う方法と注意点

URL方式でうまくいかない、あるいはタイムラインなど少し高度な表示をしたい場合は、Xが用意している「埋め込みコード」を使うのが基本になります。

流れは少し長く見えますが、一度慣れてしまえばさほど難しくありません。

1. Xで埋め込みたいポストを開き、「…」メニューから「ポストを埋め込む」などのメニューを選ぶ
2. 開いた画面で、テーマ（ライト・ダーク）や表示内容のオプションを選ぶ
3. 下に表示されたHTMLコードをコピーする
4. WordPress記事の編集画面で「カスタムHTML」ブロックを追加する
5. さきほどコピーしたコードを貼り付けて保存する

URL方式と埋め込みコード方式の違いを、よく聞かれるポイントだけピックアップしてまとめると、こんなイメージです。

項目	URLを貼るだけ	埋め込みコードを使う
手軽さ	成功すればとても簡単	最初のひと手間はかかる
動作の安定性	XやWordPress側の変更に左右されやすい	比較的安定しやすい
カスタマイズ性	ほぼ無し	テーマや高さなどをある程度調整できる

私の感覚だと、「単発でポストを1つだけ見せたいなら、まずはURL方式を試す」「本番サイトで確実に動かしたい、あるいはデザインも整えたいなら埋め込みコード」という使い分けがしっくりきます。

XタイムラインをWordPressに埋め込む方法

Publishを使ってタイムラインのコードを作る

XのタイムラインをWordPressに埋め込むときは、公式の「X Publish」ページからコードを作るのが定番の方法です。

代表的な手順は次のようになります。

1. ブラウザで「publish.twitter.com」にアクセスする
2. 埋め込みたいタイムラインのURL（プロフィール画面など）を入力する
3. 表示形式として「Embedded Timeline」などを選ぶ
4. 高さやテーマ（ライト／ダーク）、言語などを設定する
5. 生成されたコードをコピーする

Publish側で調整できる代表的な項目を整理しておきます。

設定項目	内容	使いどころ
テーマ	明るい背景／暗い背景を選択	サイト全体の配色と合わせたいとき
高さ	タイムラインの縦の長さ	サイドバーなど、限られたスペースに収めたいとき
言語	表示言語の指定	多言語サイトや海外向けサイトで使うとき

ここで作ったコードを、WordPress側の「カスタムHTML」ブロックやウィジェットに貼り付ければ、基本的にはタイムラインが表示されます。

サイドバーやフッターにタイムラインを出す手順

タイムラインは、記事本文に入れるよりも、サイドバーやフッターなど「いつも目につく場所」に置くことが多いです。一般的な操作の流れを、WordPress側の画面で追ってみましょう。

このとき、Xの仕様変更の影響で、ログインしていない閲覧者には「Nothing to see here」などのメッセージだけが表示されるケースがあります。ブラウザやログイン状態によって挙動が変わることもあるため、「タイムラインだけで重要なお知らせを完結させない」という意識を持っておくと安心です。

現場では、「お知らせは必ずブログ記事やニュースページにも掲載し、タイムラインはあくまで補助的なサイン」として使う運用にしているサイトが多い印象です。

プラグインでWordPressとXを連携して埋め込みを拡張する

代表的なX埋め込みプラグインと特徴

有名どころのプラグインと、そのざっくりした特徴をまとめておきます。

プラグイン・サービス名	特徴	注意点
Smash Balloon系のTwitter/Xフィードプラグイン	タイムラインをカード状やグリッドで表示でき、デザインの自由度が高い	無料版と有料版で機能差があり、本格的に使うと課金が必要になることもある
Juicer.ioなどのSNSウォール系	Xだけでなく、InstagramやFacebookなど複数SNSを1つのフィードにまとめられる	外部サービス依存になる、無料枠に制限がある
テーマ付属のSNSウィジェット	テーマのデザインと自然になじみやすく、設定が簡単なことが多い	テーマを変えるとウィジェットが使えなくなる場合がある

私が企業サイトでよく使うのは、Smash Balloon系のような「専用プラグイン」です。タイムラインの表示件数を制限したり、カード風レイアウトにしたり、デザインとパフォーマンスのバランスを取りやすいからです。

プラグインを選ぶときのチェックポイント

プラグインを選ぶときに、最低限チェックしておきたいポイントを挙げておきます。

• 目的と機能が合っているか
  • タイムラインをきれいに出せれば十分なのか
  • 複数SNSをまとめて見せたいのか
  • スライダーやグリッドなど特殊なレイアウトが必須なのか
• 表示速度への配慮があるか
  • キャッシュ機能や読み込みの間隔を調整できるか
  • 不要なJavaScriptやCSSを読み込まないようになっているか
• 更新・サポート状況
  • しばらく更新されていないプラグインではないか
  • レビューが極端に低評価ではないか

「せっかく高機能なプラグインを入れたのに、結局タイムラインを1カ所に出しているだけ」というケースもよくあります。最初に「自分のサイトでは何をしたいのか」を紙に書き出してから、それを満たせるプラグインを探すと、無駄な機能に振り回されずに済みます。

Xの埋め込みが表示されないときの原因と対処チェックリスト

よくある症状から原因を探す

よくある症状と、考えられる原因、対処のヒントを表にしておきます。

症状	主な原因	対処のヒント
URLを貼ってもリンクのまま	oEmbedの仕様変更、テーマやプラグインの制限などで自動変換が動いていない	埋め込みブロックやカスタムHTMLブロックに変える、埋め込みコード方式に切り替える
タイムラインが「Nothing to see here」になる	Xにログインしていない、または閲覧環境によってタイムラインが非表示になっている	ログイン済みブラウザとログアウト状態のブラウザで見え方を比較する、タイムラインだけに依存しない構成にする
埋め込み部分が真っ白のまま	JavaScriptエラー、広告ブロッカーやセキュリティ設定の影響	別ブラウザやシークレットモードで試す、広告ブロッカーを一時的にオフにする
表示はされるがデザインが崩れている	テーマのCSSとXのスタイルがぶつかっている	埋め込みを広めのカラムに移動する、必要に応じてCSSで上書きする

特にタイムラインまわりは、Xの仕様変更の影響を受けやすく、「ある環境では出るけど、別の環境では出ない」ということが起きがちです。サイトとして大事なお知らせは、必ずブログ記事やニュースページなど、別の形でも用意しておくのが無難です。

それでも埋め込みがうまくいかないときの代替案

ここまで試してもどうしてもXがうまく埋め込めない、あるいは社内のセキュリティ方針的にXへのアクセスが制限されている、ということもあります。そんなときに私がよく提案する代替案を挙げておきます。

• スクリーンショット＋テキストリンクに切り替える
  • 見せたいポストをキャプチャして画像として貼る
  • 画像の下に「Xで見る」のテキストリンクを設置し、元ポストに誘導する
• X以外のSNSをメインにする
  • 店舗ビジネスなら、写真メインのInstagramを埋め込んだ方が伝わりやすい場合もある
  • 埋め込みに使うSNSは1つに絞った方が、表示速度やデザインの面で安定しやすい
• タイムラインは諦めて、単一ポストだけにする
  • タイムラインは仕様変更の影響が大きく、長期的な安定運用が難しいことも多い
  • キャンペーンや事例紹介など、重要なポストだけを記事ごとに埋め込む運用に割り切る

実際に、タイムラインがたびたび崩れるサイトでは、「お知らせはブログで完結させ、Xの埋め込みはキャンペーン時の単発利用だけにする」という方針に変えたことがあります。その方が運営側もユーザー側もストレスが減り、結果としてサイト全体の評価も安定しました。

表示速度とSEOを守るWordPress×X埋め込みのコツ

読み込み速度に影響するポイント

表示速度に影響しやすい要素を、実務でよく見るものに絞ってまとめます。

要素	影響	改善の方向性
埋め込みの数	ポストやタイムラインの数が多いほど、読み込むリソースが増える	本当に必要なものに絞る、1ページあたりの数に上限を決める
配置場所	ファーストビュー付近にあるほど、体感速度に直接影響する	埋め込みは少しスクロールした位置に置き、冒頭はテキスト中心にする
画像・動画付きポスト	メディアの読み込みで通信量が増える	画像が多い場合はスクリーンショット方式も検討する

また、キャッシュ系やパフォーマンス系のプラグインを入れている場合、「JavaScriptの遅延読み込み」や「スクリプトの結合」がXの埋め込みと相性が悪いこともあります。Xの埋め込み用スクリプトだけ除外する機能があれば、それを使って調整すると安定しやすいです。

サイトの目的別に埋め込み数を決める考え方

埋め込みの数は、「なんとなく増やす」のではなく、サイトの目的から逆算して決めると失敗しにくくなります。

• ブログ型サイト
  • 記事本文中には、多くても1〜2個のポストに絞る
  • サイドバーにタイムラインを置く場合も、1カ所だけにする
• 店舗サイト（飲食店、美容室など）
  • トップページの中段にタイムラインを1つだけ設置
  • 予約ページやメニューページなど、速度が大事なページには埋め込みを置かない
• 企業のコーポレートサイト
  • 採用ページに、社内の雰囲気が伝わるポストを数点埋め込む
  • トップページは静的な情報を中心にして、Xは補助的に使う

「このページで、ユーザーに一番見てほしい情報は何か」「Xの埋め込みがなくても内容は伝わるか」を一度立ち止まって考えてから、埋め込むかどうかを決めると、速度と情報量のバランスが取りやすくなります。

企業・店舗サイトでのX埋め込み活用と注意点

サイトタイプ別おすすめ埋め込みパターン

よくあるサイトタイプごとに、私がよく提案する埋め込みパターンを表にしてみました。

サイトの種類	主な目的	おすすめの埋め込み
飲食店・サロンなどの店舗サイト	お店の雰囲気や混雑状況を伝える	トップページ中段にタイムライン1つ＋キャンペーン時だけ該当ポストを記事内に埋め込む
BtoB企業のコーポレートサイト	信頼感・実績の訴求	採用ページに社内イベントの様子を写したポスト、ニュースページに公式アカウントのポストを掲載
個人ブログ・クリエイターサイト	ファンとのつながり強化	プロフィールページに最新ポストを数個埋め込む

私が企業案件で意識しているのは、「Xを出しすぎないこと」です。商品説明や問い合わせ導線など、ビジネスの根幹に関わる情報は必ずサイト内テキストで完結させて、Xの埋め込みは「雰囲気」「リアルタイム感」を足すためのスパイスくらいにしておくと、バランスが取りやすくなります。

炎上やトラブルを避けるためのルール作り

Xをサイトに埋め込むとき、最低限決めておきたい運用ルールを挙げておきます。社内でドキュメント化しておくと安心です。

• どのアカウントのポストを埋め込んでよいかを決める
  • 原則として公式アカウントのみ
  • スタッフ個人アカウントのポストは埋め込まない、など
• どんな内容は埋め込まないかを決める
  • 政治・宗教などセンシティブな話題
  • ユーザーの個人情報に関わる内容
  • 後から消す可能性が高いもの（勢いで書いたポストなど）
• トラブル発生時の対応フローを決める
  • ポストの埋め込みを外す担当
  • サイト上でお知らせを出す担当

他人のポストを埋め込む場合は、著作権や肖像権にも注意が必要です。Xの埋め込み機能自体は公式に用意されていますが、文脈や使い方によってはトラブルになる可能性もゼロではありません。迷ったときは、本人に許可を取るか、スクリーンショットに「出典：X（投稿者名）」などを明記する形に切り替えるのが無難です。

よくある質問

Q1. WordPressでXを埋め込む一番かんたんな方法は？

A. 一番手軽なのは、XのポストURLをWordPressのエディタにそのまま貼る方法です。環境によっては、自動でカード状の埋め込みに変わります。ただし、仕様変更の影響でURL方式がうまく動かないこともあるので、「試してダメなら、素直に埋め込みコード方式に切り替える」と決めておくと悩まずに済みます。

Q2. タイムラインを埋め込んだのに「Nothing to see here」と出ます

A. このメッセージは、閲覧しているブラウザでXにログインしていないときに表示されることがよくあります。また、ブラウザや端末によって挙動が違うこともあり、完全にコントロールするのは難しいのが実情です。

WordPressでXのタイムラインを埋め込むときは、「ログインしていないユーザーには何も見えない可能性がある」という前提に立って、重要な情報は必ずニュース記事など別の場所にも掲載しておくと安心です。

Q3. Xを埋め込むとSEOが下がりますか？

A. Xを埋め込んだからといって、それだけで検索順位が落ちるわけではありません。ただし、埋め込みが多すぎてページの表示が遅くなると、結果的にユーザー体験が悪くなり、評価に悪影響が出る可能性はあります。

WordPressでXを埋め込むときに意識したいのは次の3つです。

• 1ページあたりの埋め込み数を絞る
• ファーストビュー直下に大量の埋め込みを置かない
• 大事な情報はテキストでしっかり書き、Xは補足的に使う

このあたりを守っておけば、「Xを埋め込んだせいでSEOがガタ落ちした」というような極端な事態にはまずなりません。

まとめ：WordPressでXの埋め込みを今日から使いこなそう

最後に、この記事のポイントをコンパクトに整理します。

今日からできる最初の一歩としては、「どのページにXを埋め込むとユーザーが喜びそうか」を3ページくらいピックアップしてみてください。そのうち1ページだけ選んで、この記事の手順どおりにポストを1つ埋め込んでみるところから始めるのがおすすめです。

一度成功体験ができれば、WordPressでXを埋め込む作業はぐっと気楽になります。自分のサイトに合ったバランスを探しながら、少しずつ活用の幅を広げていきましょう。