Flutter SEO优化插件 angel3_seo 的使用

angel3_seo 是一个用于在 Angel 框架中构建对 SEO 友好的网页的辅助工具。它的目标是加快客户端页面加载速度，防止未样式化内容的闪烁（Flash of Unstyled Content），以及其他可以轻松实现的 SEO 优化。

主要特性

• 版本与支持：查看 Pub Package 获取最新版本信息。
• Null Safety：确保代码的安全性。
• Gitter 社区支持：加入讨论获取帮助。
• 开源许可：基于 MIT 许可协议发布。

禁用元素内联

可以通过给 <link> 或 <script> 标签添加 data-no-inline 属性来阻止其内容被内联：

<script src="main.dart.js" data-no-inline></script>

使用 inlineAssets 响应终结器

这是一个可以应用于任何应用程序的响应终结器，用于修补发送的 HTML 响应，包括那些通过模板引擎如 Jael3 发送的响应。

示例代码

import 'package:angel3_framework/angel3_framework.dart';
import 'package:angel3_seo/angel3_seo.dart';
import 'package:angel3_static/angel3_static.dart';
import 'package:file/local.dart';

void main() async {
  var app = Angel()..lazyParseBodies = true;
  var fs = const LocalFileSystem();
  var http = AngelHttp(app);

  // 添加 inlineAssets 响应终结器
  app.responseFinalizers.add(inlineAssets(fs.directory('web')));

  app.use(() => throw AngelHttpException.notFound());

  var server = await http.startServer('127.0.0.1', 3000);
  print('Listening at http://${server.address.address}:${server.port}');
}

使用 inlineAssetsFromVirtualDirectory

此函数简单地包装了一个 VirtualDirectory 来修改它如何发送 .html 文件，提供与 inlineAssets 相同的功能。

示例代码

import 'package:angel3_framework/angel3_framework.dart';
import 'package:angel3_seo/angel3_seo.dart';
import 'package:angel3_static/angel3_static.dart';
import 'package:file/local.dart';

void main() async {
  var app = Angel()..lazyParseBodies = true;
  var fs = const LocalFileSystem();
  var http = AngelHttp(app);

  var vDir = inlineAssets(
    VirtualDirectory(
      app,
      fs,
      source: fs.directory('web'),
    ),
  );

  app.use(vDir.handleRequest);

  app.use(() => throw AngelHttpException.notFound());

  var server = await http.startServer('127.0.0.1', 3000);
  print('Listening at http://${server.address.address}:${server.port}');
}

完整示例 Demo

以下是一个更完整的例子，展示了如何同时使用 inlineAssets 和 inlineAssetsFromVirtualDirectory：

import 'dart:convert';
import 'package:angel3_framework/angel3_framework.dart';
import 'package:angel3_framework/http.dart';
import 'package:angel3_seo/angel3_seo.dart';
import 'package:angel3_static/angel3_static.dart';
import 'package:file/local.dart';
import 'package:http_parser/http_parser.dart';

void main() async {
  var app = Angel();
  var fs = const LocalFileSystem();
  var http = AngelHttp(app);

  // 包装 VirtualDirectory
  var vDir = inlineAssetsFromVirtualDirectory(
    VirtualDirectory(
      app,
      fs,
      source: fs.directory('web'),
    ),
  );

  app.fallback(vDir.handleRequest);

  // 或者直接添加响应终结器
  app.responseFinalizers.add(inlineAssets(fs.directory('web')));

  app.get('/using_response_buffer', (req, res) async {
    var indexHtml = fs.directory('web').childFile('index.html');
    var contents = await indexHtml.readAsString();
    res
      ..contentType = MediaType('text', 'html', {'charset': 'utf-8'})
      ..buffer!.add(utf8.encode(contents));
  });

  app.fallback((req, res) => throw AngelHttpException.notFound());

  var server = await http.startServer('127.0.0.1', 3000);
  print('Listening at http://${server.address.address}:${server.port}');
}