Cách tối ưu SEO cho SaaS Boilerplate với Next.js

Khi xây dựng một sản phẩm SaaS (Software as a Service), xây dựng tính năng sản phẩm chỉ là 50% chặng đường. 50% còn lại là làm thế nào để khách hàng tìm thấy bạn. Và giải pháp bền vững, chi phí tối ưu nhất chính là SEO (Search Engine Optimization).

Trong bài viết này, chúng ta sẽ cùng đi qua cách thiết lập và tối ưu SEO toàn diện cho dự án Next.js App Router sử dụng MDX để làm Blog Engine.

Tại sao chọn MDX làm Blog Engine cho SaaS?

MDX cho phép bạn viết JSX trực tiếp bên trong các file Markdown thông thường. Điều này mang lại sự linh hoạt tối đa:

• Tốc độ tải trang siêu nhanh: Next.js compile MDX thành HTML tĩnh (SSG), giúp đạt điểm số 100/100 Lighthouse dễ dàng.
• Tự do tùy biến: Bạn có thể chèn các Component React như Pricing Card, Newsletter Form hoặc Interactive Calculator trực tiếp vào nội dung bài viết.
• Kiểm soát mã nguồn: Nội dung bài viết được lưu trữ cùng Git repository, dễ dàng tracking các thay đổi.

3 Bước Tối Ưu SEO Cho Next.js Blog

1. Cấu hình Dynamic Metadata & Canonical URL

Đảm bảo mỗi bài viết đều có tiêu đề độc nhất và thẻ canonical để tránh trùng lặp nội dung. Trong file app/blog/[slug]/page.tsx, hãy sử dụng hàm generateMetadata:

export async function generateMetadata({ params }) {
  const post = getPostBySlug(params.slug);
  if (!post) return {};

  return {
    title: post.metadata.title,
    description: post.metadata.description,
    alternates: {
      canonical: `/blog/${post.slug}`,
    },
    openGraph: {
      images: [post.metadata.coverImage],
    },
  };
}

2. Tạo Sitemap Động (sitemap.ts)

Next.js hỗ trợ tự động tạo sitemap.xml thông qua Route Handler app/sitemap.ts. Hãy quét toàn bộ các bài viết MDX để sinh URL động cho Googlebot cào dữ liệu:

import { getAllPosts } from "@/shared/lib/mdx";

export default async function sitemap() {
  const posts = getAllPosts();
  const blogUrls = posts.map((post) => ({
    url: `https://devenfly.com/blog/${post.slug}`,
    lastModified: new Date(post.metadata.date),
  }));

  return [
    {
      url: "https://devenfly.com",
      lastModified: new Date(),
    },
    ...blogUrls,
  ];
}

3. Tối ưu Schema Markup (JSON-LD)

Schema giúp Google hiểu rõ cấu trúc bài viết của bạn (Loại dữ liệu: Article, Tác giả, Ngày xuất bản). Bạn có thể nhúng trực tiếp JSON-LD script vào trang chi tiết bài viết:

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": post.metadata.title,
  "datePublished": post.metadata.date,
  "author": {
    "@type": "Person",
    "name": post.metadata.author,
  }
};

return (
  <section>
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
    {/* Content */}
  </section>
);

Kết luận

Bằng cách triển khai MDX, tối ưu cấu trúc Routing, tự động hóa Sitemap và nhúng JSON-LD Schema, trang SaaS của bạn đã sẵn sàng xuất hiện ở những vị trí cao nhất trên bảng xếp hạng Google.

Hãy bắt đầu viết nội dung chất lượng và để công cụ tìm kiếm làm phần việc còn lại!