---
title: "共有URLをブログやサイトに埋め込む方法"
description: "ブログ記事や既存サイトの中で作った HTML を実際に体験してもらいたいときに役立つ埋め込み方法。リンクとして貼る方法だけでなく iframe で記事内に埋め込む手順と、認証・公開期限との兼ね合いで注意すべき点を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/embed-share-url-in-blog"
markdown: "https://giga-site.com/articles/embed-share-url-in-blog/index.md"
category: "ハウツー"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 共有URLをブログやサイトに埋め込む方法

ブログ記事や既存サイトの中で、作ったHTMLを実際に見てもらいたいことがあります。共有URLはリンクとして貼るだけでなく、iframeで記事内に埋め込むこともできます。この記事では、埋め込みの基本と、認証や公開期限との兼ね合いで気をつける点を整理します。

> Source HTML: https://giga-site.com/articles/embed-share-url-in-blog
> Article index: https://giga-site.com/articles/index.md

## リンク掲載と埋め込みの違い

共有URLを使う方法には、文中にリンクを貼って別ページとして開いてもらうやり方と、iframeで記事の中に枠として埋め込むやり方があります。どちらにも向き不向きがあります。

リンク掲載は手軽で、相手は新しいページで全画面に見られます。埋め込みは記事を読みながらそのまま中身を確認してもらえる一方、表示領域が限られるため、見せたい内容の大きさに合うかを考える必要があります。

- リンク掲載: 手軽。別ページで全画面に見せられる
- iframe埋め込み: 記事内でそのまま見せられるが表示領域が限られる
- 見せたい内容の大きさや読者の動線で使い分ける

## リンクとして掲載する手順

まずは基本のリンク掲載です。発行された共有URLを記事の本文に貼り、何が見られるのかが分かる文言を添えます。

リンクは手軽な反面、何が開くのか分からないと押されにくくなります。次の流れで、説明を添えて掲載します。

1. ギガサイト便でHTML(またはZIP)を公開し共有URLを発行する
2. 覚えやすくしたい場合はカスタムスラッグを設定する
3. ブログの本文に共有URLをリンクとして貼る
4. リンクテキストに何が見られるかが分かる説明を付ける
5. 公開ページ側でリンクや表示が正しいか確認する

## 最短手順：まずこの3ステップで完了

共有URLをブログやサイトに埋め込む方法は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。

手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
- 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
- 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る

## iframeで記事内に埋め込む

記事の中に表示枠として埋め込みたい場合は、iframeの src に共有URLを指定します。掲載先のブログがiframeの設置に対応している必要があります。

埋め込み枠は幅や高さを掲載先のデザインに合わせて調整します。中身がはみ出したりスクロールが必要になったりしないよう、見せたい内容に合った大きさを選びましょう。スマホでの見え方も合わせて確認しておくと安心です。

## 埋め込みと認証・期限の関係

埋め込みは誰でも読めるブログに載せることが多いため、共有URL側の認証設定との兼ね合いに注意が必要です。パスワードやメール認証を付けたURLは、埋め込み枠でも認証が求められるため、不特定多数に広く見せたい埋め込みには向きません。

広く見せたいページはURLのみの公開にし、関係者限定のものは埋め込みではなくリンクで案内するなど、用途で分けるのが現実的です。また公開期限を設定している場合、期限が切れると埋め込み枠の中身も見られなくなる点に注意してください。

## 更新を反映しやすくする

ギガサイト便では同じURLのまま中身を差し替えられます。ブログに貼ったリンクや埋め込みのsrcはそのままで、参照先の中身だけを更新できるため、記事を編集し直さずに最新版を見せられます。

一時公開ページにはnoindexが付くため、埋め込んだ共有URL自体は検索結果に出ません。記事本体は通常どおりインデックスされるので、本文で内容を補足しておくと検索からの読者にも伝わりやすくなります。

## よくある質問

### 共有URLはiframeで埋め込めますか

iframeのsrcに共有URLを指定すれば、ブログや既存サイトの記事内に埋め込めます。掲載先がiframeの設置に対応している必要があります。表示枠の幅や高さは掲載先のデザインに合わせて調整してください。

### 認証付きのURLを埋め込むとどうなりますか

パスワードやメール認証を設定したURLは、埋め込み枠でも認証が求められます。不特定多数に広く見せたい埋め込みには向かないため、広く公開するページはURLのみ、関係者限定のものはリンク案内にするなど使い分けてください。

### 埋め込んだ後に内容を更新できますか

できます。同じURLのまま中身を差し替えられるので、ブログ側のリンクや埋め込みのsrcはそのままで、参照先の内容だけを更新できます。記事を編集し直さずに最新版を見せられます。

### 公開期限が切れると埋め込みはどうなりますか

公開期限が切れると、そのURLは自動的に閲覧できなくなり、埋め込み枠の中身も見られなくなります。長く見せ続けたい埋め込みは、期限を切らさないか差し替え運用にするなど、期限の扱いに気をつけてください。

### 最短で進める場合でも省略しないほうがよい確認は何ですか？

不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。

## 関連記事

- [共有URLのQRをポスター・チラシに載せる方法](https://giga-site.com/articles/share-url-in-qr-poster/index.md)
- [公開URLをX（Twitter）でシェアして見栄えよく見せる方法](https://giga-site.com/articles/share-on-x-twitter/index.md)
- [公開URLをFacebookでシェアする方法](https://giga-site.com/articles/share-on-facebook/index.md)
- [公開URLをLinkedInでシェアする方法](https://giga-site.com/articles/share-on-linkedin/index.md)
- [共有URLをメール署名に入れる方法と注意点](https://giga-site.com/articles/add-url-to-email-signature/index.md)
- [OGP画像を設定してSNSのサムネを整える方法](https://giga-site.com/articles/set-ogp-image/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "共有URLをブログやサイトに埋め込む方法",
  "description": "ブログ記事や既存サイトの中で作った HTML を実際に体験してもらいたいときに役立つ埋め込み方法。リンクとして貼る方法だけでなく iframe で記事内に埋め込む手順と、認証・公開期限との兼ね合いで注意すべき点を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/embed-share-url-in-blog",
  "url": "https://giga-site.com/articles/embed-share-url-in-blog",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ハウツー",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "共有URLはiframeで埋め込めますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "iframeのsrcに共有URLを指定すれば、ブログや既存サイトの記事内に埋め込めます。掲載先がiframeの設置に対応している必要があります。表示枠の幅や高さは掲載先のデザインに合わせて調整してください。"
      }
    },
    {
      "@type": "Question",
      "name": "認証付きのURLを埋め込むとどうなりますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "パスワードやメール認証を設定したURLは、埋め込み枠でも認証が求められます。不特定多数に広く見せたい埋め込みには向かないため、広く公開するページはURLのみ、関係者限定のものはリンク案内にするなど使い分けてください。"
      }
    },
    {
      "@type": "Question",
      "name": "埋め込んだ後に内容を更新できますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "できます。同じURLのまま中身を差し替えられるので、ブログ側のリンクや埋め込みのsrcはそのままで、参照先の内容だけを更新できます。記事を編集し直さずに最新版を見せられます。"
      }
    },
    {
      "@type": "Question",
      "name": "公開期限が切れると埋め込みはどうなりますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "公開期限が切れると、そのURLは自動的に閲覧できなくなり、埋め込み枠の中身も見られなくなります。長く見せ続けたい埋め込みは、期限を切らさないか差し替え運用にするなど、期限の扱いに気をつけてください。"
      }
    },
    {
      "@type": "Question",
      "name": "最短で進める場合でも省略しないほうがよい確認は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。"
      }
    }
  ]
}
```