Trình Tạo Thẻ Meta
Tạo thẻ meta SEO, Open Graph và Twitter Card cho trang web của bạn.
Về thẻ meta
Thẻ meta cung cấp metadata về trang HTML của bạn. Chúng giúp công cụ tìm kiếm hiểu nội dung của bạn, kiểm soát cách trang của bạn xuất hiện trong kết quả tìm kiếm và xác định bản xem trước liên kết trên mạng xã hội. Một bộ thẻ meta được tối ưu hóa tốt có thể cải thiện tỷ lệ nhấp từ tìm kiếm và chia sẻ xã hội. Giữ tiêu đề dưới 60 ký tự và mô tả dưới 160 ký tự để hiển thị tối ưu trong kết quả tìm kiếm.
Bốn họ siêu dữ liệu <head>
<head> của một trang HTML hiện đại thường mang siêu dữ liệu trong bốn nhóm, mỗi nhóm phục vụ một đối tượng khác nhau:
- Cơ bản tài liệu, những gì mọi trình duyệt cần:
<title>,<meta charset="utf-8">,<meta name="viewport">,<meta name="description">. - Chỉ thị SEO, những gì trình thu thập của công cụ tìm kiếm đọc:
<meta name="robots">,<link rel="canonical">, tiêu đề trang xuất hiện như liên kết SERP. - Open Graph, những gì Facebook, LinkedIn, Slack, Discord, iMessage và hầu hết các khách hàng chia sẻ liên kết khác hiển thị:
og:title,og:description,og:image,og:url,og:type,og:site_name. - Twitter Card, những gì X / Twitter hiển thị cho các liên kết được chia sẻ, với dự phòng cho các thẻ OG khi vắng mặt:
twitter:card,twitter:title,twitter:image,twitter:site,twitter:creator.
Trình tạo này phát ra cả bốn họ từ một biểu mẫu duy nhất. Đầu ra rơi trực tiếp vào <head> của bất kỳ tệp HTML nào: dán vào, lưu, triển khai. Để hiểu sâu hơn về Open Graph cụ thể, công cụ chuyên dụng Xem Trước Open Graph hiển thị các kết xuất nền tảng trực tiếp.
Tiêu đề và mô tả: nên dài bao nhiêu?
Google Search Central trả lời thẳng thắn: không có mức tối đa cứng nào. Các đoạn trích đơn giản là bị cắt ngắn để phù hợp với chiều rộng thiết bị. Quy tắc tiêu đề 60 ký tự và mô tả 160 ký tự là quy ước ngành được rút ra từ việc cắt ngắn theo độ rộng pixel quan sát được trong SERPs của Google (~580 pixel trên máy tính để bàn). Bài học thực tế:
- Tiêu đề, nhắm tới 50-60 ký tự. Các chữ in hoa rộng (W, M, A in hoa) tiêu tốn nhiều không gian pixel hơn các chữ hẹp (i, l, t), vì vậy hai tiêu đề 60 ký tự có thể hiển thị ở độ rộng nhìn thấy rất khác nhau.
- Mô tả, 150-160 ký tự trên máy tính để bàn, ~120 trên di động. Đưa thông tin chính lên trước để nó tồn tại qua việc cắt ngắn trên di động.
- Độ dài không ảnh hưởng đến xếp hạng; nó chỉ ảnh hưởng đến việc người tìm kiếm nhìn thấy bao nhiêu đoạn trích của bạn trước khi nhấp.
Thẻ meta robots: nó thực sự kiểm soát điều gì
Không giống thẻ keywords đã lỗi thời (xem bên dưới), <meta name="robots"> vẫn còn sống và khỏe; Google hỗ trợ nó một cách rõ ràng. Các giá trị phổ biến:
index, follow, mặc định. Trang có thể xuất hiện trong tìm kiếm; trình thu thập theo các liên kết của nó.noindex, loại trừ trang này khỏi kết quả tìm kiếm. Hữu ích cho trang cảm ơn, công cụ nội bộ, kho lưu trữ có phân trang, trang kết quả tìm kiếm và bất kỳ thứ gì khác bạn không muốn cạnh tranh với nội dung thực của mình.nofollow, không theo các liên kết trên trang này. Hiếm khi là lựa chọn đúng cho toàn trang; thường được áp dụng theo liên kết quarel="nofollow".noindex, nofollow, cả hai. Lập trường quyền riêng tư mạnh nhất cho một trang có thể tiếp cận công khai.noarchive, không hiển thị bản sao được lưu trong bộ nhớ cache trong kết quả tìm kiếm.nosnippet, không hiển thị đoạn trích mô tả, chỉ hiển thị tiêu đề.
Đối với các ghi đè dành riêng cho Google, hãy sử dụng <meta name="googlebot"> với cùng các giá trị. Lưu ý rằng noindex cũng có thể được biểu đạt như tiêu đề HTTP X-Robots-Tag, là nơi đúng cho nó trên PDF, hình ảnh và các tài nguyên không phải HTML khác nơi bạn không thể thêm thẻ meta.
Tại sao URL chính tắc quan trọng
<link rel="canonical"> cho công cụ tìm kiếm biết phiên bản nào của một trang là "chính thức" khi nhiều URL phục vụ cùng nội dung hoặc gần như giống nhau. Các trường hợp phổ biến cần một canonical:
- Dấu gạch chéo cuối hoặc không (
/pageso với/page/). - HTTP so với HTTPS (chuyển hướng kế thừa đôi khi để cả hai có thể được lập chỉ mục).
- WWW so với apex (
www.example.comso vớiexample.com). - Các tham số theo dõi (
?utm_source=...,?ref=...) tạo ra các URL "khác nhau" vô tận. - Phân trang, thứ tự sắp xếp, các tham số lọc tạo ra cùng nội dung với thứ tự khác nhau.
- Nội dung đăng lại được xuất bản trên nhiều trang web (canonical trỏ đến bản gốc).
Không có canonical, Google tự chọn một phiên bản và có thể chọn sai. URL chính tắc phải tuyệt đối (đầy đủ https://) và phải khớp chính xác với URL bạn muốn được lập chỉ mục.
Các thẻ bạn có thể bỏ qua vào năm 2026
<meta name="keywords">, Google đã tuyên bố rõ ràng từ tháng 9 năm 2009 rằng họ không sử dụng thẻ meta keywords như tín hiệu xếp hạng. Bing đi xa hơn: họ coi việc nhồi nhét từ khóa quá mức trong thẻ này là tín hiệu spam. Bao gồm nó không hại SEO nhưng cũng không giúp; trường này tồn tại trong trình tạo này dành cho người dùng có các mẫu doanh nghiệp vẫn mong đợi nó.<meta http-equiv="refresh">cho chuyển hướng, hãy sử dụng chuyển hướng HTTP 301/302 thích hợp từ máy chủ thay thế. Meta refresh trì hoãn chuyển hướng và làm rối một số công cụ trợ năng.<meta http-equiv="X-UA-Compatible">, chỉ cần cho khả năng tương thích Internet Explorer, điều này không còn là mối lo nữa.<meta name="revisit-after">, chưa bao giờ được các trình thu thập chính tôn trọng. Sự sùng bái hàng hóa thuần túy.<meta name="generator">, chỉ thông tin; cho thế giới biết cái gì đã xây dựng trang web của bạn. Đôi khi là tín hiệu bảo mật đáng để loại bỏ.
Hai thẻ mà mọi trang thực sự cần
Ngoài <title> và <meta name="description">, hai thẻ không thể thương lượng đối với một trang web hiện đại:
<meta charset="UTF-8">, nên xuất hiện trong 1024 byte đầu tiên của tài liệu, lý tưởng nhất là phần tử con đầu tiên của<head>. HTML Living Standard yêu cầu nó để xử lý ký tự đúng. Không có nó, trình duyệt có thể đoán mã hóa và sai, đặc biệt với các chữ viết không phải Latin.<meta name="viewport" content="width=device-width, initial-scale=1">, yêu cầu các trình duyệt di động kết xuất trang ở chiều rộng thực tế của thiết bị thay vì thu nhỏ từ một bố cục máy tính để bàn hư cấu 980 pixel. Không có nó, mọi người dùng di động đều thấy một phiên bản nhỏ thu nhỏ của trang bạn gần như không thể sử dụng được.
Open Graph và Twitter Cards tóm lược
Một bản tóm tắt ngắn; để hiểu sâu hơn hãy dùng công cụ Xem Trước Open Graph. Bốn thẻ OG bắt buộc theo ogp.me: og:title, og:type, og:image, og:url. Tùy chọn nhưng được khuyến nghị: og:description, og:site_name. Kích thước hình ảnh: 1200×630 (1,91:1) là kích thước đa nền tảng an toàn nhất.
Đối với X / Twitter: bao gồm twitter:card = summary_large_image (thẻ toàn chiều rộng hiện đại) và X dự phòng các thẻ OG cho mọi thứ khác nếu các thẻ dành riêng cho Twitter vắng mặt. Bản xem trước Twitter Card Validator độc lập đã bị X xóa vào ngày 2 tháng 8 năm 2022; thay vào đó hãy xác minh bằng cách dán URL vào Tweet Composer.
Dữ liệu có cấu trúc là công việc khác
Dữ liệu có cấu trúc JSON-LD (sử dụng từ vựng schema.org) là điều cung cấp năng lượng cho các kết quả phong phú của Google: thẻ công thức, thông tin sản phẩm với đánh giá sao, đoạn trích FAQ trong tìm kiếm, vết breadcrumb. Nó khác biệt với các thẻ meta và sống trong khối <script type="application/ld+json">, không phải thẻ <meta>. Cả hai đều được khuyến nghị; một cái không thay thế cái kia. Các thẻ meta kiểm soát tiêu đề / mô tả / thẻ chia sẻ cơ bản; dữ liệu có cấu trúc mở khóa các định dạng phong phú hơn.
Những sai lầm phổ biến
- Bao gồm
meta keywordsvà mong đợi lợi ích SEO. Google thông báo vào năm 2009 rằng họ không sử dụng nó. Hơn hai mươi năm sau nó vẫn còn trong các mẫu cũ; loại bỏ hoặc bỏ qua. - Quên
<link rel="canonical">. Nếu URL của bạn có tham số theo dõi hoặc phiên bản thay thế, Google tự chọn một. Không có canonical, phiên bản được chọn có thể không phải là phiên bản có tất cả các liên kết đến của bạn. - Các tiêu đề khác nhau trong
<title>,og:titlevàtwitter:title. Về mặt kỹ thuật không sai, nhưng không nhất quán. Mặc định sạch sẽ là một tiêu đề được chia sẻ giữa cả ba. - Logo trang web chung chung làm
og:imagetrên mọi trang. Mỗi trang đều xứng đáng có một hình ảnh độc đáo gắn liền với nội dung của nó; sử dụng một logo duy nhất trên toàn bộ trang web tạo ra các xem trước chia sẻ nhàm chán. - Thiếu meta
viewporttrên các trang nhắm mục tiêu di động. Trình duyệt di động kết xuất trang ở chiều rộng máy tính để bàn hư cấu và thu nhỏ. Trải nghiệm người dùng tồi tệ. - Sử dụng
<meta http-equiv="refresh">cho chuyển hướng. HTTP 301/302 từ máy chủ là cách đúng đắn; meta refresh chậm hơn và không thân thiện với khả năng tiếp cận, và nhiều trình thu thập xử lý nó không nhất quán cho mục đích xếp hạng. - Tiêu đề dài hơn ~580 pixel (~60 ký tự rộng). Bị Google cắt ngắn bằng dấu ba chấm; phần bị cắt không hiển thị cho người tìm kiếm.
- Quên rằng các ứng dụng một trang cần các thẻ meta được kết xuất bởi máy chủ hoặc kết xuất trước. Nhiều trình thu thập mạng xã hội (Facebook, LinkedIn, Slack, Discord) không thực thi JavaScript. Các thẻ được viết bởi JS phía máy khách sẽ không hiển thị cho họ.
Câu hỏi thường gặp
Thẻ meta keywords có còn giúp SEO không?
Không. Matt Cutts của Google đã thông báo vào tháng 9 năm 2009 rằng <meta name="keywords"> không được sử dụng làm tín hiệu xếp hạng. Bing coi việc nhồi nhét từ khóa quá mức trong thẻ này là tín hiệu spam. Trường được bao gồm trong trình tạo này để tương thích với các mẫu cũ và quy trình CMS vẫn mong đợi nó; an toàn để để trống.
Sự khác biệt giữa meta description và OG description là gì?
HTML <meta name="description"> là điều công cụ tìm kiếm sử dụng làm đoạn trích dưới tiêu đề trang của bạn trong kết quả. Open Graph og:description là điều mà thẻ chia sẻ mạng xã hội hiển thị. Chúng có thể là cùng văn bản (và thường là vậy) nhưng bạn có thể viết các phiên bản khác nhau nếu khán giả tìm kiếm và khán giả mạng xã hội của bạn mong đợi khung hình khác nhau.
JavaScript của tôi viết các thẻ meta sau khi tải trang. Có ổn không?
Đối với trình thu thập chính của Google (Googlebot), có; Googlebot kết xuất JavaScript và thấy các thẻ meta sau khi kết xuất. Đối với các trình thu thập mạng xã hội (Facebook, LinkedIn, Slack, Discord, WhatsApp), nói chung là không; hầu hết chúng không thực thi JavaScript và chỉ thấy HTML ban đầu. Nếu trang web của bạn là một ứng dụng một trang, bạn cần kết xuất phía máy chủ, kết xuất trước, hoặc một dịch vụ như Prerender.io để đảm bảo các trình thu thập mạng xã hội thấy các thẻ meta đúng.
Các thẻ này đặt chính xác ở đâu?
Bên trong <head> của HTML, lý tưởng nhất là gần đầu. <meta charset> nên ở trong 1024 byte đầu tiên. <meta name="viewport"> ngay sau đó. Sau đó <title>, <meta name="description">, robots, canonical, các thẻ OG, các thẻ Twitter. Thứ tự bên trong <head> không quan trọng cho SEO khi charset và viewport đã đủ sớm.
Tôi có nên lo lắng về thẻ meta refresh cho bảo mật không?
Đó không phải là rủi ro bảo mật bản thân, nhưng là một mẫu kém. Các chuyển hướng HTTP 301/302 phía máy chủ nhanh hơn, xử lý các tiêu đề người giới thiệu chính xác và thân thiện hơn với khả năng tiếp cận. Chỉ sử dụng meta refresh khi bạn không có quyền kiểm soát phía máy chủ đối với chuyển hướng (máy chủ kiểu GitHub Pages tĩnh không có cấu hình chuyển hướng).
Các thẻ meta của tôi có được tải lên máy chủ không?
Không. Trình tạo chạy hoàn toàn trong trình duyệt của bạn. Các trường tiêu đề, mô tả, URL và hình ảnh của bạn ở lại trên máy của bạn; đoạn trích đầu ra được biên soạn cục bộ và sao chép vào clipboard của bạn theo yêu cầu. Điều này quan trọng vì các thẻ nháp thường chứa URL trang chưa xuất bản, tên sản phẩm nội bộ hoặc bản sao tiếp thị trước khi ra mắt mà bạn không muốn chảy qua máy chủ bên thứ ba.
Công cụ liên quan
Xem trước Open Graph
Xem trước cách liên kết của bạn xuất hiện trên Facebook, Twitter và LinkedIn. Tạo thẻ OG.
Trình tạo robots.txt
Xây dựng tệp robots.txt với quy tắc user-agent, đường dẫn cho phép/cấm, sitemap và độ trễ crawl.
Trình tạo slug URL
Biến bất kỳ văn bản nào thành slug sạch và phù hợp với URL. Xử lý dấu, ký tự đặc biệt và hơn thế.