SEOコンテンツはサーバーレンダリングされたままです
見出し、ガイド、FAQ、スキーマは、ゲームがフレーム内で読み込まれている間にHTMLとしてレンダリングできます。
アストロゲームウィジェット
静的サイトおよびハイブリッドサイト向けのアストロゲームウィジェット
Astroサイトは、高速でインデックス可能なページを配信しつつ、プレイ可能なゲームを提供することができます。見出し、本文、スキーマはAstroページに保持し、Games I Know iframeは本文にレンダリングし、ブラウザイベントが必要な場合にのみ小さなクライアントスクリプトまたはアイランドを使用します。
静的ページに適したページ
最小限のクライアントJavaScript
インデックス可能なコピー
iframe フレームのルーティング
簡潔な答え
フレームルートを使用し、ページコンテキストを追加します。
Astroでは、メタデータとFAQコンテンツを含むインデックス可能なページを作成し、そのページ内にembed /embed/{gameSlug}/frame/ を追加します。GAME_STARTEDイベントや完了イベントが必要な場合は、postMessage用のクライアントスクリプトを追加してください。
天体観測に適したゲームウィジェットをお試しください
このライブデモは、Astroコンテンツページに配置できるiframeとイベントログのパターンを再現しています。
Astroの開発者がiframeゲームを追加
Astroがiframeゲームウィジェットとうまく連携する理由
Astroはコンテンツ量の多いページ作成に優れています。ゲームはiframe内に保持されるため、ゲームロジックをメインバンドルに含める必要はありません。
小規模なクライアントのフットプリント
イベントリスナーまたはフルスクリーンヘルパーのみがクライアント側のJavaScriptを必要とします。
どこでも同じ embed
Astro、Next.js、WordPress、およびカスタムサイト全体で同じフレームURLパターンを使用してください。
セットアップフロー
Astroにゲームウィジェットを追加する方法
フロントマターメタデータを含むルートを作成し、テンプレートにiframeを配置し、ブラウザのメッセージングをクライアントスクリプトに分離します。
ステップ 1
天体ページを作成する
ゲーム配置場所に、タイトル、説明、正規URL、および役立つテキストを追加してください。
ステップ 2
iframe をレンダリングします
ページ本文または小さな部分コンポーネントに、テナントIDを指定したGames I KnowフレームURLを使用してください。
ステップ 3
必要に応じてクライアントメッセージを追加する
iframe からの postMessage イベントをリッスンするには、client:load スクリプトまたはアイランドを使用します。
ステップ 4
署名結果をサーバー側で検証する
報酬を付与する前に、API ルートまたはバックエンドエンドポイントを使用して完了を確認してください。
実装
Astro実装に関する注意事項
AstroページをSEOの表面として扱い、iframeをプレイ可能なアプリケーションの境界として扱います。
ランディングページをiframeしないでください
iframe 内で /embed/{gameSlug}/frame/ を使用します。 /embed/{gameSlug}/ を通常のクロール可能なリンクとして保持します。
予約高さ iframe
ゲームフレームの読み込み時にレイアウトがずれるのを軽減するため、高さを640ピクセル付近に固定してください。
FAQスキーマを追加
AstroページのFAQとHowToスキーマは、検索エンジンとAIシステムが統合を理解するのに役立ちます。
利用可能なゲーム
ページに合ったゲームを選択してください
Tic Tac Toe
Embed for same-screen play on your site, or send players to Games I Know to challenge a friend remotely with a room link.
Embed セットアップ
Four in a Row
Embed for local two-player drops on one screen, or link friends to play Four in a Row online from anywhere.
Embed セットアップ
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed セットアップ
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed セットアップ
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed セットアップ
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed セットアップ
よくある質問
アストロゲームウィジェットに関するよくある質問
/embed/{gameSlug}/ と /embed/{gameSlug}/frame/ の違いは何ですか?
iframe の src として /embed/{gameSlug}/frame/ を使用してください。このルートは、ウェブサイト embed および postMessage イベント用に構築された軽量ゲームフレームです。/embed/{gameSlug}/ ルートは、一般公開用のプレビューおよび SEO ページであり、iframe 内に配置するルートではありません。
訪問者はアプリをダウンロードしたり、アカウントを作成したりする必要がありますか？
いいえ。訪問者は、スマートフォン、タブレット、ノートパソコン、デスクトップパソコンのブラウザiframe内でプレイできます。パートナーアカウントが必要なのは、embedをインストールするウェブサイトの所有者のみです。
embed を自分のドメインに限定することはできますか？
はい。Games I Know embed は登録済みの Web サイトとドメイン制限付きテナント設定に基づいて設計されているため、コピーされた iframe コードは許可されていないサイトで自由に再利用することはできません。
現在、embed可能なGames I Knowタイトルはどれですか？
Tic Tac Toe、Four in a Row、Bingo、およびI Knowは、embed対応のブラウザゲームとして利用可能です。embedのドキュメントでは、サポートされているゲーム全体で同じイベントモデルを使用しています。
Astroの静的出力でGames I Knowを使用できますか？
はい。ページの内容は完全に静的なHTMLで構いません。iframeは、実行時に訪問者のブラウザでGames I Knowからゲームを読み込みます。
ブラウザゲームを追加する準備はできましたか？
パートナーアカウントを作成し、ドメインを登録して、ウェブサイト用のドメイン制限付きiframeを生成してください。