お問い合わせ

コース概要

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

  • 問題点: GooglebotがJavaScriptコンテンツを正しく「認識」できない理由。
  • 解決策: ハイブリッドレンダリングのためにnuxt.config.tsを設定します。ISRとSWRの具体的なルーティングルールを定め、プロダクトページをボット向けに静的HTMLとして提供できるようにします。
  • 成果物: Curlを使用して確認できるクロール可能なページソース。

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

  • 問題点: スパークラシングアプリ(SPA)では、サイト全体で1つのタイトルタグしか共有されていないことが多い。
  • 解決策: useSeoMetaおよびuseServerSeoMetaを実装し、動的なタイトル、説明文、カノニカルURLをプログラム的に生成します。
  • ソーシャル対策: WhatsAppやLinkedInでリンクが正しく表示されるよう、壊れたOpen Graph(OG)タグのデバッグを行います。

セッション3:技術的基盤とインデックス化

  • 問題点: 検索エンジンが検出できない孤立したページ(オーファンページ)。
  • 解決策: @nuxtjs/sitemapをインストール・設定し、動的ルートに対してXMLサイトマップを自動生成します。
  • パフォーマンス対策: <NuxtImg>を実装し、明示的な寸法を定義することで累積レイアウトシフト(CLS)を解消し、インデックス化の高速化を図ります。

セッション4:監査、防御およびハイドレーション

  • 詳細な掘り下げ: パフォーマンスを著しく低下させる最も一般的なエラーである「ハイドレーションミスマッチ」のデバッグ。
  • 監査: 修正済みのプロジェクトに対してライブLighthouse監査を実行します。
  • Schema.org: 「リッチスニペット」(検索結果におけるスターやレビューなど)のためにJSON-LD構造化データを入力します。

要求

  • 参加者は必須としてVue.jsおよびNuxtの基礎知識を持っていること。

受講対象者

  • 開発者
 7 時間

参加者の人数


参加者1人あたりの価格

お客様の声 (2)

今後のコース

関連カテゴリー