如何优化你的博客SEO来获取流量

1月 20 2024 9 分钟读完 (约 1295 字) 阅读量

在如今火爆的短视频时代，我依旧相信文字的力量。直接有效，传达文字的力量直击人心。
很多技术人都拥有自己的博客，或记录，或贴广告赚银子，都需要足够的流量。
省流：在本文中，我们将讨论一些基于 next.js 关键的 seo 技术实操，帮助你优化网站的 SEO，从而吸引更多的读者，并扩大网站的影响力和公众力。

什么是 NEXT.JS

这里不多说了，你可以翻看这篇地址

什么是 SEO

SEO 是搜索引擎优化的缩写。它是提高网站在谷歌、必应和百度等搜索引擎中的可见度的过程。搜索引擎优化有助于提高网站在搜索结果中的排名，为网站带来更多流量。

搜索引擎优化是一个复杂的过程，需要花费大量的时间和精力。这不是一朝一夕就能完成的事情，但如果你想为自己的网站带来更多流量，付出努力是值得的。

Next.js 具有一些内置功能，可以让您更轻松地构建搜索引擎友好型网站。

实践

Robots.txt

我们首先要做的是在网站根目录下创建 robots.txt 文件。该文件会告诉搜索引擎哪些页面需要抓取，哪些页面不需要抓取。

您可以使用以下代码创建 robots.txt 文件：

// app/robots.ts  (App Router)
import { MetadataRoute } from "next";

const robots: MetadataRoute.Robots = () => {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: "/private/",
    },
    sitemap: "https://example.com/sitemap.xml",
  };
};

export default robots;

Sitemap.xml

接下来要做的是在网站根目录下创建一个 sitemap.xml 文件。该文件会告诉搜索引擎哪些页面需要抓取，哪些页面不需要抓取。

Next.js 可以为你生成 sitemap.xml 文件。您可以使用以下代码生成 sitemap.xml 文件：

// app/sitemap.ts  (App Router)

import { allPosts } from "/example.ts";
import { MetadataRoute } from "next";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const blogs = allPosts;
  const URL = "https://example.com";

  const restUrls = [
    {
      url: `${URL}/`, // 首页
      lastModified: new Date(),
      priority: 1.0,
      changeFrequency: "weekly",
    },
    {
      url: `${URL}/blogs`,
      lastModified: new Date(),
      priority: 0.8,
      changeFrequency: "daily",
    },
    {
      url: `${URL}/projects`,
      lastModified: new Date(),
      priority: 0.8,
      changeFrequency: "weekly",
    },
    {
      url: `${URL}/skills`,
      lastModified: new Date(),
      priority: 0.8,
      changeFrequency: "weekly",
    },
  ];

  const allBlogs = blogs.map(({ slugAsParams, date }) => {
    return {
      url: `${URL}/blog/${slugAsParams}`,
      lastModified: new Date(date),
      priority: 0.64,
      changeFrequency: "daily",
    };
  });

  return [...restUrls, ...allBlogs];
}

我们可以使用 generateSitemaps 为每篇博文生成动态路由。

// app/sitemap.ts  (App Router)

export async function generateSitemaps() {
  return [{ id: "one" }, { id: "two" }, { id: "three" }, { id: "four" }];
}

export default async function sitemap({
  id,
}: {
  id: string,
}): Promise<MetadataRoute.Sitemap> {}

元标签优化

元标签是提供网站元数据的 HTML 标签。搜索引擎使用它们来确定网站的内容以及在搜索结果中的排名。

// app/layout.tsx (App Router)
// app/page.tsx (App Router)

import { Metadata } from "next";

export async function generateMetadata(): Promise<Metadata> {
  return {
    metadataBase: new URL("https://example.com"),
    title:"Name,
    description: "description",
    authors: [
      {
        name: "Site Name",
        url: "https://example.com",
      },
    ],
    twitter: {
      card: "summary_large_image",
      creator: "@example",
      images: "some-image",
    },
    robots: "index, follow",
    alternates: {
      canonical: `https://example.com`,
      languages: {
        "en-US": "/",
      },
    },
    openGraph: {
      type: "website",
      url: `https://example.com`,
      title: "name",
      description: "description",
      siteName: "Site Name",
      images: [
        {
          url: "some-image",
        },
      ],
    },
    assets: "some-image",
    keywords: [
      "keywords"
    ],
  };
}

我们可以在 app/layout.tsx 或 app/page.tsx 文件中使用 generateMetadata 函数。

如果希望每个页面都有单独的元标记，可以在不同页面中使用相同的 generateMetadata 函数。
您可以提取出 utils 方法，然后在您的 app/layout.tsx 或 app/page.tsx 文件中调用该函数。

// app/layout.tsx (App Router)
// app/page.tsx (App Router)

export async function generateMetadata() {
  const metaData = commonMetaData({
    name: "",
    desc: "",
    image: "https:example.com/images/hero.png",
    url: "/",
    keywords: [],
  });
  return {
    ...metaData,
  };
}

优化图片和字体

Next.js 内置了图像组件，用于优化图像。我强烈建议使用图像组件而不是 img 标签。

Next.js next/font 为我们提供了优化字体的方法。它将自动优化字体（包括自定义字体）并移除外部网络请求，从而提高隐私保护和性能。

// app/layout.tsx (App Router)

import { Roboto } from "next/font/google";

const roboto = Roboto({
  weight: "400",
  subsets: ["latin"],
  display: "swap",
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  );
}

图片和字体对搜索引擎优化非常重要。它们可以帮助搜索引擎了解网站的内容以及在搜索结果中的排名。

它还有助于通过减少网络请求的数量来提高网站的性能。

优化第三方脚本

第三方脚本会在使用它的路由被访问时被提取。这意味着只有在需要时才会获取脚本，从而减少了网络请求的数量并提高了性能。

// app/layout.tsx (App Router)

import Script from "next/script";

const RootLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      {children}
      <Script src="https://example.com/script.js" />
    </>
  );
};

export default RootLayout;

结论

Next.js 是一个用于构建搜索引擎友好型网站的出色框架。内置的功能就能让搜索引擎优化友好型网站的构建变得更容易。

https://medium.com/@rajreetesh7/best-seo-practices-for-next-js-apps-6cad24c0fb0e

公号同步更新，欢迎关注 👻