新着EmbedSocial MCP:自社データをあらゆるAIツールと連携
Markdownで表示

埋め込みコード

サイトに合った形式でウィジェットのコードをコピーできます。Google検索に星評価を表示するレビュースキーマコードも取得できます。

埋め込みコードは、ウィジェットをWebサイトに表示するためのコードです。ウィジェットごとに4つの形式で生成されるため、サイトがどのような構成であっても使える形式があります。

'Editor' の左側のレールの先頭にある 'Embed' タブにあります。パネル内にはさらに3つのタブがあり、'Home' は標準のウィジェットコード、'Product' は商品ページ向けのコード、'Schema' は星評価のスニペットの元になるレビューの構造化データです。

ウィジェットを埋め込む方法

  1. Embedタブを開きます。 ウィジェットエディタで左側のレールの 'Embed' をクリックします。

  2. コードの種類を選びます。 ドロップダウンから 'JavaScript'、'iFrame'、'URL'、'WordPress shortcode' を選択します。既定はJavaScriptです。

    JavaScript、iFrame、URL、WordPress shortcodeが選べるSelect code typeのドロップダウン
  3. コードをコピーします。 'Copy code' をクリックします。

    HomeタブにJavaScriptのコードとCopy codeボタンが表示されたEmbed widgetのパネル
  4. サイトに貼り付けます。 ウィジェットを表示したい場所に配置します。コードの下にある 'Platform tutorials' の行から、お使いのビルダー向けの手順ガイドを開けます。

埋め込みは一度だけです。デザインの変更、新しい投稿、モデレーションの結果はすべて同じコードを通じて公開中のウィジェットに反映されるため、編集後に埋め込み直す必要はありません。

どのコードの種類を選ぶか

  • JavaScript. 既定であり、ほとんどの場合に適した選択肢です。ウィジェットをページ内に直接描画し、コンテナの幅に合わせて表示します。
  • iFrame. ウィジェットを専用のフレーム内に描画します。Webサイトビルダーが埋め込みコードからscriptタグを除去してしまう場合にお使いください。
  • URL. ウィジェットを独立したページとして表示する直接リンクです。リンクしか設置できない場所や、埋め込まずにウィジェットを共有したい場合にお使いください。
  • WordPress shortcode. WordPressの固定ページや投稿に貼り付けるショートコードです。無料の公式WordPressプラグインと組み合わせて動作します。

コードの下には、必要な場合に使う2つのオプションがあります。'Include lazy loading' はウィジェットのコンテンツを表示領域に入ってから読み込み、'SPA and Ajax loaded' はページ全体を再読み込みせずにコンテンツを読み込むシングルページアプリケーション向けです。

Productタブ

'Product' は、商品ページ向けのコードを生成します。'catalog' を選び、必要に応じて 'product' も選ぶと、その商品のIDを含むコードが生成されます。商品ページにはフィード全体ではなく、その商品にタグ付けされた投稿が表示されます。

カタログと商品を選択し、その商品専用のコードが表示されたProductタブ

先に 'Links' タブで投稿に商品をタグ付けしてください。ショッパブルウィジェットをご覧ください。

Schemaタブ:Google検索に星評価を表示する

レビューウィジェットを作成すると、EmbedSocialは埋め込みコードとあわせて2つ目のコードを生成します。そのウィジェットに含まれるレビューから作られた集計済みの構造化データ、レビュースキーマです。検索エンジンがこれを読み取り、Google検索の結果でページの横に評価を星のスニペットとして表示します。

'Home' と 'Product' の隣の 'Schema' タブにあります。スキーマコードが含まれるプランについては料金ページをご覧ください。

  1. Schemaタブに切り替えます。 'Embed widget' のパネルで 'Schema' を選択します。このウィジェットのレビューを集計したスキーマコードが表示されます。

    Schemaタブを選択し、レビュースキーマのコードとCopy codeボタンが表示されたEmbed widgetのパネル
  2. スキーマコードをコピーします。 'Copy code' をクリックします。

  3. ページに貼り付けます。 星評価を表示したいページの <head> セクション内に配置します。

  4. インデックス登録をリクエストします。 Google Search Console で 'URL inspection' をクリックし、コードを設置したURLを貼り付けて 'Request indexing' をクリックします。

    Request indexingのオプションが表示されたGoogle Search ConsoleのURL inspection画面
Googleは、スキーマコードを個別の商品ページやサービスページに設置することを推奨しています。トップページやランディングページには星評価は表示されません。

星評価が表示されるまで

インデックス登録をリクエストすると、URLが優先クロールのキューに追加されます。そこからGoogle検索の結果に星評価が表示されるまでには数日から数週間かかることがあり、そのタイミングを決めるのは当社ではなくGoogleです。同じページを何度も送信してもキューの順番は変わらないため、リクエストは1回で十分です。

スキーマコードは新しいレビューが届くたびに自動的に更新されるため、一度貼り付ければ手動で更新する必要はありません。新しいレビューをいつ反映するかはGoogleの判断となるため、ウィジェットの表示より遅れることがあります。

ウィジェットをサイトに設置しませんか?

埋め込みコードに関するよくある質問

どのコードの種類を使えばよいですか?

お使いのプラットフォームがブロックしない限りJavaScriptです。ビルダーがscriptを除去する場合はiFrame、リンクしか置けない場所ではURL、WordPressではショートコードをお使いください。

ウィジェットを変更したら埋め込み直しが必要ですか?

いいえ。コードは変わらず、デザインやコンテンツの変更はすべて埋め込み済みのウィジェットに自動的に反映されます。

同じウィジェットを複数のページで使えますか?

はい。同じコードを好きなだけ多くのページに貼り付けられます。

'Include lazy loading' は何をしますか?

ウィジェットが表示領域にスクロールされてから、そのコンテンツを読み込みます。ページの初回読み込みの対象から外せます。

Productのコードは何のためのものですか?

商品ページ向けです。商品のIDを含むため、そのページにはフィード全体ではなく、その商品にタグ付けされた投稿が表示されます。

スキーマコードにはどのプランが必要ですか?

各プランに含まれる内容を掲載している料金ページをご覧ください。

スキーマコードは正確にどこへ貼り付けますか?

星評価を表示したいページのheadセクション内です。トップページではなく、個別の商品ページやサービスページに設置してください。

スキーマコードは自動的に更新されますか?

はい。ウィジェットに新しいレビューが届くたびに自動的に更新されます。検索結果に反映するかどうかはGoogleの判断となり、時間がかかる場合があります。

星評価が表示されるまでどれくらいかかりますか?

コードを貼り付けてインデックス登録をリクエストしてから、数日から数週間程度です。

新しいレビューが届くたびにインデックス登録をリクエストする必要がありますか?

いいえ。最初にコードを追加したときに1回リクエストすれば十分です。それ以降はスキーマが自動的に最新の状態を保ちます。

次のステップ

特定のビルダーでサイトを運用している場合は、'Platform tutorials' の行から該当する手順を開けます。まずはWordPressからご覧ください。商品ページ向けの流れはショッパブルウィジェットをご覧ください。

ご不明な点がございましたら、画面右下のチャットアイコンからカスタマーサクセスチームにお問い合わせいただくか、support@embedsocial.com までメールをお送りください。喜んでサポートいたします 🙏

お探しのものが見つかりませんか?

サポートチームがお手伝いします。お問い合わせいただければ、24時間以内にご返信します。

サポートに問い合わせる