Flutter webで行ったSEO対策

2024-09-15

はじめに

このブログはFlutter webで実装されています。
また下記URLの通り、Flutter公式からちゃんとSEO対策を行いたい場合はHTMLで構築することを推奨しています。

https://docs.flutter.dev/platform-integration/web/faq#search-engine-optimization-seo

それでもFlutter webにこだわりたかった自分が行ったSEO対策を記載します。

metaタグの設定

  <title>idonun.blog</title>
  <meta name="description" content="主にiOS/Flutterを開発しているいどぬんです。趣味はカメラ（SONY α7 III）とドラム。最近ギターとベースを始めました。">

web/index.htmlのheadタグ内にtitle, descriptionを設定しています。

TitleWidgetを使用する

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Title(
      title: 'title',
      child: ~
    );
  }

Title Widgetを使用すると、titleで記載した内容にtitleタグの値が変わります。
これによりページ毎にあったタイトルをつけることが可能です。
ただしdescriptionはindex.htmlの記載のままなので、書き換える方法があったら教えていただきたいです。

Google Search Console

Google Search Consoleでindexされているかチェックしました。そうしたらブログの詳細ページはindexされていないことに気付きました。

なので下記の2つを対応しました。

1. Google Search ConsoleのURL検査を行い、index登録を行う

Google Search ConsoleのサイドバーにあるURL検査をクリック。
ブログ詳細ページのURLを入力し、まずはindexされているかチェック。indexされていないので、indexされるように登録する。

これを詳細ページ分行いました。

2. Google Search Consoleのサイトマップ設定

そもそもまだサイトマップの設定を行なっていませんでした。なので作成しました。
まずは web ディレクトリに sitemap.xml を作成します。

sitemap.xmlの書き方には下記を参考にしてみてください。(自分はブログを書くたびに sitemap.xml に記載するのは面倒だったので、自動生成するスクリプトを作成しました。)

https://digital-marketing.jp/seo/what-is-sitemapxml/

期最後本番公開を行い、 https://~/sitemap.xml でサイトマップが表示されるか確認。
もしちゃんと表示されれば、Google Search Consoleに移動し、サイドバーの「サイトマップ」をクリックします。
その後「新しいサイトマップを追加」にサイトマップのURLを入力します。

このようにすることでsitemapを見てGoogleが定期的にクロールしてくれるようです。

最後に

SEO対策をしたい場合はHTMLでと公式が言っていますが、Flutter Webでも色々とSEO対策できそうです。
これからも出来ることはやっていこうと思います。