---
title: "SXAにHTMLを埋め込む"
slug: "embed-html-in-sxa"
abstract: "プレーンHTMLコンポーネントを使ってHTMLをSXAページに追加してください。"
---
# SXAにHTMLを埋め込む

ページに特定のHTMLを追加するために、SXAには2つのコンポーネントが付属しています:Plain HTMLとPlain HTML(再利用可能)コンポーネント、そしてHTMLスニペットコンポーネントです。

Plain HTMLおよびPlain HTML(再利用可能)コンポーネントを使って、例えばYouTube動画を埋め込むためにページに配置したい視覚的要素のHTMLコードを埋め込み(および保存)します。このコンポーネントはSXAがすべてのコンポーネントに使用するデフォルトのラッパーを追加します。

汎用HTMLスニペットコンポーネントを使ってメタ部分デザインを付け、HTML要素をバックグラウンドで動作させます。外部システムと統合できます。例えば、Googleタグマネージャーや顧客サーバーチャット機能の統合などです。このコンポーネントには追加のマークアップが付加されません。

## プレーンHTMLコンポーネントを追加してください

プレーンHTMLは、任意の静的HTMLブロックを含めることができる汎用コンポーネントです。Plain HTML(再利用)コンポーネントは、単一使用用だけでなく、サイト全体の複数ページにまたがって再利用することもできます。

プレーンHTMLコンポーネントを追加するには:

1.  エクスペリエンスエディターで、HTMLを追加したいページ(デザイン)または部分デザインに移動します。複数のページにまたがってHTMLを表示する必要がない場合は、ページに追加することもできます。
    
2.  ツールボックスを開きます。 **ページコンテンツ** グループで **「Plain HTML(再利用可能)** 」をクリックしてページにドラッグします。
    
3.  **「関連コンテンツ選択**」ダイアログボックスで**「作成**」をクリックします。
    
4.  アイテム **挿入** ダイアログボックスで「 **HTMLコードを挿入**」をクリックします。
    
5.  ページを保存してください。
    
6.  **Plain HTML(再利用可能)**ツールバーで**「HTMLソース編集**」をクリックします。
    
    ![On the toolbar click Edit HTML source.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-plain-html.png)
    
7.  コンテンツエディターでHTMLコードの項目が開きます。 **HTML**セクションの **コード** 欄でHTMLコードを入力してください。
    
    ![HTML section Code field.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-plain-html-video.PNG)
    
    > !注複雑なコンポーネントの場合は、プレーンHTMLレンダリングを使うことを検討するとよいでしょう。これにより、配置できるHTMLの自由度が完全に向上します。しかし、このページへのコンテンツ追加方法は、すべてのコンテンツエディターがHTMLコードの編集方法を知っているわけではないため、編集者が扱いづらい場合があります。プレーンHTMLレンダリングの代わりに、クローンやバリアント、またはHTMLスニペットの使用を検討してみてください。
    

## HTMLスニペットを追加してください

HTMLスニペットはメタデータ部分設計に追加できるメタコンポーネントです。<body>タグの直後や各ページのクロージング</body>タグの直前で、<head>セクションにカスタムHTMLを追加するために使うことができます。これは、サードパーティのコンポーネント(ウィジェット、トラッキングスクリプトなど)を埋め込みたい場合や、利用可能なコンポーネントがあなたのカスタムニーズに合わない場合に便利です。

HTMLスニペットを追加するには:

1.  エクスペリエンスエディターで **「部分デザイン** 」をクリックし、「 **メタ部分」**をクリックします。
    
2.  SXAツールボックスの **汎用メタレンダリング** カテゴリで、**HTMLスニペット** コンポーネントをドラッグ&ドロップします。メタレンダリングは、headセクション、bodyタグの直後、または各ページのクロージング /bodyタグの前に、以下のコンテナに追加できます。
    
    例えばGoogleタグマネージャーを統合したい場合、頭に付けることが重要です。
    
    ![Add meta renderings to the head section example.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-html-snippet-meta.PNG)
    
3.  **「関連コンテンツ選択**」ダイアログボックスで**「作成**」をクリックします。
    
4.  「 **アイテム挿入** 」ダイアログボックスで、**HTMLスニペット**をクリックします。
    
5.  ページを保存してください。
    
6.  **HTMLスニペット**ツールバーで**「HTMLソース編集**」をクリックします。
    
7.  HTMLコードの項目がコンテンツエディターで開きます。 **HTMLスニペット** セクションの**html**フィールドでHTMLコードを入力してください。