How can I create a search-engine optimized HTML landing page for my Flutter web-app?

Question

Context

Hello, I'm a BE engineer that's new to building web-apps with Flutter. I'm using Ruby on Rails for the backend, if that's relevant.

Question

In the Flutter SEO docs, they say:

For web content that is static or document-like, we recommend using HTML—just like we do on flutter.dev, dart.dev, and pub.dev. You should also consider separating your primary application experience—created in Flutter—from your landing page, marketing content, and help content—created using search-engine optimized HTML.

Where would I store such an HTML page in the Flutter directories and how would I direct to it from my pages in main.dart and back to one of those pages from it? Any such examples / gists / gh repos would be super useful.

What I tried

I tried using flutter_widget_from_html but that's just a widget that embeds HTML; AFAIU it's important for SEO that the page is purely in HTML.

I also tried adding my landing page as a view with Ruby on Rails but I don't like having two FEs in two different frameworks, if there's a Flutter alternative.

---

Thank you so much!

Answer 1

The flutter team does not intend for you include the pure HTML page in the flutter directories, they are instead telling you not to use a flutter app as the entirety of your website.

The landing page should be published and accessible as any other website built in HTML (e.g. www.example.com), with the flutter app living in a sub-domain (e.g. app.example.com). To direct users to the flutter app from the landing page, link to the subdomain where the app resides from the landing page.

The flutter code is meant for only the primary application experience, and should have no references to the rest of the website.