Khám phá các thuộc tính thẻ HTML như id, class, src, href, alt, title... Hiểu rõ cách chúng hoạt động và tầm quan trọng trong việc tối ưu hóa SEO cho website của bạn. Đọc ngay để xây dựng trang web hiệu quả và thân thiện với công cụ tìm kiếm!
Trong thế giới phát triển web, thẻ HTML (HyperText Markup Language) là những khối xây dựng cơ bản, định hình cấu trúc và nội dung của mọi trang web. Tuy nhiên, chỉ riêng các thẻ không đủ để tạo ra một trang web động, tương tác và thân thiện với người dùng. Đó là lúc các thuộc tính của thẻ (attributes) phát huy vai trò quan trọng.
Các thuộc tính cung cấp thông tin bổ sung về các thẻ, cho phép chúng ta tùy chỉnh hành vi, giao diện và chức năng của các phần tử HTML. Hơn nữa, việc sử dụng thuộc tính một cách hiệu quả còn là yếu tố then chốt trong việc tối ưu hóa công cụ tìm kiếm (SEO), giúp trang web của bạn dễ dàng được tìm thấy hơn.
Bài viết này sẽ đi sâu vào các thuộc tính phổ biến và quan trọng nhất, giải thích cách chúng hoạt động và tầm quan trọng của chúng trong việc xây dựng và tối ưu hóa website.
---
id: Định danh duy nhất cho phần tửThuộc tính id được sử dụng để gán một định danh duy nhất cho một phần tử HTML. Điều này có nghĩa là mỗi id chỉ được xuất hiện một lần trên toàn bộ trang HTML.
<tag id="ten_id_duy_nhat">Nội dung</tag>
<div id="gioi-thieu">
<h2>Giới thiệu về chúng tôi</h2>
<p>Đây là phần giới thiệu.</p>
</div>
id không trực tiếp ảnh hưởng đến thứ hạng tìm kiếm, việc sử dụng chúng để tạo cấu trúc rõ ràng và các liên kết neo có thể cải thiện trải nghiệm người dùng, gián tiếp có lợi cho SEO.---
class: Nhóm các phần tử có cùng kiểu dángThuộc tính class được sử dụng để gán một hoặc nhiều tên lớp cho một phần tử HTML. Không giống như id, một class có thể được sử dụng bởi nhiều phần tử khác nhau trên cùng một trang.
<tag class="ten_class_1 ten_class_2">Nội dung</tag>
<button class="nut-chinh">Mua ngay</button>
<button class="nut-chinh">Xem chi tiết</button>
id, class không có tác động trực tiếp đến SEO. Tuy nhiên, việc sử dụng class để tổ chức mã HTML và CSS giúp trang web tải nhanh hơn và dễ bảo trì hơn, tạo ra trải nghiệm tốt hơn cho người dùng và bot tìm kiếm.---
src: Chỉ định nguồn của tài nguyênThuộc tính src (source) được sử dụng để chỉ định đường dẫn đến một tài nguyên bên ngoài mà thẻ cần hiển thị hoặc thực thi. Nó thường được dùng với các thẻ như <img>, <script>, <audio>, <video>, <iframe>.
<img src="duong_dan_den_hinh_anh.jpg" alt="Mô tả hình ảnh"><img>: Chỉ định đường dẫn đến tệp hình ảnh.<script>: Chỉ định đường dẫn đến tệp JavaScript bên ngoài.<audio>, <video>: Chỉ định đường dẫn đến tệp âm thanh hoặc video.<iframe>: Chỉ định đường dẫn đến một trang web khác để nhúng vào trang hiện tại.
<img src="images/logo.png" alt="Logo công ty">
<script src="js/main.js"></script>
src: Sử dụng đường dẫn thân thiện, có chứa từ khóa liên quan nếu phù hợp.---
href: Liên kết đến tài nguyênThuộc tính href (hypertext reference) được sử dụng để chỉ định đường dẫn đến một tài nguyên mà thẻ sẽ liên kết tới. Nó chủ yếu được dùng với thẻ <a> (anchor) để tạo liên kết và thẻ <link> để liên kết đến biểu định kiểu CSS.
<a href="duong_dan_lien_ket">Văn bản liên kết</a><link rel="stylesheet" href="duong_dan_den_style.css"><a>: Tạo liên kết đến các trang web khác, các phần tử trong cùng một trang, tệp để tải xuống, địa chỉ email, số điện thoại.<link>: Liên kết đến các tệp CSS bên ngoài để áp dụng kiểu dáng cho trang.
<a href="https://www.example.com/san-pham">Xem sản phẩm của chúng tôi</a>
<link rel="stylesheet" href="css/styles.css">
href để tạo cấu trúc liên kết nội bộ mạnh mẽ, giúp bot tìm kiếm khám phá các trang khác trên website của bạn và phân phối "link juice" (sức mạnh liên kết).---
alt: Văn bản thay thế cho hình ảnhThuộc tính alt (alternative text) là một trong những thuộc tính quan trọng nhất cho SEO hình ảnh. Nó cung cấp một văn bản mô tả hình ảnh trong trường hợp hình ảnh không thể hiển thị (do đường dẫn sai, người dùng tắt hiển thị hình ảnh, kết nối chậm) hoặc cho các trình đọc màn hình của người khiếm thị.
<img src="duong_dan_hinh_anh.jpg" alt="Mô tả hình ảnh có chứa từ khóa">
<img src="product-a.jpg" alt="Điện thoại thông minh Samsung Galaxy S24 Ultra màu tím">
alt phải mô tả chính xác nội dung của hình ảnh.alt một cách tự nhiên, tránh nhồi nhét từ khóa.alt cho mọi hình ảnh quan trọng.---
title: Thông tin bổ sung (Tooltip)Thuộc tính title cung cấp thông tin bổ sung (tooltip) khi người dùng di chuột qua một phần tử HTML. Nó có thể được sử dụng với hầu hết các thẻ HTML.
<tag title="Thông tin bổ sung">Nội dung</tag>
<a href="/lien-he" title="Nhấp vào đây để gửi email cho chúng tôi">Liên hệ</a>
<img src="icon-info.png" alt="Thông tin" title="Nhấp để xem chi tiết sản phẩm">
title có rất ít hoặc không có tác động trực tiếp đến SEO. Tuy nhiên, nó có thể cải thiện trải nghiệm người dùng, điều này gián tiếp có lợi cho SEO. Đừng nhầm lẫn thuộc tính title của thẻ HTML với thẻ <title> trong phần <head> của HTML, thẻ <title> đó là tiêu đề trang và có tác động rất lớn đến SEO.---
Ngoài các thuộc tính trên, còn có nhiều thuộc tính quan trọng khác mà bạn cần biết:
style: Áp dụng kiểu dáng CSS trực tiếp cho một phần tử (inline style).
<p style="color: blue; font-size: 16px;">Văn bản màu xanh</p>lang: Khai báo ngôn ngữ của tài liệu hoặc một phần của tài liệu.
<html lang="vi"> (Tiếng Việt), <html lang="en"> (Tiếng Anh)target: Chỉ định nơi mở liên kết.
<a href="https://example.com" target="_blank">Mở trong tab mới</a>_self (mặc định, mở trong cùng cửa sổ/tab), _blank (mở trong cửa sổ/tab mới), _parent, _top.target="_blank" một cách hợp lý để không làm người dùng rời khỏi trang của bạn quá nhanh.rel: Chỉ định mối quan hệ giữa tài liệu hiện tại và tài liệu được liên kết.
<a href="https://example.com" rel="nofollow">Liên kết không theo dõi</a>, <link rel="stylesheet" href="style.css">stylesheet, nofollow, noopener, noreferrer, prev, next, canonical.rel="nofollow" rất quan trọng để kiểm soát luồng "link juice" và tránh spam. canonical là một thuộc tính quan trọng để xử lý nội dung trùng lặp.data-*: Thuộc tính tùy chỉnh để lưu trữ dữ liệu riêng tư của trang hoặc ứng dụng, không hiển thị cho người dùng.
<div data-product-id="12345" data-category="electronics">Sản phẩm A</div>width, height: Chỉ định chiều rộng và chiều cao của các phần tử như hình ảnh, video.
<img src="image.jpg" alt="Mô tả" width="500" height="300">width và height giúp tránh tình trạng "layout shift" (dịch chuyển bố cục) khi tải trang, cải thiện chỉ số CLS (Cumulative Layout Shift) trong Core Web Vitals, một yếu tố xếp hạng quan trọng của Google.---
Như đã phân tích ở trên, việc sử dụng các thuộc tính thẻ một cách chính xác và tối ưu không chỉ giúp xây dựng một trang web hoạt động tốt mà còn đóng vai trò quan trọng trong việc cải thiện SEO:
alt giúp trang web thân thiện hơn với người dùng khiếm thị và các công cụ hỗ trợ.alt của hình ảnh, href với anchor text ý nghĩa, và lang giúp bot tìm kiếm hiểu rõ hơn về nội dung trang.src của hình ảnh/video, sử dụng thuộc tính width/height để tránh layout shift, và quản lý CSS/JS hiệu quả thông qua các thuộc tính liên kết giúp trang tải nhanh hơn. Tốc độ tải trang là một yếu tố xếp hạng quan trọng.href và rel cho phép bạn tạo ra một mạng lưới liên kết nội bộ chặt chẽ, giúp bot tìm kiếm dễ dàng khám phá và lập chỉ mục các trang của bạn.rel="nofollow" khi cần thiết để kiểm soát cách "sức mạnh" liên kết được truyền đi.rel="canonical" trong thẻ <link> là cực kỳ quan trọng để thông báo cho công cụ tìm kiếm phiên bản gốc của một trang khi có nhiều URL có nội dung tương tự.---
Các thuộc tính của thẻ HTML không chỉ là những chi tiết nhỏ trong mã nguồn. Chúng là những công cụ mạnh mẽ giúp bạn tạo ra những trang web không chỉ đẹp mắt, hoạt động hiệu quả mà còn được tối ưu hóa cho công cụ tìm kiếm. Bằng cách hiểu rõ và áp dụng đúng các thuộc tính như id, class, src, href, alt, và title, bạn sẽ xây dựng được một nền tảng vững chắc cho sự thành công trực tuyến của mình. Hãy luôn ưu tiên trải nghiệm người dùng và tính chính xác khi sử dụng các thuộc tính này để đạt được kết quả SEO tốt nhất.
![[SSH] - Configuring SSH on MacBook](/upload/img/news/ssh-la-gi-4.jpeg)
![[Magento] - How to create a button and retrieve selected data from the list displayed in the modal](/upload/img/news/magento-217.png)
![[Magento] - How to create a modal that opens when clicking a button and simultaneously calls a data list within the modal.](/upload/img/news/magento-2.png)
![[Macbook] - How to disable live captions](/upload/images/Screenshot%202023-10-23%20at%2020_34_57.png)
![[Magento] - Cách viết css bằng file scss và chèn css vào magento](/upload/img/news/magento-29.png)
![[Magento] - cách lập trình 1 theme trong magento](/upload/img/news/magento-211.png)
![[Magento] - cách tạo module trong magento](/upload/img/news/magento-212.png)
.jpg)
