GoogleサイトでHTMLを埋め込む方法と注意点｜表示されない原因まで整理│はりぼう記

Googleサイトは、社内ポータルや小規模な案内サイト、授業・イベント用ページなどを素早く作れる便利なサービスです。一方で「HTMLを自由に編集できるサイトビルダー」と同じ感覚で触ると、想定とズレが出やすい点に注意が必要です。特に多いのが、次のようなお悩みです。

GoogleサイトにHTMLを貼り付けたいが、どこに入れればよいか分からない
HTMLは貼れたが、表示が崩れる、余白が多い、スマホで見づらい
JavaScriptが動かない、クリックしても反応しない
iframeで外部ページを埋め込もうとしたら、表示されない（真っ白・エラー）
そもそもGoogleサイトで「できること」と「できないこと」の線引きが分からない

本記事では、GoogleサイトでHTMLを扱う代表的な方法を「選び方」から整理し、具体手順、失敗しやすいポイント、表示されない場合の切り分け、運用上の注意点まで、まとめて解説いたします。単に「貼り方」だけでなく、壊れにくい設計とトラブルに強い運用を重視して説明します。

※本コンテンツは「記事制作ポリシー」に基づき、正確かつ信頼性の高い情報提供を心がけております。万が一、内容に誤りや誤解を招く表現がございましたら、お手数ですが「お問い合わせ」よりご一報ください。速やかに確認・修正いたします。

1 GoogleサイトでHTMLはどこまでできるか
- 1.1 HTML編集とHTML埋め込みの違い
- 1.2 できることと難しいことの整理
  - 1.2.1 できる可能性が高い（相性が良い）ケース
  - 1.2.2 難しいことが多い（詰まりやすい）ケース
2 GoogleサイトにHTMLを埋め込む手順
3 GoogleサイトのURL埋め込みとiframe活用
4 GoogleサイトでHTMLが表示されない時の対処
5 GoogleサイトでHTMLを運用する注意点
6 Googleサイト HTMLのよくある質問
7 まとめ

GoogleサイトでHTMLはどこまでできるか

HTML編集とHTML埋め込みの違い

最初に押さえるべき点は、Googleサイトは「HTMLを直接編集してページ全体を構築する」タイプのCMSではない、ということです。WordPressのテーマ編集のように、ヘッダーやフッター、全体レイアウトをHTMLで自由に編集する思想ではありません。

GoogleサイトでHTMLを扱う方法は、大きく次の2系統に整理できます。

URLを埋め込む（外部ページや外部サービスの表示）
例：YouTube、Googleマップ、外部サービスの公開ページ、Webアプリなど
コードを埋め込む（HTML/CSS/JavaScript断片の配置）
例：注意喚起バナー、簡単なボタン、ウィジェット風の小パーツ、軽いインタラクションなど

この違いを誤解すると「HTMLファイルをアップロードしてそのままサイトにする」「JSフレームワークのアプリを丸ごと貼る」といった方向に進み、途中で詰まる可能性が高くなります。基本的には、Googleサイトはページを組み立てる土台であり、HTMLはパーツとして差し込むのが得意領域です。

また、埋め込みは「編集画面の見え方」と「公開後の見え方」が一致しない場合があります。編集画面のプレビューで見えていても、公開時の権限・外部要因で変わることがあるため、後述のチェックが重要になります。

できることと難しいことの整理

ここでは、Googleサイトで「できる可能性が高いこと」と「難しいことが多いこと」を、目的別に整理します。判断を早めるために、先に結論だけではなく、目安を提示します。

できる可能性が高い（相性が良い）ケース

提供元が埋め込みを公式に想定しているコンテンツ
例：動画、地図、フォーム、予約ページ、カレンダー、SNS投稿埋め込み等
軽量なHTML/CSS/JSの小パーツ
例：ボタン、アコーディオン（簡易）、注意喚起、簡単な計算・表示切替など
外部で公開しているページを、表示枠として埋め込む
例：静的サイト（GitHub Pages等）で作ったページをiframe表示

これらは、Googleサイトの使い方として自然で、保守もしやすい傾向があります。

難しいことが多い（詰まりやすい）ケース

サイト全体のデザインや構造をHTMLで完全にコントロールしたい
Googleサイトはテンプレート・ブロック配置の思想が強く、全面自由設計は前提になっていません。
複雑なJavaScriptアプリを埋め込みだけで完結させたい
外部ライブラリ依存が増えるほど、セキュリティ制約や読み込み順、権限、Cookie制限などの影響を受けやすくなります。
外部サイト側が埋め込み（iframe）を拒否しているページを、無理に埋め込みたい
これはGoogleサイトの設定では解決できないことが多く、代替設計が必要になります。

「難しいこと」は不可能とは限りませんが、成功率と運用負荷を考えると、早期に代替案を検討した方が結果的に安定します。

GoogleサイトにHTMLを埋め込む手順

コード埋め込みの手順

Googleサイトでコード（HTML）を埋め込む基本手順は次の通りです。ポイントは「貼る場所」と「プレビュー確認」「公開反映」の3点です。

Googleサイトを開き、対象ページを編集状態にします
右側の「挿入」タブから「埋め込む」を選択します
「埋め込みコード」を選び、HTMLコードを貼り付けます
「次へ」を押してプレビューを確認します
問題なければ「挿入」を押してページに配置します
配置された埋め込み要素のサイズ（幅・高さ）を調整します
右上の「公開」を押して、公開ページでも表示を確認します

ここで重要なのは、埋め込みは「貼って終わり」ではなく、表示領域の調整がセットである点です。特に高さは、内容に対して足りないと途中が切れたり、逆に過剰だと不自然な余白が出ます。まずは仮で十分な高さにし、公開ページで調整する流れが確実です。

また、埋め込み要素はページの他パーツ（テキスト、画像、区切り）と組み合わせて使うことが多いため、周辺との余白も含めて見栄えを整えると、閲覧者のストレスが減ります。

CSSとJavaScriptの書き方の要点

コード埋め込みで「表示は出るが、見た目や動きが想定通りにならない」原因の多くは、書き方の基本ルールを外していることです。特にCSS/JavaScriptは、次の原則で整理しておくと安定します。

CSSは styleタグ内 に書く
JavaScriptは scriptタグ内 に書く
まずは外部読み込みを減らし、最小構成から動作確認する
CSSの適用範囲を狭め、他要素に影響しないようにする

以下は動作確認用の最小例です（表示＋簡単な動き）。

<div id="embed-box">
  <p class="title">お知らせ</p>
  <p class="body">この枠はGoogleサイトの埋め込みで表示しています。</p>
  <button id="btn">表示を切り替える</button>
</div>
<style>
  #embed-box {
 border: 1px solid #ddd;
 border-radius: 12px;
 padding: 14px;
 font-family: Arial, sans-serif;
 background: #fafafa;
  }
  #embed-box .title {
 font-size: 16px;
 font-weight: 700;
 margin: 0 0 8px;
  }
  #embed-box .body {
 margin: 0 0 10px;
 line-height: 1.6;
  }
  #embed-box button {
 padding: 8px 12px;
 border: 0;
 border-radius: 10px;
 background: #1a73e8;
 color: #fff;
 cursor: pointer;
  }
</style>

<script> const btn = document.getElementById("btn"); const body = document.querySelector("#embed-box .body"); let on = true; btn.addEventListener("click", () => { on = !on; body.textContent = on ? "この枠はGoogleサイトの埋め込みで表示しています。" : "ボタン操作で文言を切り替えました。"; }); </script>

安定させるコツ（重要）

IDを起点にCSSを書く
#embed-box のように埋め込み内の最上位要素を作り、そこを起点にセレクタを組み立てます。これにより、他の部分へ影響が広がる事故を防げます。
最初は“動くかどうか”だけ確認する
初回から完成形を貼ると、原因切り分けが難しくなります。まず最小例が動くことを確認し、段階的に要素を増やすのが確実です。
外部ライブラリは最後に検討する
外部読み込み（CDN等）を増やすほど、ネットワーク・権限・混在コンテンツ・仕様変更の影響を受けやすくなります。

ページ全体の埋め込みの使いどころ

Googleサイトには「ページ全体の埋め込み」を使える場面があります。これは「Googleサイトの1ページを、ほぼ外部コンテンツ表示に割り切る」考え方に近いです。

向いているケース

そのページは外部ページを見せることだけが目的（例：社内システムの案内ページ、学内ツールへの導線ページ）
Googleサイトの本文（テキスト、画像、セクション）を混在させる必要がない
外部側で更新し、Googleサイト側では更新したくない（運用分離したい）

向かないケース

そのページの上部に説明文、下部に問い合わせ情報など、Googleサイト側の要素をしっかり置きたい
外部ページが重く、表示速度・操作感が悪くなりやすい
モバイル表示で外部側が最適化されておらず、閲覧性が落ちる

ページ全体埋め込みは便利ですが、構造上「外部側の品質」に依存します。外部側を自分で管理できるなら有効ですが、第三者サービスであれば、仕様変更や制限の影響も受けやすい点は認識しておくべきです。

GoogleサイトのURL埋め込みとiframe活用

URL埋め込みが向くケース

URL埋め込みは、コードを貼らなくても表示できるケースがあり、運用が楽になることがあります。向いているのは次のような場合です。

外部サービスが「共有用URL」や「埋め込み用URL」を用意している
HTMLコードを管理するより、URL差し替えだけで済ませたい
更新頻度が高く、Googleサイト側の編集回数を減らしたい
埋め込み対象の編集・改善は外部サービス側で行える

一方、URL埋め込みでも、外部側が埋め込みを制限している場合や、ログインが必要なページの場合、閲覧者の環境で表示できないことがあります。公開範囲や権限設計とセットで考えるのが安全です。

iframeで外部HTMLを表示する基本

「自作したHTMLページをGoogleサイトに載せたい」という場合、現実的に安定しやすいのは次の構成です。

HTMLを外部でホスティングして公開（例：GitHub Pages等）
公開URLをGoogleサイトの埋め込みで表示（iframeまたはURL埋め込み）

この方式の利点は、Googleサイト側の制約を受けにくく、外部側で自由度の高い実装ができる点です。例えば、複数ファイル（CSS/JS/画像）を使うページを作る場合、Googleサイトの「コード埋め込み」だけで完結させようとすると管理が難しくなりますが、外部ホストであれば通常のWeb制作と同じ作法で構築できます。

iframeの基本形は以下です。

ここで意識すべきポイント

幅は100%を基本にする（レスポンシブ性を確保するため）
高さは固定値から始め、必要に応じて調整する
iframeはコンテンツの高さに自動追従しないことが多く、最初は余裕を持たせた高さで始めるのが無難です。
外部側のページ自体がスマホ最適化されていることが重要
iframe内のページが固定幅だと、Googleサイト側で頑張ってもスマホで読みにくくなります。

外部サイトが埋め込めない代表的理由

「埋め込めない」症状は、実装ミスよりも外部サイト側の制約が原因であることが少なくありません。よくある理由は次の通りです。

外部サイトがiframe表示を許可していない（埋め込み拒否）
外部ページがログイン必須で、閲覧者側の認証状態に依存する
ブラウザのCookie制限やセキュリティ設定で、埋め込み内の認証が崩れる
外部側がヘッダー設定やポリシーにより、別ドメインからの表示を制限している

この場合、Googleサイトの設定変更で解決しようとするより、設計を切り替える方が合理的です。具体的には以下の優先順位で検討してください。

外部サービスが公式に用意している「埋め込み機能」や「共有ウィジェット」を使う
外部側で埋め込み許可設定があるなら有効化する（自社管理の場合）
埋め込みを諦め、リンク誘導に切り替える（閲覧の確実性を優先）
代替サービスや、外部ホストでの表示設計に置き換える

埋め込みに固執しすぎると、閲覧者の環境差で見えない人が発生しやすくなります。特に社内ポータル用途では「誰でも見えること」が最優先ですので、リンク誘導も十分に有力な選択肢です。

GoogleサイトでHTMLが表示されない時の対処

症状別チェックリスト

トラブル時は、闇雲にコードを修正するより、切り分けの順番を固定して進める方が早く解決できます。以下を上から順に確認してください。

埋め込み方式は適切ですか（コード埋め込み／URL埋め込み／ページ全体埋め込み）
編集画面ではなく、公開ページで確認していますか
CSSはstyleタグ内、JavaScriptはscriptタグ内になっていますか
外部ページ埋め込みの場合、外部側が埋め込みを許可している前提がありますか
PCとスマホ両方で同じ症状ですか（幅が原因の可能性を判断）
まず「最小コード」で表示できるかを試しましたか（複雑化を避ける）

加えて、社内利用の場合は次も確認してください。

閲覧者のアカウント種別（社内／社外）で見え方が変わっていないか
共有設定（公開範囲）が閲覧者の前提と合っているか
外部サービス側が社内ネットワークやプロキシでブロックされていないか

原因切り分け早見表

以下の表は、代表的な症状に対する「よくある原因」「確認方法」「対処」をまとめたものです。最初はここを起点に当たりを付けると、無駄な試行錯誤が減ります。

症状	よくある原因	確認方法	対処
埋め込みが空白	コードが反映されていない／埋め込み領域が極端に小さい	埋め込み要素を編集し再プレビュー、サイズ確認	最小コードで確認、領域の高さを増やす
外部ページが表示されない	外部側が埋め込み拒否／ログイン必須	別の場所でiframe表示テスト、外部ページ直開き	埋め込みを諦めリンク誘導、外部側設定を見直す
JavaScriptが動かない	記述場所が不適切／外部依存が多い	最小JS（クリックで文言変更）だけで試す	外部依存削減、機能を外部ホスト側へ移す
表示は出るが崩れる	固定幅・固定高さ、CSS衝突	スマホ幅で表示、要素を一つずつ無効化して比較	width:100%前提、セレクタ限定、画像はmax-width:100%
余白が大きい	iframe高さ過剰、コンテンツが小さい	高さを段階的に調整	適正高さにする、外部側の余白も見直す
一部の人だけ見えない	権限、Cookie制限、社内ネットワーク制約	別端末・別アカウントで再現確認	公開範囲調整、リンク誘導、外部側の公開設定見直し

トラブルは「Googleサイトの問題」と決めつけず、外部側の制約・閲覧環境の差まで含めて考えると、解決が早くなります。

スマホ崩れとレスポンシブ調整

スマホ崩れは、見た目の問題に見えて、原因が複数絡むことが多いです。典型的には以下が原因になります。

埋め込み内のHTMLが固定幅（例：width: 900px）
画像や表が横幅固定で、画面に収まらない
iframeが固定幅で、画面からはみ出す
フォントサイズや余白がPC前提で、スマホでは読みづらい

Googleサイト側でできる対処

iframeの幅を基本100%にする
必要に応じて高さを調整し、スクロールしやすい設計にする
埋め込み要素の配置（セクション幅、余白）を調整する

埋め込み側（HTML/CSS側）でやるべき対処

画像：max-width:100%; height:auto; を基本にする
横並び要素：折り返し前提（flex-wrap等）にする
余白：スマホでは詰めすぎず、読みやすい余白を確保する
表：横スクロール可能にする（コンテナにoverflow-x:autoを付与）

「Googleサイト側だけで直そう」とすると限界が出ます。外部ホストでページを作って埋め込む場合は、外部ページ自体をレスポンシブ対応にすることが最重要です。

GoogleサイトでHTMLを運用する注意点

仕様変更と保守性のリスク

埋め込みは便利ですが、運用面では「いつ壊れてもおかしくない」という前提で設計しておくと安全です。これは悲観ではなく、Webの埋め込み全般に共通する現実的なリスクです。具体的には次の要因で動作が変わることがあります。

Googleサイト側の機能・仕様変更
ブラウザ側のセキュリティ強化（Cookie・埋め込み制限等）
外部サービス側の仕様変更、埋め込み機能の廃止
外部コンテンツのURL変更、公開範囲変更

そのため、次の方針で設計すると壊れにくくなります。

重要機能は外部で完結させ、Googleサイトは表示と導線に徹する
埋め込みに依存しすぎない（代替導線を用意する）
埋め込みコードやURLを管理台帳（メモ・スプレッドシート等）で一元管理する
どこに何を埋め込んだか不明になると、修正不能になります。
更新頻度が高い箇所は、外部側に寄せる
Googleサイトで頻繁に編集すると、運用担当者の負荷が増えます。

セキュリティと埋め込みの考え方

埋め込みは、閲覧者のブラウザ上で外部コンテンツを読み込むという構造上、セキュリティと相性が密接です。社内ポータルで利用する場合は特に、次を意識してください。

埋め込み対象の信頼性
無名のスクリプト配布サイト、更新が止まったウィジェット等は避ける方が安全です。
個人情報を入力させる導線の取り扱い
例えばフォームを埋め込む場合、送信先・保管先・閲覧権限が適切かを確認してください。
閲覧者環境差（ブラウザ、拡張機能、社内ネットワーク）
一部の環境でだけ動作が変わることがあります。全員に見せたいページほど、埋め込み依存を減らす判断も必要です。

「動いたから採用」ではなく、「運用しても安全か」「閲覧者に不利益が出ないか」という観点で判断すると、事故が減ります。

SEOと表示速度への影響

Googleサイトを検索流入目的で使う場合、埋め込みは慎重に扱う必要があります。理由は次の通りです。

埋め込みコンテンツは外部読み込みになりやすく、表示速度に影響する
閲覧者が埋め込み内で迷うと離脱につながりやすい
情報が外部側に分散し、ページとしての一貫性が損なわれる場合がある

もちろん、目的が社内ポータルや案内ページであれば、SEOより「閲覧者の利便性」を優先して問題ありません。しかし、検索流入を意識するなら、次の方針が安全です。

ページの主情報（説明文、FAQ、注意事項）はGoogleサイト側に置く
埋め込みは補助（動画、地図、予約等）に留める
重い外部コンテンツはページ下部に配置し、上部の読み込みを軽くする
どうしても重い場合はリンク誘導に切り替える

Googleサイト HTMLのよくある質問

コードに文字数や制限はあるか

埋め込みコードの「厳密な文字数上限」は、環境や仕様変更の影響を受ける可能性があるため、固定値として断定して運用設計を組むのは推奨しません。現実的な考え方としては、次の方針が安定します。

短いウィジェット程度ならコード埋め込みで管理する
長いUI、複数ファイル、頻繁に更新するものは外部ホストに寄せる
重要なコードはバージョン管理（Git等）できる場所で管理し、Googleサイトには「表示用の最小コード」だけを置く

「Googleサイトに全部入れる」より、「外で管理して表示する」方が、保守性・再利用性・変更耐性が上がりやすいです。

外部ライブラリやフォントは使えるか

使える場合はありますが、外部ライブラリや外部フォントを増やすほど、次のリスクが増えます。

読み込み失敗時に表示が崩れる
将来的なURL変更・提供終了の影響を受ける
セキュリティ制約で動作が変わる
依存関係が複雑になり、原因切り分けが難しくなる

そのため、優先順位としては以下がおすすめです。

まずライブラリなしで最小機能を実現できるか検討する
必要性が高い場合のみ、外部ライブラリを追加する
追加する場合も、動作確認と代替案（リンク誘導等）を準備する

フォントも同様で、見た目にこだわりすぎるほど運用リスクが上がります。社内用途では標準フォント中心が無難です。

無料でどこまでできるか

Googleサイト自体は無料で利用できます。また、基本的な埋め込み機能も無料枠で利用可能です。ただし、「無料の範囲で何でも実現できる」という意味ではなく、次の観点で分けて考えるのが安全です。

Googleサイト上でのページ作成・公開：無料で可能
独自ドメイン：別途ドメイン費用が発生することが多い
外部ホスティング（GitHub Pages等）：無料枠があるものも多いが、運用知識が必要
外部サービスの埋め込み：サービス側の料金体系や公開範囲に依存する

「無料かどうか」より、「閲覧者が確実に見られるか」「運用が続けられるか」を軸に選ぶ方が、結果として満足度が高くなります。

まとめ

GoogleサイトはHTMLを直接編集する仕組みではなく、埋め込み（URL／コード）で拡張するのが基本です
コード埋め込みは、最小構成で動作確認→段階的に追加が失敗しにくい進め方です
外部ページが埋め込めない場合は、Googleサイトではなく外部サイト側の制約が原因になりやすいため、リンク誘導など代替案を含めて判断することが重要です
運用では、仕様変更・外部サービス変更・閲覧環境差の影響を受けるため、壊れにくい設計（外部で管理して表示）と代替導線を用意すると安全です

最後に、公開前の確認として、以下のチェックリストを推奨いたします。

公開ページで表示確認を行った
PCとスマホで表示・操作を確認した
外部埋め込みの場合、外部側が埋め込みを許可している前提を確認した
重要情報はGoogleサイト側のテキストとしても記載した（埋め込み依存を減らした）
埋め込みURL・コードの管理方法（台帳・更新手順）を決めた

GoogleサイトでHTMLを埋め込む方法と注意点｜表示されない原因まで整理