I want to build my portfolio with Flutter web, but only thing is load on Inspect page is this:
<flt-glass-pane style="position: absolute; inset: 0px; cursor: default;"></flt-glass-pane>
How can I manage SEO in flutter and make texts also crawlable by search engine spiders?
being Total SEO friendly is the next goal of the flutter team. for now is mostly metadata optimization.
But there is some flutter_package that makes your app more SEO friendly and optimize for web :
Using seo_render library for render text widgets as HTML elements. Using Semantics widget like this:
Semantics(
label: 'Counter button',
hint: 'Press to increase',
value: '$_counter',
onTap: () { setState(() { _counter++; }); }
child: Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
);
For more information, I suggest that you read this article flutter-seo-friendly
I have followed Flutter's SEO issue for a long time 2+ years now. It is not what Flutter was built for! In their website they say:
In general, Flutter is geared towards dynamic application experiences. Flutter’s web support is no exception. Flutter web prioritizes performance, fidelity, and consistency. This means application output does not align with what search engines need to properly index. For web content that is static or document-like, we recommend using HTML—just like we do on flutter.dev, dart.dev, and pub.dev. You should also consider separating your primary application experience—created in Flutter—from your landing page, marketing content, and help content—created using search-engine optimized HTML.
Flutter is used to develop cross platform Web Apps! Web Apps were never SEO friendly, but they had advantages that are hard to replicate with Javascript, like complex animations transitions etc that are way easier with Flutter.
If you want to know what happens under the hood, check this!
What you should do?
Create parts or the entire website, that you want to be SEO friendly with another technology and the part that's not you can leave it in Flutter, I've made many videos about this.
DON'T
I don't suggest you to use some Flutter packages that promise SEO features by creating hidden tag elements, this is a really bad SEO practice, it's called Cloaking, you may probably create the opposite effect.
Even if you use this packages, you are still going to get a really bad SEO scoring because Flutter uses Canvas to draw, and are really big in size, so it's always better to use html, js...
Note, use meta tags also note that anything that renders an additional html page for crawers will get you banned form Google search, i.e. using seo render package.
