TikTokの動画をサイトに埋め込む手順！自分のブログに載せる方法を紹介

2026年2月21日2026年2月23日

URLをコピーしました！

ブログの記事にTikTokの動画を埋め込むと、視覚的なインパクトが格段に高まります。公式が提供する埋め込み機能を使えば、特別な技術がなくてもHTMLコードを貼り付けるだけで簡単に動画を掲載可能です。

本記事では、PCやスマホからTikTok動画の埋め込みコードを取得する具体的な手順を解説します。WordPressへの設置方法や、著作権、表示されないトラブルの解決策まで、Webサイトに載せるために必要な情報をまとめました。

TikTok動画をサイトに埋め込む基本の手順

ブログに動画を貼りたいけれど、著作権が心配だったり、手順が分からなかったりする人は多いです。実は動画を直接サーバーに上げるのではなく、TikTokの配信機能を利用するのが正解です。公式機能を使えば法的なリスクを避けつつ、サイトへの負荷を抑えられます。その具体的な操作をこれから説明します。

共有メニューから埋め込みコードをコピーする

動画の右側にある矢印アイコン、いわゆる「共有ボタン」を押し、メニューの中から「埋め込み」を選択します。これが動画を外部サイトで再生させるための専用コードを発行する入り口です。

この操作を行うと、画面上に複雑なHTMLコードが表示されます。「コードをコピー」というボタンを押すだけで、クリップボードにすべてのデータが保存される仕組みです。 自分でコードを書き換える必要はありません。

HTMLエディタにコードを貼り付ける

コピーしたコードを、ブログ管理画面の「HTML挿入」や「カスタムHTML」ブロックにそのまま貼り付けます。通常の文章入力欄（ビジュアルエディタ）に貼っても動画は表示されないため、必ずコード専用の入力枠を使ってください。

貼り付けた直後はただの英数字の羅列に見えますが、プレビュー画面を開けばTikTokのプレーヤーが出現します。一度貼ってしまえば、記事を公開した瞬間に読者がその場で動画を再生できるようになります。

PCブラウザで埋め込みコードを取得する3つのステップ

PC環境では、ブラウザ上でTikTokの動画を全画面表示させることが多いため、コードの取得が非常にスムーズです。ログインをしていなくても、公開されている動画であれば数クリックで作業が完了します。これから解説する3つの手順に従えば、誰でも1分以内に埋め込みコードをコピーできるはずです。

1. 動画右側の共有ボタンをクリック

ブラウザでTikTokを開き、載せたい動画の右側にある矢印マークを探します。マウスカーソルを合わせると「共有」と表示される箇所です。

ここをクリックすると、SNSへのシェアボタンやリンクのコピーといった選択肢が一覧で表示されます。PC版は画面が広いため、操作ミスが起きにくく、コードの取得ミスも防げます。

2. 「埋め込み」アイコンを選択

ポップアップが表示されるので、コードのアイコン（</>）が描かれた「埋め込み」ボタンを押します。すると、動画のプレビューとともにコードが表示される画面に切り替わります。

この画面では、単にコードを出すだけでなく、埋め込み後の見た目を一部確認することも可能です。複雑なプログラミングの知識は不要で、このボタンを押すだけでシステム側が最適なHTMLを生成してくれます。

3. コードをコピーして保存

表示された長いコードの下にある「コードをコピー」ボタンをクリックします。これで準備は完了です。

このとき、コードの一部を手動でなぞってコピーしようとすると、必要なタグが漏れてしまうことがあります。必ず専用のコピーボタンを利用して、一字一句漏らさずに取得するようにしてください。

スマホアプリからブログ用のリンクを送る方法

出先で面白い動画を見つけ、スマホアプリから直接ブログに載せたいと考える場面もあるでしょう。しかし、アプリ版のTikTokにはHTMLコードを直接表示するメニューが用意されていません。スマホ1台で完結させるための代替手段を知っておくと、運用が格段に楽になります。

共有ボタンから「リンクをコピー」

アプリの共有メニューにある「リンクをコピー」を使い、動画の個別URLを取得します。まずはこのURLを手に入れなければ、埋め込み作業は始まりません。

コピーしたURLは、自分のメールやメモ帳アプリに貼り付けておくと良いです。PCでブログを書く予定があるなら、自分宛てにチャットツールなどで送っておくのが最も効率的な連携方法になります。

ブラウザでURLを開きなおす

スマホのブラウザ（SafariやChrome）で取得したURLを開き、ブラウザの設定から「デスクトップ用サイトを表示」に切り替えます。こうすることで、スマホ上でもPC版と同じ埋め込みメニューが出現します。

少し操作は細かくなりますが、この方法を使えばPCがない環境でも埋め込みコードをコピーできます。緊急でブログを更新しなければならないときに、非常に重宝するテクニックです。

WordPressブログにTikTokを載せる2つのやり方

世界中で利用されているWordPressには、TikTokの動画を簡単に扱うための仕組みが備わっています。URLを貼るだけで自動的にプレーヤーが表示される機能と、コードを自ら制御して貼る方法の使い分けが重要です。テーマの仕様に合わせて最適な方法を選びましょう。

URLを貼り付けて自動表示させる

エディタ上の新しい行に、TikTokの動画URLをそのまま貼り付けると、WordPressが自動で動画プレーヤーに変換します。これは「oEmbed」と呼ばれる標準機能によるものです。

複雑な設定は一切不要で、リンクを置くだけで見た目が整います。ただし、特定のテーマやプラグインの影響でうまく変換されないことがあるため、その場合は次の「コード貼り付け」を試してください。

カスタムHTMLブロックを利用する

ブロック追加メニューから「カスタムHTML」を選び、PC版で取得した埋め込みコードを貼り付けます。この方法であれば、自動変換に頼らず確実に動画を表示させることが可能です。

スクリプトを含めて正確に読み込まれるため、動作が安定します。サイドバーやウィジェットに動画を置きたい場合も、このカスタムHTMLブロックを利用するのが正しい手順です。

埋め込み方法	手順の簡便さ	確実性	向いている人
URLのみ貼り付け	非常に簡単	環境による	初心者、本文中への配置
HTMLコード貼り付け	少し手間	非常に高い	安定性を求める人、特殊な場所への配置

埋め込んだ動画が表示されない理由

「手順通りにやったのに、ブログ上で動画が見られない」という現象は珍しくありません。枠だけが表示されたり、読み込みが止まったりする場合、コードの貼りミスよりも設定や環境に起因することが多いです。原因を切り分け、正しい解決策を講じる必要があります。

動画のプライバシー設定が制限されている

投稿者が動画を「非公開」や「友達限定」にしている場合、外部サイトへの埋め込みはできません。たとえコードを取得できた直後でも、投稿者が後から設定を変えれば表示は消えます。

また、投稿者が「埋め込みを許可しない」設定にしている動画も同様です。サイトに載せたい動画が「公開」設定になっているか、事前に確認することが重要です。

スクリプトの読み込みがブロックされている

サイトのセキュリティ設定や、ブラウザの広告ブロック機能がTikTokのスクリプトを止めていることがあります。埋め込みコードの中に含まれる script タグが正しく動かなければ、プレーヤーは出現しません。

WordPressのプラグインでスクリプトの読み込みを制限している場合も注意が必要です。自分のブラウザだけでなく、シークレットモードや他のデバイスで表示されるか試してみると原因を特定しやすくなります。

ブログに載せる際の著作権とルール

公式機能を使うなら無断転載にならない

公式の埋め込みコードは、動画を引用するための正規の手段であり、投稿者への権利を侵害せずに紹介することが可能です。再生回数は元動画にカウントされるため、投稿者にとってもメリットがあります。

APIや公式タグを通じた表示は、TikTokの利用規約で許諾されている範囲内です。「他人の動画を勝手に使っている」という罪悪感を持つ必要はなく、正当な紹介として活用できます。

動画のダウンロードと再アップロードは厳禁

TikTokから動画を保存し、自分のサーバーに直接アップロードし直して公開する行為は避けてください。これは「複製権」の侵害に当たる可能性が極めて高く、トラブルの元になります。

埋め込み機能はあくまで「窓」を作って中身を見せている状態ですが、再アップロードは中身そのものを盗んでいる状態です。必ず、公式の埋め込みコード経由で表示させるルールを徹底してください。

サイトの表示速度を落とさないための工夫

動画の埋め込みは、サイトの表示速度に大きな影響を与えます。特にTikTokのスクリプトはデータ量が多く、ページ全体が重くなる原因になりがちです。読者がストレスを感じて離脱しないよう、技術的な最適化を行い、快適な閲覧環境を維持しなければなりません。

1ページに載せる動画の数を絞る

解説に必要な最小限の数に留めるのが鉄則です。1つの記事に10本も20本も埋め込むと、ページの読み込みが終わるまでに数秒の遅延が発生します。

どうしても多くの動画を紹介したいときは、記事を前編・後編に分けるといった工夫が有効です。情報の密度を保ちつつ、サイトの軽さを維持することが、SEO上の評価を守るポイントになります。

ページの下部に配置して読み込みを遅らせる

ファーストビュー、つまり記事を開いて最初に目に入る範囲に動画を置かないようにします。まずはテキストや画像を先に読み込ませることで、体感速度を向上させることが可能です。

「動画は記事の中盤以降に置く」というルールを自分の中で決めておくと良いでしょう。読者が文章を読んでいる間に裏側で動画の読み込みが進むため、ストレスなく再生を開始できます。

埋め込み動画のサイズや位置を調整するコツ

デフォルトのコードで埋め込むと、動画が左に寄ってしまったり、画面の幅を突き抜けたりして見栄えが悪くなることがあります。ブログのデザインに合わせて、動画のサイズや配置を柔軟に変更しましょう。HTMLの知識が少しあるだけで、見た目は劇的に改善されます。

センター寄せにするタグを加える

埋め込みコードの前後を <center> タグや、中央揃えを指定した <div> タグで囲むことで位置を調整できます。多くのブログテーマでは標準で左寄せになるため、このひと手間が重要です。

デザインのバランスが整うと、記事全体の信頼感も増します。「コードの先頭にタグを1つ足すだけ」という簡単な作業ですが、読者に与える印象は大きく変わります。

幅を100%に指定してレスポンシブ対応

スマホで見たときに動画が画面からはみ出す場合は、コード内の width 指定を確認してください。固定の数値（px）になっている場合は、それを削除するか自動調整の設定に変更します。

最近の埋め込みコードは最初からレスポンシブ対応していることが多いですが、古いコードや特定のテーマでは手動調整が必要です。PCとスマホ、両方の端末で正しく枠内に収まっているか必ずチェックしましょう。

自分の動画と他人の動画で埋め込みに違いはあるか

埋め込みの手順自体は自分のものでも他人のものでも同一ですが、管理上の注意点は異なります。自分の動画はポートフォリオやブランディングに活用できますが、他人の動画は紹介記事やキュレーションが中心です。それぞれの目的において、意識すべきポイントがいくつかあります。

自分の動画なら「埋め込み許可」をオンにする

設定のプライバシー項目で「動画のダウンロード」や「共有」が制限されていないか、事前に確認しておきましょう。ここがオフになっていると、自分でもコードが取得できない場合があります。

自分の動画をブログに載せることは、TikTokアカウントのフォロワー増にも直結します。ブログ経由でファンを増やすためにも、埋め込み設定は常に開放しておくのが得策です。

他人の動画は削除されるリスクを考慮する

他人の動画を埋め込む場合、元動画が削除されたり非公開になったりすると、自分のブログ内でも見られなくなります。いわゆる「リンク切れ」の状態です。

これを防ぐためには、定期的に記事を見直すか、信頼できる大手メディアや公式アカウントの動画を優先的に選ぶといった対策が有効です。「動画が消えても記事の価値が無くならない」ような文章構成を心がけましょう。

TikTok動画をサイトに埋め込むメリット

ブログに動画を載せる目的は、単に賑やかにするためだけではありません。検索エンジンからの評価や、ユーザーが記事の内容をどれだけ理解したかという質的な側面で大きな効果を発揮します。動画とテキストを組み合わせることで、静止画だけの記事にはない価値が生まれます。

記事の滞在時間を延ばす効果

読者がページ内で動画を再生することで、記事全体の滞在時間が長くなります。検索エンジンは「長く読まれている記事＝有益な記事」と判断するため、SEOの順位向上に寄与します。

1分の動画を最後まで見てもらうだけで、その読者の滞在スコアは大きく改善されます。テキストだけでは飽きてしまう読者を引き止めるための、強力なフックとして機能します。

視覚的なインパクトで信頼性を高める

文章で「すごい」と書くよりも、実際の映像を10秒見せる方が説得力は高いです。料理のレシピやDIYの手順など、動きが重要なジャンルでは動画埋め込みは必須と言えます。

情報の透明性が増し、読者が「自分でもできそう」と感じやすくなります。この信頼感の向上が、結果としてブログ経由の成約やリピーター獲得に繋がります。

比較項目	テキストのみの記事	動画埋め込みありの記事
情報の伝達力	読者の想像力に頼る	視覚的に正確に伝わる
平均滞在時間	比較的短い	動画再生分だけ延びる
SEO評価	標準	良好な傾向がある
読者の満足度	内容次第	理解が深まりやすい