Vue.js / Nuxt.js

Nuxt での SEO

メタタグ、useHead、useSeoMeta、structured data、sitemap、robots.txt、Open Graph、ソーシャル共有

20 面接問題·
Senior
1

Nuxt における useHead と useSeoMeta の主な違いは何ですか?

回答

useHead は HTML head のすべてのタグ(title、script、link、style、meta)を管理する汎用的なコンポーザブルであるのに対し、useSeoMeta は厳格な TypeScript 型付けを備えた SEO 用 meta タグ専用のものです。useSeoMeta は og:image や twitter:card といった SEO プロパティに対してより優れた型安全性と自動検証を提供しますが、useHead では meta タグを手動で設定する必要があります。SEO メタデータには useSeoMeta を、その他の head 要素には useHead を使うのが望ましいです。

2

canonical タグとは何で、なぜ SEO にとって重要なのですか?

回答

canonical タグ(rel=canonical)は、似た内容や同一の内容を持つ複数の URL が存在する場合に、どれがページの主要バージョンであるかを検索エンジンに伝えます。これにより重複コンテンツのペナルティを回避し、PageRank を canonical URL に集約します。Nuxt では、canonical タグはデフォルトで各ページに対して現在の URL を指すように自動生成されます。useSeoMeta で canonical: false または特定の URL を指定して無効化やカスタマイズが可能です。ページネーション、フィルター、多言語バージョンを持つサイトに不可欠です。

3

Nuxt で crawling を許可しつつ、特定のページのインデックスを無効にするにはどうすればよいですか?

回答

useSeoMeta で robots: 'noindex, follow' を使用すると、クローラーはページを訪問してリンクをたどることができますが、検索結果へのインデックス登録は防がれます。この方法は、すでにインデックスされているページに対しては robots.txt よりも望ましいです。robots.txt は crawling をブロックしますが、ページをインデックスから削除しないためです。代替手段として、集中管理のために defineRouteRules で robots: 'noindex' を使用できます。crawling を完全にブロックするには Disallow を含む robots.txt が必要ですが、ページごとの柔軟性は低くなります。

4

良いソーシャル共有のために不可欠な Open Graph プロパティは何ですか?

5

外部 API から Nuxt で動的な sitemap を生成するにはどうすればよいですか?

+17 面接問題

次の面接に向けてVue.js / Nuxt.jsをマスター

すべての問題、flashcards、技術テスト、コードレビュー演習、面接シミュレーターにアクセス。

無料で始める