avatar
07.【个人网站】如何在Next.js中提升SEO及配置站点地图：完整指南
✔️

07.【个人网站】如何在Next.js中提升SEO及配置站点地图：完整指南

keywords
Next.js站点地图, next-sitemap, 站点地图生成, Next.js SEO优化, Google Search Console
published_date
LastEdited 2024年10月09日
slug
本指南详细介绍了如何在Next.js项目中使用next-sitemap插件配置站点地图，以提升SEO和加快Google搜索引擎收录。步骤包括安装依赖、配置next-sitemap、生成站点地图、部署和验证。还提供了如何在Google、Bing和百度等搜索引擎中提交站点地图的说明，以及如何查看站点地图的收录情况和SEO优势。
tags
Website
Next.js 是一个功能强大的React框架，它在构建SEO友好的Web应用时具有明显优势。通过结合SSR（服务器端渲染）、动态路由和元数据优化，Next.js可以帮助提高网站在搜索引擎上的表现。以下是几个关键步骤和最佳实践，以帮助在Next.js项目中优化SEO。

1.使用Next.js的服务器端渲染（SSR）

在Next.js中，SSR是一项重要功能。它允许在服务器端渲染页面并返回完整的HTML，减少了页面在客户端的加载时间，同时确保搜索引擎爬虫可以抓取页面的完整内容。
实现方式：
使用 getServerSideProps 方法，它可以让页面在每次请求时生成页面内容。这对于内容经常变动的页面尤其有用。
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

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

export default function Page({ data }) {
  return <div>{/* 渲染页面内容 */}</div>;
}

2.设置动态Meta标签和结构化数据

为了让搜索引擎正确理解每个页面的内容，需要根据页面内容动态设置Meta标签，如页面标题、描述、关键词等。这可以通过Next.js的 Head 组件来实现。
结构化数据可以帮助搜索引擎更好地理解网站内容，并在搜索结果中提供更丰富的信息展示。可以通过JSON-LD格式在Next.js项目中添加结构化数据。
import Head from "next/head";
import SiteConfig from "../site.config";
import * as Config from "@/lib/config";
import { useRouter } from "next/router";
interface CommonSEOProps {
  title?: string;
  description?: string;
  image?: string | null;
  ogType?: string;
  keywords?: string;
}
export const CommonSEO = ({
  title,
  description,
  image,
  ogType = "website",
  keywords
}: CommonSEOProps) => {
  const router = useRouter();
  const rssFeedUrl = `${Config.host}/feed`;
  // 如果没有提供 title 和 description，则使用站点的默认名称和描述
  title = title ?? SiteConfig?.title;
  description = description ?? SiteConfig?.description;

  const socialImageUrl = image;
  const url = `${SiteConfig.siteUrl}${router.asPath}`;

  // const socialImageUrl = getSocialImageUrl(pageId) || image;

  return (
    <Head>
      {/* 设置字符编码 */}
      <meta charSet="utf-8" />
      <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />

      {/* 设置 viewport 以支持响应式设计 */}
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
      />
      {/* 配置 Apple 移动设备的相关元数据 */}
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="apple-mobile-web-app-status-bar-style" content="black" />

      {/* 根据系统的主题颜色模式配置主题色 */}
      <meta
        name="theme-color"
        media="(prefers-color-scheme: light)"
        content="#fefffe"
        key="theme-color-light"
      />
      <meta
        name="theme-color"
        media="(prefers-color-scheme: dark)"
        content="#2d3439"
        key="theme-color-dark"
      />

      {/* 配置搜索引擎索引和跟随策略 */}
      <meta name="robots" content="index,follow" />
      <meta property="og:type" content={ogType} />

      {/* 如果有描述信息，则配置相关的 meta 标签 */}
      {description && (
        <>
          <meta name="description" content={description} />
          <meta property="og:description" content={description} />
          <meta name="twitter:description" content={description} />
        </>
      )}
      {/* 配置页面标题的相关 meta 标签 */}
      <meta property="og:title" content={title} />
      <meta name="twitter:title" content={title} />
      <title>{title}</title>
      <meta
        name="keywords"
        content={keywords ||
          'travel, blog, Jessie, travel blogger, travel tips, travel stories, SEO, optimization,solo travel, travel tips, eco-friendly travel, Jessie travel, solo adventure, sustainable travel, Front-end,enginner'}
      />

      {/* 配置社交媒体分享图片的相关 meta 标签 */}
      {socialImageUrl ? (
        <>
          <meta name="twitter:card" content="summary_large_image" />
          <meta name="twitter:image" content={socialImageUrl} />
          <meta property="og:image" content={socialImageUrl} />
        </>
      ) : (
        <meta name="twitter:card" content="summary" />
      )}

      {/* 配置页面的 URL */}

      <>
        <link rel="canonical" href={url} />
        <meta property="og:url" content={url} />
        <meta property="twitter:url" content={url} />
        <meta name="twitter:site" content={SiteConfig.twitter} />
      </>

      {/* 配置 RSS feed 的链接 */}
      <link
        rel="alternate"
        type="application/rss+xml"
        href={rssFeedUrl}
        title={SiteConfig?.title}
      />

      {/* 谷歌广告 */}
      <meta
        name="google-adsense-account"
        content="ca-pub-9533100025276131"
      ></meta>
    </Head>
  );
};

interface BlogSeoProps extends CommonSEOProps {
  // url: string;
  createdTime: string | Date;
  keywords?: string;
  lastEditTime: string | Date;
}

export const BlogSEO = ({
  title,
  createdTime,
  lastEditTime,
  description,
  // url,
  keywords,
  image,
}: BlogSeoProps) => {
  const publishedAt = new Date(createdTime).toISOString();
  const modifiedAt = new Date(lastEditTime).toISOString();

  const structuredData = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: title,
    image: image,
    datePublished: publishedAt,
    dateModified: modifiedAt,
    author: {
      "@type": "Person",
      name: SiteConfig.author,
    },
    publisher: {
      "@type": "Organization",
      name: SiteConfig.author,
      logo: {
        "@type": "ImageObject",
        url: `${SiteConfig.siteUrl}${SiteConfig.siteLogo}`,
      },
    },
    description: description,
    articleSection: "Travel Tips",  // 添加文章类别
  };

  return (
    <>
      <CommonSEO title={title} ogType="article" image={image} keywords={keywords}/>
      <Head>
        {/* {date && (
          <meta property="article:published_time" content={publishedAt} />
        )}
        {lastEdit && (
          <meta property="article:modified_time" content={modifiedAt} />
        )} */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(structuredData, null, 2),
          }}
        />
      </Head>
    </>
  );
};
 

3.使用站点地图

在React框架Next.js项目中配置站点地图是提升SEO的重要步骤之一。通过手动创建XML站点地图，或者使用工具和库自动生成。由于使用的是Next.js，推荐使用 next-sitemap 插件来自动生成站点地图。并提交到Google Search Console，从而加快网站的搜索引擎索引。
💡
为什么站点地图对SEO很重要？
站点地图可以帮助搜索引擎更好地理解网站结构，尤其是对于具有复杂导航的站点，站点地图可以确保搜索引擎能够发现并抓取所有页面。

步骤1：安装依赖包

使用 next-sitemap 这个包来自动生成站点地图
npm install next-sitemap
// or yarn install next-sitemap

步骤2：配置 next-sitemap

在项目根目录下创建 next-sitemap.config.js 文件，并进行配置：
/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: SiteConfig.siteUrl || 'https://yourwebsite.com',  // 网站URL
  generateRobotsTxt: true, // 是否生成robots.txt文件
  sitemapSize: 5000, // 每个站点地图的最大条目数（可根据需求调整）
  exclude: ['/admin/*', '/user/*'], // 排除不需要被索引的页面
  changefreq: 'weekly', // 设置爬取频率，适用于动态内容频繁更新的网站
  priority: 0.8, // 页面优先级
  robotsTxtOptions: {
    additionalSitemaps: [
      'https://yourwebsite.com/sitemap.xml', // 可以添加额外的站点地图链接
    ],
  },
};

步骤 3: 修改 next.config.js 文件

确保在 next.config.js 文件中包含 next-sitemap 的配置：
module.exports = {
  // 其他配置项
  images: {
    domains: ['yourwebsite.com'], // 确保站点的图像域名被允许
  },
  async redirects() {
    return [
      {
        source: '/old-path',
        destination: '/new-path',
        permanent: true,
      },
    ]
  },
};

步骤 4: 生成站点地图

在 package.json 文件的 scripts 部分添加生成站点地图的脚本：
json复制代码
"scripts": {
  "postbuild": "next-sitemap"
}
每次运行 npm run build 时，将自动生成站点地图文件
 
或者直接运行
npx next-sitemap
这将生成 sitemap.xml 和 robots.txt 文件，分别位于 public/ 目录下。

步骤 5: 部署和验证

  1. 构建项目：运行 npm run build。
  1. 部署项目：将构建后的项目部署到服务器或托管服务。
  1. 验证站点地图：访问 https://www.yoursite.com/sitemap.xml 和 https://www.yoursite.com/robots.txt 以确保站点地图和 robots.txt 文件正确生成。

示例配置

以下是一个完整的示例配置：
next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://www.yoursite.com',
  generateRobotsTxt: true,
  // 可以在这里添加更多选项，例如忽略某些路径
  exclude: ['/admin/*'],
  robotsTxtOptions: {
    policies: [
      { userAgent: '*', allow: '/' },
      { userAgent: '*', disallow: '/admin' },
    ],
  },
}
next.config.js
module.exports = {
  env: {
    SITE_URL: 'https://www.yoursite.com',
  },
};
package.json
{
  "scripts": {
    "postbuild": "next-sitemap"
  }
}

搜索引擎收录

Google

  1. 注册登录 https://search.google.com/search-console
  1. 验证域名
  1. 提交站点地图
notion image
notion image
如果没有收录,请查看robots.txt ，确保 robots.txt 中正确地包含了站点地图的路径，以便搜索引擎发现它：
User-agent: *
Allow: /

Sitemap: https://yourwebsite.com/sitemap.xml

Bing

  1. 访问 Bing Webmaster Tools 并提交站点地图。
  1. Bing提供与Google类似的站点地图索引报告。

百度

  1. 访问 百度搜索资源平台 并提交站点地图。
  1. 百度提供收录情况报告，可以查看哪些页面已被抓取。

如何查看站点地图收录

使用Google Search Console查看站点地图收录情况

这是最常用和有效的方法，Google会给出详细的报告，包括已提交的站点地图、已索引的URL数量等。
  • 已索引的URL：Google会显示成功抓取并索引的URL数量。如果这个数字少于总URL数，可能是因为部分页面还未被Google抓取。
  • 详细分析URL索引情况：点击“站点地图”，查看Google对于各个URL的索引情况。Google Search Console会报告哪些页面已被索引，哪些尚未被索引，并给出原因（例如404错误、重定向等）。

使用“site:”查询操作符查看页面索引

可以使用Google的 site: 查询操作符来手动检查某些页面是否已被索引
步骤：
  1. 打开Google搜索。
  1. 在搜索框中输入 site:yourwebsite.com，替换为网站域名。
  1. 查看返回的结果列表，所有显示的页面都是已被Google索引的内容。
    1. 例如，搜索 site:yourwebsite.com/sitemap.xml 以确认站点地图文件是否被索引。
    2. 如果没有结果，则说明该页面还没有被Google索引。

检查站点地图文件的访问

手动检查站点地图文件的生成和可访问性，以确保它能被搜索引擎正常访问：
  1. 访问站点地图URL：https://yourwebsite.com/sitemap.xml。
  1. 确认站点地图文件格式正确、内容完整。如果返回404错误或文件不完整，则需要检查生成逻辑。

站点地图SEO优势

  • 加快索引：站点地图可以帮助搜索引擎快速发现和索引网站新页面。
  • 优化结构：它向搜索引擎展示网站结构，特别适用于页面层次较深的网站。
  • 增强用户体验：通过让搜索引擎更快地找到重要内容，间接提升用户获取信息的速度。

4.优化页面加载速度

页面加载速度是影响SEO的重要因素之一。Next.js默认支持代码拆分和懒加载，这有助于提升页面速度。
  • 使用Image Optimization：Next.js内置了 next/image 组件，可以自动优化图像的加载。
import Image from 'next/image';

export default function Example() {
  return (
    <Image
      src="/example.jpg"
      alt="Example"
      width={500}
      height={500}
    />
  );
}
  • 启用静态文件缓存：可以在 next.config.js 中配置文件缓存策略，以减少重复加载。
module.exports = {
  images: {
    domains: ['yourdomain.com'],
  },
  staticPageGenerationTimeout: 60,
};

5.配置Canonical标签

使用Canonical标签可以避免重复内容问题。如果有多个URL指向相同的内容，Canonical标签可以告诉搜索引擎应该优先索引哪个URL。
import Head from 'next/head';
import { useRouter } from 'next/router';

export default function MyPage() {
  const router = useRouter();
  const canonicalUrl = `https://www.yoursite.com${router.pathname}`;

  return (
    <Head>
      <link rel="canonical" href={canonicalUrl} />
    </Head>
  );
}

6.使用Google Analytics跟踪SEO表现

通过集成Google Analytics，可以跟踪网站的流量、用户行为、以及SEO的表现。
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import * as gtag from '../lib/gtag';

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url);
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return <Component {...pageProps} />;
}
通过结合这些Next.js的SEO优化技巧，能够提升网站在搜索引擎中的排名，并确保搜索引擎能够有效地抓取和索引网站的内容。如果网站涉及动态内容或是不断更新的博客，这些优化将对网站流量产生显著的积极影响。
 

About

My desire to practice my skills and share my acquired knowledge fuels my endeavors.

Contact Me : znjessie858@gmail.com

Subscribe

Subscribe to receive notifications of my latest posts and unsubscribe at any time!

mailMailgithubGithubfacebookFacebookyoutubeYoutubelinkedinLinkedinxXinstagramInstagram
© 2024 • Built with Jessie 🔥
Jessie's Blog