SEO-страница остается индексируемой
На вашей странице могут быть заголовки, текст, ссылки, раздел часто задаваемых вопросов и схема оформления вокруг игрового поля.
Next.js игровой виджет
Next.js игровой виджет для сайтов
На сайтах, использующих Next.js, можно добавить играбельную игру, не включая игровой движок в пакет приложения. Используйте индексируемую страницу для контента, отрисовывайте фрейм Games I Know для воспроизведения и обрабатывайте события в клиентском компоненте по мере необходимости.
Совместимость с App Router
Текст индексируемой страницы
Обработка клиентских событий
Безопасный для фреймворков iframe
Краткий ответ
Используйте маршрут через фрейм, а затем добавьте контекст страницы.
Для Next.js сохраните SEO-метаданные и текст страницы в маршруте, затем отобразите Games I Know и iframe в клиент-безопасном компоненте с атрибутом src /embed/{gameSlug}/frame/.
Попробуйте игровой виджет, совместимый с Next.js
В демонстрационном режиме показан маршрут кадра и журнал событий, которые может обрабатывать клиентский компонент Next.js.
Next.js команд добавляют игру iframe
Почему это хорошо работает в Next.js
Next.js наиболее эффективен, когда содержимое страницы и метаданные отображаются на сервере, а поведение, доступное только в браузере, остается в сфокусированных клиентских компонентах.
Отсутствие игровой логики, требующей большого количества жидкости
Игра находится внутри iframe, поэтому ваш маршрут Next.js остаётся проще и быстрее в обслуживании.
Четкая граница клиента
Только обработчик событий и элементы управления iframe требуют обработки на стороне клиента.
Настройка процесса
Как добавить игровой виджет в Next.js
Создайте индексируемый маршрут, поместите iframe в содержимое и используйте клиентский компонент только для обработки событий.
Шаг 1
Создать страницу маршрута
Добавьте метаданные, канонический URL, текст страницы и ссылки, указав цель, для которой вы хотите, чтобы страница служила.
Шаг 2
Отобразить iframe
Используйте URL-адрес фрейма Games I Know с вашим tenantId внутри тела страницы или небольшого компонента.
Шаг 3
Обработка событий браузера
В клиентском компоненте отслеживайте события сообщений и выполняйте фильтрацию по параметру data.source === "gamesiknow".
Шаг 4
Награды обрабатываются на стороне сервера.
Для проверки подписанных результатов перед начислением вознаграждений используйте маршрут API или серверную службу.
Выполнение
Next.js замечания по реализации
Разделите контент, удобный для поисковых роботов, от обработки сообщений, предназначенных только для браузера, чтобы страница была полезна как для людей, так и для поисковых систем.
Используйте метаданные маршрута
Установите заголовок, описание, каноническую ссылку, теги 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/?
Используйте /embed/{gameSlug}/frame/ в качестве src для iframe. Этот маршрут представляет собой легковесный игровой фрейм, созданный для веб-страниц 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 с ограничением доступа к домену.