Trong phần cấu trúc tài liệu, bạn đã tìm hiểu về các thành phần mà bạn (hầu như) luôn tìm thấy trong <head> của một tài liệu HTML. Mặc dù mọi nội dung trong <head>, bao gồm cả <title>, <link>, <script>, <style> và <base> ít được dùng hơn, thực sự là "dữ liệu meta", nhưng có một thẻ <meta> cho siêu dữ liệu không thể biểu thị bằng các phần tử khác này.
Chỉ dẫn kỹ thuật bao gồm nhiều loại meta, ngoài ra còn nhiều loại meta được ứng dụng hỗ trợ nhưng không có trong bất kỳ thông số kỹ thuật chính thức nào. Trong phần này, chúng ta sẽ thảo luận về các thuộc tính và giá trị có trong quy cách, một số tên meta và giá trị nội dung phổ biến, cũng như một số loại thẻ meta cực kỳ hữu ích cho việc tối ưu hoá cho công cụ tìm kiếm, đăng bài lên mạng xã hội và trải nghiệm người dùng chưa được định nghĩa chính thức bởi WhatWG hoặc W3C.
Các thẻ <meta> bắt buộc, được truy cập lại
Hãy cùng xem lại hai thẻ <meta> cần thiết đã được đề cập – khai báo bộ ký tự và thẻ meta khung nhìn – và để hiểu rõ hơn về thẻ <meta> trong quy trình này.
Thuộc tính charset của phần tử <meta> xuất hiện theo một cách độc đáo. Ban đầu, siêu dữ liệu của bộ ký tự được viết dưới dạng <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />, nhưng rất nhiều nhà phát triển đã nhập nhầm thuộc tính content thành content="text/html" charset="<characterset>", khiến các trình duyệt bắt đầu hỗ trợ bộ ký tự dưới dạng thuộc tính. Chuỗi này hiện đã được chuẩn hoá trong tiêu chuẩn sống HTML dưới dạng <meta charset="<charset>" />, trong đó đối với HTML, <charset> là chuỗi không phân biệt chữ hoa chữ thường "utf-8" .
Bạn có thể nhận thấy phần khai báo meta bộ ký tự gốc dùng để đưa vào thuộc tính http-equiv. Đây là viết tắt của "http-tương đương", vì thẻ meta về cơ bản là sao chép những gì có thể được đặt trong tiêu đề HTTP. Ngoại trừ charset, tất cả các thẻ meta khác được xác định trong thông số kỹ thuật HTML whatWG đều chứa thuộc tính http-equiv hoặc name.
Thẻ meta được xác định chính thức
Có 2 loại thẻ meta chính: lệnh pragma, trong đó thuộc tính http-equiv (như thẻ meta bộ ký tự) và loại meta có tên là thẻ meta khung nhìn có thuộc tính name mà chúng ta đã thảo luận trong phần cấu trúc tài liệu. Cả hai loại meta name và http-equiv đều phải bao gồm thuộc tính content. Thuộc tính này xác định nội dung cho loại siêu dữ liệu được liệt kê.
Lệnh Pragma
Thuộc tính http-equiv có giá trị là một lệnh pragma. Những lệnh này mô tả cách phân tích cú pháp trang. Các giá trị http-equiv được hỗ trợ cho phép cài đặt lệnh khi bạn không thể trực tiếp đặt tiêu đề HTTP.
Bản đặc tả kỹ thuật này xác định 7 lệnh pragma, hầu hết các lệnh này đều có các phương thức thiết lập khác. Ví dụ: mặc dù bạn có thể đưa lệnh ngôn ngữ vào <meta http-equiv="content-language" content="en-us" />, nhưng chúng ta đã thảo luận về việc sử dụng thuộc tính lang cho phần tử HTML. Đây chính là thuộc tính bạn nên dùng để thay thế.
Lệnh pragma phổ biến nhất là lệnh refresh.
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
Mặc dù bạn có thể đặt một lệnh làm mới vào khoảng thời gian bằng số giây được đặt trong thuộc tính content và thậm chí chuyển hướng đến một URL khác, nhưng bạn không nên làm như vậy. Việc làm mới và chuyển hướng nội dung mà không có yêu cầu rõ ràng của người dùng về việc đó sẽ làm giảm khả năng hữu dụng và ảnh hưởng tiêu cực đến khả năng tiếp cận. Bạn không ghét nó khi bạn đang ở giữa một đoạn và trang được đặt lại? Hãy tưởng tượng bạn đang gặp vấn đề về nhận thức hoặc thị lực, v.v. Nếu bạn định thiết lập một quy trình làm mới bằng lệnh chuyển hướng, hãy đảm bảo rằng người dùng có đủ thời gian để đọc trang, một đường liên kết để đẩy nhanh quá trình và nếu cần, hãy nhấp vào một nút để "dừng đồng hồ" và ngăn việc chuyển hướng xảy ra.
Chúng tôi sẽ không đưa nội dung này vào trang web của mình vì không có lý do gì để hết thời gian chờ một phiên người dùng ngoài việc làm phiền khách truy cập của chúng tôi.
Lệnh pragma hữu ích nhất là content-security-policy, lệnh này cho phép xác định chính sách nội dung cho tài liệu hiện tại. Chính sách nội dung thường chỉ định các nguồn gốc máy chủ và điểm cuối của tập lệnh được phép, giúp bảo vệ chống lại các cuộc tấn công tập lệnh trên nhiều trang web.
<meta http-equiv="content-security-policy" content="default-src https:" />
Nếu bạn không có quyền thay đổi tiêu đề HTTP (hoặc nếu bạn có), sau đây là danh sách giá trị nội dung được phân tách bằng dấu cách cho lệnh content-security-policy.
Thẻ meta được đặt tên
Thông thường, bạn sẽ đưa vào siêu dữ liệu có tên. Thêm thuộc tính name, trong đó giá trị thuộc tính là tên của siêu dữ liệu. Giống như các lệnh pragma, bạn bắt buộc phải sử dụng thuộc tính content.
Thuộc tính name là tên của siêu dữ liệu. Ngoài viewport, bạn nên thêm description và theme-color, chứ không phải keywords.
Từ khoá
Nhân viên bán hàng dầu rắn của công cụ tìm kiếm đã lạm dụng thẻ meta của từ khoá bằng cách nhồi nhét danh sách các từ vi phạm được phân tách bằng dấu phẩy thay vì danh sách các từ khoá chính có liên quan. Do đó, các công cụ tìm kiếm không còn coi siêu dữ liệu này là hữu ích nữa. Bạn không cần lãng phí thời gian, công sức hoặc số byte khi thêm đoạn mã.
Nội dung mô tả
Tuy nhiên, giá trị description rất hữu ích cho hoạt động SEO: giá trị nội dung mô tả thường là giá trị mà công cụ tìm kiếm hiển thị bên dưới tiêu đề trang trong kết quả tìm kiếm. Một số trình duyệt, như Firefox và Opera, sử dụng phần này làm mô tả mặc định của các trang được đánh dấu trang. Mô tả phải là một bản tóm tắt ngắn gọn và chính xác về nội dung của trang.
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
Nếu nửa sau của phần mô tả không có ý nghĩa gì với bạn, có thể bạn chưa xem phim Zoolander.
Rô-bốt
Nếu không muốn các công cụ tìm kiếm lập chỉ mục trang web của mình, bạn có thể cho các công cụ tìm kiếm biết. <meta name="robots" content="noindex, nofollow" /> yêu cầu các bot không lập chỉ mục trang web và không đi theo bất kỳ đường liên kết nào. Các bot nên lắng nghe yêu cầu, nhưng không có luật nào yêu cầu họ phải tuân theo yêu cầu. Bạn không cần thêm <meta name="robots" content="index, follow" /> để yêu cầu lập chỉ mục trang web và truy cập các đường liên kết, vì đó là tuỳ chọn mặc định, trừ phi các tiêu đề HTTP có quy định khác.
<meta name="robots" content="index, follow" />
Màu giao diện
Giá trị theme-color cho phép bạn xác định màu để tuỳ chỉnh giao diện trình duyệt. Giá trị màu trên thuộc tính nội dung sẽ được các trình duyệt và hệ điều hành hỗ trợ sử dụng, cho phép bạn cung cấp màu đề xuất cho các tác nhân người dùng có hỗ trợ tô màu cho thanh tiêu đề, thanh thẻ hoặc các thành phần khác của Chrome. Thẻ meta này đặc biệt hữu ích cho các ứng dụng web tiến bộ. Tuy nhiên, nếu đã thêm tệp kê khai mà PWA yêu cầu, thì bạn có thể thêm màu giao diện vào đó. Tuy nhiên, việc xác định màu này trong HTML đảm bảo rằng màu sẽ được tìm thấy ngay trước khi hiển thị, có thể nhanh hơn trong lần tải đầu tiên so với khi chờ tệp kê khai.
Để đặt màu giao diện thành tông màu xanh dương của màu nền trang web, hãy bao gồm:
<meta name="theme-color" content="#226DAA" />
Thẻ meta màu giao diện có thể bao gồm thuộc tính media cho phép cài đặt nhiều màu giao diện dựa trên truy vấn phương tiện. Bạn chỉ có thể đưa thuộc tính media vào thẻ meta này và bị bỏ qua trong tất cả các thẻ meta khác.
Có một số giá trị meta name khác, nhưng những giá trị mà chúng ta đã thảo luận là những giá trị phổ biến nhất. Ngoại trừ việc khai báo các giá trị theme-color khác nhau cho các truy vấn nội dung nghe nhìn khác nhau, chỉ thêm một trong mỗi thẻ meta. Nếu bạn cần thêm nhiều loại thẻ meta để hỗ trợ các trình duyệt cũ, thì giá trị cũ sẽ đứng sau giá trị mới vì tác nhân người dùng sẽ đọc các quy tắc liên tiếp cho đến khi tìm thấy giá trị phù hợp.
Mở biểu đồ
Bạn có thể sử dụng Open Graph và các giao thức thẻ meta tương tự để kiểm soát cách các trang web mạng xã hội như Twitter, LinkedIn và Facebook hiển thị đường liên kết đến nội dung của bạn. Nếu không được đưa vào, các trang mạng xã hội sẽ lấy tiêu đề trang và nội dung mô tả một cách chính xác từ thẻ meta mô tả, thông tin giống như công cụ tìm kiếm sẽ hiển thị, nhưng bạn có thể chủ động đặt nội dung bạn muốn người dùng nhìn thấy khi một đường liên kết được đăng lên trang web của bạn.
Khi bạn đăng một đường liên kết đến Machine LearningML hoặc web.dev lên Facebook hoặc Twitter, một thẻ có hình ảnh, tiêu đề trang web và nội dung mô tả trang web sẽ xuất hiện. Toàn bộ thẻ là một siêu liên kết đến URL mà bạn đã cung cấp.
Thẻ meta Open Graph có hai thuộc tính: thuộc tính property thay vì thuộc tính name và nội dung hoặc giá trị của thuộc tính đó. Thuộc tính property không được định nghĩa trong thông số kỹ thuật chính thức nhưng được các ứng dụng hỗ trợ giao thức Open Graph hỗ trợ rộng rãi. Việc tạo các thuộc tính "mới" như property giúp đảm bảo các giá trị thuộc tính bạn đã tạo cho thuộc tính của giao thức sẽ không xung đột với các giá trị sau này của các thuộc tính name hoặc http-equiv.
Tạo thẻ phương tiện Facebook:
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
Hiển thị tiêu đề bài đăng. Tiêu đề này thường xuất hiện bên dưới hình ảnh và phía trên nội dung mô tả. Nội dung mô tả nên dài tối đa 3 câu, tóm tắt bài đăng của bạn. Nội dung này sẽ xuất hiện sau dòng tiêu đề được xác định trong og:title. Cung cấp URL tuyệt đối cho ảnh biểu ngữ mà bạn muốn hiển thị, bao gồm cả giao thức https://. Khi đưa hình ảnh vào HTML, hãy luôn thêm nội dung mô tả bằng văn bản thay thế cho hình ảnh, ngay cả khi hình ảnh đó sẽ xuất hiện ở những nơi khác. Đối với thẻ mạng xã hội của Open Graph, hãy xác định alt làm giá trị nội dung cho thuộc tính og:image:alt. Bạn cũng có thể thêm một URL chính tắc trong og:url.
Tất cả các thẻ meta này đều được xác định trong giao thức Open Graph. Giá trị phải là nội dung mà bạn muốn ứng dụng web của bên thứ ba hiển thị.
Các mạng xã hội khác cũng có cú pháp tương tự như mã đánh dấu thẻ Twitter. Điều này cho phép cung cấp một trải nghiệm khác tuỳ thuộc vào vị trí mà đường liên kết xuất hiện, hoặc bạn có thể bật tính năng theo dõi đường liên kết bằng cách thêm một tham số vào cuối URL.
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
Trong trường hợp của Twitter, để đảm bảo giá trị của thuộc tính name không xung đột với các quy cách trong tương lai, thay vì sử dụng một thuộc tính mới như thuộc tính property trong Open Graph, đối với dữ liệu thẻ Twitter, tất cả giá trị tên đều có tiền tố twitter:.
Bạn có thể xem giao diện của thẻ mạng xã hội trên Twitter và Facebook.
Bạn có thể sử dụng hình ảnh thẻ, tiêu đề và nội dung mô tả riêng cho từng trang mạng xã hội hoặc cho từng tham số đường liên kết. Ví dụ: https://perfmattersconf.com đặt các giá trị khác nhau cho og:image, og:title và og:description dựa trên tham số của URL.
Nếu nhập https://perfmattersconf.com?name=erica và https://perfmattersconf.com?name=melanie vào Trình xác thực thẻ của Twitter, bạn sẽ thấy hai thẻ này; chúng tôi đã cung cấp các nội dung khác nhau mặc dù cả hai đều liên kết đến cùng một trang chủ của hội nghị.
Thông tin meta hữu ích khác
Nếu ai đó đánh dấu trang web của bạn, thêm trang web vào màn hình chính của họ hoặc nếu trang web của bạn là một ứng dụng web tiến bộ hay hoạt động ngoại tuyến hoặc không hiển thị các tính năng của Chrome của trình duyệt, bạn có thể cung cấp biểu tượng ứng dụng cho màn hình chính của thiết bị di động.
Bạn có thể dùng thẻ <link> để liên kết đến các hình ảnh khởi động mà bạn muốn sử dụng. Dưới đây là ví dụ về cách bao gồm một vài hình ảnh kèm theo truy vấn phương tiện:
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
Nếu trang web hoặc ứng dụng của bạn có hỗ trợ ứng dụng web, tức là trang web có thể đứng riêng với giao diện người dùng ở mức tối thiểu, chẳng hạn như không có nút quay lại, bạn cũng có thể sử dụng thẻ meta để thông báo cho trình duyệt biết điều đó:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
Chỉ thêm những thuộc tính này nếu ứng dụng của bạn thực sự có khả năng hỗ trợ ứng dụng. Nếu trang web của bạn không hiển thị như vậy, thì bạn sẽ phải thiết lập những người ủng hộ nhiệt thành nhất của mình, những người đã thêm trang web của bạn vào màn hình chính của họ, tạo ra trải nghiệm người dùng thực sự kém. Bạn sẽ mất người yêu!
Nếu ai đó sắp lưu biểu tượng của bạn vào màn hình chính của thiết bị nhỏ của họ, bạn nên đặt tên ngắn cho hệ điều hành không chiếm nhiều không gian trên màn hình chính của thiết bị nhỏ. Bạn có thể thực hiện việc này bằng cách bao gồm thẻ meta hoặc sử dụng tệp kê khai web. Phần sau đây minh hoạ phương pháp thẻ meta:
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
Bạn đã áp dụng một số thẻ meta, tất cả các thẻ này sẽ làm cho tiêu đề của bạn dài hơn. Nếu bạn đang thực sự tạo một ứng dụng web tiến bộ có khả năng hỗ trợ ứng dụng web, thân thiện với môi trường ngoại tuyến, thay vì thêm hai thẻ meta bổ sung này, bạn có thể đưa short_name: MLW vào tệp webmanifest một cách đơn giản và ngắn gọn hơn.
Tệp kê khai có thể ngăn tiêu đề khó sử dụng đầy các thẻ <link> và <meta>. Chúng ta có thể tạo một tệp kê khai, thường gọi là manifest.webmanifest hoặc manifest.json. Sau đó, chúng ta sử dụng thẻ <link> tiện dụng có thuộc tính rel được đặt thành manifest và thuộc tính href được đặt thành URL của tệp kê khai:
<link rel="manifest" href="/mlw.webmanifest" />
Loạt bài này tập trung vào HTML, nhưng bạn có thể tham khảo khoá học web.dev về ứng dụng web tiến bộ hoặc tài liệu về tệp kê khai ứng dụng web của MN.
HTML của bạn hiện có dạng như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Câu này khá dài, nhưng đã xong.
Giờ đây, <head> của bạn gần như đã hoàn chỉnh, bạn có thể đi sâu vào một số HTML ngữ nghĩa.
Kiểm tra kiến thức
Kiểm tra kiến thức về siêu dữ liệu
Lệnh làm mới pragma.
Mở thẻ meta Biểu đồ.