Web Technologies

Webアプリ公開準備｜SEO対策とデプロイ前にやるべきこと

はじめに

Webアプリを公開する前に、しっかりと準備を整えることが重要です。

特に、SEO（検索エンジン最適化）対策やデプロイ時の作業をおろそかにすると、ユーザーのアクセスが少なくなったり、アプリがスムーズに動作しなかったりする可能性があります。

このガイドでは、公開前に必ず確認しておきたいSEO対策やデプロイ作業をリスト化して、成功するWebアプリ公開に向けた準備をお手伝いします。

1. HTMLの <title> と <meta> タグを最適化

まずは public/index.html に以下のようにタイトルとメタ情報を追加しましょう。

📌 例

<title>Resize Textures｜画像リサイズ・テクスチャ変換・最適化アプリ</title>
<meta name="description" content="Resize Texturesは画像を簡単にリサイズできるアプリです。テクスチャや画像を指定サイズに変換し、最適化します。GPU処理効率を向上させるPoTサイズにも対応。">
<meta name="keywords" content="画像, 変換, リサイズ, テクスチャ, 縮小, 切り取り, 最適化, ZIPダウンロード, フロントエンド, Webアプリ">
<meta name="author" content="Your Name">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Resize Textures｜画像リサイズ・テクスチャ変換・最適化アプリ">
<meta property="og:description" content="画像を指定サイズにリサイズし、PoTサイズに最適化。高速処理＆ZIPで一括ダウンロード可能。">
<meta property="og:image" content="%PUBLIC_URL%/thumbnail.png">
<meta property="og:url" content="https://yourappurl.com">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Resize Textures｜画像リサイズ・テクスチャ変換・最適化アプリ">
<meta name="twitter:description" content="画像を指定サイズにリサイズし、PoTサイズに最適化。高速処理＆ZIPで一括ダウンロード可能。">
<meta name="twitter:image" content="%PUBLIC_URL%/thumbnail.png">

📌 ポイント

  • title：アプリ名と主要キーワードを含める。
  • description：アプリの簡潔な説明にキーワードを盛り込む。
  • keywords：検索されやすい関連語句を網羅。
  • og:imageとtwitter:image：SNSでシェアされた際に表示される画像を指定。
    • アプリのロゴや代表的なスクショを使うと良い。
  • robots：Googleにクロールを許可。

2. SEO向けの見出しタグを最適化

見出しタグ（<h1>～<h6>）はSEOにおいて重要です。現在は <Typography> を使用していますが、SEOでは<h1>～<h6>が有利です。

📌 例

<Typography variant="h4" component="h1" gutterBottom>
    Resize Textures｜画像リサイズ・テクスチャ変換・最適化
</Typography>

<Typography variant="h6" component="h2">
    画像を簡単にリサイズし、最適なサイズで保存
</Typography>

✅ component="h1" と指定することでSEO効果を得られます。

3. Alt属性と画像最適化

画像に alt 属性を付けることで検索エンジンに内容を伝えます。

📌 修正例

<img src="example.jpg" alt="テクスチャ画像のリサイズ前と後の比較" />
  • alt にキーワードを含めることでSEO評価が上がります。
  • ファイル名も resize-texture-example.jpg のようにキーワードを含めると効果的。

4. robots.txt を作成

デプロイ時に public/robots.txt を追加し、検索エンジンにクロールを許可します。

📌 public/robots.txt

User-agent: *
Allow: /
Sitemap: https://yourappurl.com/sitemap.xml
  • Allow: / → 全ページクロール許可。
  • Sitemap → サイトマップを登録してクロールしやすくします。

5. パフォーマンス最適化

速度はSEOに影響します。以下を行うと良いです。

  • Lazy Loading：画像やコンポーネントを遅延読み込みすることで初回表示を高速化。
  • コードスプリッティング：React.lazy()とSuspenseを使ってコード分割。
  • 画像圧縮：imageminなどで画像サイズを圧縮。

6. SEO記事の作成

Google検索でヒットさせるために、ブログ記事を書くのも効果的です。

📌 記事案

  • 「画像をリサイズする方法｜Resize Texturesで簡単に変換」
  • 「ゲーム用テクスチャを最適サイズにリサイズ｜PoTサイズの重要性」
  • 「Web表示を高速化！画像を最適化する手順」

7. Firebase Hostingの設定

Firebaseの設定ファイル（firebase.json）を、提供された修正例に基づいて以下のように更新することができます。これにより、キャッシュ設定やSEO対策、SPA対応が適用されます。

修正後の firebase.json

{
  "emulators": {
    "dataconnect": {
      "dataDir": "dataconnect/.dataconnect/pgliteData"
    }
  },
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {
        "source": "**/*.@(jpg|jpeg|png|gif|svg|webp)",
        "headers": [
          { "key": "Cache-Control", "value": "max-age=31536000" }
        ]
      }
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

修正内容の説明

  1. キャッシュ設定：
    • 画像ファイル（jpg, jpeg, png, gif, svg, webp）に対して、最大1年間（max-age=31536000）キャッシュを適用する設定を追加しました。これにより、これらのファイルがブラウザに長期間キャッシュされ、再読み込み時の高速表示が可能になります。
  2. SPA対応：
    • rewritesセクションを追加し、全てのリクエスト（source: "**"）を/index.htmlにリダイレクトする設定を追加しました。これにより、Single Page Application（SPA）のルーティングが正しく動作します。
  3. その他の設定：
    • public: "build"：ビルドされたアプリの公開ディレクトリを指定しています。buildディレクトリに静的ファイルが出力されることを前提としています。
    • ignoreセクション：firebase.jsonや隠しファイル、node_modulesをデプロイ対象から除外しています。

このように修正することで、キャッシュ管理やSPAのルーティング、その他の最適化が行われます。

8. Google Search Consoleに登録

デプロイ後は Google Search Console に登録しましょう。

  • サイトマップを送信してインデックスを促進。
  • https://yourappurl.com/sitemap.xml を送信。

9. LighthouseでSEOチェック

デプロイ後に Google Chrome DevToolsのLighthouse を使ってSEOスコアをチェックしましょう。

  • Ctrl + Shift + I → Lighthouseタブ → 「SEO」を選択 → 「分析」を実行。

まとめ：今すぐやるべきSEO対策

✅ <title>と<meta>タグでキーワードを盛り込む
✅ 見出しタグに<h1>を使用
✅ 画像のalt属性とファイル名にキーワードを含める
✅ robots.txtとサイトマップを追加
✅ Firebaseのキャッシュ設定で高速化
✅ Google Search Consoleに登録

これで 「画像」「変換」「リサイズ」「テクスチャ」「縮小」「切り取り」「最適化」 といったキーワードで上位表示されやすくなります！🔥

-Web Technologies