当我们在 NextJs 应用程序中更改路由时,后续页面是否也可抓取(SEO)?
Are subsequent pages also crawl-able (SEO) when we change route in NextJs application?
我知道当访问 NextJs 页面时,服务器 (SSR) 呈现并发送 HTML 以及必要的 javascript 以在客户端补充页面。这使页面 SEO 友好。
但是当我们改变路由(比如“/about”)时,它实际上并没有发送 HTML 文件而只是 about.js (Content-Type: application/javascript) 文件(并且查看文件看起来像 React VirtualDOM,但我不确定)。这画在 DOM 上,我们看到关于页面。
那么,我的问题是-
- 这是关于页面 SEO 友好的吗? (因为它不是 HTML 文件)
- 如果不是,那是否意味着只有初始页面对 SEO 有利而不是后续路由?
我假设您具体询问的是 next/link
组件的客户端转换。
从历史上看,让 SEO 直接在您的 SSR 生成的 HTML 中访问您的所有内容非常重要,因为爬虫不会执行 javascript 并且除了什么之外什么也看不到直接从服务器返回。如今,像 Google 这样的一些爬虫可以完全执行 javascript,因此可以看到用户在浏览器中看到的任何内容。
你可以争辩说并不是所有的爬虫都这样做,而且 SSR 仍然有优势。幸运的是,NextJs 为您提供了两全其美的方法:
当您使用 next/link
组件时,例如
<Link href='/about'>About Us</Link>
那么您从服务器端呈现的结果标记将是
<a href="/about">About Us</a>
如果您点击 link,nextJS 会阻止浏览器向 /about 发出请求(使用 event.preventDefault();
)并使用内置路由器处理该操作以呈现新页面在客户端上。 但是,如果您直接访问 /about(将其输入到浏览器的 url 栏中),那么您将获得服务器端为其生成的响应。
有了这个:
- 执行 javascript 并通过模拟点击事件进行导航的爬虫也能够读取生成的客户端呈现内容。
- 不执行 javascript 且仅将您的内容视为“纯文本”的抓取工具仍然可以理解您的
<a>
标签并通过发出新请求来关注它们。在这种情况下不会发生客户端转换,结果将在服务器端呈现。
也就是说,Google关于如何 make your links crawlable 的文档似乎暗示它不会模拟 <a>
标签上的点击事件,而是对url 它在 href 属性中找到:
Google cannot follow links without an href tag or other tags that perform a links because of script events. [...] Ensure that the URL linked to by your tag is an actual web address that Googlebot can send requests to [...]
总的来说,NextJs 路由是 SEO 友好的,无论它是如何抓取的。
我知道当访问 NextJs 页面时,服务器 (SSR) 呈现并发送 HTML 以及必要的 javascript 以在客户端补充页面。这使页面 SEO 友好。
但是当我们改变路由(比如“/about”)时,它实际上并没有发送 HTML 文件而只是 about.js (Content-Type: application/javascript) 文件(并且查看文件看起来像 React VirtualDOM,但我不确定)。这画在 DOM 上,我们看到关于页面。
那么,我的问题是-
- 这是关于页面 SEO 友好的吗? (因为它不是 HTML 文件)
- 如果不是,那是否意味着只有初始页面对 SEO 有利而不是后续路由?
我假设您具体询问的是 next/link
组件的客户端转换。
从历史上看,让 SEO 直接在您的 SSR 生成的 HTML 中访问您的所有内容非常重要,因为爬虫不会执行 javascript 并且除了什么之外什么也看不到直接从服务器返回。如今,像 Google 这样的一些爬虫可以完全执行 javascript,因此可以看到用户在浏览器中看到的任何内容。
你可以争辩说并不是所有的爬虫都这样做,而且 SSR 仍然有优势。幸运的是,NextJs 为您提供了两全其美的方法:
当您使用 next/link
组件时,例如
<Link href='/about'>About Us</Link>
那么您从服务器端呈现的结果标记将是
<a href="/about">About Us</a>
如果您点击 link,nextJS 会阻止浏览器向 /about 发出请求(使用 event.preventDefault();
)并使用内置路由器处理该操作以呈现新页面在客户端上。 但是,如果您直接访问 /about(将其输入到浏览器的 url 栏中),那么您将获得服务器端为其生成的响应。
有了这个:
- 执行 javascript 并通过模拟点击事件进行导航的爬虫也能够读取生成的客户端呈现内容。
- 不执行 javascript 且仅将您的内容视为“纯文本”的抓取工具仍然可以理解您的
<a>
标签并通过发出新请求来关注它们。在这种情况下不会发生客户端转换,结果将在服务器端呈现。
也就是说,Google关于如何 make your links crawlable 的文档似乎暗示它不会模拟 <a>
标签上的点击事件,而是对url 它在 href 属性中找到:
Google cannot follow links without an href tag or other tags that perform a links because of script events. [...] Ensure that the URL linked to by your tag is an actual web address that Googlebot can send requests to [...]
总的来说,NextJs 路由是 SEO 友好的,无论它是如何抓取的。