Thẻ Meta trong HTML: Hướng Dẫn Chi Tiết và Tối Ưu SEO 2024

Thẻ meta là một phần không thể thiếu trong HTML, đóng vai trò quan trọng trong việc thiết kế và tối ưu hóa website. Hiểu rõ về thẻ meta, đặc biệt là các thuộc tính như meta keywords, meta description và title, là yếu tố then chốt để nâng cao thứ hạng trên các công cụ tìm kiếm.

Bài viết này sẽ đi sâu vào khái niệm, vai trò và cách sử dụng các thẻ meta quan trọng nhất trong SEO, giúp bạn tối ưu hóa website một cách hiệu quả.

Thẻ Meta trong HTML là gì?

Thẻ meta (meta tag) là những đoạn mã nằm trong phần đầu <head> của trang HTML, cung cấp thông tin về trang web cho các công cụ tìm kiếm. Thông tin này bao gồm tiêu đề trang, từ khóa chính, mô tả nội dung, ngôn ngữ sử dụng và nhiều thuộc tính khác.

Mục đích chính của thẻ meta là giúp các công cụ tìm kiếm như Google hiểu rõ hơn về nội dung trang web, từ đó hiển thị trang web một cách phù hợp trong kết quả tìm kiếm. Người dùng thông thường không trực tiếp nhìn thấy các thẻ meta, trừ khi họ xem mã nguồn của trang web. Tuy nhiên, việc sử dụng thẻ meta hợp lý sẽ cải thiện đáng kể khả năng hiển thị và thu hút người dùng đến với website của bạn.

Meta tagsMeta tags

Riêng thẻ <title>, người dùng có thể thấy nội dung của nó trên thanh tiêu đề của trình duyệt. Mặc dù có ý kiến cho rằng thẻ <title> không hẳn là thẻ meta, nhưng do vai trò và chức năng tương đồng, chúng ta vẫn sẽ đề cập đến nó trong bài viết này.

8 Loại Thẻ Meta Quan Trọng Nhất trong SEO Website

Có rất nhiều loại thẻ meta khác nhau, mỗi loại có một mục đích và công dụng riêng. Tuy nhiên, chỉ cần tập trung vào một số thẻ quan trọng nhất là đủ để tối ưu hóa website hiệu quả. Dưới đây là danh sách 8 loại thẻ meta quan trọng nhất trong SEO:

Thẻ Title

Thẻ title (tiêu đề trang) là yếu tố quan trọng hàng đầu, cho biết chủ đề chính của trang web. Cấu trúc của thẻ title như sau:

<title>Tiêu đề trang web</title>

Nội dung của thẻ <title> được hiển thị trên thanh tiêu đề của trình duyệt, trên trang kết quả tìm kiếm và khi chia sẻ trên mạng xã hội.

Thẻ Title: Thẻ Title:

Lưu ý: Tiêu đề nên ngắn gọn (dưới 65 ký tự), chứa từ khóa chính và hấp dẫn để thu hút người dùng nhấp vào.

Thẻ Meta Description

Thẻ meta description (mô tả trang) cung cấp một bản tóm tắt ngắn gọn về nội dung của trang web. Nó chi tiết hơn thẻ title, nhưng cũng không nên quá dài (khoảng 150-160 ký tự) để đảm bảo hiển thị đầy đủ trên trang kết quả tìm kiếm.

Cú pháp:

<meta name="description" content="Mô tả ngắn gọn về nội dung trang web">

Thẻ meta description giúp người dùng hiểu rõ hơn về nội dung trang trước khi nhấp vào, từ đó tăng tỷ lệ nhấp chuột (CTR).

Thẻ Meta Content-Type

Thẻ content-type dùng để khai báo hệ thống ký tự mà trang web sử dụng (ví dụ: UTF-8). Điều này giúp trình duyệt hiển thị nội dung trang web một cách chính xác, đặc biệt là với các ngôn ngữ có ký tự đặc biệt.

Cú pháp phổ biến:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Với HTML5, bạn có thể khai báo hệ thống ký tự đơn giản hơn:

<meta charset="UTF-8">

Thẻ Meta Viewport

Trong thời đại thiết bị di động ngày càng phổ biến, thẻ meta viewport đóng vai trò quan trọng trong việc tối ưu hóa hiển thị website trên các thiết bị khác nhau.

Thẻ này hướng dẫn trình duyệt cách điều chỉnh kích thước và tỷ lệ hiển thị của trang web sao cho phù hợp với màn hình của thiết bị. Nếu không khai báo thẻ viewport, website có thể hiển thị không đúng cách trên thiết bị di động, gây ảnh hưởng đến trải nghiệm người dùng.

Cú pháp phổ biến:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ý nghĩa của các thuộc tính:

  • width=device-width: Điều chỉnh độ rộng của trang web khớp với độ rộng màn hình của thiết bị.
  • initial-scale=1.0: Thiết lập tỷ lệ zoom ban đầu là 1:1 giữa pixel CSS và pixel của thiết bị.

Social Meta (Open Graph)

Thẻ social meta, đặc biệt là các thẻ Open Graph, giúp kết nối website với các mạng xã hội như Facebook, Twitter, và Zalo. Khi người dùng chia sẻ URL của trang web trên mạng xã hội, các thẻ social meta sẽ cung cấp thông tin để hiển thị tiêu đề, hình ảnh đại diện, mô tả tóm tắt một cách hấp dẫn và chuyên nghiệp.

Ví dụ về các thẻ Open Graph:

<meta property="og:title" content="Tiêu đề trang web">
<meta property="og:description" content="Mô tả ngắn gọn về nội dung trang web">
<meta property="og:image" content="URL hình ảnh đại diện">
<meta property="og:url" content="URL của trang web">

Meta Robots

Thẻ meta robotsThẻ meta robots

Thẻ meta robots dùng để hướng dẫn các công cụ tìm kiếm về việc lập chỉ mục (index) và theo dõi (follow) các liên kết trên trang web.

Cú pháp:

<meta name="robots" content="index, follow">

Giá trị mặc định nếu không sử dụng thẻ meta robots là index, follow. Điều này có nghĩa là công cụ tìm kiếm sẽ lập chỉ mục trang và theo dõi các liên kết trên trang.

Một số giá trị khác của thuộc tính content:

  • noindex: Ngăn công cụ tìm kiếm lập chỉ mục trang.
  • nofollow: Ngăn công cụ tìm kiếm theo dõi các liên kết trên trang.
  • noindex, nofollow: Ngăn công cụ tìm kiếm lập chỉ mục trang và theo dõi các liên kết trên trang.

Thẻ meta robots nên được sử dụng kết hợp với file robots.txt để kiểm soát chặt chẽ hơn các trang mà bạn muốn công cụ tìm kiếm lập chỉ mục.

Ngoài ra, còn có một số thẻ meta robots khác mà bạn nên hiểu rõ ý nghĩa và tác dụng:

  • noarchive: Ngăn công cụ tìm kiếm lưu bản sao của trang web vào bộ nhớ cache.
  • nocache: Tương tự như noarchive, nhưng chỉ áp dụng cho MSN/Live.
  • nosnippet: Ngăn công cụ tìm kiếm hiển thị đoạn trích (snippet) mô tả trang trong kết quả tìm kiếm và không cho phép chúng hiển thị trong bộ nhớ cache.
  • noodp: Ngăn công cụ tìm kiếm tạo mô tả từ các thư mục danh bạ Web DMOZ.
  • noydir: Ngăn Yahoo trích mô tả trong danh bạ Web Yahoo! directory để tạo các phần mô tả trong kết quả tìm kiếm.

Meta Language

Thẻ meta language giúp khai báo ngôn ngữ chính mà trang web sử dụng, giúp công cụ tìm kiếm định hướng người dùng tốt hơn. Thẻ này đặc biệt hữu ích nếu website của bạn hỗ trợ nhiều ngôn ngữ.

Ví dụ, với website sử dụng tiếng Việt, cú pháp như sau:

<meta http-equiv="content-language" content="vi">

Meta Geo

Thẻ meta geo dùng để khai báo vị trí địa lý cụ thể của doanh nghiệp. Mục đích là để công cụ tìm kiếm định hướng tốt hơn đến người dùng trong khu vực mà bạn cung cấp sản phẩm/dịch vụ.

Bạn có thể khai báo theo địa danh, tọa độ (kinh độ, vĩ độ), hoặc khu vực.

Ví dụ:

<meta name="geo.placename" content="Hanoi">
<meta name="geo.position" content="21.027764;105.834160">
<meta name="geo.region" content="VN-HN">

Một Số Thẻ Meta Không Còn Quan Trọng

Dưới đây là một số thẻ meta đã mất đi tầm quan trọng do không còn được các công cụ tìm kiếm sử dụng hoặc có tác động không đáng kể đến SEO:

  1. Thẻ meta keywords: Trước đây rất quan trọng, nhưng hiện tại Google đã bỏ qua thẻ này do tình trạng lạm dụng nhồi nhét từ khóa. Tuy nhiên, bạn vẫn có thể sử dụng thẻ này để tham khảo và xác định nội dung chính của trang.
  2. Author/web author: Dùng để nêu tên tác giả của trang. Không cần thiết vì thông tin tác giả thường được hiển thị trực tiếp trên trang.
  3. Revisit after: Lệnh cho công cụ tìm kiếm quay lại trang sau một khoảng thời gian, nhưng không công cụ nào tuân theo lệnh này.
  4. Rating: Thể hiện đánh giá mức độ nội dung “người lớn”.
  5. Date/Expiration: Thể hiện ngày tạo/ngày hết hạn của trang.
  6. Copyright: Thông tin bản quyền của website.
  7. Abstract: Tóm tắt nội dung của trang, thường phù hợp với các bài viết mang tính học thuật cao.
  8. Distribution: Dùng để kiểm soát ai có thể truy cập trang, thường được để mặc định là “global”.
  9. Generator: Thể hiện chương trình dùng để tạo trang web.

Một Số Thắc Mắc Về Thẻ Meta

Thẻ meta nào quan trọng nhất hiện nay?

Theo nghiên cứu và kinh nghiệm, ba thẻ quan trọng nhất vẫn là title, description và robots.

Google có lấy nội dung thẻ meta để xếp thứ hạng website không?

Gần như chắc chắn là có, đặc biệt là với các thẻ meta quan trọng.

Làm thế nào để kiểm tra thẻ meta trên 1 trang web?

Bạn có thể xem mã nguồn của trang (View page source). Để kiểm tra hàng loạt, sử dụng các công cụ SEO như SEMRush, SiteBulb Crawler, DeepCrawl, Screaming Frog…

Làm thế nào để đưa thẻ meta vào website?

Các hệ thống quản trị nội dung (CMS) thường cho phép thêm thông tin meta vào website. Nếu không tìm thấy, hãy liên hệ với bên lập trình web để được hỗ trợ.

Tóm lược

Bài viết đã trình bày khái niệm và vai trò của thẻ Meta Tag, đồng thời cung cấp danh sách các thẻ quan trọng trong việc tối ưu hóa website, giúp trang web thân thiện với các công cụ tìm kiếm. Hy vọng bạn sẽ biết cách sử dụng các thẻ này sao cho hiệu quả để đạt mục đích tối ưu hóa website của mình.