We just launched our Flutter web project, but search engines are only seeing a blank page or a single script tag. I know Flutter uses CanvasKit/HTML rendering, but how do I ensure that my meta tags and dynamic content are actually crawlable by Googlebot? Are there specific SSR solutions or header configurations I’m missing for better organic reach?
3 answers
The unfortunate reality is that Flutter Web is inherently a Single Page Application (SPA) that renders on a canvas, which is a nightmare for traditional SEO. To fix this back in late 2023, we started using "seo_renderer" package to inject HTML tags into the DOM specifically for crawlers. You should also ensure you are using the 'html' renderer instead of 'canvaskit' for landing pages to keep the DOM size manageable. Don't forget to dynamically update the Document Title and Meta tags using the 'package:seo' or by manipulating the 'dart:html' library directly during route changes.
Are you using a multi-page structure or is the entire site one deep-linked route? Sometimes Googlebot struggles with the hash (#) fragments in the URL if you haven't enabled the URL strategy properly.
For heavy SEO needs, I actually recommend a hybrid approach. Build your landing pages in a standard framework like Next.js and use Flutter for the dashboard/app portion of the site.
Linda makes a solid point. While we want to stay in one codebase, sometimes the technical debt of "forcing" SEO into a canvas-based framework like Flutter isn't worth the overhead.
Christopher, we did switch to the 'url_strategy' package to remove the hashes, so our URLs look like /products/item-1 now. However, the content inside those routes still isn't showing up in Google Search Console's "Live Test" view. It’s like the bot isn't waiting long enough for the Dart code to execute and render the text. Amanda’s suggestion about the seo_renderer seems like the next logical step.