flutter
flutter copied to clipboard
flutter
Improve the indexability (SEO) of Flutter apps on the web
Latest status: https://github.com/flutter/flutter/issues/46789#issuecomment-1007835929
I Just wanted to know whether its SEO Friendly or not and about the status of Initial paintful load.
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.
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.
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.
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
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 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 :)
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.
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
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..
The world is moving from downloaded apps from apple store and google play to PWA, installed via browsers. Not only flutter have to think about this, but also google, bing and all others. Google should have more ways to parse the content instead of only reading tags and barely few JS files, should have more ways to read canvas, dunno how, but would be a game changing
Also flutter could provide a SSR version that parses only on crawlers
on binary apps, flutter compiles for both IPA and APK, on web flutter could compile canvas and some SSR
I have no idea how, but one thing I know: nothing is impossible
And SEO is a must have feature, as mentioned before, imagine an e-commerce, it's impossible to have an e-commerce without SEO
and further more, flutter should also give support for google amp, json-ld and facebook instant articles
I guess speed and size are tough ones to achieve but according to https://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google crawls inside the javascript generated content sites. What do you think guys? @virgiltu
Did you test if it crawls into Flutter websites with Canvas and can see more than raw strings ?
On Mon, Jul 27, 2020 at 8:57 PM Tomas Baran [email protected] wrote:
I guess speed and size are tough ones to achieve but according to https://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google crawls inside the javascript generated content sites. What do you think guys? @virgiltu https://github.com/virgiltu
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/flutter/flutter/issues/46789#issuecomment-664578164, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFSSGAOERHN64Y6MHL4VTTR5XE25ANCNFSM4JZSLM3A .
It would be super nice to get a little clarity on this from the Flutter Team.
Is this viewed as something that can even be solved? Is there a plan baking somewhere? From a pragmatic standpoint, this is the only real thing holding Flutter back from being an amazing option for crafting websites. But it holds it back in a very significant way.
Most clients won't opt for a site that can not be crawled by google, even if it's much cheaper and faster to create.
It would be super nice to get a little clarity on this from the Flutter Team.
Is this viewed as something that can even be solved? Is there a plan baking somewhere? From a pragmatic standpoint, this is the only real thing holding Flutter back from being an amazing option for crafting websites. But it holds it back in a very significant way.
Most clients won't opt for a site that can not be crawled by google, even if it's much cheaper and faster to create.
I am a bit confused why you would want to build an SEO site in flutter to start with. This is the equivalent of asking for an IOS or Android app to be SEO. Flutter for web is noting more than a wrapper for the app just like being able to run a and IOS or Android in a web-browser. While Flutter makes amazing apps it cant makes pages. For this please look at AMP project and Dart with AMP. The biggest issues with Flutter for web as a website will be that you will need to load the entire script to show one page. That is extremely wistful as google will ask that you load only the necessary code for that page to work. I hope this makes sense for everyone here. This is not a limitation that the Flutter team does not want to have it is just a rule of how the web works in general. Please watch this video to understand. https://www.youtube.com/watch?v=lBTCB7yLs8Y
Many people bundle websites as apps, or convert apps to websites, I really don't see a hard distinction between the two except that Web exists in a sandbox and has a few less privileges.
A better comparison would be SEO for a Vue or React site. https://www.smashingmagazine.com/2019/05/vue-js-seo-reactive-websites-search-engines-bots/
Sure Flutter might not be able to make lightning fast loads like AMP, but it would be a mistake to forego "good" because you can't have "great". Many modern websites are 10mb+ in size, Flutter hello world is 2mb or so. Most React or VUE apps work the same way as Flutter, loading all the upfront 'app code' in one minified file. I can easily create nice scrollbars in Flutter that mimic the browser precisely. I don't see any hard distinction here.
Many people bundle websites as apps, or convert apps to websites, I really don't see a hard distinction between the two.
A better comparison would be SEO for a Vue or React site. https://www.smashingmagazine.com/2019/05/vue-js-seo-reactive-websites-search-engines-bots/
Sure Flutter might not be able to make lightning fast loads like AMP, but it would be a mistake to forego "good" because you can't have "great". Many modern websites are 10mb+ in size, Flutter hello world is 2mb or so. Most React or VUE apps work the same way as Flutter, loading all the upfront 'app code' in one minified file. I can easily create nice scrollbars in Flutter that mimic the browser precisely. I don't see any hard distinction here.
True but they are also not on any top pages of google. If a page does not run passed the google insights than you can consider it a huge waist of time. https://developers.google.com/speed/pagespeed/insights/ as you can see here a website has to load in less than 1s to be considered for the first page of google, resources have to be minimal at best 50kbs for JS is ideal. Remember that this is based on the customers speed where google tests 3G speeds. Yes Vue and React have SEO but they are bloated. Remember that google loads the HTML , CSS and JS in that order. In most cases Vue and React is used like Jquery so most of the site is still HTML but where some data is manipulated by VUE and React. however flutter is all JS and that does not put it in the same category. In order to make Vue and React seo you need render the html on the serve side. Kind of a pointless move as you lose the reactivity of it all. Than you have to load Vue and React again to manipulate the DOM. Sadly this is not how flutter works as it generates one JS files that loads everything. Flutter will be the equivalent to ReactNative not React and Vue,
Well in some cases, you may not have many competitors or very specific content, and it's just important that content is actually crawled. Google will still load a poorly optimized site on page 1 if it's a significantly better match. SEO is not all about ranking, it's also about just being indexable period.
I don't know in depth about how this could be possible, or what is done for React and Vue currently, which is why I posed the question, like what is the current perspective on this from the Flutter team? Is it just a Fact Of Life for Flutter? Or maybe Navigator 2.0 have some sort of support for this concept?
Certainly it seems like semantically we should be able to make this work... if we can provide some sort of robots.txt file, and ability to extract text content from individual routes, seems like there should be some ability to give google what it needs to crawl a flutter apps content and index the various routes that are exposed.
Well in some cases, you may not have many competitors or very specific content, and it's just important that content is actually crawled. Google will still load a poorly optimized site on page 1 if it's a significantly better match. SEO is not all about ranking, it's also about just being indexable period.
I don't know in depth about how this could be possible, or what is done for React and Vue currently, which is why I posed the question, like what is the current perspective on this from the Flutter team? Is it just a Fact Of Life for Flutter? Or maybe Navigator 2.0 have some sort of support for this concept?
Certainly it seems like semantically we should be able to make this work... if we can provide some sort of robots.txt file, and ability to extract text content from individual routes, seems like there should be some ability to give google what it needs to crawl a flutter apps content and index the various routes that are exposed.
I complementary understand it. Unfortunately Flutter creates a one page app and all the files are compiled into one. This is ideal for back ends, admin panels or apps that can be ran in a browser. Much like Pandora or something of sorts. Vue Js uses something like https://nuxtjs.org/ please watch the video on their front page. When it gets to seo it will make more sense. To be honest I dont think flutter was ever meant for seo. The way we use it, is to make the website with amp as minimal as possible but also provide an app like look for mobile users who wish to do so without having to install an app on their device. Or at least that is the idea. Most ideal uses for fluster for web would be in browser apps that require user login and does not get indexed. I am sure something will come along like Nuxtjs did for vuejs. In short we need a href tags and vanilla html and Flutter was never built for this. I think a framework that does that is https://angel-dart.dev/ for dart. That will be the only way to use Dart and keep the development in the same language. You will not get the same reactivity but that framework was built for this reason exactly.
@virgiltu I think a framework that does that is https://angel-dart.dev/ for dart.
I guess you mean https://angulardart.dev, which is a dart copy from frontend framework https://angular.io
https://angel-dart.dev/ is Dart on the Server which is like https://expressjs.com to node
If anyone interested, I've made up A RealWorld example app in AngularDart, according to https://github.com/gothinkster/realworld
And there is an blog about sharing biz logic within AngularDart & Flutter https://medium.com/@fandygotama/code-sharing-between-flutter-and-angulardart-198c14ec5200
I complementary understand it. Unfortunately Flutter creates a one page app and all the files are compiled into one. This is ideal for back ends, admin panels or apps that can be ran in a browser. Much like Pandora or something of sorts.
I agree. But there is also an entire category of small micro-sites where Flutter could also be quite attractive.
There are a lot of similarities between Nuxt and the routes we already have in Flutter.
If we had the ability to define some basic meta-data for a route, and to render/extract the text context for a route, seems like Flutter could do all the same stuff that Nuxt is doing. Flutter already has some degree of support for this concept with the Semantics tag.
Well... For many sites the user won't notice about some ms and it is even better if you can add a server side rendering or a service like prerender.io to load a static page waiting for the dynamic content.
And many managers will care more about saving time for development, by reusing the exact same code, than the technical details and ms.
From the human and business point of view, there is definitely a path for Flutter web apps if SEO can be ensured... This even if it is not perfect.
On Tue, Aug 25, 2020 at 8:08 AM Shawn [email protected] wrote:
I complementary understand it. Unfortunately Flutter creates a one page app and all the files are compiled into one. This is ideal for back ends, admin panels or apps that can be ran in a browser. Much like Pandora or something of sorts.
I agree. But there is also an entire category of small micro-sites where Flutter could also be quite attractive.
There are a lot of similarities between Nuxt and the routes we already have in Flutter.
If we had the ability to define some basic meta-data for a route, and to render/extract the text context for a route, seems like Flutter could do all the same stuff that Nuxt is doing. Flutter already has some degree of support for this concept with the Semantics tag.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/flutter/flutter/issues/46789#issuecomment-679804782, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFSSGFLWOLUARNKYXBCOWDSCNIM5ANCNFSM4JZSLM3A .
Not to mention, the bulk of size for any site is typically the images and fonts. Often the 1mb taken up by the script file will be <10% of the actual bytes loaded. Then consider that Flutter uses 1 single connection and request for the entire site, where many websites have 30 or 40 connections, each with an overhead of 100-200ms and a max of 6 or so concurrent requests.
It's really not as simple as, Flutter loads everything in one file and that's bad.