flutter_seo
Flutter package for SEO support on Web. The package listens to widget tree changes and converts Seo.text(...), Seo.image(...), Seo.link(...) widgets into html document tree.
See demo here: https://krokyze.github.io/flutter_seo
Getting Started
To use this plugin, add seo as a dependency in your pubspec.yaml file.
dependencies:
seo: ^0.0.1
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() {
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 traverses the tree faster but enables known Flutter SDK issues:
Sample Usage
You should wrap all your SEO required widgets accordingly within Seo.text(...), Seo.image(...), Seo.link(...).
Text
Seo.text(
text: 'Some text',
child: ...,
); // converts to: <p>Some text</p>
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"/>
Link
Seo.link(
href: 'http://www.example.com',
anchor: 'Some example',
child: ...,
); // converts to: <a href="http://www.example.com"><p>Some example</p></a>
From personal experience it's more comfortable to create custom AppText, AppImage, AppLink base widgets and use those in the project.
18 Dec 21, 2022
1.4k Jan 4, 2023
34 Dec 29, 2022
136 Nov 18, 2022
20 Oct 26, 2022
2 May 30, 2022
7 Nov 2, 2022
20 Oct 11, 2022
30 Nov 11, 2022
428 Dec 30, 2022
70 Dec 13, 2022
4 Nov 15, 2022
0 Dec 26, 2021
13 Oct 24, 2022
2 Jul 17, 2022
3 Jan 24, 2022
3 Oct 24, 2022
0 Dec 28, 2021