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?

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

Answer 2

请注意，使用元标记还请注意，任何为爬虫呈现额外的 html 页面的东西都会让您从 Google 搜索中被禁止，即使用 seo 渲染包。

Answer 3

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