ページスピードのスコアを落とす事なく X（Twitter）のツイートをサイトに埋め込む方法

ちょっと便利なテック系小ネタなんかを紹介

ページスピード改善

X（Twitter）のポストをサイトに埋め込んだらスコアが激減した。
そんな経験をしたことはありませんでしょうか。
今回は、Xの個別ツイートをサイトに埋め込んで、かつページスピードも落とさない。
そんなテクニックについてご紹介します。
結論から言うと、

コードの短縮
スクリプトの遅延読み込み

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

ぽんきちくんどうせまた使えなくなっ（ﾓｶﾞﾓｶﾞ）

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

ツイート埋め込みのおさらい

ツイートのurl

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

パブリッシュへ

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

コードの取得

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

3種類の埋め込みコード比較

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

埋め込み投稿（普通の投稿）

米子力研究所によるツイート
埋め込み投稿（動画入り）

米子力研究所によるツイート
埋め込みビデオ

米子力研究所によるツイート

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

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

ページスピードを落とさずに埋め込むコツ、その１
コードの短縮

最初におすすめするテクニックがコードの短縮です。
コードの短縮は、どちらかというとスコア改善というよりも、埋め込みの手間が楽になるという効果のほうを大きく感じるかもしれません。
なぜなら必要な情報はツイートのidのみというところまで圧縮できるので、いちいちパブリッシュへ移動して埋め込みコードを取得する必要が無くなるからです。

通常の埋め込みコード

まず通常の埋め込みコードはこちら。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">7月のご来場特典アップしました云々…<a href="https://t.co/lB5LP1GDXz">pic.twitter.com/lB5LP1GDXz</a></p>— 米子力研究所 (@beishiryoku_Exp) <a href="https://twitter.com/beishiryoku_Exp/status/1939806149231935798?ref_src=twsrc%5Etfw">June 30, 2025</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

別に理解せずとも良いのですが、わかりやすくする為に改行などで整理すると以下のようになります。

<blockquote class="twitter-tweet">
  <p lang="ja" dir="ltr">7月のご来場特典アップしました云々…
    <a href="https://t.co/lB5LP1GDXz">pic.twitter.com/lB5LP1GDXz</a>
  </p>
  — 米子力研究所 (@beishiryoku_Exp) 
  <a href="https://twitter.com/beishiryoku_Exp/status/1939806149231935798?ref_src=twsrc%5Etfw">June 30, 2025</a>
</blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote>タグで囲われた部分を、最終行（紫色の部分）のリンク先に置いてあるスクリプトで制御してブラウザにレンダリングしています。
ピンク色の部分がツイート毎に、水色の部分がXのアカウント毎に固有の情報です。
これら固有の情報をいちいち手で打ち込むのも大変ですし、なにより圧縮urlが混じっていますので、このまま運用するならさすがにXのパブリッシュへ移動して、埋め込みコードをいちいち取得するほかありません。

短縮コードと使い方

ここからが今回の目玉！
短縮コードは次のとおりです。

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/beishiryoku_Exp/status/1939806149231935798"></a>
</blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

たったこれだけです。
水色の部分には自分のアカウント名から@以下の文字を入れてください。
ピンク色の部分にはツイート（ポスト）のurlから、

https://x.com/beishiryoku_Exp/status/1939806149231935798

ピンクの部分をコピーして貼り付けます。
これが最短！
もうこれ以上は何をどうやっても短くなりません。

注意点

念のため注意点があります。
基本的に文字をはさまない<a>タグというのはSEOの観点からお勧めできません。
説明のないリンクとしてPageSpeed Insightsのスコアが4ポイントぐらい下がります。
つまりGoogleからの評価が下がる ⇨ ページの検索順位も下がってしまうのです。
なので少しだけ妥協して、

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/beishiryoku_Exp/status/1939806149231935798">米子力研究所によるXのポスト</a>
</blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こんなふうに簡単な説明文を間に挟んでおくと良いでしょう。

応用

あとは実際に使うだけです。
単独のツイート埋め込みで使用しても良いのですが、何と言ってもこの短縮コードが力を発揮するのは沢山のツイートを埋め込むような使い方をするときです。
ツイート詳細画面のurlからid部分だけコピーしてきてガンガン貼り付けちゃってください。
その場合スクリプト（widgets.js）の部分は最後の1つだけ残すのがミソです。
例としてはこんなかんじです。

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/beishiryoku_Exp/status/1931290036890140907">米子力研究所によるXのポスト</a>
</blockquote>

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/beishiryoku_Exp/status/1928572127491534854">米子力研究所によるXのポスト</a>
</blockquote>

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/beishiryoku_Exp/status/1931471228734263674">米子力研究所によるXのポスト</a>
</blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

cssを少しだけ工夫して並べるてやるとこんな感じです。
具体的な方法についてはまたの機会に。

ページスピードを落とさずに埋め込むコツ、その２
スクリプトの遅延読み込み

もうひとつがスクリプトの遅延読み込み。
こちらが本命です。
色付きの部分は各位書き換えていただくとして、コードをご覧ください。
コピペOKです。

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/beishiryoku_Exp/status/1931290036890140907">米子力研究所によるXのポスト</a>
</blockquote>

<script>
document.addEventListener("DOMContentLoaded", () => {

  let loaded = false;
  const target = document.querySelector(".twitter-tweet");

  function loadTwitter() {
    if (loaded) return;
    loaded = true;

    window.removeEventListener("scroll", onScroll);
    observer.disconnect();

    const s = document.createElement("script");
    s.src = "https://platform.twitter.com/widgets.js";
    s.async = true;
    s.charset = "utf-8";

    document.body.appendChild(s);
  }

  function onScroll() {
    if (window.scrollY > 0) loadTwitter();
  }

  // IntersectionObserver
  const observer = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting) loadTwitter();
  }, {
    rootMargin: "400px"
  });

  observer.observe(target);

  // scrollトリガー
  if (window.scrollY > 0) {
    loadTwitter();
  } else {
    window.addEventListener("scroll", onScroll, { passive:true });
  }

});
</script>

やっていることをものすご～く嚙み砕いて言うと、

ちょっとでもスクロールするか
画面の近くにツイート部分があれば
分解してあるスクリプトを組み立てて実行する

こんな感じです。
サイトの評価を行うクローラーはスクロールなどしません。
ページが最初に読み込まれた状態でザーッと読んで評価を行いますので、X（Twitter）の埋め込みのように、
・重い
・緊急性が低い
アクセサリは、実際に人間が操作していることがわかってから実行すれば十分なのです。
爆速ですので、ツイートを埋め込む事による後ろめたさがゼロになりますよ。
マジで。

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

ブロガーけものみち