Ngày 6: SEO & Metadata trong Next.js

💡

Lộ trình học NextJS

✅ Tối ưu SEO với next/head

✅ Thêm Open Graph, Meta Tags để hiển thị đẹp trên Facebook, Zalo, Twitter

✅ Tạo Component SEO.js để tái sử dụng

💡

Ngày trước đó

1️⃣ Tối ưu SEO với next/head

📌 SEO (Search Engine Optimization) giúp trang web hiển thị tốt hơn trên Google.

📌 Trong Next.js, ta sử dụng next/head để thêm <title>, <meta> vào <head> của trang.

Ví dụ, cập nhật pages/index.js:

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>Trang chủ | MyWebsite</title>
        <meta name="description" content="Website học Next.js miễn phí, tối ưu SEO và hiệu suất cao." />
        <meta name="keywords" content="Next.js, SEO, Web Development" />
        <meta name="author" content="Your Name" />
      </Head>
      
      <main className="max-w-2xl mx-auto text-center p-6">
        <h1 className="text-3xl font-bold text-blue-600">Chào mừng đến với Next.js</h1>
        <p className="text-gray-600">Tối ưu SEO dễ dàng với Next.js</p>
      </main>
    </>
  );
}

📌 Lợi ích:

✅ Google hiểu rõ nội dung trang hơn → Xếp hạng cao hơn.

✅ Hiển thị tiêu đề và mô tả chính xác trên Google.

2️⃣ Thêm Open Graph & Meta Tags

📌 Open Graph (OG) là tiêu chuẩn giúp hiển thị đẹp khi chia sẻ link trên Facebook, Zalo, Twitter.

🔹 Cập nhật pages/index.js với Open Graph meta tags:

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>Trang chủ | MyWebsite</title>
        <meta name="description" content="Website học Next.js miễn phí, tối ưu SEO và hiệu suất cao." />
        
        {/* Open Graph for Facebook, Zalo */}
        <meta property="og:title" content="Trang chủ | MyWebsite" />
        <meta property="og:description" content="Website học Next.js miễn phí, tối ưu SEO và hiệu suất cao." />
        <meta property="og:image" content="https://yourwebsite.com/thumbnail.jpg" />
        <meta property="og:url" content="https://yourwebsite.com" />
        <meta property="og:type" content="website" />

        {/* Twitter Card */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Trang chủ | MyWebsite" />
        <meta name="twitter:description" content="Website học Next.js miễn phí, tối ưu SEO và hiệu suất cao." />
        <meta name="twitter:image" content="https://yourwebsite.com/thumbnail.jpg" />
      </Head>

      <main className="max-w-2xl mx-auto text-center p-6">
        <h1 className="text-3xl font-bold text-blue-600">Chào mừng đến với Next.js</h1>
      </main>
    </>
  );
}

📌 Lợi ích:

✅ Chia sẻ link trên Facebook, Zalo sẽ hiển thị hình ảnh, tiêu đề, mô tả đẹp hơn.

✅ Twitter hỗ trợ hiển thị ảnh lớn với summary_large_image.

3️⃣ Tạo Component SEO.js để tái sử dụng

📌 Để tránh lặp lại code SEO trong mỗi trang, ta tạo một component SEO.js.

🔹 Tạo file components/SEO.js:

import Head from 'next/head';

export default function SEO({ title, description, image, url }) {
  return (
    <Head>
      <title>{title}</title>
      <meta name="description" content={description} />

      {/* Open Graph */}
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content="website" />

      {/* Twitter Card */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={image} />
    </Head>
  );
}

🔹 Sử dụng SEO.js trong index.js:

import SEO from '../components/SEO';

export default function Home() {
  return (
    <>
      <SEO 
        title="Trang chủ | MyWebsite"
        description="Website học Next.js miễn phí, tối ưu SEO và hiệu suất cao."
        image="https://yourwebsite.com/thumbnail.jpg"
        url="https://yourwebsite.com"
      />
      
      <main className="max-w-2xl mx-auto text-center p-6">
        <h1 className="text-3xl font-bold text-blue-600">Chào mừng đến với Next.js</h1>
      </main>
    </>
  );
}

📌 Lợi ích:

✅ Dễ dàng tái sử dụng cho nhiều trang khác nhau.

✅ Chỉnh sửa metadata chỉ cần cập nhật trong SEO.js.

🎯 Kết quả Ngày 6

✅ Biết cách tối ưu SEO với next/head.

✅ Thêm Open Graph & Twitter Card để chia sẻ đẹp hơn.

✅ Tạo component SEO.js để tái sử dụng.

📌 Bước tiếp theo: Ngày 7

👉 Triển khai & tối ưu performance với Next.js

• Tối ưu hình ảnh với next/image

• Tăng tốc độ preloading & lazy loading

• Tìm hiểu Next.js Analytics để đo hiệu suất

Ngày 6: SEO & Metadata trong Next.js