GitLocker: The Coding Marketplace

Description:

meta seo

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 to pubspec.yaml:
dependencies:
meta_seo: ^3.0.9
copied to clipboard
Second: import it to your project:
import 'package:meta_seo/meta_seo.dart';
import 'package:flutter/foundation.dart';
copied to clipboard
Then add the config MetaSEO method before the running of the Flutter app into main.dart file:
void main() {
// It is required to add the following to run the meta_seo package correctly
// before the running of the Flutter app
if (kIsWeb) {
MetaSEO().config();
}
runApp(const MyApp());
}
copied to clipboard
Finally add MetaSEO into your target web pages:
@override
Widget build(BuildContext context) {

// Add MetaSEO just into Web platform condition
if(kIsWeb) {
// Define MetaSEO object
MetaSEO meta = MetaSEO();
// add meta seo data for web app as you want
meta.author(author: 'Eng Mouaz M AlShahmeh');
meta.description(description: 'Meta SEO Web Example');
meta.keywords(keywords: 'Flutter, Dart, SEO, Meta, Web');
}

return const Scaffold(
body: Center(child: Text('Meta SEO Web Example')),
);
}
copied to clipboard
Other example with GoRouter package #
First: Add to pubspec.yaml:
dependencies:
meta_seo: ^3.0.9
go_router: ^5.2.0 # Add the latest version
copied to clipboard
Second: The same as before and add the config MetaSEO method before the running of the Flutter app into main.dart file:
void main() {
// It is required to add the following to run the meta_seo package correctly
// before the running of the Flutter app
if (kIsWeb) {
MetaSEO().config();
}
runApp(const MyApp());
}
copied to clipboard
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) {
// Add MetaSEO just into Web platform condition
if(kIsWeb) {
// Define MetaSEO object
MetaSEO meta = MetaSEO();
// add meta seo data for web app as you want
meta.ogTitle(ogTitle: 'First Screen');
meta.description(description: 'First Screen');
meta.keywords(keywords: 'Flutter, Dart, SEO, Meta, Web');
}

return const FirstScreen();
},
),
GoRoute(
path: '/second_screen',
builder: (BuildContext context, GoRouterState state) {
// Add MetaSEO just into Web platform condition
if(kIsWeb) {
// Define MetaSEO object
MetaSEO meta = MetaSEO();
// add meta seo data for web app as you want
meta.ogTitle(ogTitle: 'Second Screen');
meta.description(description: 'Second Screen');
meta.keywords(keywords: 'Flutter, Dart, SEO, Meta, Web');
}

return const SecondScreen();
},
),
],
);
copied to clipboard
Extended MetaSEO tags #
If you want to use Open Graph or Twitter Card meta tags
Note: You must be in live server not as a local host.
Note: The package delete any duplicated meta tags and keep the latest in order.
The same as before and if you want to use any tags does not exist into the main package
methods just add extended tags as the below:
@override
Widget build(BuildContext context) {

// Add MetaSEO just into Web platform condition
if(kIsWeb) {
// Define MetaSEO object
MetaSEO meta = MetaSEO();
// add meta seo open graph tags as you want
meta.facebookAppID(facebookAppID: 'your_app_id');
meta.ogTitle(ogTitle: 'Example Screen');
meta.ogDescription(ogDescription: 'Example Screen Description');
meta.ogImage(ogImage: 'https://example.com/example.png');

// here you can add any tags does not exist in the package as this
meta.propertyContent(property: 'og:site_name', content: 'example');

// or if you want to add twitter card meta tags just as the following
meta.twitterCard(twitterCard: TwitterCard.summaryLargeImage);
meta.twitterTitle(twitterTitle: 'Example Screen');
meta.twitterDescription(twitterDescription: 'Example Screen Description');
meta.twitterImage(twitterImage: 'https://example.com/example.png');

// here you can add any tags does not exist in the package as this
meta.nameContent(name: 'twitter:site', content: '@mouaz_m_shahmeh');
}

return const Scaffold(
body: Center(child: Text('Extended Meta SEO Web Example')),
);
}
copied to clipboard
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