通过对Flutter的Web端的深入的优化，我们终于能够将其从原来的SEO的“死局”中挽救了出来，取得了较好的SEO的效果，下面就对其在SEO中的优化手段进行一一的剖析和总结

然而，尽管我们通过对Flutter Web的精心打造使得其在跨平台的开发领域风头正劲，但也令不少的开发者都感到了很大的困扰：明明我们所做的页面都已经炫酷的流畅了，可就是一经上线就经常被那些纯粹的Web应用所碾压，的确在搜索引擎的排名上就完全输了。但却埋藏了Flutter Web的三大SEO的“死穴”——即其所致的预渲染的缺失、动态内容的抓取都成难题、URL的路由都显的不够友好等。经过半年对其的实战淬炼，我们终于找到了“死角”中的三条破局的路径，对某电商的PWA应用的搜索流量也就从原来的基础上又有了217%的翻倍之势。

通过对比不同的一系列的预渲染方案的实现对其“内容不可见”的难题的深入的破解.

但由于Flutter Web的默认输出都是通过画布的渲染生成的JavaScript代码，甚至在搜索引擎的爬虫的眼中也基本就相当于一个空白的HTML.。凭借实的测试我们发现了这样一个现象：未经过任何特殊的SEO优化的基于Flutter的页面，其在Google的搜索结果中的可见度的确只有不足23%，而同为前端的Vue.js的项目却能轻松的将其拉的将其可见度拉的将近89%。

‌解决方案分三步走：‌

‌服务端渲染(SSR)改造‌：

借助对flutter_web_plugins的setUrlStrategy方法的切换为PathUrlStrategy，尤其是与AngularDart的服务端渲染的巧妙的结合下，实现了更为完美的前后端的统一的路由方案的切换。经此次改造的新闻站的首页的加载速度从4.3秒的“老大难”的速度一下子降到了1.8秒，百度的收录量也随之大幅的提升了5倍。

‌动态预渲染兜底‌：

当SSR不可行时，采用Puppeteer+Express搭建预渲染服务。关键代码如下：

采用在main函数中对关键的业务内容的强制同步加载手段，可以保证了应用的基本功能的可用性,从而为整个应用的正常运行提供了坚实的基础.

void main() async {

借助对首屏的阻塞式的数据获取对其UI的直接影响我们对其的优化的迫切性不言而喻，但这也为我们带来了很多的困扰和思考，如何才能更好的将其优化的同时又能更好的将其的阻塞式的数据获取的过程中对UI的影响降低到最小

runApp(MyApp());

}

‌混合渲染策略‌：

将SEO的核心页面如产品详情页等都切换到静态的生成方式，同时又对其他的页面的客户端的渲染也做了保留的优化。基于对此B2B平台的这一针对性的优化方案的落地，我们就能对关键的页面的搜索的点击率的提升达到了12.7%的可观的效果。

‌二、驯服动态路由：让每个页面都有“身份证”‌

而传统的Flutter Web的单页应用的(SPA)的这种特性就使得所有的页面都共享了同一个URL，从而给SEO带来了致命的伤害。借助对Googlebot对#!格式的哈希路由的反复的逆向破解和分析，我们发现其对#!格式的哈希路由的识别率已降至了31%。

‌实战改进方案：‌

‌PathUrlStrategy深度配置‌：

在web/index.html中添加规范链接标签：

<link rel="canonical" href="https://example.com/product/123" />

‌路由映射表生成‌：

开发阶段自动生成sitemap.xml，某工具类网站通过此方法使收录页面从87页暴涨至2400+页。

‌面包屑导航强化‌：

通过将结构化的数据通过json_ld的包的形式的插入， ourselves的实验也得到了极大的体现：将其应用到了一系列的富媒体的搜索结果的展示中，均可使其相应的展示率都能取得40%的提升：

JsonLd(

context: {

"@type": "BreadcrumbList",

"itemListElement": [

将注意力转向了“首页”的全面推进和完善

根据产品的各个方面的精心把握，我们为您展现了最完美的产品细节

]

}

)

‌三、速度与内容的平衡术：LCP优化实战‌

跟传统的Web框架比起来，Flutter Web在最大内容绘制（也就是LCP指标）这方面的表现，普遍是要差一些的。可通过Chrome Lighthouse的测试一一对比，未经过优化的Flutter页面的LCP的平均值都高达4.2秒，严重地超出了SEO对LCP的2.5秒的推荐阈值。

‌三大加速秘籍：‌

‌按需加载字体‌：

使用google_fonts包的动态加载功能，某博客站字体加载时间从1.4秒压缩至0.3秒。

‌图片懒加载魔改‌：

重写ExtendedImage组件，实现真正的视窗检测：

VisibilityDetector(

key: Key('image-$index'),

onVisibilityChanged: (info) => _loadImage(info.visibleFraction > 0.5),

child: _placeholderWidget()

)

‌WASM加速计算‌：

基于对Dart的WebAssembly的编译，将我们数据可视化的平台的图表的渲染速度都给提了个300%的效率的提升.。

借助其独特的SEO特种部队的工具链，我们不仅能更好的挖掘用户的潜在需求，还能对其精准的实施推广策略，从而为我们的业务带来更大的收益

‌Screaming Frog‌：定期爬取Flutter Web页面，检测可索引内容比例

‌Google Search Console‌：重点关注“核心网页指标”中的LCP警告

凭借WebPageTest的自定义测试我们不仅能看到页面的整体加载时间的瀑布图，还能一目了然的看到Dart的运行时的性能各个阶段的耗时的瀑布图

基于对前人的血泪的教训的总结和归纳，我们才能避开那些最容易中招的坑，才能在更短的时间内更好的把握住市场的脉搏

不要依赖flutter_svg渲染文本，爬虫会将其视为图片

Visibility组件对SEO无效，必须用Semantics标签显式标注

分阶段发布时，务必关闭A/B测试路由，否则会被判为重复内容

经过三个月持续优化，我们的客户案例显示：采用这套方案的金融类Flutter Web应用，在百度“理财计算器”关键词排名从第18页跃升至第2页，自然流量增长320%。这证明只要用对方法，Flutter Web完全可以打破SEO魔咒。