Next.js--- SEO（搜索引擎优化）

好记性不如烂笔头
173 阅读5分钟

SEO策略

1、语义化标签

  • <h1> ~~ <h6>

2、站点地图（Sitemap）【www.imooc.com/article/373…

站点地图是一个XML文件，列出网站页面的URL，以及其他信息。

  • 安装软件包npm install next-sitemap
  • 在项目的根目录下创建next-sitemap.config.js文件

/** @type {import('next-sitemap').IConfig} */
    module.exports = {
      siteUrl: process.env.SITE_URL || 'https://example.com',
      generateRobotsTxt: true, // (可选，默认为 false)
      // ...其他配置项
    }
  • 在package.json文件中添加脚本内容

 "scripts": {
      "build": "next build",
      "postbuild": "next-sitemap"
    }
  • 执行构建任务 npm run build,构建成功后会在项目根目录找到sitemap.xml和robots.txt文件
  • 在sitemap.xml文件中配置页面的优先级

3、结构化数据标记（Schema.org）

结构化数据能帮助搜索引擎更好地理解网站内容。优化原则是使用标准的标记语言，如 JSON – LD，准确描述网站的信息。

  • 安装react-schemaorg库帮助生成这些标记 npm install react-schemaorg
  • 创建结构化数据,JSON-LD格式
import { SchemaOrg } from 'react-schemaorg';
 
const ArticleSchema = {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "The Rock Climbs Everest",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
  ],
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "Jane Doe"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Example Publisher",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.jpg"
    }
  }
};
  • 在Next.js页面中使用结构化数据
import Head from 'next/head';
import { SchemaOrg } from 'react-schemaorg';
import ArticleSchema from './path-to-your-schema'; // 确保导入你的结构化数据对象
 
export default function Page() {
  return (
    <>
      <Head>
        <SchemaOrg item={ArticleSchema} />
      </Head>
      {/* 页面内容 */}
    </>
  );
}
  • 使用Google的Structured Data Testing Tool来验证你的页面是否正确显示了结构化数据。这可以帮助你确保SEO优化效果。
  • 动态数据和服务器端渲染(SSR)或静态站点生成(SSG)

如果页面内容是动态生成的（例如，基于数据库查询），确保在服务器端或构建时生成结构化数据。

export async function getStaticProps() {
  const articleData = await fetchArticleData(); // 假设这是一个异步函数来获取文章数据
  const schema = createSchema(articleData); // 创建结构化数据对象
  return { props: { schema } }; // 将结构化数据传递给页面组件
}

然后在页面中使用props:

import { SchemaOrg } from 'react-schemaorg';
import Head from 'next/head';
import { useRouter } from 'next/router'; // 用于获取路由信息，如果需要的话
import ArticleSchema from './path-to-your-schema'; // 根据实际情况导入或使用props中的schema对象
 
export default function Page({ schema }) { // 使用props中的schema对象
  return (
    <>
      <Head>
        <SchemaOrg item={schema} />
      </Head>
      {/* 页面内容 */}
    </>
  );
}

1、自动处理元数据(Meta Data)

元数据，如<title>和<meta>标签，Next.js通过next/head组件，自动为每个页面添加元数据，并且允许开发者自定义页面的元数据。

import Head from 'next/head';

const Page = () => (
  <div>
    <Head>
      <title>页面标题</title>
      <meta name="description" content="这是一个SEO优化的页面" />
    </Head>
    <h1>页面内容</h1>
  </div>
);

export default Page;

1-1、动态处理元数据

通过next/head，我们可以根据页面的内容动态设置Meta标签，从而优化SEO和社交媒体的展示效果。

import Head from 'next/head';

export default function PostPage({ post }) {
  return (
    <>
      <Head>
        <title>{post.title} - My Blog</title>
        <meta name="description" content={post.excerpt} />
        <meta name="robots" content="index, follow" />
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.excerpt} />
        <meta property="og:image" content={post.imageUrl} />
        <meta property="og:url" content={`https://myblog.com/posts/${post.id}`} />
      </Head>
      <main>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </main>
    </>
  );
}

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  return { props: { post } };
}

通过getServerSideProps获取文章数据，并在页面渲染时动态地设置了多个Meta标签。

2、自动图片优化

页面的加载速度是SEO排名的一个重要因素。Next.js内置了next/image组件，能够自动优化图片，支持延迟加载、自动选择最佳图片格式（如WebP）、调整图片大小等，从而加快页面加载速度。

import Image from 'next/image';

const Page = () => (
  <div>
    <Image src="/path/to/image.jpg" alt="图片描述" width={500} height={300} />
  </div>
);

export default Page;

3、默认启动HTTP/2

Next.js默认启用HTTP/2协议，它能够更高效地处理多个请求，减少页面加载时间，进一步提升SEO表现。

4、支持动态路由和默认路由

Next.js支持动态路由和嵌套路由，这使得开发者能够轻松构建复杂的URL结构，同时保持SEO友好性。

5、自动代码拆分

Next.js自动进行代码拆分，确保每个页面只加载所需的JavaScript。这意味着在访问不同页面时，用户无需加载整个应用的所有代码，从而提高了页面加载速度。

6、服务端渲染SSR

通过SSR，Next.js能够在服务器端生成HTML页面，并将其发送到客户端。这样，搜索引擎爬虫（如Googlebot）在抓取页面时，会看到完整的HTML，而不需要依赖JavaScript执行。

import React from 'react';

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // 将数据传递给页面组件
  };
}

const Page = ({ data }) => (
  <div>
    <h1>数据展示</h1>
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  </div>
);

export default Page;

通过getServerSideProps方法，Next.js可以在服务器端预渲染页面并返回完整的HTML，这意味着搜索引擎爬虫可以直接获取到页面的完整内容，而不需要执行JavaScript。

7、静态生成SSG

通过SSG，Next.js能够在构建时预先生成HTML文件，而不是在每次请求时动态生成。这样，生成的页面是完全静态的，能够被搜索引擎迅速抓取。

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // 将数据传递给页面组件
  };
}

const Page = ({ data }) => (
  <div>
    <h1>数据展示</h1>
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  </div>
);

export default Page;

通过getStaticProps方法，Next.js在构建时生成静态页面，从而确保搜索引擎能够抓取到完全的页面内容，并提高SEO表现。

8、增量静态再生 ISR

增量静态再生（ISR）是Next.js的一个独特功能，它结合了静态生成和动态更新的优势。通过ISR，Next.js可以生成静态页面，并根据预设的时间间隔自动更新内容，而无需重新构建整个网站。

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
    revalidate: 60, // 每60秒更新一次页面
  };
}

通过ISR，Next.js确保了页面内容始终是最新的，同时又能保持静态页面的SEO优势。搜索引擎能够抓取到最新的内容，而不会受到页面更新频繁的影响。

avatar
文章
阅读
粉丝