Improve the indexability (SEO) of Flutter apps on the web

I Just wanted to know whether its SEO Friendly or not and about the status of Initial paintful load.

It's important, certainly, for use cases like those people have shown above. There's some prerequisites, like improving Flutter's deep linking story and our accessibility story, which we (the Flutter project as a whole) have to deal with first, and there's other issues, like those around performance, plugins, and embedding, that are currently higher on the list for Google's Flutter team given the kinds of use cases Google is currently focusing on with Flutter.

That said, Flutter is an open source project and Google is only a small fraction of the total set of contributors. I would be more than happy to work with anyone who is interested in advancing this particular area before Google's te…

in the near future, I want to make a commerce site in flutter but for the moment without SEO this option seems compromised

in the near future, I want to make a commerce site in flutter but for the moment without SEO this option seems compromised

You can use https://angel-dart.dev/ for that issue.

Dear Flutter Team,
I just want to know whether you have SEO on your priority or not. If yes, what is the timeline?
Flutter is too good a framework to let go just because of this drawback. (That too from Google.)
This will greatly help make decisions.
Sorry for a bit harsh lines. (But Google is the most used search engine!!!!!!)

Thanks,
Vinod

Currently, Flutter use rendering to html, not the <tag>, so the seo is obviously not a near future for web. Furthermore, just like SPA is coming serveral years, but no support by crawler parser, so there should be hopeless If you only count on flutter. I think @virgiltu 's quote is the best solution to the seo, since It use jael-template and backend technique, so the seo is under full-controll.

Dear Flutter Team,
I just want to know whether you have SEO on your priority or not. If yes, what is the timeline?
Flutter is too good a framework to let go just because of this drawback. (That too from Google.)
This will greatly help make decisions.
Sorry for a bit harsh lines. (But Google is the most used search engine!!!!!!)

Thanks,
Vinod

If SEO is something you need than you should use something like AMP on the front end. This cant be done by Flutter. When SEO is a priority there are a lot of other things you should consider. Like Image optimization, website load time, structure, schema and so on. Honestly if you make a website in Flutter you should only use that for the admin side or maybe for the portion of the site that is only seen by the user that is already logged in. If search engines have access to it, you would not want to use Flutter for web, Angular or what ever. Please look at the AMP project. The best example for a flutter web store would be Wish.com or Letgo.com They do not rely on SEO. A web app is not the same as website. Hope this makes sense.

For me That doesn‘t make Sense. I love Flutter as a Developer. I‘m working as a Consultant building softwareplatforms for big customers. I hoped that we can use Flutter as the one frontend technologie in Future.so we can Build Widget libraries Based on the Corporate Identity and use them on any plattform.
It would be sad if there is no, somehow, approach for the seo. This would be a main Requirement and a exclusion criterion.

SEO on other frontend frameworks it's not great anyway..

For me That doesn‘t make Sense. I love Flutter as a Developer. I‘m working as a Consultant building softwareplatforms for big customers. I hoped that we can use Flutter as the one frontend technologie in Future.so we can Build Widget libraries Based on the Corporate Identity and use them on any plattform.
It would be sad if there is no, somehow, approach for the seo. This would be a main Requirement and a exclusion criterion.

I am going to guess that most people that ask this question are new to programming. To be honest this should not even be a questions for any developer that knows SEO or flutter for that matter. The simple answer is that, what you are asking is for the equivalent of a Android or IOS app to be SEO. As an example for nodejs apps that use similar tech like angular, you will need a service like prerender.io to render you code to HTML to be somewhat SEO. While yes you can go around it, rendering JS for google to even rank you will be an battle on its own. Remember that Flutter, Angular, React and Vue apps, all compile to a JS file. This will make google look at the website and think it is 3-8mb. If you test a website with google insights you will realize that your website should be under 1.8mb and it has to load in under 1s to rank. SEO is not just headings and text, its is much much more. This is why something like AMP.dev makes sense. To an end the best website you can build will be done in AMP using an image optimization service like gumlet with a back end in DART or "ANGEL to make things easier". While a user might want to use your App they can than can download it in flutter. Again this is for a website that is E-commerce or similar. You also have to worry about ADA compliance that is an absolute mess to deal with in flutter. In the end if you need a site that is SEO build in AMP or HTML with back end in DART "since you guys like flutter not sure what the fuss is about using Dart". These guidelines are not made by flutter and is not that the flutter team does not want them, it is all because of search engines like Google and Bing that will rank your website based on speed, programming language, image auto size, CDNs and finally content. I hope this makes sense for any new programmers. Flutter for Web is just a container that allows you to run an Angular like app on your browser but with the flexibility of Flutter. As an example look at letgo.com these apps are not SEO by any means for that exact reason. Each framework has its own place. I honestly think this is good as we can get using Dart for server and flutter for apps and admin panels and just leave HTML for the front end. This already simplified our system by removing 4 languages from the mix, remember that before Flutter, for a website you had to do this " Node for server, HTML/Angular/CSS/React/Vue front end, Andorid JS for APP, Swift for IOS." I think we have it really well with just two languages at this point. All I can say is that if anybody has any more questions or doubts, than you can better bet that you do not know enough about web development. I do not mean this in a bad way. I mean it as, this should be your base line to realize how much you know.

Without SEO Flutter Web will always be used only for admin panels. This is must have

I have used flutter web for e-learning web for a particular course school, and it is successful and actively used by teachers and students. 🚀

Students cannot copy text so they cannot get answers from AI bots.
Beautiful animations in flutter make students more engaged in learning.
It's multi-platform, so users can open it directly on the web, or download the application from Play Store & AppStore.

This may be OOT, but my points are:

Flutter web is just one of the options to build a particular website according to our needs.
Flutter web may or may not suit your project, and SEO is just one big factor.
You can always consider the pros & cons of each technology for your project.

Without SEO Flutter Web will always be used only for admin panels. This is must have

I have used flutter web for e-learning web for a particular course school, and it is successful and actively used by teachers and students. 🚀

Students cannot copy text so they cannot get answers from AI bots.

Beautiful animations in flutter make students more engaged in learning.

It's multi-platform, so users can open it directly on the web, or download the application from Play Store & AppStore.

This may be OOT, but my points are:

Flutter web is just one of the options to build a particular website according to our needs.

Flutter web may or may not suit your project, and SEO is just one big factor.

You can always consider the pros & cons of each technology for your project.

As demo web app created by flutter team support seo, so we can hope seo is coming in flutter web within 1 year.

I am currently working on a social media app in flutter. The app will have lots of articles. Thanks to impeller I see web is a lot more performant now on web, even on mobile. I've been watching the SEO topic for a long time and I see no significant change. My current plan is the following:

Create a sitemap on my BE for all the articles
Render flutter as html in puppeteer
Save static html, point the sitemap to static pages
In K8S configure nginx ingress to point bots to the sitemap or static pages depending on the link they visit.

Before investing significant effort in this approach, what do you think, is it worth waiting? Should I go ahead? Would Google think this is cloaking? Cheers!

@adrian-moisa

Thanks to impeller I see web is a lot more performant now on web

@adrian-moisa I thought impeller does not support web, are you sure?

They probably mean WASM-GC not Impeller, the former of which definitely increased performance on web.

feat(web): Add opt-in Semantic Shadow Tree for Flutter Web SEO

Render flutter as html in puppeteer

how do you intend to do that ? With the deprecated html renderer ?

@cedvdb

@cedvdb the HTML renderer is gone in current Flutter, so that path is closed. What actually works now is to keep the CanvasKit build and drive it in headless Chrome, but turn on Flutter's accessibility tree first. Once semantics are enabled the framework builds a real DOM (h1, p, a, img with alt) next to the canvas, and you read that out of the page instead of the pixels. adrian-moisa's plan is sound, that is just the missing piece.

I ended up writing a small CLI so I did not have to script puppeteer by hand. It loads each route of a flutter build web output, enables semantics, and writes one static HTML file per route plus a sitemap. You serve it next to the normal build (overlay, or bot routing on user agent), so people with JavaScript still boot the full app.

Honest caveat: the output is only as good as your widget semantics. An unannotated Text('Title', fontSize: 32) comes out as a paragraph, not an h1, so you add Semantics(headingLevel: 1, ...) and real Link widgets where it matters. It is a build-step workaround, not the framework fix this issue is really about.

https://pub.dev/packages/flutter_prerender

@Yusufihsangorgel

Obviously, @Yusufihsangorgel and I ran into this exact problem at the same time and we both decided against rewriting our Flutter Web apps in another framework just to please search engine bots.

However, I took a different architectural approach. While the core strategy —generating static HTML files to serve to search bots— is identical, how those files are generated is different:

SEO-friendly HTML is generated from the widget tree by wrapping only SEO-relevant parts (e.g. Text is relevant, while Padding is not) in dedicated widgets or by using the corresponding extension methods.
WidgetTester is used for automated generation, or an interactive mode for manual (click-through) generation and debugging.
Does not need a headless browser and runs natively in Dart.
Full control over the HTML output (e.g. <h1>-<h6>).

Further features:

Supports routers (GoRouter, Navigator, etc.).
Dynamic routes (e.g. /products/:productId).
Locale support (e.g. /:lang/products).
Automatic sitemap.xml generation.
SEO-relevant <head> tags and metadata (Twitter, Open Graph, custom meta tags).
JSON-LD structured data and Microdata support.
Create dedicated HTML pages for Flutter popup widgets (e.g. a product details dialog).
Custom HTML output (you can create any HTML structure you need).
Live DOM-injection

You can check it out here: https://pub.dev/packages/flutter_easy_seo

It also contains a fairly exhaustive example that is running as a live showcase here: https://fluttereasyseo.lxandr.at/example/en

@Piinks

Very cool work! It seems the major downside of this approach is that it would not work for dynamic content driven from a database, which still represent the bulk of web content. Whether its e-commerce, discussion forums, social media, news etc.

It's really too bad the Flutter team can not make this more of a priority considering how close it seems to being supported. We have all the semantic widgets we need to render a SEO optimized tree, we can detect the agent, it seems like it just needs to be tied together at the framework level.

@Piinks has there been any discussion or interest lately on the Flutter team for moving this ball forward? It really limits the value proposition for Flutter developers when the message is to not use Flutter if you need SEO indexing, and it does seem like there's a valid path forward.

@esDotDev

@esDotDev

Very cool work! It seems the major downside of this approach is that it would not work for dynamic content driven from a database, which still represent the bulk of web content. Whether its e-commerce, discussion forums, social media, news etc.

This also works. The EasySEOPage.whenDone callback handles waiting for async data loading. For example, using a riverpod provider:
whenDone: () async => await ref.read(hotelsProvider.future)

It's really too bad the Flutter team can not make this more of a priority considering how close it seems to being supported. We have all the semantic widgets we need to render a SEO optimized tree, we can detect the agent, it seems like it just needs to be tied together at the framework level.

The problem is that you cannot magically output a nice SEO-friendly html document from the widget tree or the semantics tree. For example a Text() widget can be a <p>, <h1> to <h6>. The former is sufficient for a human user, while the latter has semantic meaning to the search bot. There is no 1:1 mapping. A Row() with children could be a <header>, a <div> or a <nav> in HTML. So long story short: We have to flag widgets to be SEO relevant and what they are.

Correction to my comment above. I wrote:

a real DOM (h1, p, a, img with alt) next to the canvas

Two of those four are wrong. The semantics tree emits no <p> and no <img>. A labeled leaf with no role of its own comes out as the generic element with its label as real text in a <span>, which the engine's own test spells out; a visual node gets role="img" and an aria-label.

The h1 and anchor names hold, and a leaf link puts its label in the anchor itself.

[web] use semantic tags for headings (h1, h2, etc), and fix missing s…

Navigation Menu

Repository navigation

Improve the indexability (SEO) of Flutter apps on the web #46789

214 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Improve the indexability (SEO) of Flutter apps on the web #46789

Description

Activity

pierre6666 commented on Jan 3, 2020

silicahd commented on Jan 26, 2020

waykole commented on Feb 3, 2020

Tokenyet commented on Feb 7, 2020

silicahd commented on Feb 8, 2020

joneswe commented on May 19, 2020

federicofazzeri commented on May 19, 2020

silicahd commented on May 20, 2020

214 remaining items

txufiknr commented on Jan 15, 2025

Mizan84 commented on Jan 15, 2025

adrian-moisa commented on Mar 14, 2025

iapicca commented on Mar 14, 2025

satvikpendem commented on Mar 14, 2025

duongpro01 commented on Jul 1, 2025

cedvdb commented on Jul 4, 2026

Yusufihsangorgel commented on Jul 21, 2026

BearAndBunny commented on Aug 5, 2026

esDotDev commented on Aug 6, 2026

BearAndBunny commented on Aug 6, 2026

Yusufihsangorgel commented on Aug 9, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions