Ôn tập là dễ

Để tối ưu SEO trong Next.js, bạn cần tập trung vào các yếu tố sau:

1. Sử dụng Server-Side Rendering (SSR) hoặc Static Site Generation (SSG)

Next.js hỗ trợ các phương pháp rendering SEO-friendly như:

SSR (getServerSideProps) → Trang được render trên server khi có request.
SSG (getStaticProps) → Trang được tạo sẵn khi build, tối ưu tốc độ tải trang.

👉 Chọn SSG nếu dữ liệu ít thay đổi, chọn SSR nếu dữ liệu thay đổi thường xuyên.

Ví dụ SSR:

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

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

export default function Products({ products }) {
  return <div>{products.map((p) => <p key={p.id}>{p.name}</p>)}</div>;
}

Ví dụ SSG:

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

  return {
    props: { products: data },
    revalidate: 60, // Cập nhật sau mỗi 60 giây
  };
}

📌 Lưu ý: getInitialProps không tốt cho SEO vì nó chỉ chạy ở client-side trong quá trình navigation.

2. Cấu hình Meta Tags với next/head

Next.js không tự động thêm thẻ <title> hoặc <meta>, bạn cần dùng next/head:

import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <title>Trang chủ - My Website</title>
        <meta name="description" content="Mô tả trang chủ cho SEO tốt hơn." />
        <meta name="keywords" content="Next.js, SEO, React, Web Development" />
        <meta property="og:title" content="Trang chủ - My Website" />
        <meta property="og:description" content="Mô tả trang chủ trên mạng xã hội." />
        <meta property="og:image" content="/og-image.jpg" />
        <meta property="og:type" content="website" />
      </Head>
      <h1>Welcome to My Website</h1>
    </>
  );
}

👉 Các thẻ quan trọng:
✅ <title> – Tiêu đề trang (tốt nhất dưới 60 ký tự).
✅ <meta name="description"> – Mô tả trang (tốt nhất dưới 160 ký tự).
✅ <meta name="keywords"> – Từ khóa SEO (ít quan trọng hơn trước).
✅ <meta property="og:image"> – Ảnh hiển thị khi chia sẻ trên Facebook/Zalo.
✅ <meta name="robots" content="index, follow"> – Cho phép Google index trang.

3. Tối ưu URL và Routing trong Next.js

Cấu trúc URL chuẩn SEO:

Không chứa id dài dòng (/products/123xyz ❌ → /products/product-name ✅).
Tạo Dynamic Route để tối ưu URL.

Ví dụ:
Tạo file pages/products/[slug].js

import { useRouter } from "next/router";

export default function Product({ product }) {
  return (
    <>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </>
  );
}

export async function getStaticPaths() {
  const res = await fetch("https://api.example.com/products");
  const products = await res.json();

  const paths = products.map((p) => ({
    params: { slug: p.slug },
  }));

  return { paths, fallback: "blocking" };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/products/${params.slug}`);
  const product = await res.json();

  return { props: { product } };
}

✅ URL /products/smartphone-iphone15 thay vì /products/123xyz.
✅ Google dễ hiểu nội dung trang hơn.

4. Tạo Sitemap.xml và robots.txt

Tạo sitemap.xml giúp Google index nhanh hơn:
Tạo file pages/api/sitemap.js:

import { NextResponse } from "next/server";

export async function GET() {
  const urls = ["https://mywebsite.com", "https://mywebsite.com/about"];
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    ${urls.map((url) => `<url><loc>${url}</loc></url>`).join("")}
  </urlset>`;

  return new NextResponse(sitemap, {
    headers: { "Content-Type": "application/xml" },
  });
}

📌 Trỏ Google đến sitemap:
Tạo public/robots.txt:

User-agent: *
Allow: /
Sitemap: https://mywebsite.com/sitemap.xml

📌 Đăng sitemap lên Google Search Console để tăng tốc index.

5. Tối ưu Performance để cải thiện SEO

🚀 Tốc độ trang là yếu tố SEO quan trọng!

✅ Sử dụng Image Optimization
Next.js hỗ trợ <Image> để tối ưu ảnh:

import Image from "next/image";

<Image src="/example.jpg" width={800} height={500} alt="Example" priority />

✅ Lazy Loading với Next.js Dynamic Import
Chỉ tải component khi cần thiết để giảm tải trang:

import dynamic from "next/dynamic";

const HeavyComponent = dynamic(() => import("../components/HeavyComponent"), {
  ssr: false,
});

✅ Tối ưu Fonts
Next.js hỗ trợ tải font nhanh hơn:

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });

✅ Sử dụng CDN và tối ưu Cache
Next.js hỗ trợ tự động caching dữ liệu với getStaticProps.

6. Tạo Open Graph (OG) và Twitter Cards để hiển thị đẹp trên MXH

Thêm meta tags cho Facebook, Twitter, Zalo trong next/head:

<meta property="og:title" content="My Website - Best Products" />
<meta property="og:description" content="Khám phá sản phẩm tốt nhất." />
<meta property="og:image" content="/og-image.jpg" />
<meta property="og:url" content="https://mywebsite.com" />
<meta name="twitter:card" content="summary_large_image" />

7. Thêm Schema Markup (Structured Data) để cải thiện SEO

Giúp Google hiểu rõ nội dung hơn bằng cách thêm JSON-LD:

<Head>
  <script
    type="application/ld+json"
    dangerouslySetInnerHTML={{
      __html: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "Smartphone iPhone 15",
        "image": "https://mywebsite.com/iphone15.jpg",
        "description": "iPhone 15 chính hãng, giá tốt nhất.",
        "brand": { "@type": "Brand", "name": "Apple" },
      }),
    }}
  />
</Head>

📌 Giúp tăng khả năng hiển thị trên Google bằng Rich Snippets.

8. Tích hợp Google Analytics và Google Tag Manager

Cài Google Analytics để theo dõi lượt truy cập:

import Script from "next/script";

<Script
  src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"
  strategy="afterInteractive"
/>

📌 Kiểm tra SEO với Lighthouse trong Chrome DevTools.

Kết luận

🔹 SEO tốt trong Next.js = SSR/SSG + Meta Tags + Tối ưu tốc độ + Sitemap + Schema + Analytics
🔹 Dùng Next.js tốt hơn React thường vì có hỗ trợ SEO mạnh mẽ.
🔹 Kiểm tra SEO bằng Lighthouse để tối ưu hơn nữa.

👉 Làm đúng cách, trang của bạn sẽ lên top Google nhanh hơn! 🚀

Tối ưu seo hiệu quả dự án nextjs

1. Sử dụng Server-Side Rendering (SSR) hoặc Static Site Generation (SSG)

2. Cấu hình Meta Tags với next/head

3. Tối ưu URL và Routing trong Next.js

4. Tạo Sitemap.xml và robots.txt

5. Tối ưu Performance để cải thiện SEO

6. Tạo Open Graph (OG) và Twitter Cards để hiển thị đẹp trên MXH

7. Thêm Schema Markup (Structured Data) để cải thiện SEO

8. Tích hợp Google Analytics và Google Tag Manager

Kết luận

Nguyễn Quang Minh

Khám phá tuổi đời của 1 trang web

Thư mục .next trong Next.js là gì?

Dynamic APIs, cấu hình Route Segment, generateStaticParams, và React cache trong Next.js:

Hiển thị các loại file với reactJs

📊 Giải thích Output Build của Next.js với next-intl

Stay Updated