Nắm vững Metadata & Open Graph trong Next.js 14+

Audio Briefing• Voice: Google Cloud Journey-F

0:00 / 0:00

Khi các nhà phát triển hoặc độc giả chia sẻ liên kết bài viết của bạn lên X (Twitter), LinkedIn, Discord, hoặc Slack, nó sẽ hiển thị như thế nào?

Nó có tạo ra một thẻ xem trước phong phú, độ phân giải cao với hình ảnh bắt mắt, tiêu đề hấp dẫn và tóm tắt súc tích không? Hay nó hiển thị một liên kết trống rỗng, bị hỏng với một tên miền dự phòng chung chung?

Nghiên cứu từ Buffer và HubSpot chỉ ra rằng các liên kết đi kèm với thẻ tóm tắt Open Graph phong phú nhận được tỷ lệ nhấp (CTR) cao hơn 3.2 lần so với các URL văn bản thuần túy.

Trong Next.js App Router, các mẫu cũ của việc chèn các thành phần <Head> từ next/head đã chính thức lỗi thời. Thay vào đó là một API Metadata thống nhất, được định kiểu chặt chẽ, xử lý liền mạch các định nghĩa tĩnh, tìm nạp dữ liệu generateMetadata() không đồng bộ, phân giải URL chuẩn tắc và đồ họa xã hội được tạo động ở biên.

Bạn muốn xem trang web của mình trông như thế nào trên Google, Twitter và LinkedIn trước khi xuất bản? Hãy kiểm tra các URL của bạn với công cụ đồng hành của chúng tôi Open Graph & Meta Tag Previewer Tool.

Metadata Tĩnh so với `generateMetadata()` Động

Next.js cung cấp hai cách chính để khai báo metadata tài liệu trong các route của bạn:

Tính năng	Đối tượng metadata tĩnh	Hàm generateMetadata() động
Trường hợp sử dụng	Các trang tĩnh (Trang chủ, Giới thiệu, Liên hệ, Chỉ mục công cụ)	Các route động ([slug], [id], các bài viết thương mại điện tử hoặc blog có tham số)
Tìm nạp dữ liệu	Không có chi phí không đồng bộ; được định nghĩa trực tiếp dưới dạng một đối tượng hằng số	Hỗ trợ không đồng bộ đầy đủ; có thể truy vấn cơ sở dữ liệu, CMS hoặc tìm nạp API
Bộ nhớ đệm hiệu suất	Được tính toán một lần tại thời điểm build trong quá trình tạo tĩnh	Tự động loại bỏ trùng lặp với các lần tìm nạp dữ liệu trang cha thông qua React cache()
Môi trường thực thi	Thực thi hoàn toàn trên server; 0 kB được gửi đến client bundle	Thực thi hoàn toàn trên server; 0 kB được gửi đến client bundle

Tái cấu trúc `<Head>` cũ thành Metadata của Next.js App Router

Đây là cách metadata của Next.js Pages Router cũ chuyển đổi thành metadata của App Router hiện đại, an toàn về kiểu:

1. Tiêu Chuẩn 1200 x 630

Cả Twitter và Facebook đều quy định tỷ lệ khung hình khoảng 1.91:1. Việc tạo hình ảnh Open Graph của bạn với chiều rộng 1200px và chiều cao 630px đảm bảo hiển thị sắc nét trên màn hình DPI cao mà không bị cắt xén tự động khó chịu.

2. Giới Hạn Độ Dài Tiêu Đề và Mô Tả

Tiêu đề: Giữ dưới 60 ký tự. Bất cứ thứ gì dài hơn sẽ bị cắt bớt bằng dấu ba chấm trên SERP di động và thẻ Twitter.
Mô tả: Giữ trong khoảng 140 đến 160 ký tự. Điều này cung cấp cho các công cụ tìm kiếm và nền tảng xã hội đủ ngữ cảnh mà không bị cắt cụt.

3. URL Hình Ảnh Tuyệt Đối Là Bắt Buộc

Các trình thu thập dữ liệu xã hội (như facebookexternalhit hoặc Twitterbot) không thực thi JavaScript và không thể phân giải các đường dẫn tương đối như /static/images/og.png. Luôn thêm tiền tố URL hình ảnh của bạn bằng tên miền đầy đủ của bạn: https://locionic.com/static/images/og.png.

4. URL Chuẩn Tắc Ngăn Ngừa Các Hình Phạt SEO Trùng Lặp

Nếu nội dung của bạn có thể truy cập được dưới nhiều URL (ví dụ: /?utm_source=twitter hoặc /en/blog/post), việc đặt alternates: { canonical: '...' } sẽ hướng dẫn Google tập trung tất cả quyền hạn xếp hạng vào URL chuẩn tắc chính.

Câu Đố Tương Tác: Kiểm Tra Kiến Thức SEO & Metadata Của Bạn

Bạn Cũng Có Thể Thích

Các Câu Hỏi Thường Gặp

Có! Next.js cung cấp hỗ trợ tích hợp cho việc tạo hình ảnh Open Graph động thông qua API 'ImageResponse' từ 'next/og'. Điều này cho phép bạn tạo hình ảnh SVG/PNG động bằng JSX và CSS Flexbox với tốc độ biên.

Thẻ <title> HTML tiêu chuẩn là thứ xuất hiện trong các tab trình duyệt và trang kết quả công cụ tìm kiếm của Google. Thẻ 'og:title' được các mạng xã hội (Facebook, LinkedIn, Discord, Slack) phân tích cú pháp đặc biệt. Trong hầu hết các trường hợp, chúng có thể giống hệt nhau, nhưng bạn có thể điều chỉnh 'og:title' để hấp dẫn và dễ nhấp hơn cho các nguồn cấp dữ liệu xã hội.

Bạn có thể sử dụng Open Graph & Meta Tag Previewer tương tác miễn phí của chúng tôi để kiểm tra tiêu đề, mô tả và hình ảnh của bạn trên Google SERP, Twitter Large Card và các chế độ xem trước của LinkedIn trong thời gian thực.

Các Bài Viết Chuyên Sâu Liên Quan

Cấu Trúc Thư Mục Next.js App Router: Các Thực Tiễn Tốt Nhất & Kiến Trúc Doanh Nghiệp — Tổ chức các layout, nhóm route và metadata một cách rõ ràng trên các codebase lớn.
Lỗi Hydration của Next.js: Khắc Phục "Text Content Mismatch" & 418 — Ngăn chặn các lỗi không khớp SSR do metadata hoặc script động gây ra.
Chiến Lược Bộ Nhớ Đệm & Tái Xác Thực của Next.js App Router — Tìm hiểu sâu về 4 lớp bộ nhớ đệm trong Next.js.

Nắm vững Metadata & Open Graph trong Next.js 14+: Thẻ xã hội động ở quy mô lớn

Metadata Tĩnh so với `generateMetadata()` Động