Trình xem trước Open Graph & SEO

Nhập metadata, xem ngay link của bạn hiển thị ra sao trên Google, Facebook, Twitter — và lấy sẵn code Next.js Metadata.

49/60 ký tự
157/160 ký tự
verdbench.ninhhub.id.vnhttps://verdbench.ninhhub.id.vn

Verdbench — Bộ công cụ lập trình 100% Client-Side

Bộ sưu tập công cụ dành cho lập trình viên: định dạng JSON, chuyển đổi CSS sang Tailwind, mô phỏng Cron, và nhiều hơn nữa — xử lý hoàn toàn trên trình duyệt.

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Verdbench — Bộ công cụ lập trình 100% Client-Side",
  description: "Bộ sưu tập công cụ dành cho lập trình viên: định dạng JSON, chuyển đổi CSS sang Tailwind, mô phỏng Cron, và nhiều hơn nữa — xử lý hoàn toàn trên trình duyệt.",
  metadataBase: new URL("https://verdbench.ninhhub.id.vn"),
  openGraph: {
    title: "Verdbench — Bộ công cụ lập trình 100% Client-Side",
    description: "Bộ sưu tập công cụ dành cho lập trình viên: định dạng JSON, chuyển đổi CSS sang Tailwind, mô phỏng Cron, và nhiều hơn nữa — xử lý hoàn toàn trên trình duyệt.",
    url: "https://verdbench.ninhhub.id.vn",
    siteName: "verdbench.ninhhub.id.vn",
    images: [
      {
        url: "https://verdbench.ninhhub.id.vn/og-image.png",
        width: 1200,
        height: 630,
        alt: "Verdbench — Bộ công cụ lập trình 100% Client-Side",
      },
    ],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Verdbench — Bộ công cụ lập trình 100% Client-Side",
    description: "Bộ sưu tập công cụ dành cho lập trình viên: định dạng JSON, chuyển đổi CSS sang Tailwind, mô phỏng Cron, và nhiều hơn nữa — xử lý hoàn toàn trên trình duyệt.",
    images: ["https://verdbench.ninhhub.id.vn/og-image.png"],
  },
};
Tiêu đề (Title): 49/60Mô tả (Description): 157/160
FAQ
Nhóm Văn bản (Text)•Tài liệu kỹ thuật & Đặc tả RFC

Tài liệu & Hướng dẫn chuyên sâu: Trình xem trước Open Graph & SEO (Open Graph & SEO Previewer)

1. Tổng quan & Nguyên lý hoạt động

Một trang web được chia sẻ trên Facebook, Twitter hay xuất hiện trên kết quả tìm kiếm Google không hiển thị y hệt giao diện thật của nó — các nền tảng này đọc riêng các thẻ `<meta>` (thẻ Open Graph `og:*`, thẻ Twitter Card, thẻ `description`) để dựng "thẻ xem trước" (preview card) của riêng mình. Sai sót phổ biến nhất là viết title/description quá dài (bị cắt cụt giữa chừng), quên khai báo `og:image` đúng kích thước, hoặc không biết chính xác mã Next.js Metadata API cần viết thế nào. Trình xem trước Open Graph & SEO của Verdbench giải quyết cả ba vấn đề: nhập metadata một lần, xem ngay mô phỏng chính xác bằng CSS trên cả ba nền tảng, kèm bộ đếm ký tự cảnh báo màu khi vượt giới hạn khuyến nghị, và xuất sẵn cả hai dạng code (HTML `<meta>` tags thuần và object `metadata` của Next.js App Router) để dán thẳng vào dự án.

2. Ưu thế kiến trúc & Tính năng nổi bật

Mô phỏng chính xác 3 nền tảng bằng CSS thuần

Thẻ xem trước Google Search (tiêu đề xanh, breadcrumb domain, mô tả xám), Facebook/LinkedIn (card ảnh lớn og:image) và Twitter (summary_large_image) được dựng bằng Tailwind CSS theo đúng tỷ lệ, màu sắc và kiểu chữ thật của từng nền tảng — không phải ảnh chụp màn hình tĩnh.

Bộ đếm ký tự cảnh báo màu theo thời gian thực

Title và Description được đếm ký tự liên tục với 3 mức màu (xanh lá: an toàn, vàng: gần giới hạn, đỏ: sẽ bị cắt cụt) dựa trên giới hạn hiển thị phổ biến của Google (60 ký tự cho tiêu đề, 160 ký tự cho mô tả).

Tự phát hiện ảnh lỗi & xuất 2 định dạng code

Nếu Image URL không tải được, khung ảnh tự chuyển sang trạng thái skeleton rõ ràng thay vì để trống hoặc vỡ layout. Phần code sinh sẵn gồm 2 tab: thẻ `<meta>` HTML thuần và object `export const metadata: Metadata` chuẩn Next.js App Router.

3. Giới hạn ký tự khuyến nghị & vai trò từng thẻ meta

Vượt quá các giới hạn này không gây lỗi kỹ thuật, nhưng Google/mạng xã hội sẽ cắt cụt nội dung bằng dấu "...", làm mất thông tin quan trọng ở cuối câu:

Thẻ metaVai tròGiới hạn khuyến nghị
title / og:titleTiêu đề hiển thị trên tab trình duyệt, kết quả tìm kiếm, link chia sẻ~60 ký tự
description / og:descriptionĐoạn mô tả ngắn bên dưới tiêu đề~155-160 ký tự
og:imageẢnh đại diện hiển thị trên Facebook, LinkedIn, TwitterKhuyến nghị 1200×630px (tỷ lệ 1.91:1)
twitter:cardKiểu card Twitter — summary_large_image cho ảnh lớnGiá trị cố định, không đếm ký tự
canonical / og:urlURL chuẩn của trang, tránh trùng lặp nội dung khi có nhiều URL trỏ cùng 1 trangKhông giới hạn ký tự

4. Câu hỏi thường gặp (FAQ)

Giải đáp các thắc mắc phổ biến của lập trình viên khi sử dụng tiện ích Trình xem trước Open Graph & SEO (Open Graph & SEO Previewer).

Vì kết quả tìm kiếm tự nhiên (organic search result) tiêu chuẩn của Google không hiển thị ảnh trừ khi trang có structured data (schema.org) đặc biệt hoặc được Google Images/Discover thu thập riêng. og:image chủ yếu phục vụ việc chia sẻ trên mạng xã hội (Facebook, Twitter, LinkedIn, Zalo, Messenger...), không ảnh hưởng đến giao diện kết quả tìm kiếm thông thường — đây là lý do công cụ tách riêng tab Google Search không có ảnh.

5. Công cụ liên quan