How Manage SEO In flutter web?

Question

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?

Hepner

@StephenOstermiller yes – Poker

Answer 1

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

Hepner

is there any way to know if this is working or not? except from seo_anaslyser – Rafaelita

How do you know that SEO is the next goal of Flutter team? It is years away. Don’t pump hype. – Adalineadall

Not to start a flame thread but I'm following SEO and Flutter, I don't have any source on timeframe or even if it's a priority. @MutluSimsek, do you have more info here? I don't know if it's a) "the next goal" b) years away c) months away or d) never gonna happen. According to Web FAQ (docs.flutter.dev/development/platform-integration/web/…) it's more like d). – Uhland

"years away" was just a guess from what I understand from SEO issue on github. It is probably b or d. I am more optimistic towards b because google owns both search engine and flutter. – Adalineadall

@samy-cripten or anyone tells me plz, is it possible to use cypress in flutter web? – Skipbomb

Answer 2

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

Tattle

Hey Aspiiire, can you kindly add some video links related to this topic here? – Secateurs

@Secateurs I have made a video about this topic youtube.com/watch?v=13XvM_zoye8 – Tattle

Answer 3

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.

Unit

are you sure that seo render package renders additional html page? as far as i know it only generates html elements – Gile

@lailanabil It only generates html elements. Did you get seo renderer package working? – Megagamete