Tối ưu hóa chuẩn SEO danh sách các thẻ trong HTML cơ bản
Theo dõi GOBRANDING trênThẻ HTML là những phần tử mã ẩn sau mỗi trang web, đóng vai trò quan trọng trong việc tối ưu hóa SEO. Chúng cung cấp thông tin thiết yếu cho các công cụ tìm kiếm, giúp nâng cao khả năng hiển thị trên trang kết quả tìm kiếm (SERP). Những thẻ này không chỉ làm nổi bật nội dung liên quan mà còn hướng dẫn các bot thu thập dữ liệu hiểu rõ hơn về nội dung trang.
Nội dung chính
I. Các thẻ trong HTML là gì?
Bằng cách thêm các thẻ SEO vào mã HTML của mình, bạn có thể cải thiện đáng kể khả năng hiển thị trên công cụ tìm kiếm. Khi công cụ tìm kiếm, như Google, thu thập thông tin từ trang web của bạn, chúng sẽ kiểm tra các thẻ HTML.
Thông qua thông tin này, công cụ tìm kiếm có thể xác định nội dung của bạn và phân loại tài liệu một cách chính xác. Ví dụ, thẻ <title> không chỉ giúp mô tả tiêu đề của trang mà còn ảnh hưởng đến cách mà trang được hiển thị trong kết quả tìm kiếm.
Bên cạnh đó, một số thẻ cũng giúp cải thiện trải nghiệm người dùng khi họ tìm kiếm thông tin. Thẻ mô tả (<meta description>) chẳng hạn, cung cấp một đoạn tóm tắt ngắn về nội dung trang, giúp thu hút người dùng nhấp vào liên kết của bạn thay vì các trang khác.
Việc sử dụng các thẻ HTML đúng cách không chỉ có ảnh hưởng đến thứ hạng trang web của bạn mà còn giúp bạn kết nối hiệu quả hơn với đối tượng mục tiêu. Nếu không có các thẻ này, bạn sẽ khó khăn hơn trong việc truyền tải thông điệp của mình đến người dùng.
II. Cú pháp của thẻ HTML
Cú pháp của một thẻ HTML bao gồm hai phần: thẻ mở và thẻ đóng. Cả hai phần đều được đặt trong dấu ngoặc nhọn, với thẻ đóng có thêm dấu gạch chéo (/) ở trước tên thẻ. Ví dụ, thẻ mở sẽ là <html> và thẻ đóng sẽ là </html>.
Ví dụ như cú pháp của thẻ tiêu đề trang, trong đó thẻ mở là <title> và thẻ đóng là </title>. Nội dung nằm giữa hai thẻ này sẽ được hiển thị trên tab của trình duyệt. Chẳng hạn:
<title>Trang Chủ Của Tôi</title>
Trong ví dụ này, “Trang Chủ Của Tôi” sẽ là tiêu đề mà người dùng thấy khi họ mở trang web.
III. 10 thẻ HTML quan trọng nhất cho SEO
Dưới đây là danh sách các thẻ HTML quan trọng cho SEO mà bạn nên chú ý:
1. Thẻ Tiêu Đề
Thẻ tiêu đề là một trong những thẻ quan trọng nhất cho SEO. Đây là thẻ đại diện cho nội dung của bạn và cách mà trang web bạn hiển thị trên Google và Bing.
Google thường kiểm tra thẻ tiêu đề để tạo tiêu đề cho trang của bạn, và nếu có thẻ tiêu đề, Google rất có thể sẽ chọn nó làm tiêu đề chính trong danh sách tìm kiếm. Tối ưu hóa thẻ tiêu đề giúp bạn kiểm soát cách trang của mình được đại diện trên SERP.
Cách tối ưu thẻ tiêu đề:
- Theo dõi độ dài: Google chỉ hiển thị 50-60 ký tự đầu tiên, vì vậy hãy đảm bảo thông tin quan trọng nằm trong thẻ tiêu đề.
- Bao gồm từ khóa hợp lý: Tránh nhồi nhét từ khóa, nhưng 1-2 từ khóa là tốt.
- Viết nội dung hấp dẫn: Đừng trở nên quá bán hàng hoặc chung chung, hãy tạo tiêu đề mô tả và hấp dẫn đúng với search intent người đọc.
2. Thẻ Mô Tả Meta Description
Thẻ mô tả meta cung cấp thông tin dưới liên kết trong kết quả tìm kiếm. Google không luôn sử dụng thẻ mô tả meta mà bạn viết, nhưng nếu có khả năng cao nó sẽ hiển thị trong SERP.
Google thường chọn đoạn văn phù hợp hơn với truy vấn của người dùng nếu nó có vẻ phù hợp hơn so với mô tả meta.
Cấu trúc của thẻ meta: <meta name=”description” content=”Những địa điểm du lịch nổi tiếng khi đến Phú Quốc như nhà tù Phú Quốc, bãi ông lang, …”>
Tối ưu thẻ meta Description bằng cách:
- Theo dõi độ dài: Google sẽ giữ lại 150-160 ký tự đầu tiên.
- Viết nội dung liên quan: Mặc dù không ảnh hưởng đến xếp hạng, mô tả phù hợp với truy vấn sẽ thu hút người dùng nhiều hơn.
- Chứa từ khóa: Từ khóa chính và phụ nên xuất hiện 1 – 2 lần trong meta description.
3. Thẻ tiêu đề (H1-H6)
Thẻ tiêu đề được sử dụng để cấu trúc nội dung cho cả người đọc và công cụ tìm kiếm. Thẻ tiêu đề giúp phân chia nội dung thành các phần dễ đọc hơn và bot tìm kiếm hiểu cấu trúc nội dung của bạn.
Cấu trúc của thẻ tiêu đề:
<h1>10 Cách Nấu Gà Ngon</h1>
<h2>Các Nguyên Liệu Cần Thiết</h2>
<h3>Gà Tươi</h3>
<h4>Chọn Gà Thịt</h4>
Cách tối ưu thẻ tiêu đề:
- Không sử dụng quá một thẻ H1: Thẻ H1 là tiêu đề chính của trang.
- Cấu trúc tầng: H1 cho tiêu đề chính, H2 cho tiêu đề các phần, H3 cho tiêu đề các phần nhỏ hơn.
4. Thẻ ALT cho Hình Ảnh
Hình ảnh giúp nội dung trở nên hấp dẫn hơn, nhưng các công cụ tìm kiếm không thể hiểu hình ảnh. Thẻ ALT cho biết hình ảnh mô tả đến vấn đề gì.
Cấu trúc của ALT hình ảnh: <img src=”virus-cells.jpg” alt=”Hình ảnh tế bào virus dưới kính hiển vi”>
Yêu cầu cho Alt Tag:
- Độ dài: Alt Tag nên rõ ràng, thể hiện đầy đủ nội dung nhưng cần ngắn gọn, tốt nhất là dưới 225 ký tự. Điều này giúp tăng mức hiển thị, vì các công cụ thường bỏ qua các thẻ Alt quá dài, không trọng tâm.
- Từ khóa: Nên chứa từ khóa chính của bài viết ở các ký tự đầu trong Alt Tag.
- Ngôn ngữ: Ưu tiên sử dụng Tiếng Việt có dấu, bao gồm cả dấu cách.
- Số lượng từ khóa: Không nên lạm dụng quá nhiều từ khóa trong một thẻ Alt.
- Chất lượng hình ảnh: Hình ảnh cần có chất lượng cao, không dính logo bản quyền của bên khác và không quá mờ hoặc nhòe.
5. Thẻ Liên Kết
Thẻ liên kết là một thẻ HTML cơ bản, bao gồm thẻ mở, thẻ đóng và các thuộc tính kèm theo. Thẻ này được sử dụng để tạo liên kết, chuyển hướng đến một trang web, một nội dung hoặc một file nào đó.
Cú pháp của thẻ liên kết trong HTML như sau: <a href=”target” rel=”nofollow”>Liên kết không theo dõi</a>
Trong đó:
- href: Thuộc tính này chỉ định địa chỉ mà liên kết sẽ dẫn đến. Địa chỉ có thể là một URL đầy đủ hoặc một đường dẫn tương đối tới một tài nguyên trên cùng một trang web.
- rel: Đây là thuộc tính chỉ định mối quan hệ giữa trang hiện tại và trang được liên kết. Khi bạn sử dụng giá trị nofollow, nó sẽ yêu cầu các công cụ tìm kiếm không theo dõi liên kết này. Điều này có nghĩa là các bot tìm kiếm sẽ không truyền “link juice” (các giá trị SEO) từ trang hiện tại đến trang được liên kết. Thực tế, điều này thường được sử dụng để kiểm soát cách mà liên kết được xem xét trong các chiến lược SEO, đặc biệt là khi bạn không muốn xác nhận trang được liên kết.
- Liên kết không theo dõi: Đây là nội dung hiển thị của thẻ liên kết. Khi người dùng nhấn vào liên kết này, họ sẽ được chuyển đến địa chỉ được chỉ định trong thuộc tính href.
Ví dụ:
<html>
<head> <title>Ví Dụ Về Thẻ Liên Kết</title> <meta charset=”utf-8″> </head> <body> <a href=”https://www.example.com” target=”_blank” title=”Truy cập trang web Example”>Example</a> </body> </html> |
Khi bạn sử dụng thuộc tính target=”_blank”, việc nhấn vào liên kết sẽ mở trang đích trong một tab mới. Ngược lại, nếu không có thuộc tính này, trang đích sẽ được tải ngay tại tab hiện tại mà bạn đang sử dụng.
6. Thẻ Robots
Thẻ Robots là một yếu tố quan trọng trong SEO on-page, cho phép bạn kiểm soát cách mà Google lập chỉ mục và hiển thị một trang cụ thể trong kết quả tìm kiếm. Thẻ Meta robots được sử dụng để hướng dẫn các công cụ tìm kiếm về việc có nên lập chỉ mục trang hay không và cách hiển thị nó cho người dùng.
Thẻ này cần được đặt trong phần <head> của trang HTML. Cú pháp của thẻ Meta robots như sau:
<meta name=”robots” content=”noindex” />.
Trong đó, thuộc tính content có thể chứa các giá trị khác nhau, như noindex để ngăn không cho công cụ tìm kiếm lập chỉ mục trang, hoặc index để cho phép lập chỉ mục.
7. Thẻ Canonical
Thẻ canonical (hay còn gọi là “rel=canonical”) là một công cụ quan trọng giúp các công cụ tìm kiếm nhận biết rằng URL mà bạn đang sử dụng là một bản sao của một URL gốc mà bạn muốn được hiển thị trong kết quả tìm kiếm.
Thẻ này thường được đặt trong phần <head> của trang web và có cú pháp đơn giản như sau:
<link rel=”canonical” href=”https://example.com/sample-page/” />
Ý nghĩa của từng phần trong thẻ canonical trong đoạn mã HTML trên được giải thích như sau:
- link rel=”canonical”: Phần này cho biết rằng liên kết trong thẻ là phiên bản chính (canonical) của trang hiện tại.
- href=”https://example.com/sample-page/”: Đây là URL của phiên bản chính mà người dùng có thể tìm thấy.
8. Schema Markup
Schema markup là một loại mã HTML giúp cung cấp thông tin có cấu trúc cho các công cụ tìm kiếm, giúp chúng hiểu rõ hơn về nội dung của trang web. Schema markup thường sử dụng định dạng JSON-LD, Microdata hoặc RDFa. Dưới đây là một ví dụ sử dụng JSON-LD:
<script type=”application/ld+json”>
{ “@context”: “https://schema.org”, “@type”: “Person”, “name”: “Nguyễn Văn A”, “jobTitle”: “Giám đốc”, “telephone”: “+84123456789”, “url”: “https://example.com/nguyen-van-a” } </script> |
Trong đó:
- @context: Xác định ngữ cảnh của Schema, thường là URL của Schema.org.
- @type: Loại đối tượng được mô tả (trong ví dụ là “Person”).
- name: Tên của người hoặc đối tượng.
- job Title: Chức danh hoặc vị trí công việc.
- telephone: Số điện thoại liên hệ.
- url: Đường dẫn đến trang thông tin chi tiết về người đó.
Sử dụng Schema markup giúp các công cụ tìm kiếm hiểu rõ hơn về nội dung và ngữ cảnh của thông tin trên trang web của bạn. Khi thông tin được cấu trúc rõ ràng, khả năng hiển thị trong tìm kiếm và trải nghiệm người dùng cũng được cải thiện, góp phần nâng cao thứ hạng SEO cho trang web.
9. Thẻ Ngôn Ngữ
Khai báo ngôn ngữ cho trang web là rất quan trọng, vì nó giúp trình duyệt và các công cụ tìm kiếm hiểu rõ hơn về nội dung của trang. Điều này đồng nghĩa với việc trình duyệt và công cụ tìm kiếm sẽ lựa chọn các hỗ trợ tốt nhất và phù hợp nhất dựa trên ngôn ngữ mà bạn chỉ định.
Để khai báo ngôn ngữ cho trang web, bạn cần sử dụng thuộc tính lang và đặt nó trong thẻ <html> với cú pháp <html lang=”mã ngôn ngữ”>. Ví dụ, nếu bạn muốn thông báo rằng trang web sử dụng ngôn ngữ Tiếng Việt, bạn sẽ sử dụng đoạn mã dưới đây:
<!DOCTYPE html>
<html lang=”vi”> <head> <title>Lập Trình Web</title> </head> <body> <p>Ngôn ngữ đánh dấu văn bản HTML</p> <p>Ngôn ngữ lập trình JavaScript</p> <p>Ngôn ngữ lập trình PHP</p> </body> </html> |
10. Thẻ ngữ nghĩa trong HTML5
Thẻ ngữ nghĩa trong HTML5 giúp phân loại và mô tả các thành phần khác nhau của trang web một cách rõ ràng và dễ hiểu hơn. Trước khi HTML5 ra đời, các nhà phát triển web thường phải sử dụng thẻ div để chia trang thành các phần khác nhau, sau đó thêm các lớp (class) và id để chỉ định chức năng của từng phần.
Tuy nhiên, điều này khiến mã nguồn trở nên lộn xộn và khó hiểu đối với các công cụ tìm kiếm, gây khó khăn trong việc xác định cấu trúc và nội dung của trang.
Với HTML5 ngữ nghĩa, việc tổ chức trang web trở nên dễ dàng hơn nhờ vào một tập hợp các thẻ đặc trưng, giúp mô tả các thành phần trang rõ ràng và có hệ thống.
Các thẻ này không chỉ giúp quản lý mã dễ dàng hơn mà còn hỗ trợ các công cụ tìm kiếm trong việc hiểu và xếp hạng nội dung của bạn chính xác hơn.
Dưới đây là một số thẻ ngữ nghĩa HTML5 thông dụng, giúp tối ưu hóa giao tiếp với các công cụ tìm kiếm:
- article: Dùng để đánh dấu một bài viết riêng lẻ, giúp tách nội dung bài viết khỏi phần còn lại của mã trang.
- section: Được sử dụng để chia một nhóm bài viết hoặc nhóm tiêu đề trong một bài đăng thành các phần riêng biệt.
- aside: Hiển thị nội dung bổ sung không thuộc phần nội dung chính, như quảng cáo hoặc thông tin phụ.
- header: Đánh dấu phần đầu của một tài liệu, bài viết hoặc phần nào đó của trang, có thể chứa menu điều hướng.
- footer: Xác định phần cuối của tài liệu hoặc bài viết, thường chứa thông tin như bản quyền, liên hệ, hoặc liên kết phụ.
- nav: Được sử dụng để nhóm các menu điều hướng, giúp quản lý và sắp xếp các liên kết điều hướng của trang web.
IV. Kết luận
Trên đây là những thẻ HTML quan trọng mà bạn trong việc tối ưu hóa SEO cho website. Mặc dù các công cụ tìm kiếm ngày càng thông minh hơn, việc tối ưu hóa thẻ HTML vẫn giúp bạn tăng cường khả năng hiển thị và hiểu biết cho nội dung của mình.
Nếu bạn cần thêm thông tin chi tiết hoặc quan tâm các dịch vụ về SEO vui lòng liên hệ GOBRANDING để được giải đáp và tư vấn miễn phí.