Next.js 中添加 SEO 最佳实践

SEO TDK 添加

config/site.ts

export const siteUrl = "https://www.tszones.com"

export const siteTitle = "TS Zones"

export const baseSiteConfig = {
  name: siteTitle,
  description: "my site description",
  url: siteUrl,
  keywords: [
    "TS Zones",
    "TS Zones",
    "TS Zones",
  ],
  authors: [
    {
      name: siteTitle,
      url: siteUrl,
    }
  ],
  creator: siteTitle,
  themeColor: "#fff",
  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon.ico",
    apple: "/favicon.ico",
  },
  ogImage: `${siteUrl}/og.png`,
  links: {
    twitter: siteUrl,
    github: siteUrl,
  },
}

export const siteConfig = {
  ...baseSiteConfig,
  openGraph: {
    type: "website",
    locale: "en_US",
    url: baseSiteConfig.url,
    title: baseSiteConfig.name,
    description: baseSiteConfig.description,
    siteName: baseSiteConfig.name,
  },
  twitter: {
    card: "summary_large_image",
    title: baseSiteConfig.name,
    description: baseSiteConfig.description,
    images: [`${siteUrl}/og.png`],
    creator: baseSiteConfig.creator,
  },
}

View Code

layout.tsx

import {
    siteConfig,
    siteTitle,
    siteUrl
} from "@/config/site";

export const metadata = {
    title: `tszones | ${siteTitle}`,
    description: "my site description 2",
    alternates: {
        canonical: `${siteUrl}/`,
    },
    ...siteConfig
};