SEOページはインデックス可能な状態を維持します
あなたのページには、見出し、本文、リンク、よくある質問（FAQ）、そしてゲームフレームに関する図表を含めることができます。
Next.js ゲームウィジェット
Next.js ウェブサイト用ゲーム ウィジェット
Next.js サイトでは、アプリ バンドルにゲーム エンジンを含めなくても、プレイ可能なゲームを追加できます。コンテンツにはインデックス可能なページを使用し、プレイには Games I Know フレームをレンダリングし、必要に応じてクライアント コンポーネントでイベントを処理します。
アプリルーター対応
インデックス可能なページコピー
クライアントイベント処理
フレームワークセーフな iframe
簡潔な答え
フレームルートを使用し、ページコンテキストを追加します。
Next.js については、SEO メタデータとページ コピーをルートに保持し、Games I Know iframe を /embed/{gameSlug}/frame/ を src としてクライアント セーフ コンポーネントでレンダリングします。
Next.js対応のゲームウィジェットをお試しください
ライブデモでは、Next.js クライアントコンポーネントが消費できるフレームルートとイベントログを示します。
Next.js チームが iframe ゲームを追加しています
これがNext.jsでうまく機能する理由
Next.js は、ページコンテンツとメタデータがサーバー側でレンダリングされ、ブラウザのみの動作がフォーカスされたクライアントコンポーネント内に留まる場合に最も強力になります。
水分補給を重視したゲームロジックはありません
ゲームはiframe内に配置されるため、Next.jsルートはよりシンプルになり、メンテナンスも迅速になります。
クリーンなクライアント境界
イベントリスナーとiframeコントロールのみがクライアント側の動作を必要とします。
セットアップフロー
Next.js にゲームウィジェットを追加する方法
インデックス可能なルートを作成し、コンテンツ内に iframe を配置し、イベント処理のためだけにクライアントコンポーネントを使用します。
ステップ 1
ルートページを作成する
ページが果たすべき役割に合わせて、メタデータ、正規URL、ページ本文、リンクを追加してください。
ステップ 2
iframe をレンダリングします
ページ本文または小さなコンポーネント内に、テナントIDを指定したGames I KnowフレームURLを使用してください。
ステップ 3
ブラウザイベントを処理する
クライアントコンポーネントでは、メッセージイベントをリッスンし、data.source === "gamesiknow" でフィルタリングします。
ステップ 4
報酬はサーバー側で保持する
報酬を付与する前に、API ルートまたはバックエンドサービスを使用して、署名済みの結果を検証してください。
実装
Next.js 実装ノート
クローラー向けのコンテンツとブラウザ専用のメッセージ処理を分離することで、ページが人間と検索システムの両方にとって有用になります。
ルートメタデータを使用する
ウィジェットをホストする公開ページに、タイトル、説明、正規URL、Open Graphタグ、およびFAQスキーマを設定してください。
ランディングページをiframeしないでください
公開されている /embed/{gameSlug}/ ページは、インデックス付け可能なコンテンツです。 iframe では、/embed/{gameSlug}/frame/ を使用する必要があります。
レイアウトのずれを避ける
iframe がロード後にコンテンツを移動させないように、ゲームの高さを固定します。
利用可能なゲーム
ページに合ったゲームを選択してください
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 セットアップ
よくある質問
Next.js ゲームウィジェットに関するよくある質問
/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のドキュメントでは、サポートされているゲーム全体で同じイベントモデルを使用しています。
iframe コンポーネントは、Next.js のクライアントコンポーネントであるべきでしょうか？
iframe マークアップはサーバーコンポーネントからレンダリングできますが、postMessage リスナーやフルスクリーン状態はクライアントコンポーネントに配置する必要があります。
ブラウザゲームを追加する準備はできましたか？
パートナーアカウントを作成し、ドメインを登録して、ウェブサイト用のドメイン制限付きiframeを生成してください。