{"id":16386090,"url":"https://github.com/krokyze/flutter_seo","last_synced_at":"2025-03-16T16:31:00.138Z","repository":{"id":63156050,"uuid":"563618350","full_name":"krokyze/flutter_seo","owner":"krokyze","description":"Flutter package for SEO support on Web.","archived":false,"fork":false,"pushed_at":"2024-08-26T15:48:26.000Z","size":152,"stargazers_count":48,"open_issues_count":7,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-12T04:16:15.529Z","etag":null,"topics":["flutter","flutter-web","seo"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/krokyze.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-09T01:27:01.000Z","updated_at":"2024-09-24T12:48:37.000Z","dependencies_parsed_at":"2023-01-31T10:16:16.275Z","dependency_job_id":"56f5ccf3-e6eb-47c6-9c81-0ab59ccd7a28","html_url":"https://github.com/krokyze/flutter_seo","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krokyze%2Fflutter_seo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krokyze%2Fflutter_seo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krokyze%2Fflutter_seo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krokyze%2Fflutter_seo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krokyze","download_url":"https://codeload.github.com/krokyze/flutter_seo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221665848,"owners_count":16860317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","flutter-web","seo"],"created_at":"2024-10-11T04:16:11.105Z","updated_at":"2025-03-16T16:31:00.124Z","avatar_url":"https://github.com/krokyze.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flutter_seo\n\n[![pub package](https://img.shields.io/pub/v/seo.svg)](https://pub.dartlang.org/packages/seo)\n\nFlutter 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)\n\n\u0026nbsp;\n## Getting Started\n\nTo use this plugin, add `seo` as a [dependency in your pubspec.yaml file](https://flutter.io/platform-plugins/).\n```yaml\ndependencies:\n  seo: ^0.0.10\n```\n\nUse `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).\n\n```dart\nvoid main() {\n  usePathUrlStrategy();\n  runApp(App());\n}\n```\n\n\u0026nbsp;  \nWrap 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.\n\n```dart\nimport 'package:seo/seo.dart';\n\nvoid main() {\n  usePathUrlStrategy();\n  runApp(const App());\n}\n\nclass App extends StatelessWidget {\n  const App({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return SeoController(\n      enabled: true,\n      tree: WidgetTree(context: context),\n      child: MaterialApp(...),\n    );\n  }\n}\n```\n\n\u0026nbsp;  \nThere's two available SeoTree implementations:\n* **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.\n* **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: ...)`, `Seo.html(html: ...)`\n\n\u0026nbsp;\n## Sample Usage\nYou 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.\n\n#### Text\n```dart\nSeo.text(\n  text: 'Some text',\n  child: ...,\n); // converts to: \u003cp\u003eSome text\u003c/p\u003e\n\nSeo.text(\n  text: 'Some text',\n  style: TextTagStyle.h1,\n  child: ...,\n); // converts to: \u003ch1\u003eSome text\u003c/h1\u003e\n```\n\n#### Image\n```dart\nSeo.image(\n  src: 'http://www.example.com/image.jpg',\n  alt: 'Some example image',\n  child: ...,\n); // converts to: \u003cimg src=\"http://www.example.com/image.jpg\" alt=\"Some example image\"/\u003e\n```\n\n#### Link\n```dart\nSeo.link(\n  href: 'http://www.example.com',\n  anchor: 'Some example',\n  rel: 'nofollow', (optional)\n  child: ...,\n); // converts to: \u003ca href=\"http://www.example.com\" rel=\"nofollow\"\u003e\u003cp\u003eSome example\u003c/p\u003e\u003c/a\u003e\n```\n\n#### Html\n```dart\nSeo.html(\n  html: '\u003cdiv\u003eSome raw html\u003c/div\u003e',\n  child: ...,\n); // converts to: \u003cdiv\u003eSome raw html\u003c/div\u003e\n```\n\n#### Head\n```dart\nSeo.head(\n  tags: [\n    MetaTag(name: 'title', content: 'Flutter SEO Example'),\n    LinkTag(rel: 'canonical', href: 'http://www.example.com'),\n  ],\n  child: ...,\n); // converts to: \u003cmeta name=\"title\" content=\"Flutter SEO Example\"\u003e\u003clink rel=\"canonical\" href=\"http://www.example.com\" /\u003e\n```\n\u003e **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).\n\n\u0026nbsp;\n## Tips\n\n#### Supporting Open Graph, Twitter Card tags\nFacebook, 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.\n\n\u0026nbsp;\n## Demo\nView demo here: https://flutter-seo.netlify.app\n\n#### PageSpeed Insights\n\n[![Mobile](https://img.shields.io/badge/Mobile-lightgray?style=flat-square)![Performance ≈56](https://img.shields.io/badge/Performance-≈55-important?style=flat-square)![Accessibility 87](https://img.shields.io/badge/Accessibility-87-important?style=flat-square)![Best Practices 100](https://img.shields.io/badge/Best_Practices-100-success?style=flat-square)![SEO 100](https://img.shields.io/badge/SEO-100-success?style=flat-square)\\\n![Desktop](https://img.shields.io/badge/Desktop-lightgray?style=flat-square)![Performance ≈85](https://img.shields.io/badge/Performance-≈85-important?style=flat-square)![Accessibility 88](https://img.shields.io/badge/Accessibility-88-important?style=flat-square)![Best Practices 100](https://img.shields.io/badge/Best_Practices-100-success?style=flat-square)![SEO 100](https://img.shields.io/badge/SEO-100-success?style=flat-square)](https://pagespeed.web.dev/report?url=https://flutter-seo.netlify.app)\n\n#### Google Search\n\nLanding page has been indexed and does appear in [Search](https://www.google.com/search?q=flutter+seo+green+papaya+salad)\n\nRemaining pages have `Discovered - currently not indexed` status. I am investigating why.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrokyze%2Fflutter_seo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrokyze%2Fflutter_seo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrokyze%2Fflutter_seo/lists"}