webify_toolkit

pub package likes pub points popularity License: MIT

Flutter Web SEO toolkit for meta tags, structured data (JSON-LD), sitemap generation, social preview cards, and analytics integration.

Why webify_toolkit?

Flutter Web UI is rendered mainly in a <canvas>, which limits crawler visibility of visual content. webify_toolkit adds crawler-visible metadata in <head> and optional fallback content.

With webify_toolkit, you can:

  • Set per-page <title>, description, canonical, Open Graph, and Twitter cards
  • Add Schema.org JSON-LD for rich results
  • Generate sitemap.xml and robots.txt
  • Track route-based page views and analytics events
  • Keep non-web platforms safe via no-op behavior

Features

  • Meta tags: title, description, keywords, author, robots, canonical
  • Open Graph + Twitter/X cards
  • Structured data schemas:
    • OrganizationSchema, ArticleSchema, ProductSchema, BreadcrumbSchema
    • FaqSchema, LocalBusinessSchema, PersonSchema, EventSchema, WebsiteSchema
    • CustomSchema, SchemaGraph
  • Sitemap and robots generators (SitemapGenerator, SitemapIndex, RobotsTxt)
  • Navigation SEO utilities (SeoRouteObserver, SeoAwarePage)
  • Widgets: SeoPage, SeoHead, SeoText, SeoImage, SeoLink
  • Debug/audit helpers: SeoDebugOverlay, SeoValidator, SchemaValidator
  • Web analytics adapters (via webify_web.dart): GA4Provider, GTMProvider, PlausibleProvider

Installation

dependencies:
  webify_toolkit: ^0.1.0

Then:

flutter pub get

Quick Start

1) Initialize once

import 'package:flutter/widgets.dart';
import 'package:webify_toolkit/webify.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  Webify.initialize(
    config: WebifyConfig(
      baseUrl: 'https://myapp.com',
      defaultTitle: 'My App',
      titleTemplate: '%s | My App',
      defaultDescription: 'My Flutter Web app',
      defaultOgImage: 'https://myapp.com/og-default.png',
      twitterSite: '@myapp',
    ),
  );

  runApp(const MyApp());
}

2) Wrap a page with SeoPage

import 'package:flutter/material.dart';
import 'package:webify_toolkit/webify.dart';

class AboutPage extends StatelessWidget {
  const AboutPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const SeoPage(
      title: 'About',
      description: 'Learn about our company and mission',
      canonicalUrl: 'https://myapp.com/about',
      child: Scaffold(
        body: Center(child: Text('About page')),
      ),
    );
  }
}

Structured Data Example

SeoPage(
  title: 'Flutter Widget Pro',
  description: 'Premium widget collection',
  structuredData: [
    ProductSchema(
      name: 'Flutter Widget Pro',
      description: 'Premium widget collection',
      image: 'https://myapp.com/product.png',
      brand: 'My Brand',
      offer: ProductOffer(
        price: '29.99',
        currency: 'USD',
        availability: ProductAvailability.inStock,
      ),
    ),
  ],
  child: const ProductPage(),
)

Web Analytics Providers

For GA4/GTM/Plausible, import the web-specific barrel:

import 'package:webify_toolkit/webify_web.dart';

Webify.initialize(
  config: WebifyConfig(
    analyticsProviders: [
      GA4Provider(measurementId: 'G-XXXXXXXXXX'),
      GTMProvider(containerId: 'GTM-XXXXXXX'),
      PlausibleProvider(domain: 'myapp.com'),
    ],
  ),
);

Sitemap and Robots

final sitemap = SitemapGenerator(
  baseUrl: 'https://myapp.com',
  entries: [
    SitemapEntry(path: '/', priority: 1.0, changeFrequency: ChangeFrequency.daily),
    SitemapEntry(path: '/products', priority: 0.9, changeFrequency: ChangeFrequency.weekly),
  ],
);

final sitemapXml = sitemap.generate();

final robots = RobotsTxt(
  baseUrl: 'https://myapp.com',
  rules: [RobotsRule(userAgent: '*', allow: ['/'])],
  sitemaps: ['/sitemap.xml'],
);

final robotsTxt = robots.generate();

CLI:

dart run tool/webify_generate.dart

Common API

Area Primary APIs
Core Webify, WebifyConfig, RendererDetector
Widgets SeoPage, SeoHead, SeoText, SeoImage, SeoLink
Structured data ProductSchema, ArticleSchema, FaqSchema, OrganizationSchema, SchemaGraph
Sitemap SitemapGenerator, SitemapIndex, RobotsTxt
Navigation SeoRouteObserver, SeoAwarePage, HistoryManager
Validation SeoValidator, SchemaValidator

CLI Tools

Run SEO audit:

dart run tool/webify_audit.dart

Example App

A complete working example is included in /example.

Platform Behavior

webify_toolkit is safe on all Flutter platforms. On non-web targets (Android, iOS, macOS, Linux, Windows), web-specific operations are no-op by design.

Publishing Checklist (pub.dev)

Before publishing:

flutter analyze
flutter test
dart pub publish --dry-run

☕ Support

If this package saves you time, consider buying me a coffee!

Buy Me A Coffee

Contributing

Issues and pull requests are welcome.

License

MIT. See LICENSE.

Libraries

webify
Flutter Web SEO Toolkit
webify_web
Web-specific exports for webify_toolkit.