New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve the indexability (SEO) of Flutter apps on the web #46789
Comments
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, Thanks, |
Currently, Flutter use rendering to html, not the |
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. |
SEO on other frontend frameworks it's not great anyway.. |
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. |
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. |
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 |
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 |
@virgiltu 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 :) |
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. |
Hi @elaishane , Can you explain a bit more? Thanks |
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 |
Are they open to something like https://github.com/sponsors? I'm thinking if we can crowdfund this feature request.. |
Thanks for a great video!
That's certainly the story I would have told when I was working on the web, but, it's impractical. We can't do what Flutter does with pure DOM.
I'm confident we can generate good ARIA (it's generated from the same accessibility tree as what we expose to the native accessibility systems on Android, iOS, etc).
Can you elaborate on how this would work with URL rewriting? How does the app get the path if all the URLs are rewritten to the same static file? Wouldn't web crawlers treat all the URLs as equivalent in that scenario?
That was our argument with Flutter too, but the reality is people really really want to use Flutter for apps with content. If the next Reddit or Quora is written as a Flutter app with a server-side database but not server-side HTML generation, how can the Flutter-to-web app, which renders the app using WebGL just like the Flutter-to-Android app renders the app using OpenGL, be crawled by web search engines?
The premise of Flutter is that you write the app once and compile it to Android, Windows, macOS, and the web, without any extra work on each platform. I don't think people will bother to rewrite their Flutter app in HTML+CSS just because web indexers can't scan their app. Instead they'll just not use Flutter in the first place. So what we're trying to understand is how we can automate the generation of the crawlable content. |
Happy to hear that it's useful :)
Then maybe Flutter isn't the right tool for content pages (and that isn't a problem per se).
I respectfully doubt it, though. It's surprisingly complicated giving that you can use the web on all sorts of devices with all sorts of assistive technology. The web is a much more open and multi-modal platform than Android or iOS are.
Sure. The URL doesn't change client-side, so for the browser it's still
Maybe they shouldn't. "If you only have a hammer every problem is a nail" should not drive tooling decisions.
From the other comments in this thread, I'm assuming you'd use DOM rendering for that?
I'm not saying "rewrite your app in HTML+CSS". I'm saying "Get your flutter app working on the web and then add the content-y bits in HTML+CSS" - that is, unless Flutter really wants to fulfill its promise and treats the web as a first-class citizen, which by definition means working out how to use HTML+CSS just as it uses native primitives on Android, Windows, macOS, etc. I doubt Flutter is rendering everything in DirectX surfaces and sprites instead of using Windows APIs to create buttons etc.? |
I think @egonm12 's comment should get more attention
Not sure if this is officially the "mission" of flutter or just how me and other developers feel; The expectation than me and others have is for flutter to (at least attempt) I think @esDotDev is on the right track here |
Ah, interesting, I see what you're saying. Basically serve up the same* index.html page for all the app's URLs, and using history.pushState to change the URL, rather than using fragment identifiers. Then, crawl the app's content to generate HTML content for those index.html files (hence the asterisk; the content doesn't affect the user experience, only how the search indexers see the page). That could work. Requires a bit more server-side support than we currently need, and wouldn't really handle dynamic sites like if reddit used Flutter, but it's a start. I suppose for dynamic sites you could generate the index.html files dynamically on the server.
The problem is we have created a hammer and nail that manages to nail seven platforms at once, and people like that a lot. When one of those platforms then says "well we're special and need a screw" they turn to us and ask us why we can't hide that complexity from them as well.
I'm not sure how that would work. That's basically what we do today (with an ARIA DOM), but the search engines don't seem to find the content today.
We render every pixel on every platform. Everything. We even blink our own cursor. |
At the moment I render for search engines using server side output . It looks terrible visually but the content and meta tags are perfectly done for exactly what a search engine wants. For humans I render using a webgl canvas with the pretty visuals of course. the rest api to the content is used by both systems . Flutter calls it and so does the search engine renderer. it’s very very simple to do this but the key is to make the content easy to navigate. the good thing with this is that security gets enforced via the rest api and jwt. I have done this approach for both flutter and gioui. Technically this is called Cloaking , and the ridiculous thing is that there is no way for google to know if it’s naughty clicking where the content from each rendering engine varies or nice cloaking where the content is the same from both rendering engine . The maintenance of nav and Sitemap are done via the content system also ensuring both engines nav is correct ( based on user auth ). |
|
@iapicca i know it’s cloaking and I know there is no way for google to know if your playing honest or not. It’s a catch 22 situation !! It’s an imperfect solution I know. If there was an alternative I would jump on it. we seem to evolves ourselves technically into a corner. Wasm apps to avoid the App Store mess , but trying to at the sam time appease the search engines. blane it on google :) sorry just joking but I guess peopke in this issue are hoping for a flutter plugin that detects that it’s google visiting and renders the content to html rest for the google bots to suck up. Maybe there is an argument to say that because the wasm is the same wasm to produce the human screens too that’s it has more “ plausible deniability “ of being all above board cloaking ?? |
If anyone is interested I just published https://pub.dev/packages/seo which does address the previously mentioned cloaking issue as the html is always in the body. Currently package supports only converting widget tree to html but I'm planning to look into adding meta tag support too. |
@krokyze would you recommend to use your package alongside meta_seo to improve even more the SEO of the web? EDIT: With v 0.2 of the seo package, support for meta tags was added. So, I don't think there is any reason to use meta_seo package. |
does seo_renderer: ^0.6.0 package really works ?? |
I read somewhere that Flutter is pushing for an Accessibility Object Model where you could lay out accessibility tags without them necessarily showing up on the page, I was wondering if something similar could be done with a Search Object Model, layout tags for SEO specifically while keeping the content apart from the actual search engine optimization part. That way, Flutter can display whatever content it needs to but any text or other information is automatically converted to something search engines can parse. It's similar to the comments that were said prior but in a more structured way. |
This should be all that is required. Text content related to traffic is king. Everything else is just a few seo feathers. If the search engines are not picking this up then doesn't this highlight a serious failing in web technology? How are blind users supposed to use Google reliably? |
By Google looking at the HTML DOM (not the ARIA DOM) to detect what is on the page. The ARIA DOM is typically generated from the HTML DOM so should be almost identical 😌 |
Surely they both exist for a reason and so fixing this in Google should be a high priority? Perhaps Google are worried about content tricks and only wish to trust the visual content? |
Solving this issue would be beneficial to all including the flutter community. These issues are constantly found on sites. |
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 |
This comment was marked as spam.
This comment was marked as spam.
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? |
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 ? |
Latest status: #46789 (comment)
I Just wanted to know whether its SEO Friendly or not and about the status of Initial paintful load.
The text was updated successfully, but these errors were encountered: