为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 2025年开发者的必做SEO检查清单

2025年开发者的必做SEO检查清单

标签：
数据结构 API

嘿，程序员们！

最近我在做一些SEO相关的项目，我觉得可以分享一下我一路上学到的一些最佳实践和策略给Next.js开发者。

……

Next.js SEO 检查表 2025

目录

  • 优化元数据
  • URL 结构和路由
  • 内容优化
  • 网页速度与核心Web指标
  • 图片优化
  • 移动友好性
  • 站点地图、robots.txt 和 favicons
  • 内部链接
  • 服务器端渲染（SSR）和静态站点生成（SSG）
  • 结构化标记
  • 规范标签和避免重复
  • 开放图和推特卡
  • 错误处理
  • 性能优化
  • 分析和监控
  • 2025 年最佳 SEO 实践指南

……

1. 优化元数据:

  • 使用 next/head 组件来包含元数据，如标题、描述和canonical链接标签（Next.js Head 文档）。
  • 优化元数据对于 SEO 至关重要，因为它可以提升点击率，帮助搜索引擎理解页面内容，并使相关内容在搜索结果中排名更靠前。

页面路由器例子：

    import Head from 'next/head'

    export default function 页() {
      return (
        <Head>
          <title>页面标题</title>
          <meta name="description" content="页面描述" />
          <link rel="canonical" href="https://example.com/page" />
        </Head>
      )
    }

全屏 退出

使用 Page Router 方法既简单又容易实现。

App Router 应用路由示例：

    export const metadata = {
      title: '页面标题',
      description: '页面简介',
    }

切换到全屏 / 退出全屏

我们使用的是 App Router 方法，在布局或页面文件中的 metadata 属性（Next.js Metadata API）。

……

2. URL结构与路由

  • 实现干净、描述性强且层次分明的URL（例如 /blog/seo-checklist 而不是 /blog?id=123）。
  • 干净的URL通过便于阅读和记忆，同时帮助搜索引擎更好地理解网站结构，提升用户体验和可发现性。
  • 使用Next.js动态路由来更好地控制URL（有关动态路由的指南）。
  • 避免在URL中进行深层嵌套，以保持友好性。
    # 良好的URL结构
    | 根
    |--- 应用
    |------ 博客
    |--------- seo-checklist

点击全屏进入，点击退出

    # 糟糕的URL结构
    | 根
    |--- app
    |------ blog
    |--------- 2022
    |------------ 01
    |--------------- 01
    |------------------ seo-checklist (SEO检查清单)

全屏 退出全屏

等等

3. 内容优化调整

4. 页面加载速度和核心网页体验指标

  • 使用 Lighthouse 或 PageSpeed Insights 等工具监控和优化 LCP、FID 和 CLS 等指标。Google PageSpeed Insights 图片
  • 优化字体，使用预加载，并避免大的布局变动。了解更多关于如何优化字体和图片的信息。
  • 使用 WebPageTest 等工具分析性能并找出瓶颈。

……

5. 图像优化

  • 使用 Next.js 的 Image 组件实现图片的自动优化 (Image 组件文档)。
  • 使用适当的 sizes 和 srcSet 属性提供响应式图片功能。
  • 为图片添加描述性的 alt 文本说明，以提升图片的可访问性和搜索引擎优化。

……

6. 移动友好性

  • 采用响应式设计原则，例如响应式网页设计等。
  • 使用 Google 的移动友好测试工具测试页面。
  • 确保内容在手机上易于访问和阅读，因为大约70%的流量来自手机。

此处省略内容

7. 站点地图、robots.txt文件和favicon

站点地图

  • 网站地图是一个文件，包含您网站上的所有链接。它帮助搜索引擎更高效地发现和索引网站内容。
  • 创建一个 XML 网站地图，并在 Google Search Console 中提交，如“提交 XML 网站地图”链接所述（Google Search Console 网站地图提交）。

关于如何使用next-sitemap NPM包生成站点地图的视频

站点地图生成 观看视频

为CMS数据生成动态站点地图的视频教程

站点地图生成
观看教程视频：点击这里

Robots.txt (机器人文本文件)

  • 一个 robots.txt 文件告诉搜索引擎爬虫哪些页面或文件它们可以或不可以从您的网站请求。结构良好的 robots.txt 文件对于引导搜索引擎爬虫至关重要。
  • 配置一个 robots.txt 文件以引导搜索引擎爬虫（Robots.txt 指南 （点击可查看））。

网页图标

  • 你肯定在浏览器标签、书签和手机应用中见过即我们常说的 favicon 图标。这些图标可以帮助用户识别你的网站。
  • 为了提升用户体验和增强品牌形象，最好加上 favicon。你可以用像 Favicon IO 这样的工具来生成 favicon。这个工具很实用，它不仅提供多种大小和格式的 favicon，还会自动生成 manifest.json 文件。
# 示例 favicon
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />

点击此处进入全屏 点击此处退出全屏

此处省略内容

8. 内部链接.

  • 使用有意义的锚文本链接进行内部链接。
  • 通过定期审核您的网站来避免断链（断链检查工具），
  • 使用面包屑导航以改善导航和SEO（面包屑导航指南）。

小贴士 我使用 linkMap 来管理项目中的内部链接。它是一个简单的键值对数据结构，用于管理项目中的所有内部链接。这样我就可以在一个地方轻松更新这些链接，整个项目中的链接都会相应地更新。

// linkMap.js
export const linkMap = {
  home: '/首页',
  about: '/关于',
  services: '/服务',
  contact: '/联系',
}

进入全屏；退出全屏

以下

9. 服务器端渲染 (SSR)，和静态站点生成 (SSG)

  • 根据内容需求选择合适的方法（getServerSideProps、getStaticProps 或 ISR）（Next.js 数据获取）。
  • 对于经常更新的动态内容使用 SSR。
  • 对于静态或半静态页面，使用 SSG 或 ISR 以获得更好的性能和 SEO 效果。

这是一个关于App路由SSR和SSG的视频

应用路由器 SSR 和 SSG 视频链接

SSR和SSG的页面路由讲解视频

页面路由 SSR 和 SSG

...（内容省略或待定）

10. 模式标记

  • 使用 JSON-LD 格式添加结构化数据以实现丰富摘要（Google 结构化数据测试工具）。
  • 根据内容包含 Breadcrumb、Article、Product 或 FAQ 等类型（Schema.org 文档）。

  • 使用 NPM 包如 next-seo 或 schema-dts 来轻松实现结构化数据。了解更多关于 Next-SEO 和 Schema DTS 的 JSON-LD 结构化数据。

    • *

11. 规范标签和避免重复内容

  • 什么是 canonical 标签？canonical 标签是一种元标签，用于告诉搜索引擎您希望将哪个版本的 URL 视为主页。这有助于防止重复内容问题。
  • 比如，可以通过多个 URL 访问，例如 https://example.com，https://example.com/index.html，https://example.com/home 等。
  • 您可以使用 canonical 标签告诉搜索引擎 https://example.com 是主要的 URL。更多关于 Canonical URL Guide。
  • 根据当前路径在页面的 <head> 部分动态设置 canonical URL。
    <link rel="canonical" href="https://example.com/page" />

全屏 退出全屏

12. 开放图谱协议和Twitter卡片功能

  • 添加 Open Graph 标签（og:title，og:description，og:image）以便进行社交分享（Open Graph 协议，详情见 https://ogp.me/）。

页面路由

    import Head from 'next/head'

    export default function Page() {
      return (
        <Head>
          <meta property="og:title" content="标题" />
          <meta property="og:description" content="简介" />
          <meta property="og:image" content="https://example.com/image.jpg" />
          <meta property="og:type" content="网站" />
          <meta property="og:url" content="https://example.com/page" />
          <meta name="twitter:card" content="summary_large_image" />
        </Head>
      )
    }

全屏模式，退出全屏

应用路由的例子

    export const 元数据 = {
      openGraph: {
        title: '页面标题',
        description: '页面描述',
        images: [
          {
            url: 'https://example.com/image.jpg',
            width: 800,
            height: 600,
            alt: '图片描述',
          },
        ],
        type: '网站',
        url: 'https://example.com/page',
      },
      twitter: {
        card: 'summary_large_image',
        title: '页面标题',
        description: '页面描述',
        images: ['https://example.com/image.jpg'],
      },
    }

全屏显示 退出全屏

  • 在 Twitter 上包含 Twitter 卡片元数据以便展示更佳的链接预览（Twitter 卡片概览）。

    • *
    • *

13. 错误处理（处理错误）

    // pages/404.js
    export default function Custom404() {
      return <h1>404 - 页面找不到</h1>
    }

点击这里全屏，点击这里退出全屏

    // pages/500.js
    export default function Custom500() {
      return <h1>500 - 服务器端错误</h1>
    }

进入全屏，退出全屏

14. 性能优化

  • 使用 CDN 为静态文件服务（Vercel 边缘网络）。
  • 使用 Webpack 最小化和打包 JavaScript，包括代码分割和树摇（Webpack 优化指南）。
  • 实现图片和组件的懒加载功能。
  • 在 next.config.js 中启用如 compression 和 reactStrictMode 等设置（Next.js 配置）。

  • 这些设置有助于加快页面加载速度，提供更好的用户体验。

    • *

示例配置说明

// next.config.js
module.exports = {
  reactStrictMode: true,
  compress: true,
  images: {
    domains: ['example.com'], // 指定用于优化图片的域名
  },
}

切换到全屏 | 退出全屏

15. 数据分析和监控

  • 集成 Google Analytics 或其他跟踪工具，例如 Next.js 分析集成。
  • 使用 Google Search Console 来监控索引情况、搜索表现以及错误。
  • 这些工具可以帮助监控用户行为，并识别可能需要优化的 SEO 领域，例如高跳出率或表现不佳的页面。

如果你想用轻量设置，就用这些

  • UMAMI - UMAMI 是一个简单易用的自托管网络分析工具。
  • Google 站长工具 - Google 搜索控制台是 Google 提供的一项免费服务，可帮助您监控和维护您网站在谷歌搜索结果中的表现。

我更喜欢在我的个人项目中使用Umami和谷歌站长工具，例如Chakra Framer（https://chakraframer.com/）。

16. 2025年SEO的最佳实践

  • 专注于搜索意图：理解并解决用户的需求和查询。让内容符合用户搜索的问题和需求。
  • 语音搜索优化：通过在页面中加入结构化的FAQ和直接回答，针对长尾和对话式的查询。

  • SEO A/B测试：定期对元描述、标题或内容版本进行A/B测试，以确定哪些内容能吸引用户并带来流量。

    • *

我希望这些提示能对你有帮助，能帮助你开发你的下一个十亿美金的应用。祝你编程愉快！

来聊一聊
平台 账号
YouTube @thesohailjafri
Twitter @thesohailjafri
LinkedIn @thesohailjafri
Instagram @thesohailjafri
GitHub @thesohailjafri
点击查看更多内容
发表于 2024.12.31 17:52， 共 13 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

DIEA

手记
篇
粉丝
63
获赞与收藏
387

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消