跳至内容

创建你的第一个应用

搜索引擎优化

0 分

创建你的第一个应用

搜索引擎优化

渲染和排名

URL 结构

URL 结构是 SEO 策略的重要组成部分。虽然 Google 没有公开披露 SEO 的每个部分的权重，但优秀的 URL 无论最终是大型还是小型排名因素，都被认为是最佳实践。

你可能想遵循一些原则

  • 语义化：最好使用语义化的 URL，这意味着使用单词而不是 ID 或随机数字。例如 /learn/basics/create-nextjs-app 比 /learn/course-1/lesson-1 更好
  • 逻辑一致的模式：URL 应该遵循某种在页面之间一致的模式。例如，你希望有一个文件夹来分组所有产品页面，而不是为每个产品使用不同的路径。
  • 以关键词为中心：Google 的系统很大一部分仍然基于网站包含的关键词。你可能希望在你的 URL 中使用关键词来帮助理解页面的用途。
  • 避免基于参数：使用参数构建 URL 通常不是一个好主意。在大多数情况下，它们不是语义化的，搜索引擎可能会混淆它们并降低其在结果中的排名。

Next.js 中如何定义路由？

Next.js 使用 文件系统路由，它建立在页面的概念之上。当文件添加到 pages 目录时，它会自动作为路由可用。pages 目录中的文件和文件夹可用于定义大多数常见模式。

让我们看一下几个简单的 URL 以及如何在 Next.js 路由器中添加它们

  • 首页：https://www.example.com → pages/index.js
  • 列表：https://www.example.com/products → pages/products.js 或 pages/products/index.js
  • 详情: https://www.example.com/products/product → pages/products/product.js

对于博客或电子商务网站，你可能希望使用产品 ID 或博客名称作为 URL 的标识符。这被称为 动态路由:

  • 产品：https://www.example.com/products/nextjs-shirt → pages/products/[product].js
  • 博客：https://www.example.com/blog/seo-in-nextjs → pages/blog/[blog-name].js

要使用动态路由，你可以在 products 或 blogs 子文件夹内的页面名称中添加方括号。

这是一个使用 SSG 优化的页面示例

// pages/blog/[slug].js

import Head from 'next/head';

export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://www.example.com/api/posts');
  const posts = await res.json();

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  // Set fallback to blocking. Now any new post added post build will SSR
  // to ensure SEO. It will then be static for all subsequent requests
  return { paths, fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://www.example.com/api/blog/${params.slug}`);
  const data = await res.json();

  return {
    props: {
      blog: data,
    },
  };
}

function BlogPost({ blog }) {
  return (
    <>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </>
  );
}

export default BlogPost;

这是一个使用 SSR 的另一个示例

// pages/blog/[slug].js

import Head from 'next/head';
function BlogPost({ blog }) {
  return (
    <div>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </div>
  );
}

export async function getServerSideProps({ query }) {
  const res = await fetch(`https://www.example.com/api/blog/${query.slug}`);
  const data = await res.json();

  return {
    props: {
      blog: data,
    },
  };
}

export default BlogPost;

进一步阅读

上一页下一页