Flutter SEO优化插件seo的使用

flutter_seo

flutter_seo 是一个为Flutter Web应用提供SEO（meta, body tag）支持的包。它通过监听widget树的变化，将 Seo.text(...)、Seo.image(...)、Seo.link(...) 和 Seo.head(...) 等组件转换为HTML文档树。

开始使用

要使用这个插件，请在你的 pubspec.yaml 文件中添加 seo 作为依赖项。

dependencies:
  seo: ^0.0.9

确保Google能识别每个URL为不同的页面，需要调用 usePathUrlStrategy()。如果忽略这一步，可能导致Google将所有URL视为同一页面。更多详情请参考 此视频。

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

将应用程序包装在 SeoController 中，它会处理监听widget树变化并更新HTML文档树。如果你的应用有授权功能且用户已登录，则可以禁用控制器（enabled: false），因为在该状态下更新HTML文档树是多余的。

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(
        // your app configuration here
      ),
    );
  }
}

有两种可用的 SeoTree 实现：

• WidgetTree (推荐)：基于遍历widget树。虽然比 SemanticsTree 慢一些，但它已经准备好用于生产环境，并且没有阻止Flutter SDK的问题。
• SemanticsTree (实验性)：基于遍历语义数据节点树。虽然遍历速度更快，但不支持 Seo.head(...)、Seo.text(style: ...) 和 Seo.link(rel: ...)。

示例用法

你应该根据需要将SEO相关的widgets包裹在 Seo.text(...)、Seo.image(...)、Seo.link(...) 和 Seo.head(...) 中。从个人经验来看，创建自定义的基础组件（如 AppText、AppImage、AppLink 和 AppHead）并在项目中使用它们会更方便。

Text

Seo.text(
  text: 'Some text',
  child: ...,
); // 转换为: <p>Some text</p>

Seo.text(
  text: 'Some text',
  style: TextTagStyle.h1,
  child: ...,
); // 转换为: <h1>Some text</h1>

Image

Seo.image(
  src: 'http://www.example.com/image.jpg',
  alt: 'Some example image',
  child: ...,
); // 转换为: <img src="http://www.example.com/image.jpg" alt="Some example image"/>

Link

Seo.link(
  href: 'http://www.example.com',
  anchor: 'Some example',
  rel: 'nofollow', // 可选
  child: ...,
); // 转换为: <a href="http://www.example.com" rel="nofollow"><p>Some example</p></a>

Head

Seo.head(
  tags: [
    MetaTag(name: 'title', content: 'Flutter SEO Example'),
    LinkTag(rel: 'canonical', href: 'http://www.example.com'),
  ],
  child: ...,
); // 转换为: <meta name="title" content="Flutter SEO Example"/><link rel="canonical" href="http://www.example.com" />

警告: Open Graph (og:title, og:description 等) 和 Twitter Card (twitter:title, twitter:description 等) 不会生效。详情见 支持Open Graph和Twitter Card标签。

提示

支持Open Graph和Twitter Card标签

Facebook、Twitter等平台只会加载index.html，并不会执行网页中包含的JavaScript，因此我们无法通过Dart代码更改meta标签。解决方案是在服务器端渲染时，在返回给客户端之前，在 index.html 中添加Open Graph和Twitter Card标签。

示例代码

下面是一个完整的示例代码，展示了如何使用 flutter_seo 插件。

import 'package:flutter/material.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
import 'package:seo/seo.dart';
import 'package:seo_example/main_router.dart';

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

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

  final _router = MainRouter();

  @override
  Widget build(BuildContext context) {
    return SeoController(
      enabled: true,
      tree: WidgetTree(context: context),
      child: MaterialApp.router(
        theme: Theme.of(context).copyWith(
          scaffoldBackgroundColor: const Color(0xFFEEEEEE),
          textTheme: Theme.of(context)
              .textTheme
              .copyWith(
                headlineSmall: const TextStyle(fontWeight: FontWeight.w600),
                titleLarge: const TextStyle(fontWeight: FontWeight.w600),
              )
              .apply(
                displayColor: Colors.black,
                bodyColor: Colors.black,
              ),
        ),
        routerDelegate: _router.delegate(),
        routeInformationParser: _router.defaultRouteParser(),
      ),
    );
  }
}

Demo

查看演示：https://flutter-seo.netlify.app

PageSpeed Insights

• Mobile: Performance ≈55, Accessibility 87, Best Practices 100, SEO 100
• Desktop: Performance ≈85, Accessibility 88, Best Practices 100, SEO 100

Google Search

首页已被索引，并出现在 搜索结果 中。其他页面状态为“已发现 - 当前未被索引”，正在调查原因。