I wanted to familiarize myself with Flutter, and began working on a webapp in Flutter Web and have completed a fair amount of work in the language at this point. It wasn't until very recently that I found out that Flutter has little to no SEO support. The end goal of the experience is to launch the web app so that anyone searching for the functionality my website provides will show up on search engines, however after discovering the weak support for SEO, I realize that is a bit problematic. My question is, is there any way to work around this, and have my website show in search results on mainstream search engines?

From my research one (limited) way is to leverage meta tags on the index.html. While I will be doing this as well, I was hoping for other work arounds for my webapp.

One idea came to mind, however I don't know if this is over-engineered, or just plainly wouldn't work, but this is what I was thinking:

  • Purchase domain example.com
  • Build vast majority of webapp in Flutter Web
  • Build the home page in a different language (React, Vue, Vanilla HTML/CSS/JS, nothing set yet)
    • This way, we can leverage the home page for SEO, and while it's not as effective as the entire app, at least we might be able to close the gap?
  • Deployment:
    • Have the home page deployed on example.com
    • Have the remainder of the application (portion written in Flutter) deployed to example.com/app/<some_path>
    • Any navigation from the home page written in the second language would navigate to the Flutter portion of the web app

I know this would lead to a deployment nightmare, though at this time I'm more concerned about public visibility of the web app over deployment concerns. Is this a viable solution? Will this work as I expect it to, or is would this be way off base? What about the equivalent of an iframe in Flutter? Could that work, where the iframe is expanded to the size of the screen? SEO isn't something that I've worked with in the past, and am trying to understand this as I go. I understand that the most optimal solution in my case would probably be to rewrite the application in another language/framework, though that is not a viable option at this point unfortunately, and would like to see if there are any workarounds for the time being.

  • 2
    Can you tell us a little bit more about what exactly you mean by "no SEO support"? What are you trying to workaround? Commented Sep 10, 2021 at 21:39
  • From my understanding, the way that Flutter Web compiles and renders, it doesn't display content in native HTML; rather, it uses a canvas to display the web content (which is treated more like images instead of text?), which is not supported by typical web crawlers used by search engines. From my understanding, when Google or other search engines index web pages, Flutter web apps are not prioritized in search results. This means that users will be unable to come across my site through relevant searches. I am wondering if there was a way to still show my web app as a relevant search result.
    – Sal
    Commented Sep 11, 2021 at 7:14
  • So your primary concern is with CSR vs SSR? Commented Sep 11, 2021 at 16:39
  • To be completely honest, I'm not sure how those factor in. Is flutter client side rendered, do you know? How does that affect SEO? From what I came across, the way flutter renders the web pages is that Flutter renders everything inside of a canvas instead of as plain html, so web crawlers cannot access the information. Would CSR vs SSR be a factor in this case? This is all very new to me so sorry for the simple questions.
    – Sal
    Commented Sep 12, 2021 at 0:15


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.