SEO पेज इंडेक्सेबल बना रहता है
आपके पेज में गेम फ्रेम के आसपास हेडिंग, टेक्स्ट, लिंक, अक्सर पूछे जाने वाले प्रश्न (FAQ) और स्कीमा शामिल हो सकते हैं।
Next.js गेम विजेट
वेबसाइटों के लिए Next.js गेम विजेट
Next.js साइटें ऐप बंडल में गेम इंजन शामिल किए बिना एक खेलने योग्य गेम जोड़ सकती हैं। सामग्री के लिए एक इंडेक्सेबल पेज का उपयोग करें, खेलने के लिए Games I Know फ्रेम को रेंडर करें, और आवश्यकता पड़ने पर क्लाइंट कंपोनेंट में इवेंट्स को हैंडल करें।
ऐप राउटर के अनुकूल है
अनुक्रमणीय पृष्ठ प्रतिलिपि
क्लाइंट इवेंट हैंडलिंग
फ़्रेमवर्क-सुरक्षित 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
रूट पेज बनाएं
आप जिस उद्देश्य के लिए पेज को प्रदर्शित करना चाहते हैं, उसके लिए मेटाडेटा, कैननिकल यूआरएल, पेज टेक्स्ट और लिंक जोड़ें।
चरण 2
iframe को रेंडर करें
पेज बॉडी या किसी छोटे कंपोनेंट के अंदर अपने टेनेंट आईडी के साथ 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/ के बीच क्या अंतर है?
/embed/{gameSlug}/frame/ को 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 मार्कअप को सर्वर कंपोनेंट से रेंडर किया जा सकता है, लेकिन कोई भी पोस्टमैसेज लिसनर या फुलस्क्रीन स्टेट क्लाइंट कंपोनेंट में होना चाहिए।
क्या आप ब्राउज़र गेम जोड़ने के लिए तैयार हैं?
एक पार्टनर खाता बनाएं, अपना डोमेन पंजीकृत करें और अपनी वेबसाइट के लिए डोमेन-प्रतिबंधित iframe जेनरेट करें।