コース概要

セッション1: レンダリング戦略

  • 問題: GooglebotがしばしばJavaScriptのコンテンツを「見逃す」理由。
  • 解決策: nuxt.config.tsでハイブリッドレンダリングを設定します。特定のルートルール(ISR vs SWR)を設定して、製品ページがボットに対して静的HTMLとして提供されるようにします。
  • 結果: Curlで確認されたクローラブルなページソース。

セッション2: メタデータと可視性

  • 問題: シングルページアプリ(SPA)がしばしばサイト全体で1つのタイトルタグを共有する。
  • 解決策: useSeoMetaとuseServerSeoMetaを使用して、動的なタイトル、説明文、カノニカルURLをプログラム的に生成します。
  • Social Fix: WhatsAppやLinkedInでリンクが正しく表示されるように、壊れたOpen Graph(OG)タグのデバッグ。

セッション3: テクニカル基礎とインデックス化

  • 問題: 検索エンジンが見つけられない孤立したページ。
  • 解決策: @nuxtjs/sitemapをインストールして設定し、動的なルート用のXMLサイトマップを自動生成します。
  • パフォーマンスの解決策: <NuxtImg>の実装と明確な寸法の定義で累積レイアウトシフト(CLS)を解消し、インデックス化を高速化します。

セッション4: 実行可能な監査、防衛、ハイドレーション

  • 深掘り: 「ハイドレーションミスマッチ」のデバッグ—Nuxtでパフォーマンスを殺す最大のエラー。
  • 監査: 固定されたプロジェクト上でライブLighthouse監査を実行します。
  • Schema.org: 「リッチスニペット」(検索結果内のスター/レビュー)のためのJSON-LD構造化データを注入します。

要求

  • 参加者は必須でVue.jsとNuxtの基本的な知識を持つ必要があります。

対象者

  • 開発者
 7 時間

参加者の人数


参加者1人あたりの価格

お客様の声 (5)

今後のコース

関連カテゴリー