SEO-Inhalte bleiben serverseitig gerendert
Überschriften, Anleitungen, FAQs und Schema können als HTML gerendert werden, während das Spiel in einem Frame geladen wird.
Astro-Spiel-Widget
Astro-Spiel-Widget für statische und hybride Websites
Astro-Websites können schnell indexierbare Seiten ausliefern und trotzdem ein spielbares Spiel anbieten. Überschriften, Texte und Schema sollten auf der Astro-Seite verbleiben, die Elemente Games I Know und iframe im Body gerendert und ein kleines Client-Skript oder eine separate Komponente nur dort verwendet werden, wo Browserereignisse benötigt werden.
statisch freundliche Seiten
Minimales Client-JS
Indexierbare Kopie
Iframe-Frame-Route
Kurzantwort
Verwenden Sie eine Frame-Route und fügen Sie anschließend den Seitenkontext hinzu.
Erstellen Sie in Astro eine indexierbare Seite mit Metadaten und FAQ-Inhalten und fügen Sie anschließend embed /embed/{gameSlug}/frame/ in die Seite ein. Fügen Sie ein Client-Skript für postMessage hinzu, wenn Sie GAME_STARTED- oder Abschlussereignisse benötigen.
Probieren Sie das Astro-freundliche Spiele-Widget aus.
Die Live-Demo spiegelt das iframe- und Ereignisprotokollmuster wider, das Sie auf einer Astro-Inhaltsseite platzieren können.
Astro-Entwickler fügen ein iframe-Spiel hinzu
Warum Astro gut mit iframe Spiel-Widgets funktioniert
Astro eignet sich hervorragend für inhaltsreiche Seiten. Das Spiel bleibt in einem iframe, sodass die Spiellogik nicht im Hauptpaket enthalten ist.
Geringer Kundenbedarf
Nur Ereignis-Listener oder Vollbild-Helfer benötigen clientseitiges JavaScript.
Überall das gleiche embed
Verwenden Sie dasselbe Frame-URL-Muster für Astro, Next.js, WordPress und benutzerdefinierte Websites.
Ablauf einrichten
Wie man ein Spiel-Widget in Astro hinzufügt
Erstellen Sie eine Route mit Frontmatter-Metadaten, platzieren Sie iframe in der Vorlage und isolieren Sie die Browser-Kommunikation in einem Client-Skript.
Schritt 1
Erstelle die Astro-Seite
Fügen Sie Titel, Beschreibung, kanonische URL und hilfreichen Text rund um die Spielplatzierung hinzu.
Schritt 2
Rendere iframe
Verwenden Sie die Games I Know Frame-URL mit Ihrer Mandanten-ID im Seiteninhalt oder einer kleinen Teilkomponente.
Schritt 3
Fügen Sie bei Bedarf Client-Messaging hinzu.
Verwenden Sie ein client:load-Skript oder eine Insel, um auf postMessage-Ereignisse vom iframe zu lauschen.
Schritt 4
Überprüfen Sie die signierten Ergebnisse serverseitig
Verwenden Sie eine API-Route oder einen Backend-Endpunkt, um den Abschluss zu überprüfen, bevor Sie Belohnungen gewähren.
Durchführung
Astro-Implementierungshinweise
Die Astro-Seite wird als SEO-Oberfläche und iframe als spielbare Anwendungsgrenze betrachtet.
Die Landingpage darf nicht iframe werden.
Verwenden Sie /embed/{gameSlug}/frame/ innerhalb von iframe. Behalten Sie /embed/{gameSlug}/ als normalen crawlbaren Link bei.
Höhe reservieren iframe
Um Layoutverschiebungen beim Laden des Spielframes zu reduzieren, sollte eine feste Höhe in der Nähe von 640px festgelegt werden.
FAQ-Schema hinzufügen
Die FAQ- und HowTo-Schema auf der Astro-Seite helfen Suchmaschinen und AI-Systemen, die Integration zu verstehen.
Verfügbare Spiele
Wähle das Spiel aus, das zur Seite passt.
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 Setup
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 Setup
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed Setup
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed Setup
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed Setup
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed Setup
Häufig gestellte Fragen
Häufig gestellte Fragen zu Astro-Spiel-Widget
Was ist der Unterschied zwischen /embed/{gameSlug}/ und /embed/{gameSlug}/frame/?
Verwenden Sie /embed/{gameSlug}/frame/ als iframe-Quelle. Diese Route ist der schlanke Spiel-Frame, der für Website-embed- und postMessage-Ereignisse erstellt wurde. Die Route /embed/{gameSlug}/ ist die öffentliche Vorschau- und SEO-Seite für Benutzer und nicht die Route, die in einem iframe platziert werden soll.
Müssen Besucher eine App herunterladen oder ein Konto erstellen?
Nein. Besucher können direkt im Browser auf ihrem Smartphone, Tablet, Laptop oder Desktop-Computer spielen. Ein Partnerkonto wird nur vom Website-Betreiber benötigt, der die Anwendung installiert.
Kann ich embed auf meine eigene Domäne beschränken?
Ja. Games I Know und embed sind für registrierte Websites und domainbeschränkte Mandanteneinstellungen konzipiert, daher kann kopierter iframe-Code nicht frei auf nicht autorisierten Websites wiederverwendet werden.
Welche Games I Know Titel sind derzeit embeddbar?
Tic Tac Toe, Four in a Row, Bingo und I Know sind als embed-fähige Browserspiele verfügbar. Die embed-Dokumentation verwendet für alle unterstützten Spiele dasselbe Ereignismodell.
Kann ich Games I Know mit der statischen Ausgabe von Astro verwenden?
Ja. Der Seiteninhalt kann vollständig aus statischem HTML bestehen. iframe lädt das Spiel zur Laufzeit im Browser des Besuchers von Games I Know.
Bereit, ein Browserspiel hinzuzufügen?
Erstellen Sie ein Partnerkonto, registrieren Sie Ihre Domain und generieren Sie eine domainbeschränkte iframe für Ihre Website.