La página SEO permanece indexable
Tu página puede incluir encabezados, texto, enlaces, preguntas frecuentes y un esquema en torno al marco del juego.
Widget de juego Next.js
Next.js widget de juego para sitios web
Los sitios Next.js pueden agregar un juego jugable sin incluir un motor de juego en el paquete de la aplicación. Utilice una página indexable para el contenido, renderice el marco Games I Know para el juego y gestione los eventos en un componente del cliente cuando sea necesario.
Compatible con enrutadores de aplicaciones
Copia de página indexable
Gestión de eventos del cliente
iframe seguro para marcos de trabajo
Respuesta corta
Utilice una ruta de marco y, a continuación, añada el contexto de la página.
Para Next.js, mantenga los metadatos SEO y el texto de la página en la ruta, luego renderice Games I Know iframe en un componente seguro para el cliente con /embed/{gameSlug}/frame/ como src.
Prueba el widget de juego compatible con Next.js
La demostración en vivo muestra la ruta del marco y el registro de eventos que puede consumir un componente cliente Next.js.
Next.js equipos agregan un juego iframe
Por qué esto funciona bien en Next.js
Next.js es más fuerte cuando el contenido de la página y los metadatos se renderizan en el servidor, mientras que el comportamiento exclusivo del navegador permanece en los componentes del cliente enfocados.
No hay lógica de juego que haga hincapié en la hidratación.
El juego reside dentro de iframe, por lo que su ruta Next.js permanece más simple y rápida de mantener.
Limpie el límite del cliente
Solo el detector de eventos y los controles iframe necesitan un comportamiento del lado del cliente.
Flujo de configuración
Cómo agregar un widget de juego en Next.js
Crea una ruta indexable, coloca iframe en el contenido y usa un componente de cliente solo para el manejo de eventos.
Paso 1
Crear la página de ruta
Agregue metadatos, URL canónica, texto de la página y enlaces para el propósito que desea que cumpla la página.
Paso 2
Renderiza el iframe
Utilice la URL del marco Games I Know con su tenantId dentro del cuerpo de la página o un pequeño componente.
Paso 3
Gestionar eventos del navegador
En un componente cliente, escuche los eventos de mensajes y filtre en data.source === "gamesiknow".
Paso 4
Mantén las recompensas en el servidor.
Utilice una ruta API o un servicio de backend para verificar los resultados firmados antes de otorgar las recompensas.
Implementación
Next.js notas de implementación
Separe el contenido apto para rastreadores del manejo de mensajes exclusivos del navegador para que la página sea útil tanto para los humanos como para los sistemas de búsqueda AI.
Utilice los metadatos de la ruta.
Configure el título, la descripción, el texto canónico, las etiquetas Open Graph y el esquema de preguntas frecuentes en la página pública que aloja el widget.
No hagas iframe la página de destino
La página pública /embed/{gameSlug}/ es contenido indexable. El iframe debe usar /embed/{gameSlug}/frame/.
Evite el cambio de diseño
Reserva una altura de juego fija para que iframe no mueva el contenido después de la carga.
Juegos disponibles
Elige el juego que mejor se ajuste a la página.
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.
Configuración de 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.
Configuración de Embed
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Configuración de Embed
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Configuración de Embed
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Configuración de Embed
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Configuración de Embed
Preguntas frecuentes
Preguntas frecuentes sobre Widget de juego Next.js
¿Cuál es la diferencia entre /embed/{gameSlug}/ y /embed/{gameSlug}/frame/?
Utilice /embed/{gameSlug}/frame/ como src de iframe. Esta ruta es el marco de juego ligero creado para los embed del sitio web y los eventos postMessage. La ruta /embed/{gameSlug}/ es la página de vista previa pública y SEO para los usuarios, no la ruta que se debe colocar dentro de un iframe.
¿Los visitantes necesitan descargar una aplicación o crear una cuenta?
No. Los visitantes pueden jugar dentro del navegador iframe en teléfono, tableta, computadora portátil o de escritorio. Solo el propietario del sitio web que instala embed necesita una cuenta de socio.
¿Puedo restringir el embed a mi propio dominio?
Sí. Los Games I Know y embed están diseñados en torno a sitios web registrados y configuraciones de inquilino con dominio restringido, por lo que el código iframe copiado no se puede reutilizar libremente en sitios no autorizados.
¿Qué títulos de Games I Know están actualmente disponibles en embed?
Tic Tac Toe, Four in a Row, Bingo y I Know están disponibles como juegos de navegador compatibles con embed. La documentación de embed utiliza el mismo modelo de eventos en todos los juegos compatibles.
¿Debería el componente iframe ser un componente cliente en Next.js?
El marcado iframe se puede renderizar desde un componente de servidor, pero cualquier oyente postMessage o estado de pantalla completa debe residir en un componente de cliente.
¿Listo para agregar un juego de navegador?
Crea una cuenta de socio, registra tu dominio y genera un iframe restringido al dominio para tu sitio web.