Halaman SEO tetap dapat diindeks.
Halaman Anda dapat menyertakan judul, teks, tautan, FAQ, dan skema di sekitar kerangka permainan.
widget game Next.js
Next.js widget permainan untuk situs web
Situs Next.js dapat menambahkan game yang dapat dimainkan tanpa menyertakan mesin game dalam paket aplikasi. Gunakan halaman yang dapat diindeks untuk konten, render frame Games I Know untuk bermain, dan tangani peristiwa di komponen klien bila diperlukan.
Ramah terhadap App Router
Salinan halaman yang dapat diindeks
Penanganan acara klien
iframe yang aman untuk kerangka kerja
Jawaban singkat
Gunakan rute frame, lalu tambahkan konteks halaman.
Untuk Next.js, pertahankan metadata SEO dan salinan halaman di rute, lalu render Games I Know iframe dalam komponen yang aman untuk klien dengan /embed/{gameSlug}/frame/ sebagai src.
Coba widget game yang ramah Next.js
Demo langsung ini menunjukkan rute frame dan log peristiwa yang dapat dikonsumsi oleh komponen klien Next.js.
Next.js tim menambahkan permainan iframe
Mengapa ini berfungsi dengan baik di Next.js
Next.js paling kuat ketika konten halaman dan metadata dirender oleh server sementara perilaku khusus browser tetap berada di komponen klien yang terfokus.
Tidak ada logika permainan yang terlalu berfokus pada hidrasi.
Permainan ini berada di dalam iframe, sehingga rute Next.js Anda tetap lebih sederhana dan lebih cepat untuk dipelihara.
Batasan klien yang bersih
Hanya event listener dan kontrol iframe yang memerlukan perilaku sisi klien.
Alur pengaturan
Cara menambahkan widget game di Next.js
Buat rute yang dapat diindeks, tempatkan iframe di dalam konten, dan gunakan komponen klien hanya untuk penanganan peristiwa.
Langkah 1
Buat halaman rute
Tambahkan metadata, URL kanonik, teks halaman, dan tautan sesuai dengan tujuan yang ingin Anda capai melalui halaman tersebut.
Langkah 2
Render iframe
Gunakan URL frame Games I Know dengan tenantId Anda di dalam isi halaman atau komponen kecil.
Langkah 3
Tangani peristiwa browser.
Di komponen klien, dengarkan peristiwa pesan dan filter berdasarkan data.source === "gamesiknow".
Langkah 4
Pertahankan sistem hadiah di sisi server.
Gunakan rute API atau layanan backend untuk memverifikasi hasil yang telah ditandatangani sebelum memberikan hadiah.
Pelaksanaan
Next.js catatan implementasi
Pisahkan konten yang ramah bagi perayap dari penanganan pesan khusus peramban sehingga halaman tersebut bermanfaat bagi manusia dan sistem pencarian.
Gunakan metadata rute
Tetapkan judul, deskripsi, kanonikal, tag Open Graph, dan skema FAQ pada halaman publik yang menampung widget tersebut.
Jangan iframe halaman arahan
Halaman /embed/{gameSlug}/ publik adalah konten yang dapat diindeks. iframe harus menggunakan /embed/{gameSlug}/frame/.
Hindari perubahan tata letak
Tetapkan ketinggian game tetap agar iframe tidak menggeser konten setelah dimuat.
Permainan yang tersedia
Pilih permainan yang sesuai dengan halaman.
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.
Pengaturan 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.
Pengaturan Embed
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Pengaturan Embed
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Pengaturan Embed
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Pengaturan Embed
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Pengaturan Embed
Pertanyaan yang Sering Diajukan (FAQ)
Pertanyaan umum tentang widget game Next.js
Apa perbedaan antara /embed/{gameSlug}/ dan /embed/{gameSlug}/frame/?
Gunakan /embed/{gameSlug}/frame/ sebagai src iframe. Rute tersebut adalah kerangka game ringan yang dibangun untuk embed situs web dan peristiwa postMessage. Rute /embed/{gameSlug}/ adalah halaman pratinjau publik dan SEO untuk orang-orang, bukan rute yang ditempatkan di dalam iframe.
Apakah pengunjung perlu mengunduh aplikasi atau membuat akun?
Tidak. Pengunjung dapat bermain di dalam browser iframe di ponsel, tablet, laptop, atau desktop. Akun mitra hanya diperlukan oleh pemilik situs web yang memasang embed.
Bisakah saya membatasi embed hanya untuk domain saya sendiri?
Ya. Games I Know embed dirancang berdasarkan situs web terdaftar dan pengaturan penyewa yang dibatasi domain, sehingga kode iframe yang disalin tidak dapat digunakan kembali secara bebas di situs yang tidak berizin.
Judul Games I Know mana yang saat ini embed dapat digunakan?
Tic Tac Toe, Four in a Row, Bingo, dan I Know tersedia sebagai game browser yang dapat dimainkan di embed. Dokumentasi embed menggunakan model event yang sama di seluruh game yang didukung.
Apakah komponen iframe harus menjadi komponen klien di Next.js?
Markup iframe dapat dirender dari komponen server, tetapi listener postMessage atau status layar penuh harus berada di komponen klien.
Siap menambahkan game browser?
Buat akun mitra, daftarkan domain Anda, dan hasilkan iframe yang dibatasi domain untuk situs web Anda.