SEO 페이지는 색인 생성 가능 상태를 유지합니다.
페이지에는 게임 프레임을 중심으로 제목, 본문, 링크, FAQ 및 스키마를 포함할 수 있습니다.
Next.js 게임 위젯
Next.js 웹사이트용 게임 위젯
Next.js 사이트는 앱 번들에 게임 엔진을 포함하지 않고도 플레이 가능한 게임을 추가할 수 있습니다. 콘텐츠에는 인덱싱 가능한 페이지를 사용하고, 플레이를 위해 Games I Know 프레임을 렌더링하고, 필요한 경우 클라이언트 구성 요소에서 이벤트를 처리하세요.
App Router 친화적입니다.
색인 가능한 페이지 사본
클라이언트 이벤트 처리
프레임워크 안전 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을 렌더링합니다.
페이지 본문이나 작은 구성 요소 안에 tenantId와 함께 Games I Know 프레임 URL을 사용하세요.
단계 3
브라우저 이벤트를 처리합니다.
클라이언트 구성 요소에서 메시지 이벤트를 수신하고 data.source === "gamesiknow"로 필터링합니다.
단계 4
보상은 서버 측에서 보관합니다.
보상을 지급하기 전에 서명된 결과를 확인하려면 API 경로 또는 백엔드 서비스를 사용하십시오.
구현
Next.js 구현 참고 사항
크롤러 친화적인 콘텐츠와 브라우저 전용 메시지 처리 부분을 분리하여 페이지가 사람과 검색 시스템 모두에게 유용하도록 만드세요.
경로 메타데이터를 사용합니다.
위젯을 호스팅하는 공개 페이지에 제목, 설명, 캐노니컬 태그, 오픈 그래프 태그 및 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의 소스 경로로는 /embed/{gameSlug}/frame/을 사용하세요. 이 경로는 웹사이트 embed 및 postMessage 이벤트를 위해 구축된 경량 게임 프레임입니다. /embed/{gameSlug}/ 경로는 공개 미리보기 및 SEO 페이지이며, iframe 내부에 배치할 경로가 아닙니다.
방문객은 앱을 다운로드하거나 계정을 만들어야 하나요?
아니요. 방문자는 휴대폰, 태블릿, 노트북 또는 데스크톱의 브라우저(iframe) 내에서 게임을 즐길 수 있습니다. 파트너 계정은 embed을 설치하는 웹사이트 소유자에게만 필요합니다.
embed을 내 도메인으로 제한할 수 있나요?
예. Games I Know embed은 등록된 웹사이트와 도메인 제한 테넌트 설정을 중심으로 설계되었으므로 복사한 iframe 코드는 승인되지 않은 사이트에서 자유롭게 재사용할 수 없습니다.
현재 어떤 Games I Know 제목들이 embed 사용 가능한가요?
Tic Tac Toe, Four in a Row, Bingo 및 I Know은 embed에서 사용 가능한 브라우저 게임으로 제공됩니다. embed 문서에서는 지원되는 게임 전체에서 동일한 이벤트 모델을 사용합니다.
iframe 컴포넌트는 Next.js의 클라이언트 컴포넌트여야 합니까?
iframe 마크업은 서버 컴포넌트에서 렌더링할 수 있지만, postMessage 리스너 또는 전체 화면 상태는 클라이언트 컴포넌트에 있어야 합니다.
브라우저 게임을 추가할 준비가 되셨나요?
파트너 계정을 만들고 도메인을 등록한 다음 웹사이트에 대해 도메인 제한이 있는 iframe을 생성하세요.