Next.js 是用于构建服务器呈现的 React 应用程序的流行框架。Next.js 的关键特性之一是它能够根据在运行时获取的数据动态呈现页面。这意味着页面的数据不依赖于要加载的组件。由于呈现空内容，加载页面的额外时间可能会影响 SEO。
首先，我们需要让我们的应用程序了解这些动态路由，以便网络浏览器和搜索引擎机器人可以看到我们的 SEO 数据。
我们将使用该函数getStaticPaths生成我们的动态 url。
export const getStaticPaths = async () => { const url = 'https://api-url/posts' const res = await fetch(url); // raw response const posts = await res.json(); // turns it into readable data // maps through all the posts and return the string of our endpoint using the route param (post.slug) return { paths:posts.map((post) => `/blog/${post.slug}`) || [], fallback:false };}
当您使用 Screaming Frog 或 Ahrefs 等工具进行 SEO 扫描时，您将能够在运行构建时将这些链接视为可索引的链接。您还可以使用您的 robots.txt 文件来确定 SERP 可以看到哪些链接。
这是我目前的 SEO 分数。
我有一些警告，但总的来说我的链接是可读和可索引的，包括我的服务器端呈现的页面。
呈现动态页面内容
要在 Next.js 中呈现动态页面，您需要使用名为 getStaticProps. 这将允许您获取数据，然后将其作为 props 传递给您的 React 组件。
下面是一个示例，说明如何使用 getStaticProps API 从 API 获取博客文章并将其传递给页面组件：
// Single Post (pages/blog/[id].js)import { getStaticProps } from 'next';const Post = ({ post }) => { const router = useRouter(); // Technical SEO Tags const HTMLHead = ({ title, description, robots, type, locale, pageURL, site_name, canonicalLink }) => { return ( <Head> <title>{title}</title> <meta name='description' content={description} /> <meta name='viewport' content='width=device-width, initial-scale=1' /> <meta name='robots' content={robots} /> <meta property='og:title' content={title} /> <meta property='og:locale' content={locale ? locale : 'en-US'} /> <meta property='og:type' content={type} /> <meta property='og:description' content={description}/> <meta property='og:url' content={pageURL} /> <meta property='og:site_name' content={site_name} /> <meta name='twitter:description' content={description} /> <meta name='twitter:title' content={title} /> <link rel='canonical' href={canonicalLink} /> </Head> ); } // Error handling if (!router.isFallback && !post[0]?.slug) { return <ErrorPage statusCode={404} /> } return ( <> <HTMLHead title={post[0].title.rendered} description={post[0].excerpt?.rendered.replace(/<[^>]+>/g, '')} pageURL={`https://www.domain.co/blog/${post[0].slug}`} canonicalLink={`https://www.domain.co/blog/${post[0].slug}`} ... /> <Container className='blog-post-container' maxWidth='md'> <Box mt={15}> <article> <Typography variant='h1'>{post[0].title.rendered}</Typography> <div dangerouslySetInnerHTML={{ __html: post[0] && post[0].content.rendered }} /> </article> </Box> </Container> </> )}export const getStaticProps = async ({ params }) => { const { id } = params; // what will be used to fetch the content (single post) const url = `${your_api_url}posts?slug=${id}`; const post_raw = await fetch(url) const post = await post_raw.json() return { props: { params, post, id, }, };}export default Post;
确保参数 id 或 slug 与 中使用的 id 的名称相匹配 url。该 ID 将在获取您的帖子的路线中使用。
例如，如果您正在使用 [slug].js ，请确保您的 URL 看起来像这样。
const { slug } = params;... return { props: { params, post, slug, }, };
搜索引擎优化负责人
HTML 中的 <head> 元素是元数据（有关文档的信息，例如其标题、样式表链接、脚本和其他资源）的容器。
该 <head> 元素很重要，因为它提供了与页面内容没有直接关系的文档信息，但对于浏览器和搜索引擎正确解释和显示页面来说仍然是必需的。
可以包含在元素中的一些常见元素 <head> 是：
<title>: 该元素指定文档的标题，显示在浏览器的标题栏或选项卡中，被搜索引擎用作搜索结果页面的标题。<meta>：此元素用于提供有关文档的元数据，例如描述、关键字、字符集和其他信息。<link>：此元素用于链接到外部资源，例如样式表和字体。<script>：此元素用于在文档中包含脚本，例如 JavaScript。
通过在元素中包含必要的元数据 <head> ，您可以确保浏览器和搜索引擎正确解释和显示您的 Nextjs 应用程序。因此，它是包含在 Nextjs 应用程序内部页面中的一个重要元素。
这是 <HTMLHead/> 我创建的用于处理我的技术 SEO 的自定义组件。
const HTMLHead = ({ title, description, robots, type, locale, pageURL, site_name, canonicalLink }) => { return ( <Head> <title>{title}</title> <meta name='description' content={description} /> <meta name='viewport' content='width=device-width, initial-scale=1' /> <meta name='robots' content={robots} /> <meta property='og:title' content={title} /> <meta property='og:locale' content={locale ? locale : 'en-US'} /> <meta property='og:type' content={type} /> <meta property='og:description' content={description}/> <meta property='og:url' content={pageURL} /> <meta property='og:site_name' content={site_name} /> <meta name='twitter:description' content={description} /> <meta name='twitter:title' content={title} /> <link rel='canonical' href={canonicalLink} /> </Head> ); }
标题
这就是将呈现为您的标题的内容。这将是用户在访问您的网站之前首先看到的
描述
标题下方是描述，其中包含对您网站的简要描述。
视口
viewport 标签是我用来确保内容以正确的缩放比例正确适合移动和桌面屏幕的标签。
OG（开放图谱）标签
OG 标签，也称为 Open Graph 标签，是用于指定网页信息的 HTML 元标签。
规范网址
当多个页面具有相似或相同的内容时，规范 URL 用于指定网页的首选版本。它们有助于防止重复内容问题，并确保搜索引擎能够正确抓取您的网站并为其编制索引。
当网页有多个指向相同或相似内容的 URL 时，搜索引擎可能会将这些 URL 视为重复内容，并且可能不知道在搜索结果中包含哪个 URL。这可能会导致网页受到惩罚或在搜索结果中排名不高。
通过为网页指定规范 URL，您可以告诉搜索引擎哪个 URL 是页面的首选版本，应该包含在搜索结果中。这有助于确保正确的页面显示在搜索结果中，并可以提高页面的搜索排名。
关键字（可选）
关键字标签，也称为元关键字，曾经是指定网页相关的关键字或短语的常用方法。然而，它们不再被搜索引擎用作排名因素并且对 SEO 几乎没有影响。
然而，搜索引擎很快发现网络开发人员在他们的元关键字标签中包含不相关或垃圾关键字，试图操纵他们的搜索排名。结果，搜索引擎停止使用元关键字标签作为排名因素，现在在确定网页的相关性时不考虑它。
事实上，Google 的 John Mueller 曾表示“元关键字标签的使用是我们根本不会考虑的事情”。
因此，关键字标签对于 2023 年或任何其他年份的 SEO 都不重要。相反，更重要的是专注于创建高质量、相关的内容并使用其他 SEO 技术，例如优化标题和描述标签以及为图像使用标题标签和 alt 标签。
最后的想法
在 Next.js 应用程序中使用 SEO 有几个好处：
- 提高可见性：通过针对搜索引擎优化 Nextjs 应用程序，您可以提高其在搜索结果中的可见性，从而带来更多流量和销售额。
- 更好的用户体验：SEO 可以帮助用户更轻松地查找和浏览网站，从而改善应用程序的用户体验。这可以带来更高的参与度和转化率。
- 更高的可信度：经过良好优化的网站可以建立用户的可信度和信任度，从而增加销售额和收入。
- 竞争优势：通过针对 SEO 优化您的 Nextjs 应用程序，您可以获得优于其他未优化网站的竞争优势。
- 长期结果：与付费广告可以在您停止付费后立即停止不同，SEO 的好处可以在长期内继续得到回报。