Flutter on the Webでindex.htmlやOGPを変更

この記事は、「Flutter Advent Calendar 2021」に投稿した「Flutter on the WebをFirebase Hostingで公開した」の一部となります。

webフォルダ

このwebフォルダ自体がビルド時のベースとして利用され、build/webフォルダへ出力されます。

index.html のカスタマイズ

web/index.htmlをカスタマイズします。
アイコン類は、web/icons/*、web/favicon.pngを差し替えればこちらもビルド時にbuild/webフォルダへ複製されます。

index.html

  <meta name="description" content="ウマ娘の銘と魂を受け継ぐ源泉となった異世界（現実世界）の競走馬たちは実際のレースで如何に競い合ったのかをご覧下さい。">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="ウマ娘ダイアグラム">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

manifest.json (ウェブアプリマニフェスト)

web/manifest.jsonをカスタマイズします。

manifest.json

{
    "name": "ウマ娘ダイアグラム",
    "short_name": "ウマ娘ダイアグ",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#99cc33",
    "theme_color": "#99cc33",
    "description": "Uma Diagram database.",
    "orientation": "portrait-primary",
    "prefer_related_applications": false,
    "icons": [
        {
            "src": "icons/Icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "icons/Icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

ウェブアプリマニフェスト
https://developer.mozilla.org/ja/docs/Web/Manifest

ウェブアプリマニフェストを設定すると、Android等の対応ブラウザで「ホーム画面にアプリを追加」とサジェッションされるようになります。

OGP (Open Graph Protcol) と Twitter Card を設定

index.html

  <!-- Twitter Card AND OGP -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@umadiagram" />
  <meta name="twitter:creator" content="@rukari" />
  <meta property="og:title" content="ウマ娘ダイアグラム | 異世界（現実世界）での競走馬たちの系譜" />
  <meta property="og:description" content="銘と魂を受け継ぐ源泉となった異世界（現実世界）の競走馬たちは実際のレースで如何に競い合ったのか…" />
  <meta property="og:image" content="https://images.umadiagram.com/summary.png" />

ただしこのTwitter Cardの設定は、Flutter webアプリがPWAなのでURLによるルーティングを設定しても全ページで固定化されてしまいます。
これは別途「Firebase FunctionsでHTML出力をカスタマイ」の記事で説明します。