页面 SEO

从高级角度来看，页面 SEO 指的是构成页面整体结构的标题和链接。标题指示文档中的重要性，链接将网络连接在一起。

标题和 H1

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

标题从 1 到 6，标题 1 通常被认为是最重要的。建议在每个页面中使用 H1 标题标签。H1 应该表示页面内容，并与你的title标签类似。

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

内部链接

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

谷歌在发明 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 标签的自定义组件，则必须将passHref 添加到Link 中。如果你使用像 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 有一个规则可以防止这种情况发生。