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

[deepak-kumar-swain]

Latest status: #46789 (comment)

---

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

[pierre6666]

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

[silicahd]

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.

[waykole]

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

[Tokenyet]

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.

[silicahd]

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.

[joneswe]

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.

[federicofazzeri]

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

[silicahd]

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.

[davystrong]

I'm not sure you're right about those asking questions being new to programming. I, for one, am trying out Flutter for web because I really enjoyed programming in it, whereas I never really enjoyed Javascript. I suppose it isn't ideal (certainly not yet) and I was aware of this before I started, but it was the framework that appealed to me, that's why I started.
On the whole issue of exactly how to make it more SEO friendly, is there any chance the the accessibility features of Flutter could be used when building the website to create a more simplified (essential) layout that would load faster? Then as the website loaded, this would be replaced by the Flutter UI.

[silicahd]

I'm not sure you're right about those asking questions being new to programming. I, for one, am trying out Flutter for web because I really enjoyed programming in it, whereas I never really enjoyed Javascript. I suppose it isn't ideal (certainly not yet) and I was aware of this before I started, but it was the framework that appealed to me, that's why I started.
On the whole issue of exactly how to make it more SEO friendly, is there any chance the the accessibility features of Flutter could be used when building the website to create a more simplified (essential) layout that would load faster? Then as the website loaded, this would be replaced by the Flutter UI.

Unfortunately that is not how google works :/ . Please check out Google insights Test . This is a test of the Shrine flutter demo app. They look at the code and what resources it loads through the entire process. So the system will load the entire application in this instance 906kb, not a lot, however the issue becomes when you try to SEO pages, they dont exists. This is because the app will load new data in the same container. So in reality you cant really get /categories/product/product1 where this is where the SEO happens. in the test you can see that google only loaded the login screen.

Unfortunately since you cant tell google how to crawl the app and since google looks for pages, than anything that is not in view is considered invisible and non existent.

This was also removed by google some times ago as people use to hide text in display none and hidden containers to try to trick the ranking for keywords that they did not actually have on the website.

*However If the app is a one page app where all the text is rendered at start than yes google will see it correctly as long as you structure it. Keep in mind that most of googles ranking is done also based on schema.org please review that.

As most of you know, you also need a sitemap that links to all pages, again flutter has no pages so that does not help.

With all that said there are way around it, please see https://nextjs.org/ they do exactly what is needed for SEO. I have asked them some time ago if they support flutter and they said NO but they are open if more people ask for it. So maybe most of you can ask them or maybe somebody will build a dart script that replicates what they do.

I can promise you that I love Flutter as much as all of you and have embraced it, but these are limitations, we learned to adapt and learn that DART can product HTML SEO code for web and flutter amazing apps for back end use and mobile devices.

Happy Coding :)

Also here is a very good resource. As you guys and girls can see this is not a flutter issue, it is a inconvenience that affects all languages of this nature that compile to JS. https://snipcart.com/spa-seo

[federicofazzeri]

prerender.io works pretty good with Angular and other SPA frameworks, a similar tool built for Flutter will put it in the same spot as the other frameworks in terms of SEO

[joneswe]

@virgiltu
I'm well aware of the problems Frameworks like react, angular and now flutter have when it comes to SEO. I also know the server side rendering approaches. But your answer was not satisfying for me, so I let myself go to a slightly provocative post. Sry for that.

In the end I had the hope that a crossplatform framework from google itself at least has solutions in mind. In my opinion, the market is crying out for a framework that can be used in web, mobile & desktop in every aspect.

I can join @federicofazzeri it would be nice to have a similar approach for flutter. I will also ask nextjs for that :)

[imyashadulkar]

It is true you can't do anything in Flutter for SEO but you could use index.html file in web folder which helps in SEO. I mean I am using it live. So answer from personal experience. Use Meta Tags - keywords, description, title.

[Bilonik]

Hi @elaishane , Can you explain a bit more?

Thanks

[imyashadulkar]

Well I’m head section there is a meta section in which it contains description. Which gives description of the website. You could form a description in a way it should Vinod’s it’s of keyword. Also there is a keyword section you could add in net tags which will help our search engines to find our website. Also you could use title

[wfe8006]

With all that said there are way around it, please see https://nextjs.org/ they do exactly what is needed for SEO. I have asked them some time ago if they support flutter and they said NO but they are open if more people ask for it. So maybe most of you can ask them or maybe somebody will build a dart script that replicates what they do.

Are they open to something like https://github.com/sponsors? I'm thinking if we can crowdfund this feature request..

[Okunamutata]

Native Seo capabilities would be great. But Seo is possible now through server side rendering. Since Seo is a web specific feature; leave the work to your server and keep the app's code base from being bloated. This article explains what I mean https://medium.com/@tookunna/flutter-web-seo-rich-web-link-preview-5116670369d4

[OlaiyaO]

I'm not sure you're right about those asking questions being new to programming. I, for one, am trying out Flutter for web because I really enjoyed programming in it, whereas I never really enjoyed Javascript. I suppose it isn't ideal (certainly not yet) and I was aware of this before I started, but it was the framework that appealed to me, that's why I started.
On the whole issue of exactly how to make it more SEO friendly, is there any chance the the accessibility features of Flutter could be used when building the website to create a more simplified (essential) layout that would load faster? Then as the website loaded, this would be replaced by the Flutter UI.

Unfortunately that is not how google works :/ . Please check out Google insights Test . This is a test of the Shrine flutter demo app. They look at the code and what resources it loads through the entire process. So the system will load the entire application in this instance 906kb, not a lot, however the issue becomes when you try to SEO pages, they dont exists. This is because the app will load new data in the same container. So in reality you cant really get /categories/product/product1 where this is where the SEO happens. in the test you can see that google only loaded the login screen.

Unfortunately since you cant tell google how to crawl the app and since google looks for pages, than anything that is not in view is considered invisible and non existent.

This was also removed by google some times ago as people use to hide text in display none and hidden containers to try to trick the ranking for keywords that they did not actually have on the website.

*However If the app is a one page app where all the text is rendered at start than yes google will see it correctly as long as you structure it. Keep in mind that most of googles ranking is done also based on schema.org please review that.

As most of you know, you also need a sitemap that links to all pages, again flutter has no pages so that does not help.

With all that said there are way around it, please see https://nextjs.org/ they do exactly what is needed for SEO. I have asked them some time ago if they support flutter and they said NO but they are open if more people ask for it. So maybe most of you can ask them or maybe somebody will build a dart script that replicates what they do.

I can promise you that I love Flutter as much as all of you and have embraced it, but these are limitations, we learned to adapt and learn that DART can product HTML SEO code for web and flutter amazing apps for back end use and mobile devices.

Happy Coding :)

Also here is a very good resource. As you guys and girls can see this is not a flutter issue, it is a inconvenience that affects all languages of this nature that compile to JS. https://snipcart.com/spa-seo

I would assume that, people with your level of expertise in web development, would be able to devise a solution for this common issue. Whether from new or seasoned developers, the recurring request suggests that the feature is so crucial that it can shape the entire web development industry. However, your comment seems to imply that building an SEO feature into Flutter web can't be achieved.

Do you believe it's impossible based on your understanding?

[Achraf-cyber]

If I create the website in flutter and create another SEO optimized web page in html which welcome the user and give him access to the whole website is it a good idea ?

[Okunamutata]

@Achraf-cyber That's a valid solution, I've seen a few businesses choose that route. Either way, a solution for SEO on Flutter Web requires either SSR for non user agents or some framework-level work to make the flutter engine manipulate the dom elements while it renders in the browser.

[topex-psy]

If I create the website in flutter and create another SEO optimized web page in html which welcome the user and give him access to the whole website is it a good idea ?

It might work to solve SEO problems, but I don't think it's a good idea for UX.
Loading times are a big issue. If your flutter web does not load immediately, users may also exit immediately.

So, if you still want to do your solution, I can suggest this:
You can use <link rel="prerender"> in your welcome page in order to preload your flutter web, BUT now this is non-standard:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prerender

But it still taking effect on Chrome, although not fully, so you can anyway:
https://developer.chrome.com/docs/web-platform/prerender-pages#:~:text=This%20legacy%20prerendering%20using%20the,the%20page%20nor%20execute%20JavaScript.

And you can also use <link rel="preconnect">:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preconnect

The preconnect keyword for the rel attribute of the element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin. Preconnecting speeds up future loads from a given origin by preemptively performing part or all of the handshake (DNS+TCP for HTTP, and DNS+TCP+TLS for HTTPS origins).

Thus this is the code you need to add:

<link rel="preconnect" href="https://yourflutterweb.com">
<link rel="prerender" href="https://yourflutterweb.com">

[AndroidDesigner]

What do you think about this approach? the Enhancing SEO in Flutter Web Projects with Next.js Integration

[iapicca]

What do you think about this approach? the Enhancing SEO in Flutter Web Projects with Next.js Integration

no offense, but this is by definition a work-around
highly dependent from another stack entirely
and incompatible with this

very happy to see that this is issue is being worked on :)

[Mizan84]

Flutter team should focus mainly on SEO now. Without this Flutter Web is unnecessary.

[Mizan84]

Now I can see there is a great hope of SEO in flutter. Looks like Flutter team have found a way. I have checked their demo web app which is https://alien-hawaii-2024.web.app/ . I see now text can be copied from the web page. Also I have searched in google with the first sentence inside About Hawaii. The sentence is "Hawaii (/həˈwaɪi/ ⓘ hə-WY-ee; Hawaiian: Hawaiʻi [həˈvɐjʔi, həˈwɐjʔi]) is an island state in the Western United States, about 2,000 miles (3,200 km) from the U.S. mainland in the Pacific Ocean.". With the search the website showing in the fourth place of search result. So finger crossed. Anyone also can find the demo web app in the SEO section of the FAQ. link is here https://docs.flutter.dev/platform-integration/web/faq

[Tananga]

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

[jtkeyva]

Google is/was a search company. SEO is a no-brainer as it would make their bread and butter product (search) more valuable. Ironically they are not prioritizing SEO and giving up web to the competition by removing the html renderer rather than improving it. Hopefully they are cooking up a new one.

Or... why not let the developers make their own HTML tree's using annotations?

// Hypothetical HTML annotations
@HtmlTag('html')
@HtmlTag('body')
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}

// Hypothetical HTML element annotations
class HtmlTag {
  final String tag;
  const HtmlTag(this.tag);
}

// Hypothetical HTML attribute annotations
class HtmlAttr {
  final String name;
  final String value;
  const HtmlAttr(this.name, this.value);
}

@HtmlTag('main')
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset('assets/video.mp4')
      ..initialize().then((_) {
        setState(() {});
      });
  }

  @override
  @HtmlTag('div')
  @HtmlAttr('class', 'container')
  Widget build(BuildContext context) {
    return Scaffold(
      @HtmlTag('header')
      appBar: AppBar(
        @HtmlTag('h1')
        title: const Text('My Simple Flutter App'),
      ),
      
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            @HtmlTag('h2')
            const Text(
              'My Favorite Foods',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            
            const SizedBox(height: 16),
            
            @HtmlTag('ul')
            @HtmlAttr('class', 'food-list')
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                    @HtmlTag('li')
                    ListTile(
                      leading: Icon(Icons.restaurant),
                      title: Text('Pizza'),
                    ),
                    @HtmlTag('li')
                    ListTile(
                      leading: Icon(Icons.icecream),
                      title: Text('Ice Cream'),
                    ),
                    @HtmlTag('li')
                    ListTile(
                      leading: Icon(Icons.lunch_dining),
                      title: Text('Sushi'),
                    ),
                  ],
                ),
              ),
            ),

            const SizedBox(height: 24),
            
            @HtmlTag('section')
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                @HtmlTag('h2')
                const Text(
                  'Sample Image',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                
                const SizedBox(height: 16),
                
                @HtmlTag('img')
                @HtmlAttr('src', 'assets/image.jpg')
                @HtmlAttr('alt', 'Sample Image')
                ClipRRect(
                  borderRadius: BorderRadius.circular(8),
                  child: Image.asset(
                    'assets/image.jpg',
                    width: double.infinity,
                    height: 300,
                    fit: BoxFit.cover,
                  ),
                ),
              ],
            ),

            const SizedBox(height: 24),
            
            @HtmlTag('section')
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                @HtmlTag('h2')
                const Text(
                  'Sample Video',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                
                const SizedBox(height: 16),
                
                @HtmlTag('video')
                @HtmlAttr('controls', 'true')
                _controller.value.isInitialized
                    ? AspectRatio(
                        aspectRatio: _controller.value.aspectRatio,
                        child: Stack(
                          alignment: Alignment.bottomCenter,
                          children: [
                            VideoPlayer(_controller),
                            VideoProgressIndicator(_controller, allowScrubbing: true),
                            FloatingActionButton(
                              onPressed: () {
                                setState(() {
                                  _controller.value.isPlaying
                                      ? _controller.pause()
                                      : _controller.play();
                                });
                              },
                              child: Icon(
                                _controller.value.isPlaying
                                    ? Icons.pause
                                    : Icons.play_arrow,
                              ),
                            ),
                          ],
                        ),
                      )
                    : const CircularProgressIndicator(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

[topex-psy]

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.

[Mizan84]

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.