Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/krokyze/flutter_seo
Flutter package for SEO support on Web.
https://github.com/krokyze/flutter_seo
flutter flutter-web seo
Last synced: about 2 months ago
JSON representation
Flutter package for SEO support on Web.
- Host: GitHub
- URL: https://github.com/krokyze/flutter_seo
- Owner: krokyze
- License: mit
- Created: 2022-11-09T01:27:01.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-26T15:48:26.000Z (4 months ago)
- Last Synced: 2024-10-12T04:16:15.529Z (2 months ago)
- Topics: flutter, flutter-web, seo
- Language: Dart
- Homepage:
- Size: 148 KB
- Stars: 48
- Watchers: 5
- Forks: 5
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# flutter_seo
[](https://pub.dartlang.org/packages/seo)
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](#demo)
## Getting Started
To use this plugin, add `seo` as a [dependency in your pubspec.yaml file](https://flutter.io/platform-plugins/).
```yaml
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](https://www.youtube.com/watch?v=vow-m6R-YHo).
```dart
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.
```dart
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](https://github.com/krokyze/flutter_seo/blob/main/example/lib/widgets/app_text.dart), [AppImage](https://github.com/krokyze/flutter_seo/blob/main/example/lib/widgets/app_image.dart), [AppLink](https://github.com/krokyze/flutter_seo/blob/main/example/lib/widgets/app_link.dart), [AppHead](https://github.com/krokyze/flutter_seo/blob/main/example/lib/widgets/app_head.dart) base widgets and use those in the project.
#### Text
```dart
Seo.text(
text: 'Some text',
child: ...,
); // converts to:
Some text
Seo.text(
text: 'Some text',
style: TextTagStyle.h1,
child: ...,
); // converts to:
Some text
```
#### Image
```dart
Seo.image(
src: 'http://www.example.com/image.jpg',
alt: 'Some example image',
child: ...,
); // converts to: 
```
#### Link
```dart
Seo.link(
href: 'http://www.example.com',
anchor: 'Some example',
rel: 'nofollow', (optional)
child: ...,
); // converts to: Some example
```
#### Head
```dart
Seo.head(
tags: [
MetaTag(name: 'title', content: 'Flutter SEO Example'),
LinkTag(rel: 'canonical', href: 'http://www.example.com'),
],
child: ...,
); // converts to:
```
> **Warning**: Open Graph (og:title, og:description, etc.) and Twitter Card (twitter:title, twitter:description, etc.) will not work. [Read more](#supporting-open-graph-twitter-card-tags).
## 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](https://github.com/krokyze/flutter_seo/blob/main/example/web/index.html#L20..L29).
```html
if (bot) {
window.flutterWebRenderer = "html";
}
```
#### 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
[\
](https://pagespeed.web.dev/report?url=https://flutter-seo.netlify.app)
#### Google Search
Landing page has been indexed and does appear in [Search](https://www.google.com/search?q=flutter+seo+green+papaya+salad)
Remaining pages have `Discovered - currently not indexed` status. I am investigating why.