HTML封装器

html_wrapper包通过将关键小部件转换为真实的HTML标签，为Flutter应用程序的搜索引擎优化（SEO）提供了一个简单的解决方案。通过将Flutter小部件渲染为真正的HTML元素，搜索引擎可以更好地理解您应用的内容，从而提高可见性和搜索排名。

特点

  • 将Flutter小部件转换为HTML标签以提高SEO。
  • 在生成SEO友好的HTML输出的同时，保留Flutter小部件的功能和样式。
  • 自定义HTML属性和标签，以符合SEO最佳实践。

入门

安装

点击此处：Pub dev

将以下依赖项添加到您的pubspec.yaml文件中

dependencies:
    html_wrapper: ^0.0.4

然后，运行flutter pub get以获取该包。

用法

  • 导入html_wrapper包：import 'package:html_wrapper/html_wrapper.dart' as wrapp;

该库易于使用，小部件的名称和行为与经典小部件相同，每个小部件的独特性在于href键的实现，该键允许点击并使用<a>标签重定向到另一个URL。

文本小部件

与真实文本小部件相比，其新颖之处在于添加了tag键，允许您选择要将文本放在哪个HTML标签中，例如h1、span、strong等。

wrapp.Text(
    'Hello Seo!',
    tag: wrapp.Tag.h1,
    style: TextStyle(
    fontFamily: 'arial',
    fontSize: MediaQuery.of(context).size.width / 6,
    color: Colors.white,
    fontWeight: FontWeight.w900),
),

图像小部件

图像的所有参数均得到处理，例如大小、拟合以及来自文件夹的URL或图像都能正确显示。

wrapp.Image(
    height: 200,
    width: 200,
    borderRadius: BorderRadius.circular(200),
    href: 'https://github.com/Antoinegtir',
    src: 'https://avatars.githubusercontent.com/u/114834504?v=4',
    fit: BoxFit.cover,
),

Robot小部件

在此示例中，我们有一个简单的布局，在屏幕中心显示文本“Hello, world!”。此外，我们还包括Robots小部件来设置用于搜索引擎爬虫的<meta>标签。

Robots小部件负责将带有指定content属性值的<meta>标签添加到HTML头部。在这种情况下，我们将content设置为“noindex, nofollow”，指示搜索引擎不应索引或跟踪该页面。

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        Text(
        'Hello, world!',
        style: TextStyle(fontSize: 24),
        ),
        SizedBox(height: 16),
        Robots(content: 'noindex, nofollow'),
    ],
),

该项目仍处于起步阶段，还有很多标签需要实现和优化，如果您想为该项目做出贡献，请随时阅读contributing.md ❤️

GitHub

查看 Github