Liên kết a href là gì? Giải thích liên kết HTML

Trải nghiệm người dùng (UX) đã trở thành một tín hiệu xếp hạng quan trọng của Google, vì vậy điều quan trọng hơn bao giờ hết là đảm bảo trang web của bạn ngang bằng. Điều hướng tốt góp phần vào trải nghiệm của người dùng, vì vậy tốt nhất bạn nên cập nhật các siêu liên kết nổi bật trên trang web của mình.

Các siêu liên kết cho phép người dùng “đi du lịch” từ trang này sang trang khác. Bạn sẽ biết các liên kết này đang hoạt động khi con trỏ chuột của bạn chuyển từ mũi tên sang hình bàn tay khi di chuột qua liên kết. Bạn có thể đính kèm các liên kết HTML vào các phần tử trang khác nhau, bao gồm văn bản, hình ảnh, v.v.

Trong hướng dẫn này, chúng tôi sẽ khám phá cách các siêu liên kết (được gọi là “liên kết HTML” hoặc “liên kết a href”) hoạt động, tại sao điều quan trọng là phải luôn cập nhật các siêu liên kết của bạn và cách tìm và sửa các siêu liên kết xấu bằng công cụ Kiểm tra trang web .

Người dùng tìm kiếm trên internet với mục đích; họ đang tìm kiếm câu trả lời, sản phẩm, hướng dẫn và hơn thế nữa. Nhờ những nỗ lực SEO của bạn, Google đã đưa bạn vào tầm ngắm của họ.

Khi bạn đã thu hút được khách truy cập, bạn cần hướng dẫn họ qua trang web của mình một cách dễ dàng để trải nghiệm người dùng của họ thật dễ chịu. Các liên kết HTML của bạn đóng vai trò quan trọng trong việc hướng dẫn người dùng của bạn từ trang này sang trang khác trên trang web của bạn.

Các liên kết HTML tốt làm tăng thời gian phiên của người dùng và có thể dẫn đến nhiều trang hơn được truy cập mỗi phiên – hai số liệu quan trọng đối với phân tích trang web.

Thẻ HTML trông như thế nào?

Thẻ liên kết (hoặc thẻ “a href” hoặc “liên kết”) bao gồm thẻ mở, bất kỳ thuộc tính thẻ nào, văn bản liên kết hoặc đối tượng và thẻ đóng. Ví dụ:

<a href="url">Link text or object</a>.

“Href” là một thuộc tính thiết yếu của phần tử ; nó xác định đích đến của liên kết.

Liên kết thuộc tính href (viết tắt của “Hypertext REFerence “) chỉ ra mối quan hệ giữa các trang với các công cụ tìm kiếm.

href là một thuộc tính của thẻ liên kết và chứa hai thành phần:

  1. URL (liên kết thực tế) và
  2. Văn bản hoặc đối tượng có thể nhấp mà người dùng sẽ thấy trên trang (được gọi là “văn bản liên kết)

Ví dụ:

<a href="https://www.semrush.com/">Visit Semrush!</a>

Khi người dùng nhấp vào liên kết HTML của bạn, trang liên kết có thể sẽ mở trong cùng một cửa sổ hoặc tab trình duyệt. Trừ khi bạn chỉ định bằng mã cách liên kết sẽ được hiển thị, đây là giá trị mặc định.

Tuy nhiên, nếu bạn đã tải xuống hoặc muốn trang mở trong một cửa sổ hoặc tab khác, bạn có thể sử dụng các thuộc tính mục tiêu như “_blank”.

Các giá trị thuộc tính mục tiêu phổ biến nhất là:

  1. _bản thân: trang / tài liệu mở ra trong cùng một cửa sổ

    <a href="https://www.semrush.com/"target=_self">Visit Semrush!</a> 

  2. _chỗ trống = mở tài liệu / trang trong một cửa sổ mới

    <a href="https://www.semrush.com/"target=_blank">Visit Semrush!</a> 

URL tương đối so với URL tuyệt đối

Cấu trúc URL của bạn có thể góp phần vào cách Google có thể thu thập dữ liệu trang web của bạn một cách hiệu quả. Bạn có thể sẽ sử dụng một trong hai loại cấu trúc URL phổ biến: tương đối và tuyệt đối.

Các liên kết tương đối sử dụng một phần của URL và chủ yếu được dành riêng cho liên kết nội bộ trong đó liên kết nằm trên cùng một trang web và do đó là một phần của cùng một miền gốc. Họ trông giống như thế này:

<a href="blog/hrefland-attribute-101/">hreflang attribute 101</a>. 

Tuy nhiên, một liên kết tuyệt đối sử dụng liên kết trang web đầy đủ, bao gồm cả tên miền của trang web:

<a href=" https://www.semrush.com/">Visit Semrush!</a>. 

Khi nào sử dụng URL tương đối

Bạn sử dụng các URL tương đối khi bạn muốn liên kết đến một trang trên trang web của mình. Bạn sẽ sử dụng “slug” của URL của mình trong liên kết.

Một số ưu điểm của việc sử dụng URL tương đối bao gồm:

  • Chuyển nhanh sang miền mới (bạn sẽ không cần cập nhật từng URL)
  • Thời gian tải trang nhanh hơn (một yếu tố xếp hạng của Google

Khi nào sử dụng URL tuyệt đối

Nếu bạn đang đưa người dùng của mình đến một trang bên ngoài (tức là cách xa trang web của bạn), bạn sẽ sử dụng một URL tuyệt đối.

Một số lợi ích khi sử dụng URL tuyệt đối bao gồm:

  • Liên kết luôn trỏ đến đúng URL (Google sẽ luôn biết phải đi đâu)
  • Trình thu thập thông tin trang web của Google có thể quét các URL này dễ dàng hơn (quan trọng để lập chỉ mục)

Bạn sẽ tìm thấy các liên kết HTML trên một trang web khi bạn di chuột qua văn bản liên kết, hình ảnh, nút, v.v. và con trỏ biến thành bàn tay.

Theo mặc định, các liên kết xuất hiện dưới dạng:

  • Gạch chân và màu xanh lam (nếu bạn chưa truy cập liên kết)
  • Gạch chân và màu tím (bạn đã truy cập liên kết)
  • Gạch chân và màu đỏ (một liên kết đang hoạt động)

Đây là một ví dụ về bản sao trang web với các siêu liên kết. Các từ được tô sáng màu xanh lam chứa các siêu liên kết:

Giao diện người dùng đồ họa, mô tả trang web được tạo tự động

Lưu ý rằng nếu màu của các liên kết trên trang web của bạn quá giống với màu nền của trang web, bạn có thể thay đổi màu của các liên kết để làm cho chúng nổi bật.

Các doanh nghiệp có màu thương hiệu có thể sẽ biết mã hex của màu đó. Sửa đổi thẻ HTML (thẻ liên kết) của bạn bằng mã hex như sau:

<a href="https://www.semrush.com/" style="color:#SS000;">Here's the modified link!</a> 

Nếu bạn không có mã màu hex, có khoảng 140 màu được đặt tên mà bạn có thể chọn. Thay vì mã hex, bạn sẽ thêm chính màu đó, chẳng hạn như “xanh lam” hoặc “đỏ:”

<a href="https://www.semrush.com/" style="color:red;">Red Link</a> 

Có một số cách bạn có thể sử dụng siêu liên kết để tạo trải nghiệm điều hướng dễ dàng trên trang web của mình. Hãy coi các liên kết là kết nối giữa tài nguyên này với tài nguyên khác, cho dù là các trang web, tài liệu, biểu mẫu, v.v.

Hãy xem xét các loại siêu liên kết phổ biến nhất mà bạn sẽ tìm thấy trên một trang web:

  1. Liên kết hình ảnh: Bạn có thể siêu liên kết một hình ảnh với một tài nguyên khác. Ví dụ: bạn siêu liên kết hình ảnh của một sản phẩm với trang sản phẩm của nó.

Bạn có thể sẽ sử dụng cấu trúc liên kết tương tự như sau:

<a href="/default.html">
<img src="semrush.jpg" alt="semrush logo" style="width:100px;height:100px;">
</a>

  1. Liên kết email và điện thoại: Bạn sẽ sử dụng các liên kết này khi muốn người dùng liên hệ trực tiếp với mình. Trên thiết bị di động, các loại liên kết này hướng người dùng đến một hành động trực tiếp: gọi đến số điện thoại của bạn hoặc soạn thảo email cho bạn.
    Đối với một địa chỉ email, bạn thêm mailto: vào bên trong thuộc tính href của bạn như sau:

<a href="mailto:[email protected]">Semrush email</a>

Đối với một số điện thoại, bạn thêm tel: vào bên trong thuộc tính href:

<a href="tel:+61 1800 934 242">+61 1800 934 242</a>

  1. Các liên kết nút: Các nút siêu liên kết là một tính năng thiết kế web phổ biến và rất hữu ích để thêm lời kêu gọi hành động (CTA) vào trang web của bạn. CTA cho người dùng của bạn biết phải làm gì: liên hệ với chúng tôi, tải xuống tài liệu quảng cáo, đọc thêm, v.v.
    Một cách để thêm liên kết vào nút là bọc một phần tử nút trong một liên kết:

<a href='https://www.semrush.com/'><button>Linking to semrush.com</button></a>

Thuộc tính Hreflang

Thuộc tính Hreflang cho biết mối quan hệ giữa các trang bằng các ngôn ngữ khác nhau trên trang web của bạn với các công cụ tìm kiếm. Nếu trang web của bạn nhắm mục tiêu đến đối tượng đa quốc gia, bạn sẽ cần thêm các thuộc tính hreflang.

Đây là vài ví dụ:

<link rel="alternate" hreflang="en-us" href="http://www.example.com/usa/" />
<link rel="alternate" hreflang="en-ca" href="http://www.example.com/ca/" />

Khi các bot của Google cố gắng quét trang web của bạn, chúng có thể sẽ ngừng tiếp tục nếu chúng tìm thấy nhiều liên kết bị hỏng. Do đó, sẽ khó hơn và mất nhiều thời gian hơn để lập chỉ mục trang web của bạn, nếu Google chọn cách này.

Công cụ Kiểm tra Trang web có thể giúp bạn xác định bất kỳ lỗi nào với các liên kết trên trang web của bạn. Nó bao gồm hơn 120 kiểm tra kỹ thuật và tại chỗ để phát hiện các lỗi phổ biến.

Bạn sẽ cần tạo một dự án cho miền của mình trước khi sử dụng công cụ Kiểm tra trang web.

Bước 1: Sau khi dự án của bạn đã được tạo, hãy khởi chạy công cụ Kiểm tra trang web từ bảng điều khiển dự án của bạn:

Giao diện người dùng đồ họa, văn bản, ứng dụng Mô tả được tạo tự động

Sử dụng bảng điều khiển để định cấu hình phạm vi thu thập thông tin của công cụ và quyền truy cập trang web.

Khi quá trình kiểm tra hoàn tất, hãy nhấp vào tab vấn đề:

Giao diện người dùng đồ họa, văn bản, ứng dụng, email Mô tả được tạo tự động

Lọc qua các vấn đề cho bất kỳ lỗi liên kết nào. Nếu bạn không chắc chắn lỗi nghĩa là gì, công cụ sẽ bao gồm giải thích và đề xuất về cách giải quyết vấn đề (“Tại sao và cách khắc phục”).

Tìm và sửa các liên kết bị hỏng

với công cụ Kiểm tra trang web

Hình minh họa ADS

Lời kết

Siêu liên kết tốt giúp bạn điều hướng và thu thập dữ liệu trang web của mình dễ dàng hơn. Bất kể cấu trúc liên kết của bạn là gì, điều quan trọng là phải phát hiện và cập nhật các liên kết bị hỏng càng sớm càng tốt.

Sử dụng công cụ Kiểm tra trang web để phát hiện ra bất kỳ liên kết bị hỏng hoặc không tốt nào và để cập nhật bất kỳ lỗi kỹ thuật tiềm ẩn nào.

Trả lời