[4 cách] Làm thế nào để tạo liên kết neo (HTML anchor link) trên WordPress?

Photo of author
Written By Nam Nguyen

Mình là một du mục kỹ thuật số toàn thời gian, mình từng là một mọt sách WordPress và đây là nơi mình chia sẻ những kinh nghiệm WordPress hiệu quả nhất để bạn phát triển Online Business của mình một cách bền vững.

Mình nghĩ điều này khá mới lạ đối với nhiều bạn nhưng mình phải thừa nhận tạo liên kết neo trong nội dung WordPress là một điều khá cần thiết trong việc tăng trải nghiệm người dùngcải thiện CTR trên kết quả tìm kiếm.

Nó giúp người dùng nhanh chóng nhảy đến vị trí cụ thể trên bài viết dài của bạn. Ngoài ra liên kết neo cũng rất tốt cho SEO khi được Google lập chỉ mục các liên kết neo trên kết quả tìm kiếm.

Tuy nhiên bây giờ bạn không biết cách làm thế nào?

Trong bài viết này mình sẽ hướng dẫn bạn cách tạo liên kết neo HTML trong WordPress một cách hoàn chỉnh cũng như một số mẹo thường gặp và có thể tận dụng trên Website của bạn.

Liên kết neo là gì?

Liên kết neo (chính xác hơn là liên kết neo HTML) hay Anchor link là một dạng liên kết cho phép bạn di chuyển đến vị trí được chỉ định trên một trang nhanh chóng.

Ví dụ: Ngay ở trên mục lục của mình bạn sẽ thấy các liên kết neo, khi nhấp vào một liên kết bạn sẽ được chuyển hướng đến một vị trí cụ thể trang đó.

Nếu bạn có một chút kinh nghiệm về HTML thì liên kết này có dạng:

<a href="#idViTriDen">Văn bản Neo </a>

Nên nhớ rằng nó không giống văn bản neo (Anchor text) vì văn bản neo là các liên kết được gắn với văn bản và dẫn bạn đến một trang hoặc url khác.

Tại sao nên sử dụng Anchor link cho WordPress?

Mặc dù chỉ là một đoạn code nhỏ được gắn liên kết HTML, tuy nhiên nó lại có khá nhiều tác dụng hữu ích trên một Website.

Chẳng hạn như bạn có thể dùng nó tạo mục lục, tại đây ngoài việc cho phép người đọc quét qua nội dung của bạn thì họ có thể chuyển nhanh đến phần họ quan tâm nhất.

Với những nội dung dạng dài thì điều này cực kỳ hữu ích, vì đôi khi khách truy cập của bạn có thể mất nhiều lần để đọc một trang. Với mỗi lần truy cập có thể trình duyệt không lưu lại vị trí và yêu cầu họ cuộn lại từ đầu.

Lúc này anchor link sẽ tăng trải nghiệm của họ chỉ với một cú nhấp bằng những điều hướng ở đầu trang.

Cuối cùng chúng ta không thể bỏ qua yếu tố SEO, Google cũng thích lập chỉ mục Anchor link trên nội dung của bạn dưới dạng chuyển đến.

Ví dụ một viết tạo form liên hệ của mình đã được index anchor link.

vi-du-lien-ket-neo-tren-serps

Nhìn có vẻ đơn giản nhưng điều này có thể làm tăng tỷ lệ nhấp chuột vào kết quả tìm kiếm.

Cách tạo liên kết neo HTML trên WordPress

Có khá nhiều cách để bạn tạo liên kết neo HTML cho WordPress, tuy nhiên để hỗ trợ bạn có nhiều lựa chọn mình sẽ chỉ bạn tất cả các cách từ đơn giản đến thao tác thủ công với mã. 

Cách 1: Dùng một plugin tạo mục lục

Thông thường, khi nói đến liên kết neo thì mình chắc chắn hơn 90% nó chủ yếu dùng để tạo mục lục trên bài viết để điều hướng người dùng.

Cách này rất đơn giản, chỉ cần cài một plugin thì nó sẽ tự động tạo ra mục lục trên bài viết hoặc trang của bạn với cấu trúc link chuẩn SEO nhất dựa trên tiêu đề phụ (thẻ heading) của bài viết.

Ví dụ như ở bài viết các dịch vụ Email Marketing tốt nhất của mình có một sub-title (với thẻ h3) gọi là GetResponse thì plugin sẽ tự động tạo theo công thức [url bài viết] + [#getresponse].

vi-du-tao-lien-ket-neo-ndr

Có vài plugin tạo mục lục tốt nhất cho phép bạn thực hiện tạo anchor link đơn giản, mình khuyên bạn nên sử dụng 1 trong 3 cái sau:

  • Table Content of Plus
  • Fixed Content
  • Easy Table Of Content

Bạn có thể xem hướng dẫn cách tạo mục lục trên WordPress của mình để rõ hơn về cách sử dụng.

Có thể bạn sẽ hỏi mình đang dùng plugin nào để tạo mục lục thì mình đang dùng Table Content of Plus ở thời điểm này. Mặc dù trong tương lai có thể mình sẽ chuyển qua tính năng tạo mục lục của Thrive Architect.

Cách 2: Tạo anchor link bằng Gutenberg

Mình biết có nhiều bạn vẫn không ưa Gutenberg vì các khối của nó trông khá rời rạc. Tuy nhiên mình khuyên bạn nên bắt đầu làm quen với trình soạn thảo này vì nó thực sự rất tuyệt nếu bạn biết cách sử dụng.

Tạo liên kết neo là một trong số đó khi nó không yêu cầu bạn biết mã như trình soạn thảo cổ điển (Classic editor) trước đó. 

Bây giờ bạn có 2 hướng:

Sử dụng plugin Ultimate addon for Gutenberg của Brainstorm Force, plugin này có một Block gọi là Table of Contents giúp bạn dễ dàng thêm mục lục chứa liên kết neo trên nội dung của bạn.

Sau khi cài đặt plugin bạn sẽ thấy block này nằm trong thư viện soạn thảo Gutenberg.

table-of-content-gb

Muốn thêm vào vị trí nào bạn chỉ việc gọi block có tên "Table of contents", nó sẽ tự động tạo các liên kết neo html dựa trên thẻ heading bạn đang có.

table-of-content-gb-3

Ngoài ra, nếu như không dùng plugin trên thì bạn có thể thêm anchor link theo cách thủ công sau:

Trước tiên chọn vị trí dừng của bước nhảy liên kết bằng cách nhấp vào nó. Ví dụ mình chọn một thẻ tiêu đề phụ "Kiểm tra thứ hạng bằng Ahrefs".

html-anchor-link

Sau đó ở bảng tùy chọn bên phải bạn sẽ thấy có một mục Advanced và mở nó ra.

Bạn sẽ thấy một mục HTML anchor, đặt tên cho block đó dưới dạng như sau: dat-ten-cho-anchor.

Ví dụ mình đặt theo tiêu đề phụ là: su-dung-ahrefs.

Tiếp đến hãy tìm đến văn bản bạn muốn chèn liên kết nhảy, sau đó chọn vào biểu tượng link. Thay vì thông thường bạn chèn một url thì bây giờ bạn hãy thêm [dấu # + tên anchor HTML] vừa đặt.

anchor-link-html-2

Theo ví dụ trên nó sẽ là: #su-dung-ahrefs.

Bạn cũng có thể kết hợp các mẹo đặt tên sau đây:

  • Nên đặt từ khóa hoặc từ khóa liên quan trong anchor
  • Sử dụng dấu gạch để ngăn cách các từ
  • Giữ cho nó ngắn gọn

Bây giờ bạn đã có thể xem kết quả nhận được trên giao diện Front-end (người dùng).

Cách 3: Tạo liên kết neo HTML bằng Page Builder

Các trình tạo trang WordPress luôn giúp cuộc sống của bạn dễ dàng hơn rất nhiều. Trong số đó bao gồm tính năng tạo ra liên kết neo HTML.

Trong giao diện thiết kế bạn sẽ có một widget tạo mục mục, chỉ cần kéo nó vào trang của bạn thì hệ thống sẽ tự động tạo ra các liên kết neo dựa trên tiêu đề phụ bạn đang có.

Về cơ bản nó cũng tương tự như plugin tạo mục lục nhưng có phần linh hoạt hơn và tiết kiệm thêm một plugin. Điều này có thể làm tăng tốc độ tải trang của bạn.

Chẳng hạn dưới đây bạn sẽ thấy một widget tạo mục lục của Elementor Pro.

table-of-content-elementor-pro

Ngoài ra, với Thrive Architect mà mình đang sử dụng nó có tính năng gọi là jumplink để tạo liên kết neo chỉ trong nháy mắt. Cụ thể bạn chỉ cần chọn nội dung có thể nhấp sau đó bật tùy chọn jumplink và bạn có thể kéo xuống và chọn vị trí dừng tương ứng.

Bạn có thể nhấp vào đây để thử liên kết neo được tạo từ tính năng jumplink (chuyển bạn lên mục lục).

jumplink-thrive-architect

Cách 4: Tạo liên kết neo thủ công

Mặc dù cách này không thực sự phổ biến vì nó khá phức tạp, tuy nhiên trên thực tế nó là cốt lõi của những phương pháp trên. Vì vậy nếu như bạn quan tâm thì có thể tham khảo cho vui, biết đâu một ngày có khi bạn sẽ dùng đến.

Điều này đơn giản là dựa trên cách sử dụng mã HTML.

Đối với một vị trí dừng mã HTML sẽ có dạng:

<a href="TenID"> Văn bản hoặc block bất kỳ </a>

Trên thực tế a href có thể là bất kỳ một thẻ HTML nào như thẻ h1, h2,...div, span,...miễn là nó được gắn với một ID cụ thể.

Ví dụ: <div id="chung-thuc> tổng hợp mã HTML </div>

Đối với một liên kết neo nhảy đến vị trí trên thì nó sẽ có dạng:

<a href="#TenID">Văn bản Neo </a>

Dựa vào các yếu tố này (gán ID và liên kết đến ID) thì bạn có thể tạo bất kỳ bước nhảy nào trên WordPress của mình.

Lời kết

Trong khi trải nghiệm người dùng và SEO ngày càng được chú trọng, mình tin rằng tạo liên kết neo là một trong những yếu tố nhỏ bạn có thể tận dụng để thúc đẩy thứ hạng và trải nghiệm lướt web của khách hàng.

Như bạn đã thấy, mình đã cung cấp cho bạn những cách đơn giản nhất vì vậy bạn có thể hành động một cách nhanh chóng.

Hy vọng đến lúc này bạn đã biết cách tạo liên kết neo trên WordPress của mình. Ngoài ra có thể bạn cũng quan tâm cách viết bài chuẩn SEO của mình để xuất bản những nội dung chất lượng và đạt nhiều thứ hạng cao trên kết quả tìm kiếm.

Nếu bạn có khó khăn hoặc thắc mắc nào hãy để lại comment bên dưới, mình sẽ phản hồi sớm nhất cho bạn.

Đôi chút về Nam Nguyen

Mình là một cựu quân nhân Hải Quân đã xuất ngũ, Blog này là một trong những doanh nghiệp trực tuyến của mình. Nơi mình chia sẻ những kinh nghiệm thiết thực nhất về WordPress có thể áp dụng để xây dựng và phát triển Online Business của bạn một cách bền vững. Bạn có thể kết nối với mình trên Facebook, Twitter, Linkedin.

4 thoughts on “[4 cách] Làm thế nào để tạo liên kết neo (HTML anchor link) trên WordPress?”

  1. Bài viết hay.
    xin hỏi là mình tạo liên kết khi bôi đen chữ nhưng sau đó chữ không chuyển màu mà vẫn có liên kết. Tuy nhiên không tạo cho người đọc thấy. Xin giúp đỡ.

    Reply
      • Chào bạn.
        Mình vào xem rồi, không có k có phần color.
        xin hỏi tiếp. Mình viết bài mà không thấy có khung định dạng kiểu word. đã cài plugin TinyMCE, kiểm tra thì vẫn có mà viết bài không thấy hiện lên. Chưa tìm ra. Bạn xem giúp? Cảm ơn

        Reply
        • Nếu không có mục color thì bạn phải có chút kinh nghiệm về CSS để tùy biến rồi. Còn bạn muốn khung định dạng kiểu word thì cài thêm plugin Classic editor nhé!

          Reply

Leave a Comment