ホームページにXを埋め込み！基本から手順まで詳しく解説

2025 11/29

2025/11/29

はじめに

この文書は、ホームページやブログにX（旧Twitter）の投稿を埋め込む方法をやさしく丁寧に説明します。初めての方でも分かるように、基本的な考え方から実際の手順まで順を追って解説します。

この文書の目的

・X投稿を埋め込む意味を理解していただくこと
・埋め込みのメリットと注意点を知っていただくこと
・WordPressでの具体的な手順を実践できるようにすること

対象読者

ホームページ運営者、ブログを書いている方、企業の広報担当者など、X投稿をサイトに表示したい方を想定しています。技術的な知識が少ない方でも読み進められるよう配慮しています。

どんなことが分かるか（具体例）

・単一投稿を記事内に表示する方法
・投稿を時系列で並べる方法やウィジェット利用の概要
・表示のカスタマイズやレスポンシブ対応の基本

読み進め方

まず第2章で概念を理解し、第3〜4章でメリットと注意点を把握してください。第5章で内部の仕組みを学び、第6章でWordPressでの実装手順を確認します。実際に手を動かしながら進めると理解が深まります。

2. X埋め込みの基本概念

概要

X（旧Twitter）の埋め込みとは、X上の投稿を自分のホームページやWordPress記事の中にそのまま表示することです。テキストだけでなく画像や動画、いいねやリプライへのリンクも含めて見せられます。訪問者は投稿を直接クリックしてX上でやり取りできます。

主要な方式

単一投稿（単一のツイート）: 特定の投稿だけを記事内に表示します。イベントの告知や引用に便利です。
タイムライン: ユーザーの投稿やリスト、ハッシュタグで絞った複数投稿を連続して表示します。最新情報を自動で見せたいときに向いています。
ハッシュタグフィード: 指定したハッシュタグを含む投稿を集めて表示できます。キャンペーンや話題の追跡に役立ちます。

表示と注意点

埋め込みは見た目がそのままで、スマホでも横幅に合わせて動きます。非公開アカウントの投稿は表示できません。タイムラインは新しい投稿を自動で反映する一方、単一投稿は投稿が削除されると表示されなくなります。

具体例（イメージ）

記事中にイベント情報のツイートを埋め込み、詳細はXで確認してもらう、といった使い方が一般的です。

3. X投稿をホームページに埋め込むメリット

概要

ホームページにX投稿を埋め込むと、訪問者がXにアクセスしなくても投稿をその場で見られます。企業や個人の発信を分かりやすく伝え、外部への導線を減らして滞在時間を伸ばせます。

1. アクセス障壁の低下

Xのアカウントを持たない人でも投稿内容を確認できます。たとえばキャンペーン情報やお客様の声を埋め込めば、手軽に伝わります。

2. 発信力と信頼性の向上

公式アカウントの投稿や受賞報告を見せることで、信頼感が増します。いいね数やリツイート数が可視化されると、共感を得やすくなります。

3. 双方向のエンゲージメント促進

訪問者はページ上からいいねやリツイートが行え、コメント欄への誘導もできます。ユーザーとのやり取りがスムーズになり、関係構築につながります。

4. コンテンツの充実と更新性

最新の投稿を自動で表示できるため、サイトの情報が常に新しく保てます。ブログやニュースの代替としても使えます。

5. 集客と滞在時間の増加

タイムラインや話題の投稿を掲載すると、興味を引きやすくなり、他ページへの導線も作れます。結果として滞在時間や再訪率の向上が期待できます。

活用例

商品レビューやお客様の声を埋め込む
キャンペーン告知をトップページに表示
イベント速報や社内ニュースをライブで配信

これらのメリットを活かすと、ホームページの表現力と訪問者とのつながりを強められます。

4. X投稿をホームページに埋め込むデメリット・注意点

表示速度への影響

Xの埋め込みは外部スクリプトやiframeを読み込みます。結果としてページの表示が遅くなり、特にモバイルで顕著です。例：トップページに複数のタイムラインを置くと、初期表示が大幅に遅れます。

SEOと検索評価の懸念

重いスクリプトは表示速度を下げ、検索エンジンの評価に影響します。コンテンツがクライアント側でしか読み込まれない場合、インデックスに影響することがあります。

表示の不安定さとコンテンツの寿命

投稿が削除されたり非公開になると埋め込みが崩れます。また、アカウント停止で表示が消えるリスクもあります。したがって重要な情報に依存しない方が安全です。

プライバシー・利用規約の確認

著作権は通常問題になりにくいですが、利用規約や埋め込みの扱いは変わる可能性があります。ユーザーの同意やトラッキングに関する注意も必要です。

アクセシビリティとユーザー体験

スクリーンリーダーやキーボード操作で読みづらくなる場合があります。埋め込みだけに頼らず、代替テキストやリンクを用意しましょう。

実用的な対策例

表示を遅らせる（lazy-load）
重要でないページでは画像やスクリーンショットを代替に使う
埋め込み数を制限し、監視する
サーバー側でキャッシュして静的コピーを表示する

これらを組み合わせると、利点を活かしつつリスクを減らせます。

5. X埋め込みの技術的な仕組み

概要

WordPressはoEmbed対応サイトとしてXを認識します。投稿本文にXの投稿URLを貼ると、内部で外部へ問い合わせを送り、埋め込み用のHTMLを受け取って表示します。

動作の流れ（簡潔に）

URL送信：WordPressがXのoEmbedエンドポイントにHTTPリクエストを送ります。
JSON取得：エンドポイントは埋め込み用のJSONを返します。htmlや幅・高さなどが含まれます。
HTML出力：WordPressは受け取ったhtmlフィールドを記事に挿入し、必要なJavaScript/CSSを読み込みます。

技術的な要点

サーバー側でリクエストを行うため、ブラウザのCORS問題は発生しにくいです。
返されるhtmlはX側のスクリプトを含むことが多く、見た目や動作はそれに依存します。

キャッシュと安全性

WordPressは一度取得した情報をキャッシュします。表示を速くし、リクエスト回数を減らします。
外部HTMLはサニタイズや許可タグでチェックされます。悪意あるコード実行を防ぐ仕組みが入っています。

実用上の注意

レスポンス形式が変わると表示に影響します。
API制限や公開ポリシーの変更は確認してください。

6. 単一投稿をホームページに埋め込む手順（WordPress）

手順（ステップ1〜4）

埋め込みたい投稿を選択します。投稿の本文下にある「…」メニューをクリックして「埋め込み」または「埋め込みコードをコピー」を選びます。公開済みの投稿や自分の投稿で試してください。
表示のカスタマイズを確認します。返信元（リプライ元）を含めるか、閲覧データ送信（ビューの計測やトラッキング）を許可するかを選べます。必要に応じてチェックを外してください。
WordPressの投稿編集画面を開きます。ブロックエディタを使っている場合は「カスタムHTML」ブロックを挿入します。クラシックエディタの場合は「テキスト」タブに切り替えます。
コピーしたHTMLコードを貼り付けます。貼り付けたら「プレビュー」で表示を確認し、問題なければ公開または更新します。モバイル表示も必ずチェックしてください。