10.1 Đánh dấu ngữ nghĩa
SEO (tối ưu hóa công cụ tìm kiếm) đóng vai trò quan trọng trong phát triển web, vì nó giúp cải thiện khả năng hiển thị của các trang web trên kết quả của các công cụ tìm kiếm. Đánh dấu HTML hiện đại có ảnh hưởng đáng kể đến SEO, giúp các công cụ tìm kiếm hiểu và lập chỉ mục nội dung tốt hơn. Hãy xem xét các khía cạnh chính của ảnh hưởng của SEO đối với đánh dấu HTML hiện đại.
Các thẻ HTML5 ngữ nghĩa giúp các công cụ tìm kiếm hiểu cấu trúc và nội dung của trang web. Sử dụng các thẻ đúng giúp cải thiện khả năng tiếp cận và làm cho nội dung dễ hiểu hơn cho các công cụ tìm kiếm.
Ví dụ về các thẻ ngữ nghĩa:
<header>: Tiêu đề của trang hoặc phần<nav>: Liên kết điều hướng<main>: Nội dung chính của trang<section>: Phần liên quan chủ đề<article>: Khối nội dung độc lập<aside>: Thông tin bổ sung hoặc thanh bên<footer>: Chân trang hoặc phần
Ví dụ sử dụng:
<body>
<header>
<h1>Tiêu đề của trang</h1>
<nav>
<ul>
<li><a href="#home">Trang chủ</a></li>
<li><a href="#about">Về chúng tôi</a></li>
<li><a href="#contact">Liên hệ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Bài viết 1</h2>
<p>Nội dung bài viết...</p>
</article>
<section>
<h2>Phần</h2>
<p>Nội dung của phần...</p>
</section>
</main>
<aside>
<h2>Thanh bên</h2>
<p>Thông tin bổ sung...</p>
</aside>
<footer>
<p>© 2024 Trang của tôi. Bản quyền đã được bảo lưu.</p>
</footer>
</body>
10.2 Đánh dấu vi mô
Đánh dấu vi mô (structured data) được sử dụng để cung cấp cho các công cụ tìm kiếm thêm thông tin về nội dung của trang. Điều này giúp các công cụ tìm kiếm hiểu nội dung tốt hơn và cải thiện khả năng hiển thị của trang trong kết quả tìm kiếm.
Ví dụ về sơ đồ (Schema.org):
- Article: cho các bài viết và tin tức
- BreadcrumbList: cho breadcrumb
- Product: cho mô tả sản phẩm
- Event: cho mô tả sự kiện
Ví dụ sử dụng đánh dấu vi mô:
<body>
<article>
<h1>Tiêu đề bài viết</h1>
<p>Tác giả: Tên tác giả</p>
<p>Ngày xuất bản: 1 tháng 1, 2024</p>
<img src="https://example.com/image.jpg" alt="Ví dụ hình ảnh">
<p>Nội dung bài viết...</p>
</article>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Tiêu đề bài viết",
"author": "Tên tác giả",
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg"
}
</script>
10.3 Tối ưu hóa tiêu đề và thẻ meta
Tiêu đề và thẻ meta đóng vai trò quan trọng trong SEO, vì chúng cung cấp cho các công cụ tìm kiếm và người dùng thông tin về nội dung của trang.
Thẻ Meta:
<title>: Tiêu đề của trang, hiển thị trong kết quả tìm kiếm<meta name="description">: Mô tả của trang, được sử dụng trong đoạn trích kết quả tìm kiếm<meta name="keywords">: Từ khóa (không còn quan trọng đối với các công cụ tìm kiếm hiện đại)
Ví dụ sử dụng thẻ meta:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ tiêu đề trang</title>
<meta name="description" content="Đây là ví dụ mô tả trang cho SEO.">
<meta name="keywords" content="ví dụ, SEO, HTML">
</head>
<body>
<h1>Tiêu đề trang</h1>
<p>Nội dung trang...</p>
</body>
</html>
10.4 Tối ưu hóa hình ảnh
Tối ưu hóa hình ảnh bao gồm việc sử dụng các thuộc tính alt và title, cũng như đảm bảo thời gian
tải nhanh bằng cách sử dụng nén và định dạng hình ảnh hiện đại (ví dụ: WebP).
Ví dụ sử dụng:
<body>
<h1>Ví dụ tối ưu hóa hình ảnh</h1>
<img src="example.jpg" alt="Mô tả hình ảnh" title="Tiêu đề hình ảnh" loading="lazy">
</body>
10.5 Breadcrumb
Breadcrumb (dấu vết) là các yếu tố điều hướng cho biết đường đi của người dùng từ trang chủ đến trang hiện tại. Chúng giúp người dùng dễ dàng định hướng trên trang, cung cấp các liên kết đến các cấp điều hướng trước. Thành phần này là một phần quan trọng của giao diện người dùng, đặc biệt là đối với các trang web lớn với cấu trúc phân cấp sâu.
Khía cạnh chính của breadcrumb
Breadcrumb là dãy các liên kết thường được hiển thị ở phần trên của trang, dưới tiêu đề hoặc menu. Mỗi liên kết trong chuỗi dẫn đến một trong các trang mà người dùng đã vượt qua để đến trang hiện tại.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/home">Trang chủ</a></li>
<li class="breadcrumb-item"><a href="/category">Danh mục</a></li>
<li class="breadcrumb-item active" aria-current="page">Trang hiện tại</li>
</ol>
</nav>
Các loại breadcrumb:
-
Phân cấp: Hiển thị cấu trúc phân cấp của trang web, bắt đầu từ trang chủ.
- Ví dụ: Trang chủ > Danh mục > Dưới danh mục > Trang hiện tại
-
Thời gian: Hiển thị các bước hành động của người dùng, đặc biệt hữu ích trong quá trình điều hướng nhiều bước hoặc mua sắm.
- Ví dụ: Trang chủ > Danh mục > Sản phẩm > Giỏ hàng > Thanh toán
-
Thuộc tính: Được sử dụng để hiển thị các thuộc tính hoặc thẻ của trang hiện tại, đặc biệt hữu ích đối với các trang web có nhiều danh mục và bộ lọc.
- Ví dụ: Trang chủ > Điện tử > Điện thoại di động > Smartphone > Apple
Lợi ích của breadcrumb:
- Cải thiện điều hướng: Cho phép người dùng nhanh chóng quay lại các trang trước đó.
- Lợi ích SEO: Giúp các công cụ tìm kiếm hiểu cấu trúc của trang và cải thiện khả năng lập chỉ mục.
- Tiện lợi sử dụng: Làm cho trang web dễ hiểu và dễ sử dụng hơn.
- Giảm tỷ lệ thoát: Đơn giản hóa điều hướng, có thể giảm tỷ lệ thoát, vì người dùng có thể dễ dàng quay lại các trang trước đó thay vì rời khỏi trang.
Lợi ích cho SEO
Breadcrumb đóng vai trò quan trọng trong SEO vì chúng giúp các công cụ tìm kiếm hiểu cấu trúc trang web và cải thiện điều hướng cho người dùng. Việc sử dụng breadcrumb đúng cách có thể ảnh hưởng tích cực đến việc xếp hạng trang web trong kết quả tìm kiếm.
GO TO FULL VERSION