页面SEO

从宏观层面讲，页面SEO指的是构成页面整体结构的标题和链接。标题表示文档的重要性，链接将网页连接在一起。

标题和H1

标题有助于用户理解页面的结构以及接下来的段落内容。它们还有助于搜索引擎理解页面中最重要的部分。

标题从1到6，其中H1被认为是优先级最高的。建议在每个页面中使用H1标题标签。H1应代表页面的主要内容，并与您的title标签相似。

function Page() {
  return <h1>Your Main Page Heading</h1>;
}

内部链接

互联网由链接连接。没有从一个网站到另一个网站的链接，互联网可能就不复存在。获得更多链接的网站往往代表着更受用户信任的网站。

Google通过发明PageRank算法开创了这一原则。

PageRank算法从宏观层面看，是一个遍历数据库中所有链接的算法，并根据域名获得的链接数量（数量）和来自哪些域名（质量）对域名进行评分。来自垃圾网站的大量链接很可能价值甚微。

然而，来自大型国家新闻网站的链接对于搜索引擎来说可能非常有价值。这就是为什么链接很重要，您应该始终在页面内部和外部网站之间都包含它们。链接始终需要使用href才能用于PageRank计算。

next/link

Next.js 提供了Link 组件，可以实现路由之间的客户端跳转。一个简单的用例会像下面这样：

function NavLink({ href, name }) {
  return (
    <Link href={href}>
      <a>{name}</a>
    </Link>
  );
}
 
export default NavLink;

href 属性是必需的，它会正确地将链接添加到锚点标签中，这对于 SEO 至关重要。当 Google 抓取页面时，它会抓取并遵循此链接，而无需依赖 JavaScript。

但是，如果 Link 的子元素是包裹着 a 标签的自定义组件，则必须向 Link 添加 passHref。如果您使用 styled-components 等库，这是必需的。没有它，a 标签将没有 href 属性，这将影响您网站的 SEO。

如何使用 passHref

import Link from 'next/link';
import styled from 'styled-components';
 
// This creates a custom component that wraps an <a> tag
const RedLink = styled.a`
  color: red;
`;
 
function NavLink({ href, name }) {
  // Must add passHref to Link
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  );
}
 
export default NavLink;

如果您使用 ESLint，Next.js 有一条规则来防止这种情况发生。

延伸阅读

• Next.js：链接
• Next.js：eslint-plugin-next