SEO: 页面搜索引擎优化 (On Page SEO)

从宏观层面来看，页面搜索引擎优化 (On Page SEO) 指的是构成页面整体结构的标题和链接。标题表明了文档内容的重要性，而链接则将整个网络连接在一起。

标题与 H1

标题帮助用户理解页面结构以及接下来段落将要呈现的内容。它们也便于搜索引擎理解页面的哪些部分最为重要。

标题分为 1-6 级，其中 H1 通常被认为是最重要的。建议在每个页面使用 H1 标题标签。H1 应体现页面的主题内容，并与 title 标签保持相似。

function Page() {
  return <h1>您的主页标题</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 至关重要。当谷歌爬取页面时，它会爬取并跟踪此链接，而无需依赖 JavaScript。

但是，如果 Link 的子元素是包裹 a 标签的自定义组件，则必须向 Link 添加 passHref。如果您使用像 styled-components 这样的库，这一点是必要的。如果没有这个属性，a 标签将不会有 href 属性，这会影响您网站的 SEO。

如何使用 passHref：

import Link from 'next/link';
import styled from 'styled-components';
 
// 创建一个包裹 <a> 标签的自定义组件
const RedLink = styled.a`
  color: red;
`;
 
function NavLink({ href, name }) {
  // 必须向 Link 添加 passHref
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  );
}
 
export default NavLink;

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

页面搜索引擎优化 (On Page SEO)

标题与 H1

内部链接

next/link

延伸阅读

On this page