How to Use Gemini Canvas to Build AI Generated Games for SEO

This is how I built a react Application using Gemini Canvas in order to help users and SEO.

My goal was to make my content more interactive. SEOs use AI to generate boring text on their websites, making them even more annoying, I use AI to make my website actually better and more fun.

Here is how to generate a web app with Gemini and add it to your WordPress site like in this example.

Generate the Application in Gemini

To generate a web application with Gemini, go to Gemini and activate Canvas.

Prompt Gemini to generate an Application for you, saying something like: “generate an app that do X, in order to help with Y”.

Add follow-up optimizations to make the app. like you want it.

Once the app is ready, simply ask it to build it so that it can run fully independently. Here is my prompt.

“I want to export this app so that I can very easily reproduce it inside WordPress. It should not link to this gemini app at all, it should be fully independent.“

Once this is done, simply download the Game HTML by clicking on the Download button inside Canvas.

You now have a WordPress friendly export.

Open the HTML in a text editor like VSCode.

Add relevant SEO content within the HTML (H1s, href links, title, etc).

Upload the HTML to your Website

To upload the exported Gemini application HTML to your WordPress website, open your CPanel and go to File Manager.

Inside your public_html folder, click on Upload and add the HTML file.

It should work now. Visit your website file https://www.example.com/your-web-app.html.

Step 3. Embed in Any Page

To embed the application in any web page, you can use iframes.

(I know, iframes are horrible, to be honest, I want to show you the quick and dirty way to do it, there are other much better alternatives to do so).

Go to your page, add a Custom HTML block.

Inside the Custom HTML block, add the iframe

<iframe src="https://www.example.com/your-web-app.html" width="100%" height="800px" style="border:none;"></iframe>

And voilà, you have your web app fully functional.