OGPなどのmetaタグの設定
OGPやdescriptionを始めとしたmetaタグが設定できるパッケージはいくつかありますが（これとか）、OGPが有効なSNSの多くはWebAssemblyに対応していないので上手く機能しません。
なので、index.htmlにmetaタグを直接記述する必要があります。
Flutter Web 上のページ毎に異なるmetaタグを設定したい場合は、index.htmlのmetaタグをページに合わせて変える必要があります。
方法は多岐に渡りますが、Flutterとは離れる内容なので大まかな一例を書きます。
- Cloudflare Workers などのサーバーレスで処理が行えるサービスでindex.htmlを書き換え
いわゆる動的OGPです。この記事がイメージしやすいかも - PHP、Ruby、Python、Go、Rustなどのサーバーサイド言語を用いてindex.htmlを動的に出力する
タイトルの設定
何も設定せずに Flutter Web で公開すると、ページ名が空の状態でGoogle検索などの検索結果に載ってしまいます。
MaterialAppによる設定
MaterialApp(title: "ページタイトル", ...
もしくは
MaterialApp(onGenerateTitle: (context) => "ページタイトル", ...
Titleによる設定
Titleウィジットで各ページを囲います。
colorの指定も必須で、iOSの Mobile Safari ならステータスバーの色に影響します。
Title(
color: Theme.of(context).primaryColor,
title: "ページタイトル",
child: Scaffold( ...
MaterialAppにしろTitleにしろ、設定したタイトルはAndroidアプリのタスク一覧にも表示されるのでご注意ください。
基本的にPlatform.isAndroidやkIsWebでタイトルを出し分けることが多いと思います。
また、検索エンジンによってはWebAssemblyに対応していなかったり、対応していても Flutter Web の読み込みが間に合わなかったりする場合があるので、index.htmlのtitleタグにも記述しておくと安全です。
Flutter Web におけるSEO（Google検索）
Google検索はWebAssemblyにも対応しているので、ページ表示されるまでに時間がかかりすぎなければ問題なく検索結果に載ります。
ただ、公開したてのサイトをPageSpeed Insightsで確認した時は真っ白なページだと判断されました。
パフォーマンスが100点だったのでそもそも描画が試みられていないようでした。
一週間ほどで Flutter Web で描画されたページのスクリーンショットが表示されるようになり、パフォーマンスも相応の点数になりました。
Flutter Web は現時点だと最低でも数MBのファイルをダウンロードしてからでないと表示されない関係上、SEO評価は低くなります。今後のバージョンアップに期待したいですね。
備考
本記事は以下の環境で検証しました
Flutter 3.19.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7482962148 (9 days ago) • 2024-02-27 16:51:22 -0500
Engine • revision 04817c99c9
Tools • Dart 3.3.0 • DevTools 2.31.1
Discussion