1.3K 24 120

Đã đăng vào thg 12 31, 2024 2:07 SA 10 phút đọc

Cẩm Nang Seo cho lập trình viên Next.js năm 2025

Bài viết này sẽ chia sẻ những kinh nghiệm và chiến lược SEO tốt nhất dành cho lập trình viên Next.js. Từ tối ưu metadata, cấu trúc URL đến đo lường hiệu suất, bài viết cung cấp danh sách kiểm tra SEO toàn diện giúp bạn xây dựng ứng dụng thành công.

1. Tối ưu hóa Siêu dữ liệu (Metadata)

Sử dụng thành phần next/head để thêm siêu dữ liệu như tiêu đề, mô tả và thẻ canonical (Tài liệu Next.js Head).
Việc tối ưu hóa siêu dữ liệu rất quan trọng đối với SEO vì nó cải thiện tỷ lệ nhấp, cung cấp cho công cụ tìm kiếm ngữ cảnh về trang và giúp xếp hạng nội dung phù hợp cao hơn trong kết quả tìm kiếm.

Ví dụ về Pages Router:

import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <title>Page Title</title>
      <meta name="description" content="Page Description" />
      <link rel="canonical" href="https://example.com/page" />
    </Head>
  )
}

Với phương pháp Page Router, việc triển khai rất đơn giản và dễ dàng.

Ví dụ về App Router:

export const metadata = {
  title: 'Page Title',
  description: 'Page Description',
}

Với phương pháp App Router, chúng ta sử dụng thuộc tính metadata trong tệp layout hoặc trang (Next.js Metadata API).

2. Cấu trúc và Định tuyến URL

Triển khai URL rõ ràng, mô tả và có thứ bậc (ví dụ: /blog/seo-checklist thay vì /blog?id=123).
URL rõ ràng cải thiện trải nghiệm người dùng bằng cách giúp chúng dễ đọc và ghi nhớ hơn, đồng thời giúp các công cụ tìm kiếm hiểu cấu trúc trang web hiệu quả hơn, từ đó nâng cao khả năng khám phá.
Sử dụng định tuyến động của Next.js để kiểm soát URL tốt hơn (Hướng dẫn Định tuyến Động).
Tránh lồng URL quá sâu để giữ chúng thân thiện với người dùng.

# Good URL Structure
| root
|--- app
|------ blog
|--------- seo-checklist

# Bad URL Structure
| root
|--- app
|------ blog
|--------- 2022
|------------ 01
|--------------- 01
|------------------ seo-checklist

3. Tối ưu hóa nội dung

Nghiên cứu từ khóa và đưa chúng vào nội dung một cách tự nhiên (Google Keyword Planner).
Tránh nhồi nhét từ khóa; tập trung vào việc cung cấp giá trị. Giữ từ khóa trong khoảng 1-3% tổng số nội dung.
Thường xuyên cập nhật nội dung để giữ cho nó mới mẻ và phù hợp.
Tài liệu tham khảo liên quan: Các loại từ khóa trong SEO, Công cụ kiểm tra mật độ từ khóa.

4. Tốc độ trang và chỉ số web chính

Theo dõi và cải thiện các chỉ số như LCP, FID và CLS bằng các công cụ như Lighthouse hoặc PageSpeed Insights (Google PageSpeed Insights).
Tối ưu hóa phông chữ, sử dụng preload và tránh thay đổi bố cục lớn. Đọc thêm về Tối ưu hóa Phông chữ và Hình ảnh.
Sử dụng các công cụ như WebPageTest để phân tích hiệu suất và xác định các điểm nghẽn.

5. Tối ưu hóa hình ảnh

Sử dụng thành phần Image của Next.js để tối ưu hóa hình ảnh tự động (Tài liệu Thành phần Hình ảnh).
Phục vụ hình ảnh đáp ứng với các thuộc tính sizes và srcSet phù hợp.
Bao gồm văn bản alt mô tả cho khả năng truy cập và SEO hình ảnh (Hướng dẫn về Khả năng truy cập của W3C).

6. Thân thiện với thiết bị di động

Sử dụng các nguyên tắc thiết kế đáp ứng, ví dụ như Thiết kế Web Đáp ứng.
Kiểm tra các trang bằng công cụ Kiểm tra Thân thiện với Thiết bị Di động của Google (Kiểm tra Thân thiện với Thiết bị Di động).
Đảm bảo nội dung dễ dàng truy cập và đọc được trên thiết bị di động vì trung bình hơn 70% lưu lượng truy cập đến từ thiết bị di động.

7. Sitemap, Robots.txt và Favicon

Sitemap

Sitemap là một tệp liệt kê tất cả các URL trên trang web của bạn. Nó giúp các công cụ tìm kiếm khám phá và lập chỉ mục nội dung của bạn hiệu quả hơn.
Tạo sitemap XML và gửi nó đến các công cụ tìm kiếm như Google (Gửi Sitemap của Google Search Console).

Robots.txt

Tệp robots.txt cho trình thu thập dữ liệu của công cụ tìm kiếm biết những trang hoặc tệp nào chúng có thể hoặc không thể yêu cầu từ trang web của bạn. Điều quan trọng là phải có một tệp robots.txt được cấu trúc tốt để hướng dẫn trình thu thập dữ liệu của công cụ tìm kiếm.
Định cấu hình tệp robots.txt để hướng dẫn trình thu thập dữ liệu của công cụ tìm kiếm (Hướng dẫn Robots.txt).

Favicon

Bạn chắc hẳn đã thấy favicon trong tab trình duyệt, bookmark và ứng dụng di động. Chúng là các biểu tượng trang web giúp người dùng nhận dạng trang web của bạn. Bao gồm Favicon để có trải nghiệm người dùng và thương hiệu tốt hơn. Sử dụng công cụ như Favicon IO để tạo favicon. Đây là một công cụ tuyệt vời vì nó cung cấp favicon với nhiều kích cỡ và định dạng khác nhau cũng như tệp manifest.json.

# Example of favicon
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />

8. Liên kết nội bộ

Sử dụng văn bản neo có ý nghĩa cho các liên kết nội bộ.
Tránh các liên kết bị hỏng bằng cách thường xuyên kiểm tra trang web của bạn (Công cụ Kiểm tra Liên kết Bị hỏng).
Triển khai breadcrumbs để điều hướng và SEO tốt hơn (Hướng dẫn về Breadcrumb Schema).

Lời khuyên hữu ích cho bạn: Tôi sử dụng linkMap để quản lý các liên kết nội bộ trong các dự án của mình. Đó là một đối tượng cặp khóa-giá trị đơn giản mà tôi sử dụng để quản lý tất cả các liên kết nội bộ trong dự án của mình. Bằng cách này, tôi có thể dễ dàng cập nhật các liên kết ở một nơi và nó sẽ được phản ánh trên toàn bộ dự án.

// linkMap.js
export const linkMap = {
  home: '/',
  about: '/about',
  services: '/services',
  contact: '/contact',
}

9. Render phía máy chủ (SSR) và Tạo trang web tĩnh (SSG)

Chọn phương thức render phù hợp (getServerSideProps, getStaticProps hoặc ISR) dựa trên yêu cầu nội dung (Next.js Data Fetching).
Sử dụng SSR cho nội dung động thay đổi thường xuyên.
Sử dụng SSG hoặc ISR cho các trang có nội dung tĩnh hoặc bán tĩnh để có hiệu suất và SEO tốt hơn.

10. Schema Markup

Thêm dữ liệu có cấu trúc bằng định dạng JSON-LD cho kết quả phong phú (Công cụ Kiểm tra Dữ liệu Có cấu trúc của Google).
Bao gồm các loại schema như Breadcrumb, Article, Product hoặc FAQ tùy thuộc vào nội dung của bạn (Tài liệu Schema.org).
Sử dụng các gói NPM như next-seo hoặc schema-dts để triển khai schema dễ dàng. Đọc thêm về Next-SEO và Schema DTS cho schema JSON-LD.

11. Thẻ Canonical và Tránh trùng lặp

Thẻ canonical là gì? Thẻ canonical là một thẻ meta cho các công cụ tìm kiếm biết phiên bản URL nào bạn muốn được coi là phiên bản chính. Điều này giúp ngăn chặn các vấn đề về nội dung trùng lặp.
Giống như trang chủ của bạn có thể được truy cập từ nhiều URL như https://example.com, https://example.com/index.html, https://example.com/home, v.v.
Bạn có thể sử dụng thẻ canonical để cho các công cụ tìm kiếm biết rằng https://example.com là URL chính. Đọc thêm về Hướng dẫn URL Canonical.
Đặt URL canonical một cách linh hoạt trong phần <head> dựa trên route hiện tại.

<link rel="canonical" href="https://example.com/page" />

12. Thẻ Open Graph và Twitter

Thêm thẻ Open Graph (og:title, og:description, og:image) để chia sẻ trên mạng xã hội (Giao thức Open Graph).

Ví dụ về Pages Router

import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <meta property="og:title" content="Page Title" />
      <meta property="og:description" content="Page Description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
      <meta property="og:type" content="website" />
      <meta property="og:url" content="https://example.com/page" />
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
  )
}

Ví dụ về bộ định tuyến ứng dụng

export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Page Description',
    images: [
      {
        url: 'https://example.com/image.jpg',
        width: 800,
        height: 600,
        alt: 'Image description',
      },
    ],
    type: 'website',
    url: 'https://example.com/page',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page Description',
    images: ['https://example.com/image.jpg'],
  },
}

13. Xử lý lỗi

Tạo các trang 404 và 500 tùy chỉnh bằng cách sử dụng pages/404.js và pages/500.js
Đảm bảo chúng cung cấp thông tin và hướng dẫn người dùng quay lại các trang hoạt động.

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

// pages/500.js
export default function Custom500() {
  return <h1>500 - Server-Side Error</h1>
}

14. Tối ưu hóa hiệu suất

Sử dụng CDN để phân phối các tệp tĩnh (Vercel Edge Network).
Thu nhỏ và đóng gói JavaScript với code-splitting và tree-shaking (Hướng dẫn Tối ưu hóa Webpack).
Triển khai lazy loading cho hình ảnh và thành phần.
Kích hoạt cài đặt next.config.js như compression và reactStrictMode (Cấu hình Next.js).
Những cài đặt này góp phần giúp trang tải nhanh hơn và trải nghiệm người dùng tốt hơn.

VD cấu hình:

// next.config.js
module.exports = {
  reactStrictMode: true,
  compress: true,
  images: {
    domains: ['example.com'], // Add domains for optimized images
  },
}

15. Phân tích và Giám sát

Tích hợp Google Analytics hoặc các công cụ theo dõi khác (Tích hợp Phân tích Next.js).
Sử dụng Google Search Console để theo dõi việc lập chỉ mục, hiệu suất tìm kiếm và lỗi (Hướng dẫn Search Console).
Những công cụ này giúp theo dõi hành vi của người dùng và xác định các khu vực tiềm năng để cải thiện SEO, chẳng hạn như tỷ lệ thoát cao hoặc các trang hoạt động kém.

Hy vọng bài viết giúp ích cho các bạn!

nextjs