SEO sayfası dizine eklenebilir kalır.
Sayfanız, oyun çerçevesi etrafında başlıklar, metinler, bağlantılar, SSS'ler ve şemalar içerebilir.
Next.js oyun widget'ı
Web siteleri için Next.js oyun widget'ı
Next.js siteleri, uygulama paketine oyun motoru eklemeden oynanabilir bir oyun ekleyebilir. İçerik için indekslenebilir bir sayfa kullanın, oyun için Games I Know çerçevesini oluşturun ve gerektiğinde istemci bileşeninde olayları işleyin.
Uygulama yönlendiricisiyle uyumlu
Dizinlenebilir sayfa kopyası
Müşteri etkinliklerinin yönetimi
Çerçeveye uygun iframe
Kısa cevap
Bir çerçeve rotası kullanın, ardından sayfa bağlamı ekleyin.
Next.js için, SEO meta verilerini ve sayfa metnini rotada tutun, ardından Games I Know ve iframe bileşenlerini /embed/{gameSlug}/frame/ src'si ile istemci güvenli bir bileşende oluşturun.
Next.js uyumlu oyun widget'ını deneyin
Canlı demo, bir Next.js istemci bileşeninin tüketebileceği çerçeve yolunu ve olay günlüğünü göstermektedir.
Next.js takımları bir iframe oyunu ekliyor
Bu, Next.js'da neden iyi çalışıyor?
Next.js, sayfa içeriği ve meta verileri sunucu tarafından oluşturulurken, tarayıcıya özgü davranış odaklanmış istemci bileşenlerinde kaldığında en güçlüdür.
Su tüketimine dayalı oyun mantığı yok.
Oyun iframe içinde yer aldığından, Next.js rotanızın bakımı daha basit ve hızlı olur.
Temiz müşteri sınırı
Yalnızca olay dinleyicisi ve iframe kontrolleri istemci tarafı davranışına ihtiyaç duyar.
Kurulum akışı
Next.js'da oyun widget'ı nasıl eklenir?
İndekslenebilir bir rota oluşturun, içeriğe iframe ifadesini ekleyin ve istemci bileşenini yalnızca olay işleme için kullanın.
Adım 1
Rota sayfasını oluşturun
Sayfanın amacına uygun olarak meta veriler, kurallı URL, sayfa metni ve bağlantılar ekleyin.
Adım 2
iframe öğesini oluşturun
Sayfa gövdesinde veya küçük bir bileşen içinde tenantId'nizle birlikte Games I Know çerçeve URL'sini kullanın.
Adım 3
Tarayıcı olaylarını ele alın
İstemci bileşeninde, mesaj olaylarını dinleyin ve data.source === "gamesiknow" ifadesine göre filtreleme yapın.
Adım 4
Ödülleri sunucu tarafında tutun.
Ödülleri vermeden önce imzalı sonuçları doğrulamak için bir API rotası veya arka uç hizmeti kullanın.
Uygulama
Next.js uygulama notları
Tarayıcı dostu içeriği, yalnızca tarayıcıya özgü mesaj işleme bölümünden ayırarak, sayfanın hem insanlar hem de arama sistemleri için kullanışlı olmasını sağlayın.
Rota meta verilerini kullanın
Widget'ı barındıran herkese açık sayfada başlık, açıklama, kanonik etiket, Open Graph etiketleri ve SSS şemasını ayarlayın.
Açılış sayfasını iframe yapmayın.
Genel /embed/{gameSlug}/ sayfası dizine eklenebilir içeriktir. iframe /embed/{gameSlug}/frame/ kullanmalıdır.
Yerleşim değişikliğinden kaçının.
Oyuna sabit bir yükseklik ayırın, böylece iframe yükleme sonrasında içeriği hareket ettirmesin.
Mevcut oyunlar
Sayfaya uygun oyunu seçin.
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 kurulumu
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 kurulumu
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed kurulumu
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed kurulumu
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed kurulumu
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed kurulumu
SSS
Next.js oyun widget'ı hakkında sık sorulan sorular
/embed/{gameSlug}/ ile /embed/{gameSlug}/frame/ arasındaki fark nedir?
iframe src'si olarak /embed/{gameSlug}/frame/ yolunu kullanın. Bu yol, web sitesi embed'ları ve postMessage olayları için oluşturulmuş hafif oyun çerçevesidir. /embed/{gameSlug}/ yolu ise, iframe içine yerleştirilecek yol değil, insanlar için genel önizleme ve SEO sayfasıdır.
Ziyaretçilerin bir uygulama indirmesi veya hesap oluşturması gerekiyor mu?
Hayır. Ziyaretçiler iframe uygulamasını telefon, tablet, dizüstü bilgisayar veya masaüstü bilgisayarlarında tarayıcı üzerinden oynayabilirler. İş ortağı hesabı yalnızca embed uygulamasını yükleyen web sitesi sahibi tarafından gereklidir.
embed'ı kendi alan adıma kısıtlayabilir miyim?
Evet. Games I Know ve embed'ler kayıtlı web siteleri ve alan adı kısıtlamalı kiracı ayarları etrafında tasarlanmıştır, bu nedenle kopyalanan iframe kodu yetkisiz sitelerde serbestçe yeniden kullanılamaz.
Şu anda hangi Games I Know başlıkları embed kullanılabilir durumda?
Tic Tac Toe, Four in a Row, Bingo ve I Know, embed destekli tarayıcı oyunları olarak mevcuttur. embed dokümantasyonu, desteklenen oyunlarda aynı olay modelini kullanır.
iframe bileşeni, Next.js içinde istemci bileşeni olmalı mı?
iframe işaretlemesi sunucu bileşeninden oluşturulabilir, ancak herhangi bir postMessage dinleyicisi veya tam ekran durumu istemci bileşeninde yer almalıdır.
Tarayıcı oyunu eklemeye hazır mısınız?
Bir iş ortağı hesabı oluşturun, alan adınızı kaydedin ve web siteniz için alan adına özel bir iframe oluşturun.