コース概要

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

  • 問題: GooglebotがJavaScriptコンテンツを「見ることができない」理由。

  • 解決策: nuxt.config.tsの設定でハイブリッドレンダリングを構成します。具体的なルート規則(ISR vs SWR)を設定して、製品ページがボット向けに静的HTMLとして提供されるようにします。

  • 結果: Curlによって確認されたクロール可能なページソース。

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

  • 問題: 単一ページアプリケーション(SPA)は、サイト全体で同じタイトルタグを共有することがよくあります。

  • 解決策: useSeoMetaとuseServerSeoMetaを使用して、動的なタイトル、説明文、およびカノニカルリンクをプログラムで生成します。

  • ソーシャル修正: 破損したOpen Graph(OG)タグのデバッグを行い、WhatsAppやLinkedInでのリンク表示を正しくします。

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

  • 問題: 検索エンジンが見つけることができない孤立したページ。

  • 解決策: @nuxtjs/sitemapをインストールして設定し、動的ルート用のXMLサイトマップを自動生成します。

  • パフォーマンス修正: <NuxtImg>の実装と明確なサイズの定義により、Cumulative Layout Shift(CLS)を解決し、インデックス化速度を向上させます。

セッション4: 审査、防御とハイドレーション

  • 深堀: 「ハイドレーションの不一致」— Nuxtでパフォーマンスを殺す最大のエラーをデバッグします。

  • 審査: 修正済みプロジェクトに対するライブLighthouse審査の実施。

  • Schema.org: 「リッチスニペット」(検索結果での星やレビュー)のためにJSON-LD構造化データを注入します。

要求

  • 参加者はVue.jsとNuxtの基本的な知識を持っている必要があります。

対象者

  • 開発者
 7 時間

参加者の人数


参加者1人当たりの料金

お客様の声 (5)

今後のコース

関連カテゴリー