Nextjs SEO

date
Nov 13, 2024
slug
nextjs-seo
status
Published
tags
Website
type
Post
URL
summary
nextjs 的 seo 优化
搜索系统的工作流程
  1. crawling
  1. indexing
  1. rendering
  1. ranking

crawling阶段

状态码

  • 200状态码表示请求成功，是页面被Google索引的必要条件。
  • 301/308状态码用于永久重定向，Next.js默认使用308。
  • 302状态码用于临时重定向，但在大多数情况下应该使用301。
  • 404状态码表示请求的资源未找到，Next.js会自动处理不存在的URL。
  • 410状态码用于表示资源永久删除，告知搜索引擎不要再抓取该内容。
  • 500状态码表示服务器错误，Next.js允许创建自定义500错误页面。
  • 503状态码适用于网站长时间停机的情况，有助于维持搜索排名。

robots.txt

告诉搜索引擎可以爬取哪些页面，或者不能爬取哪些页面
nextjs 中，创建一个在根目录

siteMap

站点地图是与 Google 沟通的最简单方式。它们指示属于您网站的 URL 以及更新时间，以便 Google 可以轻松检测新内容并更有效地抓取您的网站。
  • 手动创建
  • 自动创建，利用getServerSideProps

Special Tags

robots 标签可能是您将看到的最常见的标签。默认情况下它会有 index 的值，follow 所以不需要指定，all 也是一个有效的替代版本
完整的指令列表：https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives
  • 如何在页面使用这些标签

Canonical Tags

规范 URL 是搜索引擎认为在您网站上的一组重复页面中最具代表性的页面的 URL，例如电子商务商店允许通过example.com/products/phone和 example.com/phone 访问产品，对于谷歌来说，会对这种重复的 url 进行降级处理
使用 canonical 来防止检测到我们拥有的重复内容。如果我们决定应该考虑https://example.com/products/phone 进行排名，我们将创建一个 canonical 标签：
  • Example

Rendering and Ranking

渲染策略

  • SSG
    • 静态站点生成是在构建时生成 HTML 的位置。然后，此 HTML 将用于每个请求。静态站点生成可能是 SEO 的最佳渲染策略类型，因为你不仅在页面加载时拥有所有 HTML，因为它是预先渲染的，而且还有助于提高页面性能——现在是 SEO 的另一个排名因素。
  • SSR
    • 与 SSG 一样，服务器端渲染 （SSR） 是预渲染的，这也使其非常适合 SEO。SSR 的 HTML 不是像在 SSG 中那样在构建时生成，而是在请求时生成。当您的页面非常动态时，这非常有用。
  • ISR
    • 增量静态重新生成使开发人员和内容编辑者能够基于每个页面使用静态生成，而无需重新构建整个站点。使用 ISR，您可以保留静态的优势，同时扩展到数百万个页面。
  • CSR
    • 一般来说，不建议使用客户端渲染来获得最佳 SEO。

URL Structure

  • 最好使用具有语义的 URL，这意味着它们使用单词而不是 ID 或随机数
  • URL 应遵循页面之间一致的某种模式

Metadata

  • title
  • description
notion image

Open Graph

OG标准化了元数据在任何给定网页上的使用方式。您可以根据需要提供尽可能少或尽可能多的信息，但所有开放的图形片段都组合在一起以创建它所附加到的站点的表示。
可以通过在 Head 组件内的 meta 标记中定义 'property' 属性来添加 Open Graph 标记。例如：

Structured Data and JSON-LD

结构化数据有助于搜索引擎了解您的页面。多年来，已经出现了几个词汇表，但目前主要的是 schema.org。
  • Example：添加 JSON-LD 产品架构数据的产品页面外观示例：
谷歌文档：https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=zh-cn

On Page SEO

  • heading and h1：建议在每个页面中使用 H1 标题标签。H1 应该代表页面的内容，并且类似于您的标题标签。
  • Internal Link：
 

© Jayden 2024