Trong bài viết này, bạn sẽ tìm hiểu thẻ meta trong HTML và cách sử dụng chúng. Sau đó, chúng ta sẽ xem xét một số thẻ meta quan trọng nhất mà bạn cần đưa vào mọi dự án HTML mới. Bắt đầu nào! Cách thiết lập một dự án HTML Khi thiết lập

Bạn đang xem: ví dụ về thẻ meta là gì

Trong bài viết này, bạn sẽ tìm hiểu thẻ meta trong HTML và cách sử dụng chúng. Sau đó, chúng ta sẽ xem xét một số thẻ meta quan trọng nhất mà bạn cần đưa vào mọi dự án HTML mới.

Hãy bắt đầu!

Cách thiết lập dự án HTML

Khi thiết lập các dự án HTML mới, bạn sẽ thấy rằng mình phải bao gồm một vài thẻ giống nhau mỗi lần.

Những thẻ này rất cần thiết và bạn sẽ cần chúng để trang web HTML của mình hoạt động bình thường, theo các phương pháp hay nhất.

Một số trình chỉnh sửa mã cung cấp các phím tắt để tự động điền và nhập các thẻ mà bạn sử dụng trong mọi dự án HTML mới. Điều này có thể giúp bạn tiết kiệm thời gian đáng kể.

Trong Visual Studio Code editor , bạn có thể thực hiện việc này theo cách sau:

  1. Đảm bảo rằng bạn đã tạo một tệp có đuôi là .html – tại đây, bạn sẽ viết tất cả mã HTML của mình.
  2. Bên trong tệp trống, hãy nhập dấu chấm than, ! .
  1. Nhấp vào dấu chấm than với đề cập rằng sau đây là Viết tắt của Emmet.

Emmet là một plugin dành cho trình chỉnh sửa mã được tích hợp vào Visual Studio Code theo mặc định và nó giúp bạn tối ưu hóa quy trình làm việc HTML của mình.

Sau đó, bạn sẽ thấy đoạn mã sau được điền:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Tài liệu & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    
& lt; / body & gt;
& lt; / html & gt;
 

Khi xem tệp .html trong trình duyệt bạn chọn, bạn sẽ chỉ thấy một trang trống.

Hãy phóng to phần sau của mã đã được tạo:

  & lt; head & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Tài liệu & lt; / title & gt;
& lt; / head & gt;
 

Những thẻ meta này chính xác là gì? Tại sao chúng ở đó và chúng phục vụ mục đích gì khi tạo trang web?

Bài viết này sẽ tập trung giải thích những điều cơ bản về thẻ meta và tại sao chúng được sử dụng trong các tài liệu HTML.

Các thẻ

meta nằm trong thẻ head của tài liệu HTML.

Thẻ head được sử dụng để định cấu hình tệp HTML.

Bạn sử dụng thẻ head để thêm tiêu đề vào trang web, liên kết đến biểu định kiểu CSS và xác định thêm thông tin về tài liệu HTML.

Thẻ

meta đại diện cho siêu dữ liệu. Về cơ bản, chúng được sử dụng để xác định và mô tả dữ liệu về dữ liệu, đồng thời được sử dụng để thêm thông tin bổ sung vào dữ liệu bên trong trang web.

Có nhiều thẻ meta . Một số trong số chúng giúp cải thiện SEO (Tối ưu hóa Công cụ Tìm kiếm) của trang web của bạn, đảm bảo rằng nội dung trên trang web của bạn có liên quan đến những gì mọi người đang tìm kiếm.

Xem Thêm  Các cách tốt nhất để sử dụng math.pi trong Python - cách nhập pi trong python

Cách xác định bộ ký tự của trang web

& lt; meta charset = "UTF-8" & gt; xác định bộ ký tự sẽ được sử dụng trong trang web.

UTF-8 , viết tắt của Định dạng chuyển đổi Unicode 8-bit, là mã hóa ký tự tiêu chuẩn được sử dụng với phiên bản HTML mới nhất, là HTML5.

Dòng này nên được bao gồm trong mọi trang web được tạo vì nó đảm bảo rằng mọi ký tự từ mọi ngôn ngữ trên thế giới đều được hiển thị chính xác trong mọi trình duyệt.

Bằng cách sử dụng UTF-8 phổ quát làm bộ ký tự, các ký tự từ các ngôn ngữ không phải tiếng latin sẽ không bị bóp méo.

Trình duyệt Google Chrome đã tự động đặt mã hóa thành UTF-8 , vì vậy bạn sẽ không phải lo lắng về điều đó khi thiết kế cho trình duyệt này. Nhưng bạn vẫn cần bao gồm & lt; meta charset = "UTF-8" & gt; trong mọi tệp HTML trong trường hợp tính năng này không được các trình duyệt khác hỗ trợ.

Ví dụ: hãy xem điều gì sẽ xảy ra trong trình duyệt Safari khi dòng này không được thêm vào và tôi viết tiêu đề bằng ngôn ngữ không phải latin, chẳng hạn như tiếng Hy Lạp:

 & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Tài liệu & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; h1 & gt; Γεία σου κόσμε! & lt; / h1 & gt; & lt;! - Hello world! - & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Khi tài liệu HTML được xem trong trình duyệt, tất cả các ký tự đều bị biến dạng.

Cách cho phép Internet Explorer của Microsoft biết sẽ sử dụng chế độ xem kết xuất nào

Bạn sử dụng thẻ meta http-equiv = "X-UA-Interactive" content = "IE = edge" để chọn và xác định phiên bản của Internet Explorer mà trang web sẽ được chỉnh sửa .

Luôn chọn cái mới nhất, là IE = edge .

Có nhiều phiên bản trình duyệt của Microsoft. Trước đây, những tiến bộ khác nhau đã khiến các nhà thiết kế web cũng như nhà phát triển web phải đau đầu, những người luôn nỗ lực để đảm bảo các trang web có thể sử dụng được trên các trình duyệt cũ.

Thẻ này sẽ đảm bảo rằng trang web sẽ không được hiển thị dưới dạng phiên bản cũ hơn của Internet Explorer, phiên bản này thường có nhiều lỗi.

Cách điều chỉnh cài đặt chế độ xem

Ngày nay, điều quan trọng là tất cả các trang web phải đẹp trên tất cả các thiết bị, đặc biệt là điện thoại di động.

Vì vậy, bạn cần bao gồm thẻ meta name = "viewport" content = "width = device-width, initial-scale = 1.0" trong mọi tệp HTML.

viewport đề cập đến cách trang web được hiển thị trên các kích thước màn hình khác nhau và người dùng có bao nhiêu diện tích hình ảnh.

Mỗi thiết bị có một chế độ xem khác nhau. Ví dụ: thiết bị di động có kích thước nhỏ hơn và máy tính để bàn có kích thước lớn hơn.

content = "width = device-width là bước đầu tiên để đảm bảo rằng trang web trông đẹp trên thiết bị di động.

Xem Thêm  Mã màu Hex - mã màu trong hệ lục phân

Nó ngăn không cho một trang web được xem từ thiết bị di động trông giống như trên máy tính xách tay – trang web đó nhỏ và được thu nhỏ ở xa.

Điều này đảm bảo rằng HTML sẽ điều chỉnh theo chiều rộng của màn hình thiết bị.

initial-scale = 1.0 đặt cách trang web chia tỷ lệ và đặt mức thu phóng ban đầu khi trang được tải lần đầu tiên bởi trình duyệt.

Cách thêm mô tả trang web của bạn

Việc sử dụng thẻ mô tả meta cho trang của bạn sẽ giúp các công cụ tìm kiếm xác định và xếp hạng trang web của bạn so với các trang web khác. Nó được sử dụng chủ yếu cho các mục đích SEO (Tối ưu hóa Công cụ Tìm kiếm).

Thẻ mô tả meta được sử dụng để giải thích một cách ngắn gọn và súc tích về nội dung trang web của bạn.

Thẻ mô tả meta có thể trông giống như sau:

  & lt; meta name = "description" content = "Sứ mệnh của chúng tôi: giúp mọi người học viết mã miễn phí. Chúng tôi thực hiện điều này bằng cách tạo ra hàng nghìn video, bài viết và mã tương tác bài học - tất cả đều được cung cấp miễn phí cho công chúng. "& gt;
 

Bạn sử dụng các thuộc tính name content , với giá trị văn bản được chuyển đến content hiển thị trong kết quả tìm kiếm:

Những điều cần cân nhắc khi viết mô tả trang web của bạn

  • Đảm bảo giữ cho phần mô tả trang web của bạn ngắn gọn và không quá 160 ký tự.
  • Bao gồm các từ khóa và cụm từ khóa hữu ích mà mọi người có xu hướng sử dụng thường xuyên khi tìm kiếm các dịch vụ mà trang web của bạn cung cấp.
  • Giải thích rõ ràng những gì trang web của bạn làm và sứ mệnh đằng sau nó. Điều quan trọng là phải tìm ra những điểm khác biệt của bạn và giá trị mà bạn cung cấp.
  • Nhất quán với tiếng nói và giai điệu của thương hiệu của bạn.
  • Quan trọng nhất, hãy mô tả nội dung mà trang web của bạn thực sự cung cấp. Đừng cố lừa người đọc của bạn bằng cách chỉ nhằm mục đích xuất hiện cao trong các lượt tìm kiếm và xếp hạng.

Cách thêm tên tác giả của trang web

Một phần tử meta hữu ích khác cần bao gồm là tên tác giả.

Điều này có thể trông giống như sau:

  & lt; meta name = "author" content = "Quincy Larson" & gt;
 

Có thể hữu ích nếu biết ai là tác giả của trang.

Thông tin này chia sẻ ai đã tạo và xây dựng trang web, tác giả của nội dung hoặc bản quyền thuộc về ai.

Kết luận

Tóm lại, tất cả các tài liệu HTML cần bao gồm ít nhất ba thẻ meta sau:

  • & lt; meta charset = "UTF-8" & gt; , để chỉ định bộ ký tự.
  • & lt; meta name = "description & gt;" , để thêm mô tả rõ ràng về trang web và các dịch vụ mà trang web cung cấp cho người đọc / khách hàng.
  • & lt; meta name = "viewport & gt; , là bước đầu tiên các trang web cần thực hiện để có thể sử dụng được trên nhiều thiết bị màn hình.

Để tìm hiểu thêm về HTML và CSS, hãy xem Giấy chứng nhận thiết kế web đáp ứng của freeCodeCamp, nơi bạn sẽ học theo cách tương tác trong quá trình xây dựng các dự án thú vị.

Xem Thêm  Thuộc tính font-weight CSS - độ đậm của phông chữ css

Cảm ơn bạn đã đọc và chúc bạn viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề ví dụ về thẻ meta là gì

Meta Description là gì? Tầm quan trọng của thẻ Meta đối với SEO web – MOMD GROUP

  • Tác giả: MOMD GROUP
  • Ngày đăng: 2020-11-24
  • Đánh giá: 4 ⭐ ( 2685 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Meta Description là gì? Nó có ý nghĩa như thế nào đối với đối tượng mục tiêu? Trong SEO web thì hạng mục kể trên nắm giữ vai trò gì? Mời bạn cùng MOMD Group khám phá ngay bằng những chia sẻ sau đây. Nhờ thế chúng ta còn tối ưu website tốt hơn để quá trình tăng thứ hạng hiệu quả như mong đợi.
    Xem bài viết chi tiết: https://momd.vn/meta-description

    About
    CÔNG TY TNHH MOMD GROUP VIỆT NAM
    Website; https://momd.vn
    Đào Tạo SEO: https://momd.vn/dao-tao-seo
    Dịch Vụ SEO: https://momd.vn/dich-vu-seo
    Fanpage: https://www.facebook.com/momdgroup
    Founder MOMD GROUP: https://www.facebook.com/KenLil/
    Youtube MOMD GROUP: https://www.youtube.com/channel/UCuHvyP3ItkoPXt5n5uhaXBQ
    Địa chỉ: Số 62 Đường 19, Phúc xá, Ba Đình, Hà Nội 100000
    Điện thoại: 0376 108 573
    momd momdgroup daotaoseomomd daotaoseoautom dichvuseomomd dichvuseoautor descriptionmomd descriptionlagimomd digitalmarketingmomd

Thẻ meta là gì? Sử dụng thế nào khi SEO website?

  • Tác giả: carly.com.vn
  • Đánh giá: 4 ⭐ ( 7684 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ meta có lẽ là loại thông tin cơ bản nhất trong html cũng như khi làm tối ưu hóa website. Có loại cần thiết, nhưng cũng có loại chẳng ích gì nhiều. Tham khảo chi tiết tại đây.

Thẻ Meta là gì? Cách viết Meta Tag Description chuẩn SEO

  • Tác giả: univn.vn
  • Đánh giá: 3 ⭐ ( 4234 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ Meta là gì? Làm thế nào để viết thẻ Meta Description chuẩn SEO là những nội dung bạn cần nắm được khi làm SEO Website hay quản trị web

9 loại thẻ Meta cần thiết cho SEO

  • Tác giả: seongon.com
  • Đánh giá: 5 ⭐ ( 7274 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong cấu trúc của Website có nhiều loại thẻ Meta, tối ưu cho SEO tương đương với việc tối ưu các chi tiết nhỏ ảnh hưởng đến tìm kiếm…

Thẻ Meta Trong HTML – Tất Tần Tật Những Điều Cần Phải Biết

  • Tác giả: seoviet.vn
  • Đánh giá: 3 ⭐ ( 3348 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ meta trong html là gì? Cách sử dụng thế nào để đạt hiệu quả cao? Cùng tham khảo bài viết dưới đây của chúng tôi để được giải đáp.

Thẻ Meta Description là gì? Tạo mô tả tìm kiếm cực tốt cho SEO [ví dụ đủ]

  • Tác giả: www.vietnetgroup.vn
  • Đánh giá: 3 ⭐ ( 5446 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Meta Description là đoạn văn bản ngắn được hiển thị cho mỗi kết quả tìm kiếm nêu lên tóm tắt nội dung của trang. HD thực hành viết mô tả tìm kiếm tốt nhất cho SEO

Meta Description là gì? 15 Cách viết Meta Description hay

  • Tác giả: gtvseo.com
  • Đánh giá: 3 ⭐ ( 2295 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Meta Description là gì? Click xem ngay 15 Cách viết thẻ Meta Description lợi hại nhất năm 2022 mà bạn không nên bỏ qua!

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php