Công cụ tạo Meta Tag

Tham số đầu vào
Thẻ đã tạo

Công cụ tạo thẻ Meta trên trình duyệt, hỗ trợ tạo title, description, keywords, canonical, Open Graph, Twitter Card, robots và các thẻ khác, tự động escape thực thể HTML, hướng dẫn độ dài ký tự thời gian thực kèm trạng thái màu sắc, sao chép và tải xuống một cú nhấp.

Đề xuất Liên quan

Trình tạo Sitemap

Trình tạo QR Code/Barcode

Nén TS

Bộ chuyển đổi Thập lục phân

Hash SHA-256

Giải mã Base64

Trường hợp sử dụng

  • Tạo toàn bộ bộ Meta tag cho trang chủ, trang danh sách và trang chi tiết trước khi ra mắt trang web mới, hoàn thành nhanh chóng cấu hình SEO cơ bản
  • Cấu hình thẻ Open Graph loại article và Twitter Card loại summary_large_image trước khi đăng bài viết blog, nâng cao hiệu quả chia sẻ trên nền tảng mạng xã hội
  • Cấu hình og:type loại product cho trang sản phẩm thương mại điện tử, đặt thông tin cấu trúc như og:image, og:price:amount để tối ưu hóa hiển thị sản phẩm trên mạng xã hội
  • Tạo lại thẻ canonical sau khi tái cấu trúc trang web hoặc thay đổi tên miền, chuẩn hóa URL thống nhất, tránh phân tán quyền lực do nội dung trùng lặp
  • Cấu hình theme-color cho trang web di động, để thanh địa chỉ Chrome và Safari trên di động nhất quán với màu sắc thương hiệu
  • Khi phát triển với các framework SSR/SSG như Next.js, Nuxt.js, Gatsby, tạo nhanh toàn bộ mã Meta tag cần thiết cho cấu hình head
  • Cấu hình thủ công Meta tag cho mẫu trang tùy chỉnh trong các hệ thống CMS như WordPress, Shopify, không phụ thuộc vào plugin SEO
  • Tạo nhanh kết hợp thẻ robots meta chính xác khi khắc phục sự cố lập chỉ mục trang web (ví dụ noindex,nofollow cho môi trường thử nghiệm)
  • Nhân viên vận hành mạng xã hội cấu hình thẻ chia sẻ cho trang đích chiến dịch, đảm bảo xem trước chính xác khi chia sẻ lên Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, Discord
  • Lập trình viên front-end khi viết mẫu trang HTML được tự động xử lý entity escape cho thẻ Meta, tránh lỗi cú pháp HTML do ký tự đặc biệt

Cách Sử dụng

  1. Điền tiêu đề trang (khuyến nghị 50-60 ký tự), meta description (khuyến nghị 120-160 ký tự), keywords (phân cách bằng dấu phẩy), canonical URL và tác giả trong phần "Thẻ SEO cơ bản"
  2. Chọn quy tắc lập chỉ mục và theo dõi phù hợp trong phần "Lệnh crawler robots": index/noindex (có lập chỉ mục hay không), follow/nofollow (có theo dõi liên kết hay không), có thể bổ sung các tùy chọn như noarchive, nosnippet
  3. Nhập hoặc chọn giá trị màu thập lục phân theme-color trong phần "Cài đặt màu chủ đề", dùng để tô màu thanh địa chỉ trình duyệt di động
  4. Chuyển sang phần "Thẻ Open Graph", chọn og:type (một trong website/article/product/profile), điền og:title, og:description, og:image (URL ảnh chia sẻ, khuyến nghị 1200×630 pixel), og:url, og:site_name, og:locale
  5. Chuyển sang phần "Thẻ Twitter Card", chọn loại twitter:card (một trong summary/summary_large_image/app/player), điền twitter:site @handle, twitter:title, twitter:description, twitter:image
  6. Quan sát khu vực xem trước thời gian thực bên phải và chỉ báo màu đếm ký tự trong quá trình nhập: Màu xanh lá nghĩa là độ dài tối ưu, màu cam nghĩa là gần giới hạn, màu xám nghĩa là quá ngắn hoặc quá dài cần điều chỉnh
  7. Sau khi xác nhận thẻ chính xác, nhấp nút "Sao chép vào bộ nhớ đệm" để sao chép toàn bộ mã rồi dán vào khu vực HTML head, hoặc nhấp "Tải xuống file HTML" để lưu thành meta-tags.html sử dụng sau này

Tính năng

  • Tự động escape thực thể HTML: Escape an toàn năm ký tự đặc biệt &, <, >, ", ', tránh lỗi cú pháp HTML trong các thẻ được tạo ra
  • Chỉ báo độ dài title thông minh: Màu xanh lá (tối ưu) trong khoảng 50-60 ký tự, chỉ báo trạng thái màu cam/xám khi vượt quá hoặc chưa đủ, đếm ký tự theo thời gian thực
  • Chỉ báo độ dài meta description thông minh: Màu xanh lá (khoảng hiển thị tối ưu) trong khoảng 120-160 ký tự, trạng thái màu thay đổi theo thời gian thực khi vượt quá hoặc quá ngắn
  • Hỗ trợ 4 tùy chọn og:type: website (trang web chung), article (bài viết/blog), product (trang sản phẩm), profile (trang cá nhân), phù hợp với các loại trang khác nhau
  • Hỗ trợ 4 loại twitter:card: summary (tóm tắt ảnh nhỏ), summary_large_image (tóm tắt ảnh lớn), app (thẻ ứng dụng), player (thẻ video/trình phát)
  • Kết hợp lệnh robots: Hỗ trợ kết hợp tự do các lệnh crawler như index/noindex, follow/nofollow, noarchive, nosnippet, noimageindex
  • Thẻ meta tác giả author: Hỗ trợ các thẻ ký tên tác giả như content-author, article:author, phù hợp với trang blog và tin tức
  • Cấu hình theme-color: Hỗ trợ đặt màu chủ đề cho thanh địa chỉ trình duyệt di động, cung cấp bộ chọn màu và nhập giá trị thập lục phân
  • Cấu hình og:site_name: Đặt riêng trường tên trang web trong giao thức Open Graph, đảm bảo hiển thị đúng khi chia sẻ trên mạng xã hội
  • Cấu hình @handle twitter:site: Hỗ trợ điền @handle tài khoản chính thức Twitter/X, liên kết thẻ chia sẻ với tài khoản chính thức
  • Đầu ra cấu trúc ba phân vùng: Hiển thị kết quả theo ba phần rõ ràng: SEO cơ bản, Open Graph và Twitter Card, cấu trúc rõ ràng nhìn một cái là hiểu
  • Sao chép vào bộ nhớ đệm một cú nhấp: Mã được tạo ra có thể sao chép một cú nhấp mà không cần chọn thủ công, tương thích với mọi môi trường trình duyệt
  • Tải xuống dưới dạng meta-tags.html: Toàn bộ thẻ được tạo ra có thể tải xuống thành file HTML độc lập, tiện lợi cho việc lưu trữ hoặc nhập trực tiếp vào dự án
  • Tạo và xem trước thời gian thực: Nhập nội dung tức thì tạo ra mã thẻ, đồng bộ xem trước hiệu quả hiển thị kết quả tìm kiếm SERP và kiểu thẻ chia sẻ xã hội

Câu hỏi Thường gặp

Mã được tạo ra bởi Công cụ tạo Meta Tag có thể trực tiếp sao chép vào trang web sử dụng không? Cần sửa đổi không?

Có thể trực tiếp sao chép sử dụng. Mã được tạo ra bởi công cụ này là các thẻ Meta HTML định dạng chuẩn, có tự động escape thực thể HTML; chỉ cần dán trực tiếp giữa &lt;head&gt; và &lt;/head&gt; của trang bạn là được. Bạn chỉ cần đảm bảo các URL bạn điền (canonical, og:image, og:url, twitter:image) là địa chỉ trực tuyến thực tế của trang web, không phải là placeholder ví dụ. Nếu sử dụng các giải pháp quản lý head từ framework như Next.js, Nuxt.js, React Helmet, Vue Meta, bạn có thể cần điều chỉnh nhẹ theo cú pháp mẫu JSX/Vue của framework, nhưng các thuộc tính và giá trị thẻ có thể tái sử dụng trực tiếp.

Tại sao phải điền og:image? Không có ảnh sẽ sao?

og:image trực tiếp ảnh hưởng đến hiệu quả thị giác và tỷ lệ nhấp chuột của thẻ chia sẻ xã hội. Liên kết không có og:image khi chia sẻ lên các nền tảng như Facebook, Twitter, LinkedIn, WeChat hoặc chỉ hiển thị liên kết văn bản trơn tru không có xem trước ảnh nào, hoặc nền tảng sẽ ngẫu nhiên lấy một ảnh nhỏ từ trang (có thể là logo, ảnh đại diện, ảnh quảng cáo, thậm chí ảnh không liên quan), kết quả hiển thị cực kỳ kém, tỷ lệ nhấp chuột thường thấp hơn 50% so với chia sẻ có ảnh xem trước chính xác. Kích thước og:image khuyến nghị là 1200×630 pixel (tỷ lệ 1.91:1), phải là URL tuyệt đối có thể truy cập công khai, kích thước tệp không vượt quá 5MB.

Cả thẻ Open Graph và Twitter Card đều cần cấu hình sao? Chỉ cấu hình OG có được không?

Nền tảng Twitter/X thực sự đọc thẻ Open Graph làm dự phòng — nếu bạn không cấu hình bất kỳ thẻ nào có tiền tố twitter:, Twitter sẽ cố gắng sử dụng og:title, og:description, og:image để tạo thẻ. Nhưng cấu hình riêng Twitter Cards có một số lợi ích: ① có thể chọn loại twitter:card phù hợp nhất (đặc biệt là loại ảnh lớn summary_large_image; OG có thể không mặc định là kiểu ảnh lớn); ② có thể đặt twitter:site để liên kết tài khoản Twitter chính thức của bạn, tăng chuyển đổi theo dõi; ③ có thể tối ưu hóa độ dài title/description riêng cho Twitter, phân biệt với OG. Chúng tôi khuyến nghị cấu hình cả hai; công cụ này hỗ trợ tạo đồng thời với công sức về cơ bản là như nhau.

Nếu độ dài title và meta description vượt quá khoảng khuyến nghị sẽ sao? Có bị phạt không?

Vượt quá độ dài sẽ không bị công cụ tìm kiếm phạt, nhưng nội dung sẽ bị cắt. Trong kết quả tìm kiếm Google, phần title vượt quá khoảng 600 pixel chiều rộng (khoảng 50-60 ký tự) sẽ bị cắt bằng dấu ba chấm, người dùng không thể thấy tiêu đề đầy đủ; meta description vượt quá khoảng 920 pixel chiều rộng (khoảng 120-160 ký tự) cũng sẽ bị cắt. Vấn đề của việc quá ngắn là lãng phí không gian hiển thị quý giá, không thể truyền đạt đầy đủ giá trị trang và thu hút nhấp chuột. Lưu ý đây không phải là giới hạn số ký tự chính xác mà là giới hạn chiều rộng pixel — ký tự toàn chiều, chữ hoa, chữ rộng như W/M và emoji chiếm nhiều chiều rộng hơn, vì vậy hiển thị thực tế có thể cắt sớm hơn số ký tự cho thấy. Các chỉ báo màu của công cụ này là tham khảo thực hành tốt nhất dựa trên số ký tự.

HTML entity escaping là gì? Tại sao công cụ này tự động làm điều đó?

Một số ký tự trong HTML có ý nghĩa cú pháp đặc biệt; viết trực tiếp chúng vào giá trị thuộc tính sẽ phá vỡ cấu trúc HTML: dấu ngoặc kép " là ký tự kết thúc giá trị thuộc tính, viết trực tiếp gây đóng thẻ sớm; & là ký tự bắt đầu escape thực thể; < và > là dấu phân cách thẻ. Các ký tự này phải được viết dưới dạng thực thể để hiển thị đúng: & → &amp;, < → &lt;, > → &gt;, " → &quot;, ' → &#x27;. Nếu title hoặc description của bạn chứa &, dấu ngoặc kép, dấu ngoặc nhọn hoặc các ký tự đặc biệt khác, viết chúng mà không escape sẽ gây lỗi cú pháp HTML, có thể làm các thẻ tiếp theo đều vô hiệu. Công cụ này tự động xử lý việc escape này; bạn chỉ cần nhập văn bản gốc trực tiếp mà không cần escape thủ công.

Tại sao crawler Facebook/Twitter không thể nắm bắt thẻ Meta từ các trang tôi viết bằng React/Vue?

Bởi vì các framework front-end hiện đại như React, Vue và Angular mặc định là hiển thị phía client (CSR) — mã nguồn HTML trống hoặc chỉ chứa một div container, và thẻ Meta được chèn động vào DOM sau khi trình duyệt thực thi JavaScript. Nhưng hầu hết các crawler nền tảng mạng xã hội như facebookexternalhit của Facebook, Twitterbot, LinkedInBot và crawler WeChat không thực thi JavaScript (hoặc có khả năng thực thi rất hạn chế); mã HTML thô mà chúng kéo không chứa thẻ Meta, tất nhiên không thể tạo thẻ chia sẻ. Giải pháp: ① Sử dụng SSR (Server-Side Rendering) hoặc SSG (Static Site Generation) với các framework như Next.js, Nuxt.js, Gatsby, Astro, hiển thị thẻ Meta hoàn chỉnh vào mã nguồn HTML ở phía máy chủ; ② Sử dụng dịch vụ prerendering như prerender.io, Rendertron để trả về HTML tĩnh cho crawler; ③ Sử dụng dịch vụ tạo ảnh OG chuyên dụng để tạo thẻ động.

canonical và og:url của cùng một trang có cần điền giống hệt nhau không?

Có, chúng nên nhất quán. Thẻ canonical là cho công cụ tìm kiếm, nói với họ URL ưu tiên; og:url là cho nền tảng mạng xã hội, nói với họ URL duy nhất của nội dung này để tổng hợp lượt thích, bình luận và số chia sẻ. Cả hai đều chỉ đến cùng một URL là thực hành tốt nhất, tránh phân tán quyền lực và phân mảnh số liệu xã hội. Lưu ý cả hai đều phải là URL tuyệt đối đầy đủ (bao gồm https://, tên miền, đường dẫn hoàn chỉnh), không phải đường dẫn tương đối. Nếu URL có tham số UTM hoặc tham số theo dõi, cả canonical và og:url đều nên chỉ đến URL sạch không có tham số.

Các liên kết trên trang noindex vẫn sẽ bị crawler kéo không? Có truyền quyền lực không?

noindex nghĩa là "đừng lập chỉ mục trang này", không phải "đừng kéo" và cũng không phải "đừng theo dõi liên kết". Crawler vẫn kéo các trang noindex (chỉ như vậy chúng mới có thể thấy thẻ noindex), và nếu robots meta cũng đặt follow (đó là giá trị mặc định), crawler sẽ tiếp tục kéo các liên kết trên trang. Nhưng về việc truyền quyền lực: tuyên bố chính thức của Google là các trang noindex cuối cùng sẽ bị loại khỏi chỉ mục, và trọng lượng liên kết trên các trang đó không truyền bình thường (vì bản thân trang không được lập chỉ mục). Vì vậy nếu bạn muốn crawler đến các trang khác thông qua một trang nào đó nhưng không muốn bản thân trang đó được lập chỉ mục, sử dụng noindex,follow là hiệu quả, nhưng đừng mong đợi các trang noindex truyền trọng lượng như các trang bình thường.

Những trình duyệt nào hỗ trợ theme-color? iOS Safari có hỗ trợ không?

theme-color hiện nay được hỗ trợ trên: Chrome/Firefox/Edge/Brave và các trình duyệt dựa trên Chromium khác trên Android đã hỗ trợ từ lâu với hiệu ứng rõ ràng nhất; Safari đã hỗ trợ theme-color từ iOS 15 và macOS Monterey, nhưng cách thực hiện của Safari hơi khác — nó tự động điều chỉnh dựa trên màu nền trang và cũng hỗ trợ đặt các màu khác nhau cho chế độ sáng/chế độ tối bằng thuộc tính media. Chrome máy tính để bàn cũng áp dụng theme-color ở thanh tab v.v. từ một số phiên bản nhất định. IE và các trình duyệt cũ không hỗ trợ, nhưng việc không hỗ trợ cũng không sao — chỉ là không có hiệu ứng màu chủ đề, không ảnh hưởng đến bất kỳ chức năng nào. Màu chủ đề khuyến nghị nên khớp với màu header/thanh điều hướng trang web của bạn để tính nhất quán thị giác.

Tại sao kết quả tìm kiếm Google đôi khi hiển thị mô tả không phải cái tôi viết?

Google không đảm bảo 100% sử dụng meta description bạn viết. Khi Google xét rằng description của bạn không đủ liên quan đến truy vấn tìm kiếm của người dùng, hoặc chất lượng description thấp (ví dụ nhồi nhét từ khóa, trùng lặp toàn trang, nội dung không khớp), Google sẽ tự động trích đoạn từ nội dung trang mà nó cho là liên quan nhất đến từ khóa tìm kiếm làm mô tả kết quả tìm kiếm hiển thị. Đây là hành vi bình thường của Google, không phải lỗi. Để tăng tỷ lệ description được sử dụng: ① Viết mô tả độc nhất, mô tả chính xác nội dung cho mỗi trang; ② Bao gồm tự nhiên từ khóa cốt lõi trang trong description mà không nhồi nhét; ③ Giữ độ dài trong khoảng hợp lý, không quá ngắn; ④ Nội dung description thực sự phải được phản ánh trong nội dung trang. Mặc dù Google đôi khi viết lại, bạn vẫn nên viết mô tả một cách cẩn thận — đây là phương tiện chính của bạn để chủ động kiểm soát hiển thị.

Sau khi cấu hình thẻ, làm sao để xác minh chúng có hiệu lực đúng cách không? Có những công cụ kiểm tra nào?

Xác minh thẻ Meta bao gồm một số bước và công cụ: ① Đầu tiên sử dụng "Xem mã nguồn trang" của trình duyệt để tìm kiếm các thẻ title, description, og: v.v. trong mã nguồn HTML thô, kiểm tra chúng tồn tại với nội dung đúng (lưu ý: mã nguồn, không phải bảng điều khiển Elements, vì mã nguồn là những gì máy chủ trả về; CSR sẽ không hiển thị trong mã nguồn); ② Sử dụng Facebook Sharing Debugger để xác minh thẻ OG và làm mới bộ nhớ đệm; ③ Sử dụng Twitter Card Validator để xác minh Twitter Cards; ④ Sử dụng Google Rich Results Test để kiểm tra các thẻ cơ bản; ⑤ Sử dụng công cụ "Kiểm tra URL" của Google Search Console để xem những gì Google thực sự đã kéo, tình trạng lập chỉ mục; ⑥ Đối với kiểm tra cục bộ, sử dụng công cụ chuyển đổi user-agent của trình duyệt để mô phỏng crawler mạng xã hội, hoặc sử dụng lệnh curl với UA của Facebook để kéo và kiểm tra HTML trả về.

Mỗi trang cần cấu hình Meta tag riêng biệt không? Dùng một bộ thẻ cho toàn trang có được không?

Tuyệt đối không! Mỗi trang phải có title và meta description độc nhất. Nếu tất cả các trang trên toàn trang web sử dụng cùng một title và description, công cụ tìm kiếm sẽ không thể phân biệt chủ đề nội dung của các trang khác nhau: ① Công cụ tìm kiếm không biết mỗi trang nói về cái gì và không thể xếp hạng đúng cách; ② Tất cả các trang hiển thị cùng một title và description trong kết quả tìm kiếm, người dùng không thể phân biệt nên nhấp cái nào, dẫn đến CTR cực kỳ thấp; ③ Có thể bị công cụ tìm kiếm xét định là trang web chất lượng thấp, ảnh hưởng đến quyền lực toàn trang. Các thẻ OG và Twitter Card về nguyên tắc cũng nên khác nhau theo mỗi trang. Chỉ các cấu hình cấp độ trang như theme-color, og:site_name, twitter:site mới có thể thống nhất toàn trang; tất cả các thẻ khác nên được cấu hình riêng lẻ theo nội dung mỗi trang.

Bây giờ còn cần viết meta keywords không? Viết bao nhiêu là phù hợp?

Các công cụ tìm kiếm chủ lực như Google, Bing, Baidu vào năm 2026 không còn sử dụng meta keywords làm yếu tố xếp hạng; cho dù bạn có viết hay không, và viết gì, về cơ bản đều không ảnh hưởng đến SEO. Nếu CMS hoặc mẫu của bạn có trường này, dành vài giây điền 3-5 từ khóa cốt lõi là được; đừng tốn quá nhiều thời gian suy nghĩ lựa chọn từ khóa và mật độ. Quan trọng là: đừng nhồi nhét hàng chục từ khóa, đừng lặp lại cùng một từ nhiều lần, đừng viết các từ phổ biến không liên quan — mặc dù bản thân keywords không được dùng cho xếp hạng, nhưng nhồi nhét quá mức có thể bị công cụ tìm kiếm coi là tín hiệu spam, điều đó lại phản tác dụng. Nếu trang web của bạn không có trường keywords hoặc bạn không muốn điền, để hoàn toàn trống cũng được, không có tác động tiêu cực đến xếp hạng.

Sự khác biệt giữa thẻ robots meta và robots.txt là gì? Cái nào có ưu tiên cao hơn?

Cả hai hoạt động ở cấp độ và cơ chế khác nhau: ① robots.txt là tệp văn bản được đặt trong gốc trang web, điều khiển hành vi crawler ở cấp độ trang hoặc thư mục, ví dụ Disallow: /admin/ nói với tất cả crawler đừng kéo thư mục /admin/; nhưng robots.txt là "thỏa thuận dành cho quý ông" — các crawler tuân thủ sẽ tôn trọng nó, và nếu các trang bị cấm kéo có liên kết ngoài chỉ đến, chúng vẫn có thể được lập chỉ mục chỉ là không có mô tả. ② robots meta là thẻ cấp độ trang được đặt trong HTML head của mỗi trang, có thể kiểm soát chính xác hành vi index/noindex/follow/nofollow v.v. của từng trang riêng lẻ, mức độ ưu tiên cao hơn robots.txt. ③ X-Robots-Tag là ở cấp độ tiêu đề phản hồi HTTP, chức năng giống như robots meta nhưng được trả về thông qua tiêu đề HTTP, có thể dùng cho việc kiểm soát lập chỉ mục các tệp không phải HTML (ví dụ PDF, ảnh). Để hoàn toàn ngăn chặn các trang được lập chỉ mục, bạn phải sử dụng noindex (meta hoặc X-Robots-Tag); chỉ dựa vào robots.txt Disallow không thể đảm bảo không được lập chỉ mục.

Sau khi tạo thẻ Meta bằng công cụ này, tôi còn cần cấu hình dữ liệu có cấu trúc Schema.org (JSON-LD) không?

Thẻ Meta và dữ liệu có cấu trúc Schema.org là bổ sung cho nhau, không phải thay thế cho nhau. Thẻ Meta chủ yếu giải quyết: tiêu đề/mô tả trang kết quả công cụ tìm kiếm, thẻ chia sẻ nền tảng mạng xã hội, điều khiển crawler cơ bản. Dữ liệu có cấu trúc Schema.org (thường được nhúng vào trang dưới dạng JSON-LD) giải quyết: Rich Snippets, như sao đánh giá sản phẩm, giá/tình trạng kho, điều hướng breadcrumb, ngày đăng bài viết, khối câu hỏi FAQ, thời gian/địa điểm sự kiện và các màn hình hiển thị nâng cao khác, có thể cải thiện thêm CTR. Chúng tôi khuyến nghị các trang quan trọng cấu hình cả hai: ① Thẻ Meta cơ bản (nội dung được tạo bởi công cụ này); ② Dữ liệu có cấu trúc Schema.org tương ứng với loại trang. Cả hai không xung đột, cùng nhau tối ưu hóa hiệu quả hiển thị tìm kiếm.

Xử lý sự cố

Khi chia sẻ liên kết lên Facebook/Twitter/LinkedIn, ảnh không hiển thị hoặc ảnh hiển thị không phải og:image đã đặt

URL og:image sử dụng đường dẫn tương đối hoặc localhost/127.0.0.1/IP nội bộ; crawler nền tảng mạng xã hội không thể truy cập địa chỉ công khai. Ảnh bị robots.txt chặn, hoặc máy chủ/WAF/CDN/tường lửa chặn User-Agent crawler Facebook/Twitter (facebookexternalhit/Twitterbot/LinkedInBot). Kích thước ảnh không đáp ứng yêu cầu: og:image nhỏ hơn 200×200 pixel sẽ bị bỏ qua; summary_large_image nhỏ hơn 300×157 sẽ bị hạ cấp. Tệp ảnh quá lớn (vượt quá 5MB-8MB) hoặc định dạng không được hỗ trợ (chỉ hỗ trợ JPG/PNG/WebP/GIF; một số nền tảng không hỗ trợ SVG). Thẻ được hiển thị động phía client bằng JavaScript; crawler nền tảng mạng xã hội không thực thi JS, chỉ SSR/SSG mới có thể được kéo. URL og:image trả về lỗi 404/403/5xx, hoặc chuyển hướng đến trang đăng nhập/trang lỗi. Nền tảng đã lưu phiên bản cũ không có ảnh trong bộ nhớ đệm; sau khi sửa đổi thẻ, không sử dụng công cụ Debugger chính thức để thực thi Scrape Again và làm mới bộ nhớ đệm.

Trong kết quả tìm kiếm Google, title bị cắt không hiển thị đầy đủ hoặc Google tự động viết lại title

Độ dài title vượt quá 50-60 ký tự (hoặc khoảng 600 pixel chiều rộng), phần vượt quá bị cắt bằng dấu ba chấm. Title chứa ký tự đặc biệt toàn chiều, emoji chiếm chiều rộng bổ sung gây cắt sớm; độ dài hiển thị thực tế ngắn hơn số ký tự. Title nhồi nhét từ khóa hoặc không khớp với nội dung trang; Google cho rằng title bạn viết không chính xác và lấy văn bản khác từ nội dung trang hoặc văn bản neo để viết lại title. Title của mỗi trang bị trùng lặp hoặc rất tương tự; Google không thể phân biệt các trang và tự động tạo các title khác nhau. Title chỉ chứa tên thương hiệu mà không có mô tả chủ đề trang, hoặc tên thương hiệu quá dài chiếm quá nhiều không gian. Sử dụng quá nhiều dấu phân cách như |, -, _, hoặc sử dụng dấu phân cách không chuẩn, khiến Google xét định là nhồi nhét dấu phân cách. Trang có thứ tự tiêu đề h1-h6 lộn xộn hoặc nhiều thẻ h1; Google có thể viết lại title bằng nội dung h1.

Sau khi cấu hình thẻ Meta, trang hiển thị văn bản lỗi font, ký tự đặc biệt hiển thị bất thường hoặc xảy ra lỗi cú pháp HTML

Không tuyên bố <meta charset="UTF-8">, hoặc vị trí tuyên bố không ở đầu head (phải trước title). Giá trị thuộc tính content trong meta description, og:description v.v. chứa dấu ngoặc kép (") chưa được escape, gây đóng thẻ sớm và phá vỡ cấu trúc HTML. Nội dung chứa &, <, > và các ký tự đặc biệt khác chưa được escape thực thể HTML (& phải viết là &amp;, < là &lt;, > là &gt;). Mã hóa lưu thực tế của tệp HTML không phải UTF-8 (ví dụ lưu dưới dạng GBK/GB2312), nhưng charset tuyên bố là UTF-8 gây không khớp mã hóa. Tiêu đề Content-Type của phản hồi HTTP máy chủ chỉ định charset=GBK hoặc mã hóa không phải UTF-8 khác, ghi đè tuyên bố meta charset. Sử dụng escape thực thể không chính xác (ví dụ dùng &quot; để escape dấu ngoặc kép bên ngoài thuộc tính, hoặc escape các ký tự không cần escape). CMS hoặc công cụ mẫu tự động escape gây escape kép (ví dụ &amp; trở thành &amp;amp;, hiển thị là &amp; thay vì &).

Thẻ canonical đã cấu hình không có hiệu lực, URL trùng lặp vẫn được lập chỉ mục hoặc canonical bị công cụ tìm kiếm bỏ qua

URL mà canonical chỉ đến trả về lỗi 404/403/5xx, hoặc chuyển hướng đến trang khác; công cụ tìm kiếm không thể truy cập phiên bản canonical. Trang A canonical đến B, trang B canonical đến A (canonical vòng), hoặc chuỗi A→B→C→D làm công cụ tìm kiếm bối rối. Canonical chỉ đến các trang có nội dung khác biệt đáng kể (không phải nội dung trùng lặp/giống nhau cao); công cụ tìm kiếm cho rằng đặt canonical sai và bỏ qua. Canonical sử dụng đường dẫn tương đối (ví dụ href="/page") thay vì URL tuyệt đối đầy đủ (href="https://example.com/page"). Trang web có nhiều phiên bản giao thức/tên miền (http/https, www/không có www) canonical chỉ đến nhau, nhưng chuyển hướng 301 không được cấu hình đúng cách. Các trang phân trang (ví dụ ?page=2, ?page=3) đều canonical đến trang đầu tiên, gây nội dung phía sau không được lập chỉ mục; công cụ tìm kiếm bỏ qua các canonical không hợp lý như vậy. Cùng một trang đồng thời tuyên bố các URL canonical khác nhau thông qua thẻ link trong HTML, tiêu đề phản hồi HTTP Link: <...>; rel="canonical", và Sitemap; xung đột ưu tiên.

Sau khi sửa đổi thẻ Meta, chia sẻ lại vẫn hiển thị tiêu đề, mô tả hoặc ảnh cũ; không thể thấy hiệu quả cập nhật

Các nền tảng mạng xã hội (Facebook/Twitter/LinkedIn) lưu thông tin OG/Twitter Card trong thời gian dài (có thể hàng ngày đến hàng tuần), không kéo lại mỗi khi chia sẻ. Không sử dụng các công cụ gỡ lỗi chính thức của nền tảng tương ứng (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) để thực thi Scrape Again/kéo lại và buộc làm mới bộ nhớ đệm. CDN (Cloudflare, v.v.) đã lưu các trang HTML cũ; crawler nhận được phiên bản cũ được lưu bởi CDN. Bộ nhớ đệm phía máy chủ, bộ nhớ đệm SSR, plugin bộ nhớ đệm WordPress, bộ nhớ đệm trang Redis, v.v. chưa được xóa; đầu ra vẫn là HTML cũ. Các URL tài nguyên như og:image không thay đổi nhưng nội dung ảnh đã được cập nhật; trình duyệt và nền tảng lưu theo URL; cần thêm tham số phiên bản như ?v=2 để buộc cập nhật. Sau khi sửa đổi thẻ, trang chưa được triển khai đúng cách lên môi trường production; tệp đã thay đổi cục bộ nhưng môi trường production vẫn là phiên bản cũ. Thẻ Meta được đặt trong khu vực body HTML hoặc được chèn động bằng JS; crawler hoàn toàn không đọc thẻ mới, vẫn đọc các phiên bản được lưu trước đó.

Đặt nhầm noindex,nofollow gây toàn bộ trang web hoặc các trang quan trọng không được Google lập chỉ mục, không thể tìm thấy

Các thẻ noindex,nofollow của môi trường phát triển/thử nghiệm chưa được gỡ bỏ khi ra mắt; toàn bộ trang web được đưa lên production với noindex. Tùy chọn "Khuyến khích công cụ tìm kiếm không lập chỉ mục trang web này" trong hậu trường CMS như WordPress đã được chọn, tự động thêm noindex vào tất cả các trang. robots.txt cũng đặt Disallow, gây crawler thậm chí không kéo trang và do đó không thấy noindex; nhưng nếu có liên kết ngoài chỉ đến, trang vẫn có thể được lập chỉ mục. Tiêu đề phản hồi HTTP trả về X-Robots-Tag: noindex (mức độ ưu tiên cao hơn thẻ meta, nhiều người không để ý đến tiêu đề phản hồi), ví dụ từ cấu hình Nginx/Apache, cài đặt CDN. CDN/WAF/plugin bảo mật tự động thêm tiêu đề noindex (một số plugin bảo mật hoạt động sai hoặc có cài đặt mặc định). Sử dụng các lệnh kết hợp sai, ví dụ viết noindex thành index nhưng các tham số khác xung đột, hoặc mẫu toàn trang chứa noindex chỉ trang chủ được gỡ bỏ trong khi các trang nội bộ vẫn còn. Khi di chuyển trang web từ môi trường thử nghiệm/testing sang production, cấu hình URL cơ sở, canonical, robots chưa được cập nhật; noindex của môi trường thử nghiệm được mang theo sang production.

Thuật ngữ

Meta tag
Thẻ meta HTML được đặt trong khu vực head, dùng để mô tả metadata trang, truyền đạt thông tin như tiêu đề trang, mô tả, tác giả, quy tắc crawler cho trình duyệt, công cụ tìm kiếm và nền tảng mạng xã hội.
title
Thẻ title HTML, định nghĩa tiêu đề tab trình duyệt và tiêu đề có thể nhấp được trên trang kết quả tìm kiếm (SERP); thẻ SEO quan trọng nhất, độ dài khuyến nghị 50-60 ký tự.
meta description
Thẻ meta mô tả trang, hiển thị dưới dạng văn bản mô tả dưới tiêu đề SERP; không trực tiếp ảnh hưởng xếp hạng nhưng ảnh hưởng đáng kể đến tỷ lệ nhấp chuột (CTR), độ dài khuyến nghị 120-160 ký tự.
meta keywords
Thẻ meta từ khóa, được các công cụ tìm kiếm đầu tiên sử dụng để xác định chủ đề trang; do lạm dụng, Google đã tuyên bố vào năm 2009 không còn sử dụng, hiện nay cơ bản không còn giá trị SEO.
canonical
Thẻ liên kết chuẩn (rel="canonical"), nói với công cụ tìm kiếm phiên bản ưu tiên trong nhiều URL tương tự, dùng để giải quyết nội dung trùng lặp, URL tham số, tên miền ưu tiên và các vấn đề khác.
Open Graph
Giao thức metadata chia sẻ xã hội do Facebook ra mắt vào năm 2010, sử dụng các thẻ có tiền tố og: để điều khiển kiểu thẻ chia sẻ liên kết trên nền tảng mạng xã hội, được Facebook, LinkedIn, WhatsApp, Slack và hầu hết các nền tảng hỗ trợ.
Twitter Card
Giao thức thẻ chia sẻ của nền tảng Twitter/X sử dụng các thẻ có tiền tố twitter:, hỗ trợ bốn loại thẻ: summary, summary_large_image, app, player; được Twitter đọc với ưu tiên cao hơn thẻ OG.
og:type
Thẻ loại trang Open Graph, chỉ định loại nội dung; các giá trị phổ biến là website (trang web chung), article (bài viết), product (sản phẩm), profile (hồ sơ cá nhân), quyết định cách nền tảng mạng xã hội phân tích nội dung.
og:image
Thẻ ảnh chia sẻ Open Graph, chỉ định URL ảnh xem trước thẻ chia sẻ xã hội; kích thước khuyến nghị 1200×630 pixel (tỷ lệ 1.91:1), phải là URL tuyệt đối có thể truy cập công khai.
twitter:card
Thẻ loại Twitter Card, chỉ định loại thẻ chia sẻ; các giá trị là summary (ảnh nhỏ), summary_large_image (ảnh lớn), app (ứng dụng), player (trình phát); là thẻ bắt buộc của Twitter Card.
robots meta
Thẻ meta điều khiển crawler, nói với công cụ tìm kiếm ở cấp độ trang có lập chỉ mục hay không (index/noindex), có theo dõi liên kết hay không (follow/nofollow), có hiển thị ảnh chụp nhanh hay không (noarchive), v.v.; mức độ ưu tiên cao hơn robots.txt.
noindex
Một trong các lệnh robots, cấm công cụ tìm kiếm lập chỉ mục trang; trang sẽ không xuất hiện trong kết quả tìm kiếm. Crawler vẫn kéo trang để đọc thẻ này nhưng không lập chỉ mục. Thường dùng cho trang thử nghiệm, trang nội bộ, trang giá trị thấp.
nofollow
Một trong các lệnh robots, cấm crawler công cụ tìm kiếm theo dõi tất cả các liên kết trên trang (khác với rel="nofollow" trên liên kết đơn lẻ); thường dùng cho nội dung do người dùng tạo, liên kết quảng cáo, trang liên kết ngoài không đáng tin cậy.
theme-color
Thẻ meta màu chủ đề trình duyệt, định nghĩa màu thanh địa chỉ/thanh công cụ trình duyệt di động; có hiệu lực trên Android Chrome, Safari 15+ và các trình duyệt khác, cung cấp trải nghiệm thương hiệu đắm chìm hơn.
author meta
Thẻ meta tác giả (name="author"), tuyên bố thông tin người sáng tạo nội dung; được dùng trong blog và trang tin tức cùng với article:author để xác định tác giả nội dung.
HTML entity
Ký tự escape thực thể HTML, dùng để hiển thị an toàn các ký tự đặc biệt trong HTML, ví dụ &amp; cho &, &lt; cho <, &gt; cho >, &quot; cho ", &#x27; cho ', tránh lỗi cú pháp và vấn đề XSS.
SERP
Search Engine Results Page, chỉ trang kết quả được trả về sau khi người dùng nhập từ khóa vào các công cụ tìm kiếm như Google/Baidu, chứa các yếu tố như tiêu đề, mô tả, URL, đoạn trích phương tiện phong phú.
CTR
Click-Through Rate, tỷ lệ người dùng nhấp chuột sau khi kết quả tìm kiếm được hiển thị. CTR là một trong các chỉ số cốt lõi của SEO, bị ảnh hưởng trực tiếp bởi sức hấp dẫn của title và meta description, cũng là tín hiệu người dùng trong thuật toán xếp hạng của Google.
crawl budget
Ngân sách kéo, số lượng lần kéo và số trang mà công cụ tìm kiếm phân bổ cho trang web của bạn trong một thời gian nhất định. Sử dụng đúng cách robots meta, canonical, noindex có thể tránh lãng phí ngân sách kéo vào các trang giá trị thấp, để các trang quan trọng được kéo thường xuyên hơn.
viewport
Thẻ meta viewport (name="viewport"), bắt buộc cho trang web đáp ứng hiện đại, điều khiển chiều rộng hiển thị và tỷ lệ thu nhỏ ban đầu trên di động; cấu hình tiêu chuẩn là width=device-width, initial-scale=1.0.

Bảng tham khảo danh sách các thẻ Meta phổ biến và thuộc tính

Tên thẻMục đíchThuộc tính/Ví dụ sử dụngLưu ý
titleTiêu đề trang, tiêu đề tab trình duyệt và SERP<title>Tiêu đề trang | Thương hiệu</title>Khuyến nghị 50-60 ký tự, đặt từ khóa cốt lõi lên trước, tên thương hiệu ở cuối, độc nhất cho mỗi trang
meta descriptionMô tả trang, văn bản mô tả hiển thị trong SERP<meta name="description" content="...">Khuyến nghị 120-160 ký tự, chứa từ khóa và CTA, độc nhất cho mỗi trang
meta keywordsThẻ từ khóa<meta name="keywords" content="word1,word2,word3">Các công cụ tìm kiếm chủ lực như Google/Bing/Baidu không còn sử dụng, không cần ưu tiên cấu hình
link canonicalLiên kết chuẩn, chỉ định URL ưu tiên<link rel="canonical" href="https://example.com/page">Phải viết URL tuyệt đối đầy đủ, giải quyết vấn đề nội dung trùng lặp, đừng đặt dạng chuỗi
meta robotsĐiều khiển crawler, quy tắc lập chỉ mục/theo dõi cấp độ trang<meta name="robots" content="index,follow">Mức độ ưu tiên cao hơn robots.txt; noindex mới thực sự ngăn chặn lập chỉ mục
meta charsetTuyên bố mã hóa ký tự<meta charset="UTF-8">Phải đặt ở vị trí đầu tiên của head; trang web hiện đại thống nhất sử dụng UTF-8
meta viewportĐiều khiển viewport di động<meta name="viewport" content="width=device-width, initial-scale=1.0">Bắt buộc cho trang web đáp ứng; phải cấu hình nếu không trải nghiệm di động sẽ rất tệ
meta authorThông tin tác giả trang<meta name="author" content="Tên tác giả">Xác định người sáng tạo nội dung; dùng cho blog/trang tin tức
meta theme-colorMàu chủ đề trình duyệt di động<meta name="theme-color" content="#2563eb">Android Chrome/Safari 15+ hỗ trợ; khuyến nghị sử dụng màu chủ đạo thương hiệu
og:titleTiêu đề chia sẻ Open Graph<meta property="og:title" content="...">Tiêu đề thẻ chia sẻ xã hội, có thể khác với SEO title, thu hút nhấp chuột hơn
og:descriptionMô tả chia sẻ Open Graph<meta property="og:description" content="...">Mô tả thẻ xã hội, khuyến nghị dưới 200 ký tự
og:imageẢnh chia sẻ Open Graph<meta property="og:image" content="https://.../img.jpg">Khuyến nghị 1200×630 pixel, URL tuyệt đối, truy cập công khai, tệp <5MB
og:urlURL chuẩn Open Graph<meta property="og:url" content="https://example.com/page">Nên nhất quán với canonical, dùng để tổng hợp lượt thích và chia sẻ
og:typeLoại nội dung Open Graph<meta property="og:type" content="website">Tùy chọn: website/article/product/profile; các loại khác nhau hỗ trợ các thuộc tính mở rộng khác nhau
og:site_nameTên trang web Open Graph<meta property="og:site_name" content="GeekFormat">Hiển thị tên toàn bộ trang web, phân biệt với tiêu đề trang
twitter:cardLoại Twitter Card<meta name="twitter:card" content="summary_large_image">Tùy chọn: summary/summary_large_image/app/player
twitter:siteTài khoản chính thức Twitter<meta name="twitter:site" content="@username">Điền @handle Twitter của trang web/thương hiệu
twitter:imageẢnh Twitter Card<meta name="twitter:image" content="https://.../img.jpg">Không điền thì quay lại dùng og:image; loại summary dùng 1:1, loại lớn dùng 2:1

Bảng tham khảo trường hợp sử dụng og:type

Giá trị og:typeTrường hợp sử dụngTỷ lệ ảnh khuyến nghịThẻ có thể mở rộng
websiteTrang chủ trang web, trang thông thường, Giới thiệu, Liên hệ và các trang không phải nội dung/sản phẩm khác1.91:1 (1200×630)Các thẻ og: cơ bản là đủ, không có mở rộng đặc biệt
articleBài viết blog, bản tin, tài liệu kiến thức, hướng dẫn, nội dung cột và các nội dung liên quan đến thời gian khác1.91:1 (1200×630)article:published_time (thời gian đăng), article:modified_time (thời gian sửa đổi), article:author (tác giả), article:section (danh mục), article:tag (thẻ)
productTrang chi tiết sản phẩm thương mại điện tử, trang hàng hóa, trang dịch vụ trả phí, trang đích sản phẩm SaaS1.91:1 (1200×630); ảnh sản phẩm khuyến nghị dạng vuông hoặc 4:3product:price:amount (giá), product:price:currency (tiền tệ như CNY/USD), product:availability (tình trạng kho), product:brand (thương hiệu)
profileTrang chủ cá nhân, trang hồ sơ người dùng, trang tác giả, trang sơ yếu lý lịch cá nhânẢnh đại diện 1:1 hoặc ảnh bìa 1.91:1profile:first_name (tên), profile:last_name (họ), profile:username (tên người dùng), profile:gender (giới tính)

Bảng tham khảo loại twitter:card

Loại twitter:cardKiểu thẻYêu cầu ảnhTrường hợp sử dụngTrường bắt buộc bổ sung
summaryThẻ tóm tắt ảnh nhỏ, ảnh nhỏ bên trái/phía trên, văn bản bên phải/phía dướiTối thiểu 144×144 pixel, vuông 1:1, <5MBBài viết thông thường, trang, trang công cụ, nội dung chungKhông có trường bắt buộc bổ sung; điền các thẻ cơ bản
summary_large_imageThẻ tóm tắt ảnh lớn, biểu ngữ toàn chiều rộng ở phía trên, tác động thị giác mạnh mẽTối thiểu 300×157 pixel, khuyến nghị 1200×675, tỷ lệ khoảng 2:1, <5MBBài viết blog, trang sản phẩm, trang sự kiện, nội dung mong muốn tỷ lệ nhấp chuột cao (khuyến nghị làm mặc định)Không có trường bắt buộc bổ sung; đảm bảo kích thước ảnh đáp ứng yêu cầu
appThẻ tải xuống ứng dụng, hiển thị biểu tượng ứng dụng, tên, đánh giá, nút tải xuốngẢnh vuông logo ứng dụng, 144×144 hoặc lớn hơnTrang tải xuống ứng dụng iOS/Android, trang quảng bá ứng dụng di độngtwitter:app:name:iphone/ipad/googleplay, twitter:app:id:iphone/ipad/googleplay (ID cửa hàng ứng dụng), twitter:app:url:iphone/ipad/googleplay (scheme tùy chỉnh)
playerThẻ trình phát video/âm thanh, trực tiếp nhúng trình phát phương tiện trong luồngẢnh bìa trình phát, trang trình phát phải là HTTPSTrang nội dung video, podcast, trang âm thanh, trang phát trực tiếptwitter:player (URL trình phát, HTTPS), twitter:player:width (chiều rộng trình phát), twitter:player:height (chiều cao trình phát), twitter:player:stream (URL luồng video/âm thanh), cần phê duyệt danh sách trắng Twitter