Next.js页面源码不显示菜单链接 谷歌爬虫无法抓取如何解决

你的链接无法出现在初始页面源码、不能被谷歌爬虫抓取，核心原因是组件被错误标记为客户端动态渲染组件，Next.js不会把客户端动态渲染的内容注入到首屏返回的静态HTML中，爬虫拿到首屏HTML时找不到对应链接自然无法抓取：

• 代码中导入了未使用的useState，Next.js会将存在React客户端Hook导入的组件默认判定为客户端组件，跳过服务端预渲染逻辑
• 你导入了Next.js内置的Link组件但未使用，原生<a>标签在客户端组件中只会在JS执行完成后才挂载到DOM，不会出现在初始源码中

1. 清理无用客户端标识 #

删除未使用的useState导入，避免组件被误判为客户端组件：

// 原代码：import React, { useState } from "react";
// 修改为：
import React from "react";
import Link from "next/link";

如果你使用Next.js 17及以上版本，甚至可以省略React的显式导入。

2. 用Next.js的Link组件替换所有原生a标签 #

Next.js的Link组件支持服务端预渲染，只要组件在服务端解析，所有链接地址都会被直接写入初始HTML源码，替换写法如下（Pages Router版本）：

const MegaMenuSublist = (props) => {
  return (
    <React.Fragment>
      {props.mainCategory == "digital" && (
        <div className={Styles.CategoryOptionsList}>
          <div className={Styles.CategorySubListHeadline}>
            <Link href="/main-category/digital/">
              <a>
                <svg
                  className={Styles.SubListHeadlineChevLeft}
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M15 19l-7-7 7-7"
                  />
                </svg>
                all cat
              </a>
            </Link>
          </div>
          <ul>
            <li className={Styles.SubListTitle}>
              <Link href="/category/mobile-accessories/">
                <a>mobile-accessories</a>
              </Link>
            </li>
            <li className={Styles.SubListItem}>
              <Link href="/category/cell-phone-pouch-cover/">
                <a>cell-phone-pouch-cover</a>
              </Link>
            </li>
            <li className={Styles.SubListItem}>
              <Link href="/category/power-bank/">
                <a>power-bank</a>
              </Link>
            </li>
            <li className={Styles.SubListItem}>
              <Link href="/category/cell-phone-holder/">
                <a>cell-phone-holder</a>
              </Link>
            </li>
          </ul>
        </div>
      )}
    </React.Fragment>
  )
}

如果你使用Next.js 13+ App Router，Link组件内不需要嵌套a标签，直接把文本、SVG等内容放在Link标签内部即可。

3. 避免给菜单组件加客户端渲染指令 #

不要给MegaMenuSublist组件以及引用它的父级菜单组件加'use client'指令，保持组件为服务端组件，构建时Next.js会直接把所有链接渲染到首屏HTML中。

4. 验证方法 #

部署修复后的代码，在页面右键选择「查看网页源代码」，直接搜索/main-category/digital/路径，如果能在原始HTML中找到对应a标签，就说明谷歌爬虫可以正常识别抓取。

内容的提问来源于stack exchange，提问作者m m