如何在 flutter web 中管理 SEO？

Question

我想用 Flutter web 构建我的作品集，但 Inspect 页面上加载的唯一内容是：

<flt-glass-pane style="position: absolute; inset: 0px; cursor: default;"></flt-glass-pane>

如何在 flutter 中管理 SEO 并使文本也可以被搜索引擎蜘蛛抓取？

Answer 1

全面 SEO 友好是 flutter 团队的下一个目标。目前主要是元数据优化。

但是有一些 flutter_package 可以使您的应用程序更加 SEO 友好并针对网络进行优化：

使用seo_render库将文本小部件渲染为 HTML 元素。像这样使用语义小部件：

Semantics(
  label: 'Counter button',
  hint: 'Press to increase',
  value: '$_counter',
  onTap: () { setState(() { _counter++; }); }
  child: Text(
    '$_counter',
    style: Theme.of(context).textTheme.display1,
  ),

）；

如需了解更多信息，建议您阅读这篇文章flutter-seo-Friendly

Answer 2

我已经关注 Flutter 的 SEO 问题已有 2 年多了。这不是 Flutter 的初衷！他们在他们的网站上说：

\n

\n

一般来说，Flutter 面向动态应用程序体验。\nFlutter\xe2\x80\x99s Web 支持也不例外。Flutter Web 优先考虑\n性能、保真度和一致性。这意味着应用程序输出\n与搜索引擎需要正确索引的内容不一致。对于静态或类似文档的 Web 内容，我们建议使用 HTML\xe2\x80\x94，就像我们在 flutter.dev、dart.dev 和 pub.dev 上所做的那样。您还应该考虑将 Flutter\xe2\x80\x94 创建的主要应用程序体验与使用搜索引擎优化 HTML 创建的着陆页、营销内容和帮助内容\xe2\x80\x94 分开。

\n

\n

Flutter用于开发跨平台Web Apps！Web 应用程序从来都不是 SEO 友好的，但它们具有难以用 Javascript 复制的优势，例如复杂的动画过渡等，而使用 Flutter 则更容易。

\n

如果您想知道幕后发生了什么，请检查此！

\n

你应该做什么？

\n

创建部分或整个网站，您希望使用另一种技术对 SEO 友好，而不是您可以将其留在 Flutter 中，我已经制作了很多关于此的视频。

\n

不

\n

我不建议你使用一些通过创建隐藏标签元素来承诺 SEO 功能的 Flutter 包，这是一种非常糟糕的 SEO 做法，这就是所谓的 Cloaking，你可能会产生相反的效果。

\n

即使你使用这个包，你仍然会得到一个非常糟糕的 SEO 评分，因为 Flutter 使用 Canvas 来绘制，并且尺寸非常大，所以最好使用 html、js...

\n