What are the SEO limitations of Flutter Web and how do you mitigate them?
TL;DR: CanvasKit renders to a <canvas> element — search engines can't index canvas content. Mitigations: use HTML renderer for content pages, add meta tags/Open Graph in index.html, use flutter_seo package for semantic HTML injection, or serve a static HTML shell for bots.
Full Answer
Flutter Web's biggest production limitation: CanvasKit generates canvas pixels, not HTML elements. Googlebot indexes HTML text — canvas is opaque to it.
Mitigation Strategies
- ▸HTML renderer for content-heavy pages (blogs, docs) — partial DOM output
- ▸flutter_seo package: Injects hidden semantic HTML alongside canvas for crawlers
- ▸Pre-rendering with tools like Prerender.io or a Next.js shell
- ▸Meta tags in web/index.html for page-level title/description
- ▸Sitemap.xml + robots.txt for crawl guidance
Flutter Web is not suitable as the primary web presence for SEO-critical content. Use it for app-like tools, dashboards, and progressive web apps where SEO is secondary.
Code Examples
// Static meta tags in index.html are indexed by Googlebot // Dynamic titles require flutter_seo or document.title manipulation
Common Mistakes
- ✗Assuming Google indexes canvas elements — it doesn't with CanvasKit
- ✗Setting document.title in Flutter too late — the initial title in index.html is what bots see first
Interview Tip
Be honest about Flutter Web SEO limitations. Show you know the right tool for the right job: Flutter Web is excellent for web apps, not public content sites.