Flutter SEO内容渲染插件`seo_renderer_plus`的使用

SEO Renderer [Not Maintaining]

替代方案

https://pub.dev/packages/seo

一个用于将文本、链接、图像小部件作为HTML元素呈现的Flutter插件（正在开发中）。

特别为问题https://github.com/flutter/flutter/issues/46789创建。它会自动使用正则表达式和navigator userAgent检测爬虫，并将您选择的HtmlElement添加到DOM中。

欢迎所有PR。

开始使用

添加依赖

在您的pubspec.yaml文件中添加以下内容：

dependencies:
  seo_renderer_plus: ^0.6.0

获取包

运行以下命令从Pub获取包：

flutter packages get

导入包

在您的文件中导入该包：

import 'package:seo_renderer_plus/seo_renderer_plus.dart';

使用方法

为了检测页面是否被机器人访问并观察小部件的可见性变化，您需要添加RobotDetector并在navigatorObservers中添加seoRouteObserver。为此，只需将MaterialApp包裹在RobotDetector内：

runApp(
  RobotDetector(
    debug: true, // 您可以设置为true以启用机器人模式
    child: MaterialApp(
      home: MyApp(),
      navigatorObservers: [seoRouteObserver],
    ),
  ),
);

对于更复杂的项目，建议在index.html中添加这些行，以便在检测到机器人时强制使用html Web渲染器。这是因为canvaskit有一些严格的限制，可能会导致问题。

<body>
  ...
  <script>
    const regExp = new RegExp("bot|google|baidu|bing|msn|teoma|slurp|yandex", "i");
    if (regExp.test(navigator.userAgent)) {
      window.flutterWebRenderer = "html";
    }
  </script>
  ...
</body>

文本渲染器 `TextRenderer`

要将HTML文本元素渲染在子元素之上，您可以传递Text或RichText作为子元素或直接设置text。

TextRenderer(
  child: Text(
    'Lorem Ipsum是印刷和排版行业的假文。',
  ),
)

TextRenderer(
  text: 'Lorem Ipsum是印刷和排版行业的假文。',
  child: CustomWidget(),
)

您还可以通过设置style更改HTML元素，例如从<h1>到<h6>和<p>。默认值是TextRendererStyle.paragraph。

TextRenderer(
  style: TextRendererStyle.paragraph,
  child: Text(
    'Lorem Ipsum是印刷和排版行业的假文。',
  ),
)

TextRenderer(
  style: TextRendererStyle.header1,
  child: Text(
    'Lorem Ipsum是印刷和排版行业的假文。',
  ),
)

链接渲染器 `LinkRenderer`

要将HTML链接元素渲染在子元素之上，您需要设置text和href。

LinkRenderer(
  text: '尝试Flutter',
  href: 'https://www.flutter.dev',
  child: ...,
)

图像渲染器 `ImageRenderer`

要将HTML图像元素渲染在子元素之上，您需要设置alt并传递Image.network(...)、Image.asset(...)或Image.memory(...)作为子元素，或者直接设置src。

ImageRenderer(
  alt: '网络图片',
  child: Image.network('https://fakeimg.pl/300x300/?text=网络'),
)

ImageRenderer(
  alt: '网络图片',
  src: 'https://fakeimg.pl/300x300/?text=网络',
  child: CustomWidget(),
)

示例代码

`main.dart`

import 'package:flutter/material.dart';
import 'package:seo_renderer_plus/seo_renderer_plus.dart';
import 'package:seo_renderer_example/examples/image_renderer_example.dart';
import 'package:seo_renderer_example/examples/link_singletext_example.dart';
import 'package:seo_renderer_example/examples/scrollable_content.dart';
import 'package:seo_renderer_example/examples/single_text_item.dart';
import 'package:seo_renderer_example/examples/visibility_example.dart';

void main() {
  runApp(
    RobotDetector(
      child: MaterialApp(
        home: MyApp(),
        navigatorObservers: [seoRouteObserver],
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            OutlinedButton(
              onPressed: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (_) => SingleTextItem()));
              },
              child: TextRenderer(
                child: Text('单个文本项'),
              ),
            ),
            OutlinedButton(
              onPressed: () {
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (_) => ScrollableContent()));
              },
              child: TextRenderer(
                child: Text('可滚动文本内容'),
              ),
            ),
            OutlinedButton(
              onPressed: () {
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (_) => SingleTextLinkExample()));
              },
              child: TextRenderer(
                child: Text('单个链接文本项'),
              ),
            ),
            OutlinedButton(
              onPressed: () {
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (_) => ImageRendererExample()));
              },
              child: TextRenderer(
                child: Text('图像渲染器'),
              ),
            ),
            OutlinedButton(
              onPressed: () {
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (_) => VisibilityExample()));
              },
              child: TextRenderer(
                child: Text('可见性'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter SEO内容渲染插件seo_renderer_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼

更多关于Flutter SEO内容渲染插件seo_renderer_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，关于Flutter中SEO内容渲染插件seo_renderer_plus的使用，这里提供一个简单的代码案例来展示其基本用法。seo_renderer_plus插件主要用于在Flutter应用中生成对搜索引擎友好的HTML内容，这对于提高Web应用的SEO（搜索引擎优化）非常有帮助。

首先，确保你已经在pubspec.yaml文件中添加了seo_renderer_plus依赖：

dependencies:
  flutter:
    sdk: flutter
  seo_renderer_plus: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，下面是一个简单的示例，展示如何使用seo_renderer_plus来渲染SEO友好的HTML内容：

import 'package:flutter/material.dart';
import 'package:seo_renderer_plus/seo_renderer_plus.dart';
import 'dart:html' as html;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SEO Renderer Plus Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SeoRendererDemo(),
    );
  }
}

class SeoRendererDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SEO Renderer Plus Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _renderSeoContent();
          },
          child: Text('Render SEO Content'),
        ),
      ),
    );
  }

  void _renderSeoContent() {
    // 配置SEO数据
    final SeoData seoData = SeoData(
      title: 'Flutter SEO Renderer Plus Example',
      description: 'This is an example of using seo_renderer_plus plugin in Flutter.',
      keywords: ['Flutter', 'SEO', 'Renderer'],
      imageUrl: 'https://example.com/image.jpg',
      author: 'Your Name',
      publishedDate: DateTime.now().toIso8601String(),
      modifiedDate: DateTime.now().toIso8601String(),
      canonicalUrl: 'https://example.com/canonical-url',
      // 可以根据需要添加更多SEO相关的meta标签
    );

    // 渲染SEO友好的HTML内容
    final String htmlContent = SeoRenderer.render(seoData);

    // 在控制台输出渲染的HTML内容（实际应用中，你可能会将其发送到服务器或用于其他目的）
    print(htmlContent);

    // 如果是在Web平台，你也可以将HTML内容直接插入到DOM中
    if (kIsWeb) {
      html.document.body.setInnerHtml(htmlContent, treeSanitizer: html.NodeTreeSanitizer.trusted);
    }
  }
}

class SeoData {
  final String title;
  final String description;
  final List<String> keywords;
  final String imageUrl;
  final String author;
  final String publishedDate;
  final String modifiedDate;
  final String canonicalUrl;

  // 可以根据需要添加更多字段

  SeoData({
    required this.title,
    required this.description,
    required this.keywords,
    required this.imageUrl,
    required this.author,
    required this.publishedDate,
    required this.modifiedDate,
    required this.canonicalUrl,
  });
}

注意：

SeoRenderer.render(seoData)方法会根据提供的SeoData对象生成SEO友好的HTML字符串。
在上面的示例中，HTML内容被打印到了控制台。在Web应用中，你可以使用html.document.body.setInnerHtml方法将其直接插入到DOM中。
实际应用中，你可能会将生成的HTML内容发送到服务器进行进一步处理，或者用于其他SEO相关的用途。
SeoData类是一个简单的数据模型，用于存储SEO相关的数据。你可以根据需要扩展这个类，以包含更多的SEO字段。

请确保在实际应用中根据你的需求调整SEO数据的配置，并妥善处理生成的HTML内容。

Flutter SEO内容渲染插件seo_renderer_plus的使用