SEO nâng cao (Open Graph, sitemap, robots.txt)

SEO (Search Engine Optimization) không chỉ dừng lại ở việc đặt tiêu đề trang. Để trang web của bạn hiển thị tốt trên Google và có preview đẹp khi chia sẻ lên mạng xã hội, bạn cần cấu hình các yếu tố như Open Graph, Twitter Cards, sitemap.xml, robots.txt và favicon.

Bài học này sẽ hướng dẫn bạn cách tối ưu các thành phần SEO quan trọng trong Next.js, đảm bảo ứng dụng của bạn chuẩn SEO, thân thiện với bot và hấp dẫn với người dùng.

SEO nâng cao (Open Graph, sitemap, robots.txt)

1. Tạo thẻ meta: Open Graph, Twitter Cards, Favicon

Meta tags quan trọng:

export const metadata = {
  title: "Bài viết | MyBlog",
  description: "Chi tiết bài viết về Next.js SEO",
  openGraph: {
    title: "Next.js SEO chuẩn xịn",
    description: "Tối ưu website với các kỹ thuật SEO nâng cao",
    url: "https://myblog.com/bai-viet/nextjs-seo",
    siteName: "MyBlog",
    images: [
      {
        url: "https://myblog.com/og-image.jpg",
        width: 1200,
        height: 630,
        alt: "Ảnh minh họa bài viết",
      },
    ],
    locale: "vi_VN",
    type: "article",
  },
  twitter: {
    card: "summary_large_image",
    title: "Next.js SEO chuẩn xịn",
    description: "Tối ưu website với các kỹ thuật SEO nâng cao",
    images: ["https://myblog.com/og-image.jpg"],
  },
  icons: {
    icon: "/favicon.ico",
  },
};

Đặt metadata ở page.tsx hoặc layout.tsx để khai báo theo trang.

2. Tạo sitemap.xml và robots.txt

Tùy chọn 1: Tạo thủ công

• Tạo file trong public/sitemap.xml:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourdomain.com/</loc>
    <lastmod>2025-04-11</lastmod>
  </url>
</urlset>

• Tạo file public/robots.txt:

User-agent: *
Allow: /

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

Tùy chọn 2: Tạo tự động bằng package next-sitemap

npm install next-sitemap

Tạo file next-sitemap.config.js:

module.exports = {
  siteUrl: 'https://yourdomain.com',
  generateRobotsTxt: true,
};

Thêm script trong package.json:

"scripts": {
  "postbuild": "next-sitemap"
}

Khi build, sitemap và robots.txt sẽ được tự động tạo trong thư mục /public.

3. Cấu hình SEO riêng cho từng trang

Với App Router, bạn có thể dùng generateMetadata() để tạo metadata động:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.summary,
    openGraph: {
      title: post.title,
      images: [post.imageUrl],
    },
  };
}

Điều này giúp SEO tốt hơn khi mỗi trang có tiêu đề & mô tả riêng.

4. Kiểm tra hiển thị SEO

Sử dụng các công cụ sau để kiểm tra preview khi chia sẻ:

• Facebook Sharing Debugger
• Twitter Card Validator
• Google Rich Results Test

Dán URL của trang vào để xem Open Graph có hoạt động chưa.

Kết luận

Việc tối ưu SEO nâng cao giúp bạn không chỉ có thứ hạng cao trên công cụ tìm kiếm, mà còn tăng lượt click khi chia sẻ đường dẫn trên MXH. Với App Router và metadata mới của Next.js, bạn có thể dễ dàng quản lý SEO cho từng trang, từng layout, và cải thiện trải nghiệm người dùng ngay từ kết quả tìm kiếm.