Twitter（X）のツイートをサイトに埋め込んで、ページスピードも落としたくない人向けテクニック

web技！
サイト作成の困りごとをサクッと解決
所長

Twitter（X）の個別ツイートをサイトに埋め込んでページスピードも落とさないテクニックについてご紹介します。
タイムラインではなくて個別ツイートの埋め込みです。
コアなアップデートから分かりにくいものまで日々刻々と変化するTwitter（X）のアルゴリズムですが、イーロン体制になった2022年末頃から翌年にかけて、実に様々な変化がありました。
これまで構築してきたサイトのアクセサリや記事が一斉に使えなくなった方もおられるでしょう。
ただ2025年現在、ここ数年の間はどうやら方針が安定してきたようです。
様子見勢の皆さん、もう一度チャレンジしてみてはいかがでしょうか。
ページがリッチな見た目になること請け合いですよ。
それではどうぞ。

ぽんきちくん えー…
また突然使えなくなっちゃったりするんじゃないんですか？

注：今後イーロンの気分によって挙動が変化、最悪使用できなくなる可能性があります。あくまで参考程度に留めていただきますようお願いします。

もくじ

１. Twitter（X）埋め込みのおさらい
２. タイムライン埋め込みはうんこなのでもうあきらめる
３. ページスピードを落とさずに埋め込むコツ
3-1.スクリプトはひとつだけ
3-2.遅延読み込み
４. Twitter（X）のお役立ち記事一覧

1.Twitter（X）埋め込みのおさらい

1-1.

埋め込みたいツイート（ポスト）のurlをコピー。

1-2.
Xのパブリッシュ1

パブリッシュへ移動。
ちなみにパブリッシュのページは2種類あります。
旧：https://publish.twitter.com
新：https://publish.x.com（⇦ こちらを使う）
サイトの動き、吐き出される埋め込みコードともに同等の挙動を示すと感じていますが、個別ツイートを埋め込む場合公式ヘルプからはXの方へリンクが張ってあります。
ですので、Xのパブリッシュを使用するのが無難です。

1-3.
Xのパブリッシュ2

「X URLを入力してください／Enter a X URL」
と書いてある部分に先ほどのURLを貼り付けてエンター押下もしくは矢印をクリックすると、
・埋め込みビデオ／Embedded Video
・埋め込み投稿／Embedded Post
の選択ができるようになります。
どちらかを選んで表示されたコードをコピーすれば埋め込み準備は完了です。

1-4.

ところで、あなたの埋め込もうとしているのが写真またはテキストのみのツイートである場合、どちらを選んでも埋め込んだあとの表示は同じです。
動画を含んだツイートの場合のみ、
・埋め込みビデオ／Embedded Video
を選択すると挙動が変わりますので以下を参考にして選んでください。

埋め込みビデオ（動画）
埋め込み投稿（動画）
埋め込み投稿（普通の投稿）

2.タイムライン埋め込みはうんこなのでもうあきらめる

イーロン体制に移行したことにより、最も影響を受けたのがこのタイムラインの埋め込み機能です。
個別ツイートの埋め込みと違って、こちらは自分（もしくは任意）のアカウントのタイムラインが常に最新の状態で表示されますので、休眠アカウントでもない限り動きがあり、サイトやブログのアクセサリとして楽しい物でした。
2025年現在でも使えないことは無いのですが、「アカウントを持っていない外部の人間からはアクセスを制限する」という方針に舵取りが行われた結果、外部から見た場合、タイムラインではなく、
評価の高い順に任意の数のツイートを表示する

という挙動を示すようになりました。
これはこれで使えないこともないのかもしれませんが、表示される順番や内容がコントロールできません。
ですのでたまたま悪バズりしまったクソリプなんかも混じってしまう為、とても微妙な機能となってしまいました。
アーメン。
結果うんこですので私は使いませんしおすすめもしません。

3.ページスピードを落とさずに埋め込むコツ

3-1.スクリプトはひとつだけ

個別ツイートの埋め込みコードは概ね以下のようなものとなります。

<blockquote class="twitter-tweet">
  <p lang="ja" dir="ltr">サンプルだよーん <a href="https://t.co/**********">pic.twitter.com/**********</a></p>
  &mdash; 米子力研究所 (@beishiryoku_Exp)
  <a href="https://twitter.com/***/status/*******************?ref_src=***********">July 20, 2025</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote>タグで囲われた部分を、最終行（ピンク色の部分）のリンク先に置いてあるスクリプトで制御してブラウザにレンダリングしているのです。
こまかい仕組みは端折りますが、このツイート部分とスクリプトは1対1の関係ではありません。
1回読み込みさえすれば、それ以前に記述されたツイート部分を処理するようになっていますので、何度もゝ読みに行くのはマシン及び通信のリソースを無駄に消費させる行為以外の何者でもありません。
試しにhttps://platform.twitter.com/widgets.jsのリンクを開いてみてください。
こんなものを、ページを開いた瞬間に何度も読みに行かせる作り方をしていては、見てくれる人に対して不利益を与えますし、天網恢恢、そういうのはGoogleが許しません。
ページの表示速度が体感的に下がるのを感じられるのは勿論、PageSpeed Insightsで計測してみるとスコアも大きく下がっていることがわかるでしょう。
アレですな。
ボトル付きの洗剤と詰め替えの関係に似ています。
家に前回買った洗剤のボトルがあるのに、詰め替えではなく毎回ボトルから購入するのは地球にも厳しいですよね。

ぽんきちくん IKEA（イケア）の6角レンチとか？

それだ！
ですので、複数の個別ツイートを埋め込む場合は、一番最後の<script>だけのこして他は消してください。
一番最後がミソです。
いま見てくださっているこのページには計4つのツイートが埋め込んであります。
上の方に横並びで3つ。
そしてPCなら右カラム下端、mobileなら一番下の方に1つ。
うちのサイトは、アクセサリとして必ず1つは個別ツイートが表示されるようになっていますので、この記事内に置いてある埋め込みコードには<script>が1行も書いてありません。
何故ならアクセサリの個別ツイートがHTMLの流れで最も下に来ることが分かっているからです。

3-2.スクリプトを遅延読み込みさせる

もうひとつがスクリプトの遅延読み込みです。
ちょっと前まではページを読み込んだ瞬間に緊急性の低いスクリプトを読み込む事によって、ページスピードのスコアが10ポイント近くも低下していました。
ですので、何としてでも遅延させることが必要だったのですが…
うーん…

ぽんきちくん どったの？

2025年6月ごろ、PageSpeed Insights（Lighthouse）がアップデートされ、評価基準やスコアリングにも大きな変化がありました。
これによってファーストビューでのスクリプト読み込みに起因するスコア低下が軽微になりましたので、つまり遅延させる事によるスコア改善の効果も小さくなったのです。
ですので、もう必須というほどではなくなってしまいました。
まぁやって損することも（面倒だという点以外）あまりありませんので、以下ご紹介しておきます。
コピペOKです。 

<script>
// モジュール定義
const LazyModules = {
  twitter: [
    {
      type: "js",
      domain: "platform.x.com",
      path: "/widgets.js",
      attrs: { async: true, charset: "utf-8" }
    }
  ]
};

// 共通ローダー
function loadLazyModule(moduleName) {
  const resources = LazyModules[moduleName];
  return resources.reduce((chain, res) => {
    const url = "https://" + res.domain + res.path;
    return chain.then(() => new Promise((resolve, reject) => {
      if (res.type === "css") {
        const link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = url;
        document.head.appendChild(link);
        resolve();
      } else if (res.type === "js") {
        const script = document.createElement("script");
        script.src = url;
        if (res.attrs) {
          Object.entries(res.attrs).forEach(([k, v]) => script.setAttribute(k, v));
        }
        script.onload = () => {
          if (typeof res.callback === "function") {
            try {
              res.callback();
            } catch (e) {
              console.warn("Module callback error:", e);
            }
          }
          resolve();
        };
        script.onerror = () => reject(url);
        document.body.appendChild(script);
      }
    }));
  }, Promise.resolve());
}

// スクロール発火
document.addEventListener("DOMContentLoaded", function () {
  let triggered = false;

  async function onScrollOnce() {
    if (triggered) return;
    triggered = true;

    // ここで使いたいモジュールだけ記述
    await Promise.all([
      loadLazyModule("twitter")
    ]);

    window.removeEventListener("scroll", onScrollOnce);
  }

  window.addEventListener("scroll", onScrollOnce);
});
</script>

ぽんきちくん えっと…長いんですけど。
※イヤそうな顔

所長 言うと思ったよ。
なにも遅延させたいのはTwitter（X）のスクリプトだけとは限らないだろう？
現にうちではslickスライダーやLightbox2なんかも使用しているし、何よりjQueryなんか重量級コンポーネントの筆頭だよね。
なので冒頭と下のほう計2ヶ所に、遅延したいモジュールを追加できるようにしてあるんだぜ。
トリガーをスクロールに設定してありますので好みが分かれるかもしれません。
記述するのは<body>の最後。
閉じタグ</body>を探してその前のあたりに貼り付けてください。
勿論このスクリプトを使用する場合は、埋め込みコード内のスクリプト

<script async src="https://platform.twitter～</script>

は必要ありませんので消して使ってください。
繰り返しますが、スクリプトの遅延読み込みによるページスコアの改善効果は現在小さくなりました。
無理のない範囲でどうぞ。

以上、Twitter（X）の個別ツイートをサイトに埋め込む方法と、埋め込みによるページスピードへの影響低減についてご説明しました。
それではさようなら。