meta_seo 1.0.4

Meta SEO is package for adding meta data for html document in head tag which meta tags or meta data make search engine optimization for web apps.

Meta Seo

Flutter package for Meta SEO.

Screenshots

About:

• Meta SEO is package for adding meta data for html document in head tag which meta tags or meta data make search engine optimization for web apps.

Installation and Basic Usage

First: Add the bellow MetaSEO JS functions into web/index.html

.....
  <script>
      window.addEventListener('load', function(ev) {
      .....

  // add  MetaSEO JS functions here
  function seoNameJS(name, content) {
    if(document.querySelector("[name='"+name+"']") !== null) {
      document.querySelector("[name='"+name+"']").remove();
    }
    var meta = document.createElement('meta');
    meta.setAttribute('name', name);
    meta.setAttribute('content', content);
    document.getElementsByTagName('head')[0].appendChild(meta);
  }

  function seoPropertyJS(property, content) {
    if(document.querySelector("[property='"+property+"']") !== null) {
      document.querySelector("[property='"+property+"']").remove();
    }
    var meta = document.createElement('meta');
    meta.setAttribute('property', property);
    meta.setAttribute('content', content);
    document.getElementsByTagName('head')[0].appendChild(meta);
  }

  function seoAttributeJS(key, val) {
    if(document.querySelector("[name='"+key+"']") !== null) {
      document.querySelector("[name='"+key+"']").remove();
    }
    var meta = document.createElement('meta');
    meta.setAttribute(key, val);
    document.getElementsByTagName('head')[0].appendChild(meta);
  }
  </script>
</body>
</html>

Second: Add to pubspec.yaml:

dependencies:
  meta_seo: ^1.0.4

Then import it to your project:

import 'package:meta_seo/meta_seo.dart';

Finally add MetaSEO into your target web pages:

@override
Widget build(BuildContext context) {

  // Define MetaSEO object with optional needed attributes
  MetaSEO meta = MetaSEO(
          author: 'Eng Mouaz M AlShahmeh',
          description: 'Meta SEO Web Example',
          keywords: 'Flutter, Dart, SEO, Meta, Web'
  );

  // add meta seo data for web app
  meta.seoAuthor();
  meta.seoDescription();
  meta.seoKeywords();

  return const Scaffold(
    body: Center(child: Text('Meta SEO Web Example')),
  );
}

Other example with GoRouter package

First: The same as before

Second: Add to pubspec.yaml:

dependencies:
  meta_seo: ^1.0.4
  go_router: ^5.2.0 # add latest version

Then follow GoRouter configuration steps and latest add MetaSEO into your GoRouter as you want:

final router = GoRouter(
  initialLocation: '/',
  routes: <GoRoute>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        // Define MetaSEO object with optional needed attributes
        MetaSEO meta = MetaSEO(
                author: 'Eng Mouaz M AlShahmeh',
                description: 'First Screen',
                keywords: 'Flutter, Dart, SEO, Meta, Web');

        // add meta seo data for web app
        meta.seoAuthor();
        meta.seoDescription();
        meta.seoKeywords();

        return const FirstScreen();
      },
    ),
    GoRoute(
      path: '/second_screen',
      builder: (BuildContext context, GoRouterState state) {
        // Define MetaSEO object with optional needed attributes
        MetaSEO meta = MetaSEO(
                author: 'Eng Mouaz M AlShahmeh',
                description: 'Second Screen',
                keywords: 'Flutter, Dart, SEO, Meta, Web');

        // add meta seo data for web app
        meta.seoAuthor();
        meta.seoDescription();
        meta.seoKeywords();

        return const SecondScreen();
      },
    ),
  ],
);

Make sure to check out go_router_meta_seo_example project. If you find this package useful, star my example GitHub repository.

Thank you

Make sure to check out example project. If you find this package useful, star my GitHub repository.

Flutter plugin was developed by: Eng Mouaz M. Al-Shahmeh