2025 年开发人员必备 SEO 清单

2025-05-28

2025 年开发人员必备 SEO 清单

嘿，开发人员！

因此，我最近一直在从事一些以 SEO 为重点的项目，我想与 Next.js 开发人员分享我在此过程中学到的一些最佳实践和策略。

2025 年 Next.js SEO 清单

目录

1.优化元数据

  • 使用该next/head组件包含标题、描述和规范标签等元数据（Next.js Head 文档）。
  • 优化元数据对于 SEO 至关重要，因为它可以提高点击率，为搜索引擎提供有关页面的上下文，并有助于在搜索结果中提高相关内容的排名。

页面路由器示例：

import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <title>Page Title</title>
      <meta name="description" content="Page Description" />
      <link rel="canonical" href="https://example.com/page" />
    </Head>
  )
}
Enter fullscreen mode Exit fullscreen mode

使用 Page Router 方法非常简单且易于实现。

App Router示例：

export const metadata = {
  title: 'Page Title',
  description: 'Page Description',
}
Enter fullscreen mode Exit fullscreen mode

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

2. URL结构和路由

  • 实现干净、描述性和分层的 URL（例如，/blog/seo-checklist而不是/blog?id=123）。
  • 简洁的 URL 更易于阅读和记忆，从而改善用户体验，并帮助搜索引擎更有效地了解网站的结构，从而提高可发现性。
  • 使用 Next.js 动态路由实现更好的 URL 控制（动态路由指南）。
  • 避免 URL 深度嵌套，以保持用户友好性。
# Good URL Structure
| root
|--- app
|------ blog
|--------- seo-checklist
Enter fullscreen mode Exit fullscreen mode 
# Bad URL Structure
| root
|--- app
|------ blog
|--------- 2022
|------------ 01
|--------------- 01
|------------------ seo-checklist
Enter fullscreen mode Exit fullscreen mode

3.内容优化

4. 页面速度和核心网页指标

5.图像优化

  • 使用 Next.jsImage组件进行自动图像优化（图像组件文档）。
  • sizes提供具有适当属性的响应式图像srcSet。
  • 包括alt可访问性和图像 SEO 的描述性文本（W3C 可访问性指南）。

6. 移动友好性

  • 使用响应式设计原则，即响应式网页设计。
  • 使用 Google 的移动设备友好度测试工具 ( Mobile-Friendly Test ) 测试页面。
  • 确保内容在移动设备上易于访问和阅读，因为平均超过 70% 的流量来自移动设备。

7. 网站地图、Robots.txt 和网站图标

网站地图

  • 站点地图是一个列出您网站上所有 URL 的文件。它可以帮助搜索引擎更有效地发现和索引您的内容。
  • 创建 XML 站点地图并将其提交给 Google 等搜索引擎（Google 搜索控制台站点地图提交）。

next-sitemap通过NPM 包生成站点地图的视频

网站地图生成

为 CMS/DB 数据生成动态站点地图的视频

网站地图生成

Robots.txt

  • 文件robots.txt会告诉搜索引擎爬虫哪些页面或文件可以或不可以请求你网站上的哪些页面或文件。拥有一个结构良好的robots.txt文件来引导搜索引擎爬虫非常重要。
  • 配置一个robots.txt文件来引导搜索引擎爬虫（Robots.txt引导）。

网站图标

  • 您一定在浏览器标签页、书签和移动应用中见过网站图标。它们是帮助用户识别您网站的网站图标。
  • 添加图标，提升用户体验和品牌形象。使用Favicon IO、Real Favicon Generator等工具来生成图标。这款工具非常棒，因为它提供不同尺寸、格式和manifest.json文件的图标。
# Example of 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" />
Enter fullscreen mode Exit fullscreen mode

8.内部链接

专业建议：我使用 linkMap 来管理项目中的内部链接。它是一个简单的键值对对象，用于管理项目中的所有内部链接。这样，我可以轻松地在一个地方更新链接，并将其反映到整个项目中。

// linkMap.js
export const linkMap = {
  home: '/',
  about: '/about',
  services: '/services',
  contact: '/contact',
}
Enter fullscreen mode Exit fullscreen mode

9. 服务器端渲染（SSR）和静态站点生成（SSG）

  • 根据内容要求（Next.js 数据获取）选择适当的渲染方法（getServerSideProps、getStaticProps或）。ISR
  • 对于经常变化的动态内容使用 SSR。
  • 对于具有静态或半静态内容的页面，使用 SSG 或 ISR 可以获得更好的性能和 SEO。

App Router SSR 和 SSG 上的视频

应用路由器 SSR 和 SSG

页面视频路由器 SSR 和 SSG

页面路由器 SSR 和 SSG

10. Schema 标记

11. 规范标签和避免重复

  • 什么是规范标签？规范标签是一种元标签，它告诉搜索引擎您希望将哪个版本的 URL 视为主要版本。这有助于防止出现重复内容问题。
  • 就像您的主页可以通过多个 URL 访问一样https://example.com，例如https://example.com/index.html、、https://example.com/home等。
  • 您可以使用规范标签来告知搜索引擎哪个https://example.com是主要网址。了解更多规范网址指南。
  • <head>根据当前路由动态设置部分中的规范 URL 。
<link rel="canonical" href="https://example.com/page" />
Enter fullscreen mode Exit fullscreen mode

12. Open Graph 和 Twitter Cards

  • 添加 Open Graph 标签（og:title、og:description、og:image）用于社交共享（Open Graph 协议）。

页面路由器示例

import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <meta property="og:title" content="Page Title" />
      <meta property="og:description" content="Page Description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
      <meta property="og:type" content="website" />
      <meta property="og:url" content="https://example.com/page" />
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
  )
}
Enter fullscreen mode Exit fullscreen mode

应用路由器示例

export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Page Description',
    images: [
      {
        url: 'https://example.com/image.jpg',
        width: 800,
        height: 600,
        alt: 'Image description',
      },
    ],
    type: 'website',
    url: 'https://example.com/page',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page Description',
    images: ['https://example.com/image.jpg'],
  },
}
Enter fullscreen mode Exit fullscreen mode
  • 包含 Twitter Card 元数据以便在 Twitter 上更好地预览链接（Twitter Cards 文档）。

13.错误处理

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}
Enter fullscreen mode Exit fullscreen mode 
// pages/500.js
export default function Custom500() {
  return <h1>500 - Server-Side Error</h1>
}
Enter fullscreen mode Exit fullscreen mode

14.语义HTML

  • 使用语义 HTML 元素（如、、、、、、和）可获得<header>更好的可访问性和 SEO。<nav><main><section><article><aside><footer>
  • 检查MDN Web Docs上所有可用的 HTML 元素。
  • 语义 HTML 可帮助搜索引擎了解内容的结构并提高残障用户的可访问性。
<!-- Bad Example of Semantic HTML -->
<div class="header">
  <div class="nav">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
</div>
<!-- Good Example of Semantic HTML -->
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>
Enter fullscreen mode Exit fullscreen mode

15.性能优化

  • 使用 CDN 提供静态文件（Vercel Edge Network）。
  • 使用代码拆分和树摇动来最小化和捆绑 JavaScript（Webpack 优化指南）。
  • 实现图像和组件的延迟加载。
  • 启用类似和（Next.js 配置next.config.js）的设置。compressionreactStrictMode
  • 这些设置有助于加快页面加载速度并提供更好的用户体验。

示例配置

// next.config.js
module.exports = {
  reactStrictMode: true,
  compress: true,
  images: {
    domains: ['example.com'], // Add domains for optimized images
  },
}
Enter fullscreen mode Exit fullscreen mode

16.分析和监控

  • 集成 Google Analytics 或其他跟踪工具（Next.js Analytics 集成）。
  • 使用 Google Search Console 监控索引、搜索性能和错误（Search Console 指南）。
  • 这些工具有助于监控用户行为并识别 SEO 改进的潜在领域，例如高跳出率或表现不佳的页面。

如果你想要一个精简的设置，请使用这些

  • UMAMI - 一个简单、易于使用、自托管的网络分析工具。
  • Google Web Master Tools - Google Search Console 是 Google 提供的一项免费服务，可帮助您监控和维护您的网站在 Google 搜索结果中的存在。

我更喜欢使用 Umami + Google Web Master Tools 来完成我的个人项目，例如（Chakra Framer）

17. 2025 年最佳 SEO 实践

希望这些技巧能帮助你打造下一个价值十亿美元的应用程序。祝你编程愉快！

联系我们

平台 处理
YouTube @thesohailjafri
X/推特 @thesohailjafri
LinkedIn @thesohailjafri
Instagram @thesohailjafri
Github @thesohailjafri
文章来源：https://dev.to/thesohailjafri/the-must-have-seo-checklist-for-developers-192i
Devto 翻译
PREV
构建 React 项目的更好方法
NEXT
我如何选择编程语言并克服坏习惯