Skip to content
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

Open
deepak-kumar-swain opened this issue Dec 11, 2019 · 190 comments
Open

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

deepak-kumar-swain opened this issue Dec 11, 2019 · 190 comments
Labels
c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter customer: crowd Affects or could affect many people, though not necessarily a specific customer. framework flutter/packages/flutter repository. See also f: labels. P2 Important issues not at the top of the work list platform-web Web applications specifically team-web Owned by Web platform team triaged-web Triaged by Web platform team

Comments

@deepak-kumar-swain
Copy link

deepak-kumar-swain commented Dec 11, 2019

Latest status: #46789 (comment)


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

@iapicca iapicca added d: stackoverflow Good question for Stack Overflow documentation labels Dec 12, 2019
@pierre6666
Copy link

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

@silicahd
Copy link

silicahd commented Jan 26, 2020

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.

@kf6gpe kf6gpe added the platform-web Web applications specifically label Jan 30, 2020
@yjbanov yjbanov modified the milestones: Stretch Goals, Goals Jan 30, 2020
@waykole
Copy link

waykole commented Feb 3, 2020

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
Copy link

Tokenyet commented Feb 7, 2020

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
Copy link

silicahd commented Feb 8, 2020

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
Copy link

joneswe commented May 19, 2020

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
Copy link

federicofazzeri commented May 19, 2020

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

@silicahd
Copy link

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
Copy link

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
Copy link

silicahd commented May 20, 2020

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
Copy link

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
Copy link

joneswe commented May 20, 2020

@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 :)

@kf6gpe kf6gpe added the P2 Important issues not at the top of the work list label May 29, 2020
@imyashadulkar
Copy link

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
Copy link

Bilonik commented Jun 12, 2020

Hi @elaishane , Can you explain a bit more?

Thanks

@imyashadulkar
Copy link

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
Copy link

wfe8006 commented Jun 13, 2020

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..

@yjbanov yjbanov added P3 Issues that we currently consider unimportant and removed P2 Important issues not at the top of the work list labels Jun 16, 2020
@iapicca iapicca added customer: crowd Affects or could affect many people, though not necessarily a specific customer. and removed d: stackoverflow Good question for Stack Overflow documentation labels Jul 10, 2020
@Hixie
Copy link
Contributor

Hixie commented Aug 30, 2022

Hey, I'm the guy from the video, so I thought it might make sense to jump in here!

Thanks for a great video!

Honestly, I think the coherent story has been (and will be): Don't use WebGL, canvas or whatever technology effectively is an opaque rectangle for that scenario.

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.

  • How should they be exposing the content in the first place? Should they have an ARIA-based parallel tree inside the or in a DOM shadow tree that describes the content? That's what they would have to do for a11y but it's not clear that it helps with indexing.

That brings me back to: Use HTML, CSS, JS for this. Yes, you could use an ARIA tree for this, but it's better to use what browser already give you for free than trying to redo it all with ARIA. The WAI says it nicely as "No ARIA is better than bad ARIA".

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).

  • How should they be exposing the deep links to search? They can't use regular paths, since they can't rely on the server to do anything for them — only a single static HTML page exists. The only control they have over the URL is fragment identifiers, but where would they even put the links if they wanted to?

Many server solutions exist to fix this, even for static servers URL rewriting is widely spread.

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?

It seems like this is going to become a bigger problem over time as more and more apps are deployed on the web as just big piles of Wasm and JS glue code rather than as HTML markup split across multiple URLs.

That's a tricky one. I generally agree that we'll likely see more applications becoming web applications thanks to Wasm et. al. but I'd argue that a lot of the web will remain either part of the content part of the web (product pages, articles, etc.) where traditional pages with HTML, CSS and JS will continue to be the right tool for the job or be part of the application part of the web, where the content likely won't make sense in terms of search engine indexation - like a CAD software that let's you edit your CAD files from the browser or image editing software.

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?

For those situations, I think it makes sense to consider what you content you want exposed and how to expose this using what the web platform has to offer. For the 3D models, this might be a component that has a GLTF version of the file and uses the component to embed it, interactively, into a webpage. For the image editing software, the image gallery can be done with just HTML/CSS/JS like it's done today. While that is extra effort, it's worthwhile as it comes with a bunch of affordances we've had for a long time on the web, like early resource scanning, lazyloading etc. built-in.

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.

@AVGP
Copy link

AVGP commented Aug 30, 2022

Hey, I'm the guy from the video, so I thought it might make sense to jump in here!

Thanks for a great video!

Happy to hear that it's useful :)

Honestly, I think the coherent story has been (and will be): Don't use WebGL, canvas or whatever technology effectively is an opaque rectangle for that scenario.

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.

Then maybe Flutter isn't the right tool for content pages (and that isn't a problem per se).

  • How should they be exposing the content in the first place? Should they have an ARIA-based parallel tree inside the or in a DOM shadow tree that describes the content? That's what they would have to do for a11y but it's not clear that it helps with indexing.

That brings me back to: Use HTML, CSS, JS for this. Yes, you could use an ARIA tree for this, but it's better to use what browser already give you for free than trying to redo it all with ARIA. The WAI says it nicely as "No ARIA is better than bad ARIA".

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).

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.

  • How should they be exposing the deep links to search? They can't use regular paths, since they can't rely on the server to do anything for them — only a single static HTML page exists. The only control they have over the URL is fragment identifiers, but where would they even put the links if they wanted to?

Many server solutions exist to fix this, even for static servers URL rewriting is widely spread.

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?

Sure. The URL doesn't change client-side, so for the browser it's still /a, /b etc. but the server serves index.html for all of them nonetheless.

It seems like this is going to become a bigger problem over time as more and more apps are deployed on the web as just big piles of Wasm and JS glue code rather than as HTML markup split across multiple URLs.

That's a tricky one. I generally agree that we'll likely see more applications becoming web applications thanks to Wasm et. al. but I'd argue that a lot of the web will remain either part of the content part of the web (product pages, articles, etc.) where traditional pages with HTML, CSS and JS will continue to be the right tool for the job or be part of the application part of the web, where the content likely won't make sense in terms of search engine indexation - like a CAD software that let's you edit your CAD files from the browser or image editing software.

That was our argument with Flutter too, but the reality is people really really want to use Flutter for apps with content.

Maybe they shouldn't. "If you only have a hammer every problem is a nail" should not drive tooling decisions.

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?

From the other comments in this thread, I'm assuming you'd use DOM rendering for that?

For those situations, I think it makes sense to consider what you content you want exposed and how to expose this using what the web platform has to offer. For the 3D models, this might be a component that has a GLTF version of the file and uses the component to embed it, interactively, into a webpage. For the image editing software, the image gallery can be done with just HTML/CSS/JS like it's done today. While that is extra effort, it's worthwhile as it comes with a bunch of affordances we've had for a long time on the web, like early resource scanning, lazyloading etc. built-in.

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.

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.?

@iapicca
Copy link
Contributor

iapicca commented Aug 30, 2022

I think @egonm12 's comment should get more attention

According to Google it is not considered cloaking as long as the content is similar (full source). This is also how seo_renderer works.

@AVGP

Then maybe Flutter isn't the right tool for content pages (and that isn't a problem per se).
[...]
Maybe they shouldn't. "If you only have a hammer every problem is a nail" should not drive tooling decisions.

Not sure if this is officially the "mission" of flutter or just how me and other developers feel;
as I see it the point of flutter is write once, run everywhere (interesting video on the topic)
but if this is true only until your client cares about indexability
or wants a "content rich" (whatever that means) web page...
then the whole point fails

The expectation than me and others have is for flutter to (at least attempt)
to come as close as possible to the "native" experience for the platform is targeting,
which (again, in my mind) includes SEO and content rich web pages for web,
"close enough" would definitely be a win in this case.

I think @esDotDev is on the right track here
was my understanding that the hold up for the approaches he mentioned was "google will penalize you"
but if this isn't the case is there any reason not to pursue this approach?

@Hixie
Copy link
Contributor

Hixie commented Aug 30, 2022

Sure. The URL doesn't change client-side, so for the browser it's still /a, /b etc. but the server serves index.html for all of them nonetheless.

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.

That was our argument with Flutter too, but the reality is people really really want to use Flutter for apps with content.

Maybe they shouldn't. "If you only have a hammer every problem is a nail" should not drive tooling decisions.

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.

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?

From the other comments in this thread, I'm assuming you'd use DOM rendering for that?

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.

I doubt Flutter is rendering everything in DirectX surfaces and sprites instead of using Windows APIs to create buttons etc.?

We render every pixel on every platform. Everything. We even blink our own cursor.

@gedw99
Copy link

gedw99 commented Aug 31, 2022

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
Copy link
Contributor

iapicca commented Aug 31, 2022

@gedw99

According to Google it is not considered cloaking as long as the content is similar (full source). This is also how seo_renderer works.

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 ).

@gedw99
Copy link

gedw99 commented Aug 31, 2022

@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 ??

@krokyze
Copy link
Contributor

krokyze commented Nov 14, 2022

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.

@guplem
Copy link

guplem commented Dec 15, 2022

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.

@debjeetproso
Copy link

does seo_renderer: ^0.6.0 package really works ??
like it makes flutter web app seo better ?

@satvikpendem
Copy link

satvikpendem commented Jan 7, 2023

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.

@kevlar700
Copy link

kevlar700 commented Mar 12, 2023

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.

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?

@IchordeDionysos
Copy link
Contributor

IchordeDionysos commented Mar 26, 2023

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 😌

@kevlar700
Copy link

kevlar700 commented May 6, 2023

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?

@kevlar700
Copy link

Solving this issue would be beneficial to all including the flutter community. These issues are constantly found on sites.

flutter/website#8900

@flutter-triage-bot flutter-triage-bot bot added multiteam-retriage-candidate team-web Owned by Web platform team triaged-web Triaged by Web platform team labels Jul 8, 2023
@Okunamutata
Copy link

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

@mminhlequang

This comment was marked as spam.

@OlaiyaO
Copy link

OlaiyaO commented Jan 21, 2024

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
Copy link

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 ?

@commandiron

This comment was marked as off-topic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter customer: crowd Affects or could affect many people, though not necessarily a specific customer. framework flutter/packages/flutter repository. See also f: labels. P2 Important issues not at the top of the work list platform-web Web applications specifically team-web Owned by Web platform team triaged-web Triaged by Web platform team
Projects
None yet
Development

No branches or pull requests