La pagina SEO rimane indicizzabile
La tua pagina può includere titoli, testo, link, domande frequenti (FAQ) e uno schema attorno alla cornice del gioco.
Next.js widget di gioco
Next.js widget di gioco per siti web
I siti Next.js possono aggiungere un gioco giocabile senza dover includere un motore di gioco nel pacchetto dell'app. Utilizza una pagina indicizzabile per il contenuto, esegui il rendering del frame Games I Know per il gioco e gestisci gli eventi in un componente client quando necessario.
Compatibile con App Router
Copia della pagina indicizzabile
Gestione degli eventi del cliente
Framework-safe iframe
Risposta breve
Utilizza un percorso frame, quindi aggiungi il contesto della pagina.
Per Next.js, mantieni i metadati SEO e il testo della pagina nel percorso, quindi esegui il rendering di Games I Know iframe in un componente client-safe con /embed/{gameSlug}/frame/ come src.
Prova il widget di gioco compatibile con Next.js
La demo live mostra il percorso del frame e il registro eventi che un componente client Next.js può utilizzare.
Le squadre Next.js aggiungono un gioco iframe
Perché questo funziona bene in Next.js
Next.js è più efficace quando il contenuto della pagina e i metadati vengono renderizzati lato server, mentre il comportamento specifico del browser rimane confinato nei componenti client focalizzati.
Nessuna logica di gioco incentrata sull'idratazione
Il gioco risiede all'interno del iframe, quindi il tuo percorso Next.js rimane più semplice e veloce da gestire.
Confine client pulito
Solo il listener di eventi e i controlli iframe necessitano di un comportamento lato client.
Flusso di configurazione
Come aggiungere un widget di gioco in Next.js
Crea un percorso indicizzabile, inserisci iframe nel contenuto e utilizza un componente client solo per la gestione degli eventi.
Passo 1
Crea la pagina del percorso
Aggiungi metadati, URL canonico, testo della pagina e link in base all'intento che desideri che la pagina soddisfi.
Passo 2
Eseguire il rendering di iframe
Utilizza l'URL del frame Games I Know con il tuo tenantId all'interno del corpo della pagina o di un piccolo componente.
Passo 3
Gestire gli eventi del browser
In un componente client, intercetta gli eventi dei messaggi e filtra in base a data.source === "gamesiknow".
Passo 4
Mantieni i premi lato server
Utilizzare una rotta API o un servizio di backend per verificare i risultati firmati prima di assegnare le ricompense.
Implementazione
Next.js note di implementazione
Separare i contenuti ottimizzati per i crawler dalla gestione dei messaggi destinati esclusivamente al browser, in modo che la pagina sia utile sia agli utenti umani che ai sistemi di ricerca.
Utilizzare i metadati del percorso
Imposta titolo, descrizione, tag canonici, tag Open Graph e schema FAQ sulla pagina pubblica che ospita il widget.
Non iframe la landing page
La pagina pubblica /embed/{gameSlug}/ è un contenuto indicizzabile. Il iframe dovrebbe usare /embed/{gameSlug}/frame/.
Evitare lo spostamento del layout
Riserva un'altezza di gioco fissa in modo che iframe non sposti il contenuto dopo il caricamento.
Giochi disponibili
Scegli il gioco più adatto alla pagina
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 configurazione
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 configurazione
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed configurazione
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed configurazione
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed configurazione
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed configurazione
FAQ
Domande frequenti su Next.js widget di gioco
Qual è la differenza tra /embed/{gameSlug}/ e /embed/{gameSlug}/frame/?
Utilizza /embed/{gameSlug}/frame/ come src di iframe. Questa route è il frame di gioco leggero creato per i embed del sito web e gli eventi postMessage. La route /embed/{gameSlug}/ è la pagina di anteprima pubblica e SEO per gli utenti, non la route da inserire all'interno di un iframe.
I visitatori devono scaricare un'app o creare un account?
No. I visitatori possono giocare all'interno del browser iframe su telefono, tablet, laptop o computer desktop. Un account partner è necessario solo al proprietario del sito web che installa embed.
Posso limitare embed al mio dominio?
Sì. I Games I Know e embed sono progettati per siti web registrati e impostazioni di tenant con restrizioni di dominio, quindi il codice iframe copiato non può essere riutilizzato liberamente su siti non autorizzati.
Quali titoli Games I Know sono attualmente embed disponibili?
Tic Tac Toe, Four in a Row, Bingo e I Know sono disponibili come giochi per browser embed. La documentazione embed utilizza lo stesso modello di eventi per tutti i giochi supportati.
Il componente iframe deve essere un componente client in Next.js?
Il markup iframe può essere renderizzato da un componente server, ma qualsiasi listener postMessage o stato fullscreen dovrebbe risiedere in un componente client.
Pronti ad aggiungere un gioco al browser?
Crea un account partner, registra il tuo dominio e genera un iframe con restrizioni di dominio per il tuo sito web.