Flutter Web SEO

Help General
1

Do you believe that Flutter Team can do it? SEO on Flutter web sounds like a step from admin panels to normal content reach websites which are 99% of the web

1 Like
2

Can they do it? Probably.
Would they? Most likely not.

As far as I remember, this has been discussed countless times and now HTML rendering is being removed right? So I believe it’s safe to say SEO will not be supported officially in any way.

Unless…? alien-hawaii-2024.web.app/the-lost-archipelago-of-stardust SEO Report | SEO Site Checkup

Here’s the site and source alien-hawaii-2024.web.app github yjbanov/alien-hawaii/tree/main

And how it looks like on search engine

Screenshot 2024-11-08 at 06.08.33
Screenshot 2024-11-08 at 06.08.332172×910 137 KB

2 Likes
3

Hi how should SEO work in a future world of WASM websites? I guess that’s beyond just Flutter

3 Likes
4

I’ve built my discount code website using Flutter and integrated SEO to get it indexed on Google Search. Regarding SEO, it’s working but not performing as well as I’d like. As for page loading speed, it’s genuinely problematic when the website has many features. I’ve tried everything to reduce the page load time from 8 seconds down to 3 seconds, but even 3 seconds is still too long. You can check out my website hosted on Firebase Hosting: https://wong-ancestor.web.app/

It’s the same site; I’ve purchased a domain from GoDaddy and optimized it for Google SEO at https://wongcoupon.com/ (It might change in the future if I decide to switch to a different programming language).

I’m considering transitioning to a different technology stack to enhance both SEO performance and loading speed. While Flutter is powerful for mobile applications, it may not be the most optimal choice for web projects that require fast load times and effective SEO. Exploring frameworks like React or Next.js, which offer server-side rendering and better SEO capabilities, could be beneficial. Additionally, implementing strategies like code splitting, asset optimization, and leveraging CDNs might further reduce load times. I’m eager to improve the user experience and make the site more accessible to everyone.

2 Likes
5

Hi,

getting a flutter web app properly indexed out of the box is almost impossible, because the search bot sees more or less a blank page. The official suggestion is to use Jaspr (or another html framework). But I refuse to go back and deal with html/js/css again (which in my opinion is/was always a pain) when I already have a cross-platform flutter app.

So, long story short, I wrote a flutter package ‘flutter_easy_seo’ that does the following:

  • Generates SEO-friendly HTML directly from your existing widget tree.

  • Declarative wrapping: Simply wrap target widgets to flag them for static extraction.

  • Serve SEO HTML to bots: Search engine bots get the SEO-friendly HTML while a regular user sees the full Flutter App. (requires web server configuration)

  • Ease of Use: Designed to keep usage as simple as possible.

What it supports out of the box:

  • Interactive Mode: Built-in UI overlay for manual generation and visual debugging.

  • Automated Mode: Headless execution tailored for CI/CD pipelines and scheduled server tasks.

  • Localization: Native handling of language codes for multi-lingual indexing.

  • Dynamic Paths: Easily handles parametric routing (e.g., product overview and detail pages).

  • Flexible Routing: Fully compatible with major routing engines (GoRouter, Beamer, etc.).

  • Asynchronous State: Safely awaits async data loading and hydration (e.g., Riverpod providers) before extraction.

Links & Code

1 Like