Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Những Thành Phần Trong Head HTML Mà Bạn Nên Biết

Những Thành Phần Trong Head HTML Mà Bạn Nên Biết


Ngày 10 Tháng 12 Năm 2020

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu các phần tử có trong thẻ head HTML cũng như cách sử dụng nó sao cho hiệu quả trong quá trình thiết kế và phát triển web nhé!


Các Phần Tử Trong Thẻ <Head> HTML

Các Thẻ Bắt Buộc Phải Có Trong <Head>

Phần tử bắt buộc trong head

Mình giải thích sơ qua một tí về thuộc tính của nó nhé:

  • meta charset: Xác định mã hóa của trang web(utf-8 được xem là tiêu chuẩn chung)
  • meta name="viewport": Thiết lập khả năng responsive(thích ứng) trên thiết bị điện thoại.
  • width=device-width: Thiết lập chiều rộng của trang tuân theo chiều rộng của màn hình thiết bị.
  • initial-scale=1: thiết lập initial zoom(1 nghĩa là không thu phóng)

Nếu bạn muốn tìm hiểu thêm về thuộc tính này thì có thể tham khảo ở đây nhé.

 <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  Đây là Hai Thẻ Bạn Phải Bắt Buộc Phải Có Trong Bất Kỳ Trang Web Nào nhé!
 -->
<title>Tiêu Đề Trang</title>

Các Phần Tử Trong <Head> HTML

Các Thành Phần Trong Head HTML

Nếu bạn muốn tìm hiểu thêm về thuộc tính <noscript> thì có thể tham khảo ở đây nhé.

 <!-- Niềm Vui Lập Trình -->
<!-- Đặt URL cơ sở cho tất cả các URL tương đối trong tài liệu -->
<base href="https://example.com/page.html">
<!-- Liên kết đến tệp CSS nằm ở  bên ngoài -->
<link rel="stylesheet" href="styles.css">
<!-- Sử dụng để thêm trực tiếp CSS vào trang web -->
<style>
  /* ... */
</style>
<!-- Liên kết file Javascript bên ngoài hoăc áp dụng trực tiếp vào trang web -->
<script src="script.js"></script>
<script>
  //Hàm Sẽ được thực thi
</script>
<!-- xác định một nội dung thay thế sẽ được hiển thị cho những người dùng đã disable script trong trình duyệt của họ hoặc các trình duyệt không hỗ trợ script. -->
<noscript>
  <!-- No JS alternative -->
</noscript>

Thẻ Meta

Các Meta Head HTML

Nếu bạn muốn sao chép code thì bạn hãy nhấn nút ở bên dưới để hiển thị đoạn mã nhé!

 <!--
  2 Thẻ meta bắt buộc phải có
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
 Cho phép kiểm soát nguồn tài nguyên được tải từ đâu.

 Đặt càng sớm trong thẻ <head> càng tốt, và thẻ  chỉ áp dụng cho các tài nguyên được khai báo sau nó.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!--tên của ứng dụng web (chỉ nên được sử dụng nếu trang web được sử dụng làm ứng dụng)-->
<meta name="application-name" content="Tên Ứng Dụng">
<!-- Theme Color for Chrome, Firefox OS và Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Giới thiệu ngắn về trang web (thường giới hạn 150 ký tự) -->
<!-- Nội dung cũng sẽ được hiển thị cùng với title trong kết quả tìm kiếm  -->
<meta name="description" content="Giới Thiệu về trang">
<!-- Kiểm soát hành vi thu thập thông tin và lập chỉ mục của công cụ tìm kiếm -->
<meta name="robots" content="index,follow"><!-- Tất cả công cụ tìm kiếm -->
<meta name="googlebot" content="index,follow"><!-- Chỉ Google -->
<!-- Yêu cầu Google không hiển thị liên kết trang web trong  hộp tìm kiếm  -->
<meta name="google" content="nositelinkssearchbox">
<!-- Yêu cầu Google không cung cấp bản dịch cho tài liệu này -->
<meta name="google" content="notranslate">
<!-- Xác minh quyền sở hữu trang web -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->
<!-- Xác định phần mềm được sử dụng để tạo trang web (như là - WordPress, Dreamweaver) -->
<meta name="generator" content="program">
<!-- Mô tả ngắn gọn về chủ đề tài liệu của bạn -->
<meta name="subject" content="Chủ Đề Của Trang Web">
<!-- Đưa ra xếp hạng độ tuổi chung dựa trên nội dung của tài liệu -->
<meta name="rating" content="General">
<!-- Cho phép kiểm soát cách thông tin liên kết giới thiệu được chuyển -->
<meta name="referrer" content="no-referrer">
<!-- Tắt tính năng tự động phát hiện và định dạng các số điện thoại có thể có ở trong trang web -->
<meta name="format-detection" content="telephone=no">
<!--Không  tìm nạp trước DNS bằng cách đặt content thành off("tắt") -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- Chỉ định tài liệu xuất hiện trong iframe cụ thể -->
<meta http-equiv="Window-Target" content="_value">
<!-- Geo tags (Thẻ Địa Lý) -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo.region" content="country[-state]"><!-- Country code (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; eg. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" -->

Đường Dẫn Phần 1

Các Đường Dẫn Trong Head HTML Phần 1

Nếu bạn muốn sao chép code thì bạn hãy nhấn nút ở bên dưới để hiển thị đoạn mã nhé!

 <!-- Đường dẫn đến file CSS ở bên ngoài trang web -->
<link rel="stylesheet" href="https://example.com/styles.css">

<!-- Ngăn ngừa các vấn đề về nội dung trùng lặp -->
<link rel="canonical" href="https://example.com/article/?page=2">

<!-- Liên kết đến phiên bản HTML AMP của trang web hiện tại -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- Liên kết đến tệp JSON lấy thông tin "cài đặt" cho ứng dụng web -->
<link rel="manifest" href="manifest.json">

<!-- Liên kết đến thông tin về (các) tác giả của trang web -->
<link rel="author" href="humans.txt">

<!--Đề cập đến tuyên bố bản quyền áp dụng trang web bằng liên kết -->
<link rel="license" href="copyright.html">

<!-- Xác minh ngôn ngữ hiện tại theo vị trị địa lý dành cho trang web-->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Cung cấp thông tin về tác giả trang web-->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:[email protected]">
<link rel="me" href="sms:+15035550125">

<!-- Cung cấp liên kết đến bộ sưu tập hồ sơ, tài liệu hoặc các tài liệu lịch sử khác được quan tâm -->
<link rel="archives" href="https://example.com/archives/">

<!-- Liên kết đến tài nguyên cấp cao nhất trong cấu trúc phân cấp -->
<link rel="index" href="https://example.com/article/">

<!-- Cung cấp tài liệu tham khảo - hữu ích khi tài liệu có nhiều tài liệu tham khảo -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">

Đường Dẫn Phần 2

Các Đường Dẫn Trong Head HTML Phần 2

Nếu bạn muốn sao chép code thì bạn hãy nhấn nút ở bên dưới để hiển thị đoạn mã nhé!

 <!-- Các tài liệu đầu tiên, cuối cùng, trước đó và tiếp theo trong một loạt trang web tương ứng -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">

<!-- Được sử dụng khi dịch vụ của bên thứ 3 được dùng để duy trì blog -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

<!-- Tạo nhận xét tự động khi một blog WordPress khác liên kết đến blog hoặc bài đăng WordPress của bạn -->
<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- Thông báo cho một URL khi bạn liên kết đến nó trên tài liệu của mình -->
<link rel="webmention" href="https://example.com/webmention">

<!-- Cho phép đăng lên miền của riêng bạn bằng ứng dụng khách Micropub -->
<link rel="micropub" href="https://example.com/micropub">

<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">

Icon

Các Loại Icon Trong Head HTML

Nếu bạn muốn sao chép code thì bạn hãy nhấn nút ở bên dưới để hiển thị đoạn mã nhé!

 <!-- Icon ở độ phân giải cao nhất mà chúng ta cần -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Safari Pinned Tab Icon -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

Mạng Xã Hội

Facebook

Các Thành Phần Facebook Trong Head HTML

Nếu bạn muốn sao chép code thì bạn hãy nhấn nút ở bên dưới để hiển thị đoạn mã nhé!

 <meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="A description of what is in the image (not a caption)">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">

Twitter

Các Thành Phần Twitter Trong Head HTML

Nếu bạn muốn sao chép code thì bạn hãy nhấn nút ở bên dưới để hiển thị đoạn mã nhé!

 <meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:image:alt" content="A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.">

Công Cụ Tạo Các Thẻ Meta Cho Trang Web

Công cụ meta tags

Nguồn

Nguồn tham khảo: https://htmlhead.dev/

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn các kiến thức về các thành phần trong thẻ Head HTML hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!