seo 0.0.7 copy "seo: ^0.0.7" to clipboard
seo: ^0.0.7 copied to clipboard

Flutter package for enabling SEO (meta, body tag) support on Web.

flutter_seo #

pub package

Flutter package for enabling SEO (meta, body tag) support on Web. The package listens to widget tree changes and converts Seo.text(...), Seo.image(...), Seo.link(...), Seo.head(...) widgets into html document tree. View Demo

Getting Started #

To use this plugin, add seo as a dependency in your pubspec.yaml file.

dependencies:
  seo: ^0.0.7

Use usePathUrlStrategy() to ensure that Google recognizes each URL as a distinct page. Failure to do so may result in Google perceiving all URLs as the same page. For additional details, refer to this video.

void main() {
  usePathUrlStrategy();
  runApp(App());
}


Wrap your app within SeoController which will handle listening to widget tree changes and updating the html document tree. In case your app has authorization and user is logged in you can disable the controller by enabled: false as it's redundant to update the html document tree at that state.

import 'package:seo/seo.dart';

void main() {
  usePathUrlStrategy();
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return SeoController(
      enabled: true,
      tree: WidgetTree(context: context),
      child: MaterialApp(...),
    );
  }
}


There's two available SeoTree implementations:

  • WidgetTree (recommended) - based on traversing widget tree, while it's bit slower than SemanticsTree it's production ready and doesn't have any blocking Flutter SDK issues.
  • SemanticsTree (experimental) - based on traversing semantic data node tree. Does traverse the tree faster but doesn't support Seo.head(...), Seo.text(style: ...), Seo.link(rel: ...)

Sample Usage #

You should wrap all your SEO required widgets accordingly within Seo.text(...), Seo.image(...), Seo.link(...) and SEO required pages within Seo.head(...). From personal experience it's more comfortable to create custom AppText, AppImage, AppLink, AppHead base widgets and use those in the project.

Text

Seo.text(
  text: 'Some text',
  child: ...,
); // converts to: <p>Some text</p>

Seo.text(
  text: 'Some text',
  style: TextTagStyle.h1,
  child: ...,
); // converts to: <h1>Some text</h1>

Image

Seo.image(
  src: 'http://www.example.com/image.jpg',
  alt: 'Some example image',
  child: ...,
); // converts to: <img src="http://www.example.com/image.jpg" alt="Some example image"/>
Seo.link(
  href: 'http://www.example.com',
  anchor: 'Some example',
  rel: 'nofollow', (optional)
  child: ...,
); // converts to: <a href="http://www.example.com" rel="nofollow"><p>Some example</p></a>
Seo.head(
  tags: [
    MetaTag(name: 'title', content: 'Flutter SEO Example'),
    LinkTag(rel: 'canonical', href: 'http://www.example.com'),
  ],
  child: ...,
); // converts to: <meta name="title" content="Flutter SEO Example"><link rel="canonical" href="http://www.example.com" />

Warning: Open Graph (og:title, og:description, etc.) and Twitter Card (twitter:title, twitter:description, etc.) will not work. Read more.

Tips #

Force HTML renderer for bots

To improve initial page load speed for bots you can force HTML renderer which is 2MB smaller in download size than CanvasKit. Full example here.

<script>
  if (bot) {
    window.flutterWebRenderer = "html";
  }
</script>

Supporting Open Graph, Twitter Card tags

Facebook, Twitter, etc. simply load index.html and don't execute any JavaScript that webpage contains so we're not able to change meta tags within Dart code. The proposed solution is to create simple Server-Side Rendering which would add Open Graph, Twitter Card tags within index.html before returning it to Client.

Demo #

View demo here: https://flutter-seo.netlify.app

PageSpeed Insights

MobilePerformance ≈56Accessibility 87Best Practices 100SEO 100
DesktopPerformance ≈85Accessibility 88Best Practices 100SEO 100

Landing page has been indexed and does appear in Search

Remaining pages have Discovered - currently not indexed status. I am investigating why.

87
likes
120
pub points
89%
popularity

Publisher

unverified uploader

Flutter package for enabling SEO (meta, body tag) support on Web.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, rxdart

More

Packages that depend on seo