Hôm qua ngồi ở quán cà phê quen, mình vô tình nghe thấy hai bạn trẻ ngồi bàn bên cãi nhau nảy lửa. Một bạn làm thiết kế web, bạn kia vừa chân ướt chân ráo vào agency làm SEO. Cả hai đang cãi xem thẻ liên kết có bắt buộc phải chứa đường dẫn hay không, rồi tại sao link bấm vào cứ nhảy tưng tưng lên đầu trang. Cậu làm SEO khăng khăng bảo sếp dạy phải nhét cái tên vào thẻ để làm mỏ neo, còn cậu thiết kế web lại cự cãi bảo làm thế code bẩn chết đi được. Nghe xong mình chỉ biết cười thầm, vì mười năm trước, chính mình cũng từng ngáo ngơ y hệt như thế khi mới gõ những dòng code đầu đời.
Tài liệu tiếng Việt ngoài kia viết về đề tài này nhiều như nấm sau mưa. Khổ nỗi, chỗ này cóp nhặt chỗ kia một mẩu, tam sao thất bản đến mức biến kiến thức nền tảng thành một mớ bòng bong. Người bảo màu link mặc định luôn là màu tím, kẻ lại phán chắc nịch rằng thiếu đường dẫn thì trang web báo lỗi ngay. Đám đông cứ thế tin sái cổ, rồi truyền tay nhau những dòng code rác từ dự án này qua dự án khác mà không hề hay biết mình đang tạo ra cả đống lỗ hổng bảo mật lẫn rào cản trải nghiệm.
Để dọn sạch mớ bòng bong đó, chúng ta cần lật lại ngọn ngành xem HTML là ngôn ngữ gì và thẻ a trong html thực sự sinh ra để làm gì, vận hành ra sao dưới con mắt của trình duyệt và thuật toán tìm kiếm.
Thẻ a trong html và câu chuyện mỏ neo từ thuở sơ khai của web
Chữ cái đứng một mình đó không phải ngẫu nhiên mà có. Nó là viết tắt của từ mỏ neo (anchor). Vào những năm 1990, khi World Wide Web còn sơ khai, các nhà khoa học tại CERN cần một phương tiện để ghim cố định một vị trí trong tập tài liệu khoa học dài dằng dặc, giúp người đọc nhảy thẳng tới đoạn cần xem thay vì phải cuộn chuột mỏi tay. Thao tác đó giống hệt việc người thủy thủ thả một chiếc mỏ neo xuống lòng sông để giữ thuyền đứng yên tại một tọa độ xác định.
Về sau, khi mạng lưới liên kết phát triển bùng nổ, phần tử này gánh thêm trọng trách kết nối giữa các văn bản với nhau, nhưng cái tên mỏ neo thì gắn chặt vào nó suốt hơn ba thập kỷ qua. Chính nguồn gốc lịch sử này dẫn đến một hiểu lầm kinh điển mà ngay cả nhiều lập trình viên lâu năm vẫn mắc phải: đinh ninh rằng thuộc tính href là thành phần bắt buộc. Ai dạy bạn điều đó thì họ đang nhầm to.
Theo đặc tả chuẩn từ tài liệu mạng lưới nhà phát triển Mozilla (MDN), một phần tử mỏ neo hoàn toàn hợp lệ khi đứng trơ trọi mà không hề có thuộc tính href bên trong. Khi vắng bóng thuộc tính này, trình duyệt xem nó là một trình giữ chỗ cho một siêu liên kết (placeholder hyperlink). Nó đại diện cho một liên kết tiềm năng, có thể được kích hoạt sau đó thông qua mã kịch bản JavaScript hoặc khi đáp ứng một điều kiện người dùng cụ thể.
Lúc này, phần tử không thể nhận sự kiện chuyển hướng, con trỏ chuột không đổi thành hình bàn tay, và bàn phím cũng bỏ qua nó khi bấm phím Tab. Đây là một tính năng được thiết kế có chủ đích trong tiêu chuẩn web chứ chẳng phải lỗi cú pháp. Nhiều người còn xem phần tử này đơn thuần là một cái cầu nối để nhảy từ website A sang website B. Lối tư duy nông cản đó đã vứt bỏ phần lớn sức mạnh vốn có của nó.
Bạn có thể dùng nó để kích hoạt giao thức gọi điện thoại trực tiếp bằng cú pháp tel:, mở ứng dụng gửi thư điện tử bằng mailto:, hoặc ra lệnh cho trình duyệt tải ngay một tệp tài liệu về máy với thuộc tính download thay vì cố gắng mở tệp đó ra trên màn hình. Mỗi giao thức biến mỏ neo thành một công cụ chuyển đổi hành động cực kỳ đắc lực cho các trang bán hàng hay trang dịch vụ.
Cú trượt vỏ chuối mang tên href=”#” và thuộc tính name thời đồ đá
Nếu bạn từng mở một trang web, bấm vào một liên kết rồi thấy màn hình giật phắt một cái ngược về tận đỉnh đầu trang, bạn vừa chạm mặt dấu vết của một thói quen viết code cẩu thả. Rất nhiều người học vẹt trên mạng rằng muốn tạo một điểm neo trong trang thì cứ gán href=”#”. Đây là một pha tự lấy đá ghè chân mình cực kỳ phổ biến.
Ký tự thăng đứng một mình trong thanh địa chỉ là một chỉ số phân đoạn trống (empty fragment identifier). Quy ước của trình duyệt khi gặp chỉ số phân đoạn trống là lập tức cuộn cửa sổ hiển thị về điểm đầu tiên của tài liệu HTML. Muốn dẫn người đọc đến đúng vị trí họ cần, chẳng hạn như bảng báo giá hay mục tài liệu tham khảo ở lưng chừng trang, bạn phải chỉ định rõ tên định danh tương ứng sau dấu thăng, ví dụ href=”#bang-gia”. Tại điểm đích đó, phần tử nhận diện phải mang thuộc tính id khớp chính xác với chuỗi ký tự bạn đã khai báo:
<h2 id="bang-gia">Bảng giá dịch vụ</h2>
Nhắc đến điểm đích, mình lại nhớ đến mấy buổi họp nội bộ ở các agency SEO, nơi mấy bạn mới vào nghề hay lôi thuộc tính name ra để tranh luận. Ngày xưa, trong thời kỳ của HTML4, người ta thường dùng thẻ mỏ neo rỗng đi kèm thuộc tính name để cắm mốc. Nhưng thời thế đã thay đổi từ rất lâu rồi. Chuẩn HTML5 đã chính thức khai tử việc dùng thuộc tính name trên phần tử này để làm đích đến cho liên kết phân đoạn.
Định danh id vốn thuộc về cấu trúc mô hình đối tượng tài liệu (DOM), mang tính duy nhất trên toàn bộ trang và có thể gán cho bất kỳ thẻ nào, từ thẻ tiêu đề, đoạn văn cho tới khối nội dung. Việc cố đấm ăn xôi nhét thêm thẻ mỏ neo rỗng chỉ để giữ chỗ bằng thuộc tính name chứng tỏ kiến thức của bạn đã tụt hậu cả chục năm so với tiêu chuẩn ngành.
Chưa dừng lại ở đó, cái bẫy lớn nhất liên quan đến trải nghiệm và bảo mật nằm ở thuộc tính target=”_blank”. Ai cũng biết thuộc tính này dùng để mở một trang mới sang thẻ trình duyệt khác, giúp giữ chân người đọc ở lại trang gốc lâu hơn. Cái mà nhiều người bỏ quên là mối nguy hiểm mang tên chuyển hướng tab ngược (reverse tabnabbing).
Khi bạn trỏ một liên kết mở tab mới sang một website ngoài mà quên đi kèm thuộc tính an toàn, trang đích có thể chiếm quyền điều khiển trang gốc của bạn thông qua đối tượng window.opener trong JavaScript. Nó có thể âm thầm đổi đường dẫn của tab gốc sang một trang giả mạo hòng đánh cắp thông tin đăng nhập của người dùng. Để bẻ gãy nguy cơ này, việc bổ sung rel=”noopener noreferrer” là quy tắc sống còn mà mọi lập trình viên lẫn người làm nội dung phải thuộc nằm lòng trước khi ấn nút xuất bản bài viết.
Trạng thái hiển thị trên CSS và cú lừa thị giác trên màn hình di động
Có một câu khẳng định xanh rờn xuất hiện ở hàng loạt bài hướng dẫn cơ bản: “Màu mặc định của thẻ a là màu tím”. Ai nói câu này thì chắc chắn chưa bao giờ mở một trang web mới tinh mà không kèm giao diện thiết kế. Màu sắc mặc định của một liên kết chưa từng được nhấp chuột trên hầu hết các trình duyệt phổ biến là màu xanh dương thuần khiết, đi kèm một đường gạch chân bên dưới. Chỉ khi liên kết đó đã nằm trong lịch sử duyệt web của thiết bị, nó mới chuyển sang màu tím sẫm.
Toàn bộ các quy tắc hiển thị này xuất phát từ bảng kiểu mặc định của tác nhân người dùng (user agent stylesheet), hoàn toàn có thể ghi đè dễ dàng bằng các thuộc tính màu sắc và trang trí văn bản trong CSS. Khi căn chỉnh giao diện cho liên kết, người ta thường chỉ chăm chú vào bốn trạng thái kinh điển: link, visited, hover và active. Nhiều tài liệu coi đây là một danh sách đóng, nhưng họ đã bỏ quên hai nhân vật cực kỳ quan trọng đối với khả năng tiếp cận: focus và focus-visible.
Hãy hình dung một người dùng bị khuyết tật vận động, họ không thể cầm chuột mà phải điều hướng trang web hoàn toàn bằng bàn phím thông qua phím Tab. Nếu bạn thẳng tay xóa bỏ đường viền chỉ báo bằng dòng mã outline: none mà không bù đắp lại bằng trạng thái focus tương xứng, họ sẽ hoàn toàn mất phương hướng vì không biết con trỏ hệ thống đang dừng ở đâu trên màn hình. Một thiết kế chuẩn mực luôn phải tôn trọng khả năng tiếp cận thông qua việc hiển thị rõ ràng đường viền định vị khi phần tử nhận tiêu điểm từ bàn phím.
Bước sang địa hạt của màn hình cảm ứng di động, câu chuyện trạng thái lại càng trở nên thú vị. Rất nhiều bạn thiết kế giao diện dựa hoàn toàn vào hiệu ứng rê chuột (hover) để báo cho người dùng biết một cụm từ có thể bấm được. Đây là một sai lầm lớn về mặt trải nghiệm chạm. Trên màn hình điện thoại, làm gì có con trỏ chuột nào lơ lửng trên không trung để kích hoạt trạng thái rê chuột.
Khi ngón tay bạn chạm vào màn hình, trình duyệt di động sẽ bắn ra một chuỗi sự kiện theo thứ tự: chạm xuống (touchstart), nhấc tay lên (touchend), rồi mới tới cú nhấp chuột (click). Nhiều trình duyệt cố gắng giả lập trạng thái rê chuột bằng cách bật nó lên trong tích tắc ngay khi ngón tay vừa chạm, nhưng trạng thái đó biến mất ngay lập tức hoặc tệ hơn là dính chặt lại ở đó cho đến khi người dùng chạm vào một điểm khác trên màn hình. Hiện tượng “hover dính” này gây ức chế tột độ, khiến người dùng lầm tưởng mình đang chọn nhầm phần tử.
Kích thước vùng chạm cũng là điểm cốt tử trên di động. Một dòng chữ liên kết quá nhỏ hoặc đặt quá sát nhau sẽ khiến người dùng liên tục bấm nhầm. Diện tích tương tác tối thiểu thường được khuyến nghị ở khoảng 44×44 pixel. Bạn có thể dễ dàng giải quyết bài toán này bằng cách biến phần tử thành dạng khối nội dòng (inline-block) rồi thêm khoảng đệm thích hợp, giúp thao tác chạm bằng ngón tay cái trở nên nhẹ nhàng và chính xác hơn rất nhiều.
Tối ưu thẻ a trong html đúng chuẩn kỹ thuật để kéo traffic thực chiến
Trong thế giới của những người làm tối ưu hóa công cụ tìm kiếm, phần tử này chính là cỗ máy chuyên chở Backlink Link Juice giữa các trang. Thế nhưng, ranh giới giữa việc làm kỹ thuật chỉn chu và hành vi thao túng thứ hạng lại vô cùng mong manh. Rất nhiều người nghĩ cứ nhét thật nhiều từ khóa vào văn bản neo rồi rải link khắp nơi là website sẽ tự động bay lên đỉnh bảng tìm kiếm. Lối tư duy đốt cháy giai đoạn đó đã lỗi thời từ rất lâu.
Các công cụ tìm kiếm hiện đại đánh giá một liên kết dựa trên toàn bộ ngữ cảnh xung quanh nó thay vì chỉ chăm chăm đọc mỗi cụm từ nằm giữa hai thẻ đóng mở. Một cấu trúc liên kết nội bộ chất lượng phải giống như một hệ thống biển chỉ dẫn thông minh, đưa người đọc đi từ câu trả lời này sang giải pháp khác một cách tự nhiên nhất. Đặc biệt, trong bối cảnh hiện nay, thứ hạng có thể bị đe dọa khi AI Overviews xuất hiện làm CTR SEO tụt âm thầm, việc tối ưu trải nghiệm người dùng thông qua liên kết lại càng trở nên quan trọng.
Nếu bạn liên kết một hình ảnh, công cụ tìm kiếm sẽ lấy nội dung của thuộc tính văn bản thay thế (alt) trên thẻ ảnh để làm văn bản neo cho chính liên kết đó. Quên điền văn bản thay thế đồng nghĩa với việc bạn vừa tạo ra một liên kết câm, làm lãng phí tín hiệu xếp hạng quý giá. Bên cạnh đó, hệ thống thuộc tính quan hệ (rel) trên mỏ neo chính là ngôn ngữ để bạn giao tiếp trực tiếp với thuật toán thu thập thông tin.
Từ năm 2019, Google đã thay đổi cách nhìn nhận về giá trị nofollow. Nó không còn là một mệnh lệnh bắt buộc bot phải bỏ qua liên kết như trước, mà chỉ đóng vai trò là một gợi ý để hệ thống cân nhắc. Cùng với đó, hai giá trị mới được bổ sung nhằm phân định rõ ràng bản chất của từng dòng liên kết:
- rel=”sponsored”: Dùng riêng cho các liên kết có yếu tố thương mại, quảng cáo hoặc trả phí tài trợ.
- rel=”ugc”: Viết tắt của nội dung do người dùng tạo ra (User Generated Content), áp dụng cho các liên kết xuất hiện trong phần bình luận blog, bài viết diễn đàn.
- rel=”nofollow”: Dành cho những trường hợp bạn muốn dẫn nguồn để phục vụ bạn đọc nhưng không muốn bảo chứng cho độ uy tín của trang đích.
Cũng trong nhóm các thuộc tính bổ trợ, có ba cái tên mà dân làm web hay mang ra hù dọa nhau nhưng bản chất lại rất đơn giản: hreflang, referrerpolicy và ping. Thuộc tính hreflang đóng vai trò quyết định trong các dự án web đa ngôn ngữ. Nó báo cho công cụ tìm kiếm biết trang đích phục vụ ngôn ngữ và khu vực địa lý nào. Thuộc tính referrerpolicy kiểm soát lượng dữ liệu người giới thiệu mà trình duyệt gửi kèm khi người dùng nhảy sang trang khác. Còn thuộc tính ping, dù trên lý thuyết cho phép theo dõi hành vi nhấp chuột, nhưng thực tế nó bị hầu hết các trình duyệt hiện đại chặn lại nhằm đảm bảo quyền riêng tư.
Phân biệt rạch ròi giữa liên kết và nút bấm trên giao diện
Một căn bệnh kinh niên khác mà mình thấy nhan nhản ở các trang bán hàng: dùng mỏ neo để làm nút bấm, hoặc ngược lại, dùng thẻ nút bấm (button) để chuyển trang. Nhìn bề ngoài thì hai thứ này có thể được CSS trang điểm cho giống hệt nhau, nhưng về mặt ngữ nghĩa và hành vi mặc định thì chúng thuộc về hai thế giới hoàn toàn khác biệt.
Một liên kết sinh ra để thực hiện duy nhất một nhiệm vụ: điều hướng người dùng tới một tài nguyên mới, dù tài nguyên đó nằm ở website khác hay ở một vị trí khác trên cùng một trang. Khi người dùng bấm vào liên kết, họ kỳ vọng URL trên thanh địa chỉ sẽ thay đổi và lịch sử trình duyệt được ghi nhận.
Một nút bấm sinh ra để thực hiện một hành động nội tại trong trang: gửi dữ liệu biểu mẫu, mở một hộp thoại thông báo, đóng một thanh trượt, hoặc kích hoạt một tiến trình tính toán bằng JavaScript. Khi người dùng bấm vào nút, trang web xử lý logic ngay tại chỗ mà không làm thay đổi vị trí tài nguyên gốc.
Nếu bạn muốn tạo một nút kích hoạt cửa sổ thanh toán nhanh, hãy dùng thẻ button. Đừng cố chấp dùng mỏ neo rồi nhét href=”#” kèm sự kiện hủy mặc định (preventDefault), vì điều đó sẽ phá vỡ hoàn toàn khả năng tiếp cận của trình đọc màn hình. Ngược lại, nếu mục đích là đưa khách hàng đến một trang sản phẩm hay danh mục dịch vụ chi tiết, việc sử dụng thẻ mỏ neo chuẩn chỉ là điều bắt buộc để bot tìm kiếm có thể lần theo dấu vết và lập chỉ mục cho trang đích.
Xây dựng chiến lược liên kết bền vững trên nền tảng kỹ thuật sạch
Nắm vững kỹ thuật viết code sạch mới chỉ là điều kiện cần. Điều kiện đủ để một website vươn lên nhóm dẫn đầu ngành nằm ở chiến lược phân bổ liên kết sao cho tự nhiên và thực chất. Rất nhiều chủ doanh nghiệp sau khi hoàn thiện website thì bắt đầu sốt ruột tìm cách đẩy chỉ số bằng các thủ thuật đi đường tắt. Họ chi tiền vào các dịch vụ tạo liên kết hàng loạt, để rồi một buổi sáng đẹp trời thức dậy thấy toàn bộ từ khóa bay màu khỏi trang tìm kiếm vì dính bẫy spam.
Một chiến lược xây dựng liên kết an toàn đòi hỏi sự tỉ mỉ ngay từ khâu lựa chọn đối tác, đặc biệt là băn khoăn đi backlink cho website mới nên chậm thế nào là vừa để đảm bảo an toàn tuyệt đối. Một hướng tiếp cận an toàn là ưu tiên xây dựng liên kết thủ công theo phương pháp mũ trắng và tránh các công cụ tạo liên kết tự động. Các liên kết chất lượng cao thường đến từ những tên miền có chỉ số sức mạnh (DR) cao và nằm trong các bài viết chuyên sâu đáp ứng tiêu chí EEAT.
Bạn có thể tham khảo các dịch vụ xây dựng liên kết chuyên sâu tại Backlink Cafe. Theo thông tin do Backlink Cafe cung cấp, đơn vị có hơn 8 năm hoạt động trong ngành, đã đồng hành cùng hơn 1700 khách hàng với nhiều chiến dịch kéo tăng trưởng lưu lượng truy cập từ 35% đến 86% ngay cả ở những phân khúc thị trường cạnh tranh gay gắt như ngành xây dựng hay vận chuyển hàng hóa quốc tế.
Tùy thuộc vào quy mô dự án và mục tiêu tăng trưởng, bạn có thể lựa chọn các giải pháp tối ưu chuyên biệt như gói Ahrefs, gói A+ hoặc gói GEO. Để biết mục tiêu cụ thể của từng gói, bạn nên liên hệ trực tiếp với đơn vị cung cấp. Mức ngân sách đầu tư sẽ phụ thuộc trực tiếp vào số lượng đường dẫn, độ khó của thị trường và yêu cầu nội dung chuyên ngành đi kèm.
Ngay lúc này, điều bạn cần làm không phải là ngồi đọc thêm tài liệu lý thuyết suông. Hãy bật trình soạn thảo mã nguồn lên, mở lại dự án website hoặc bài viết bạn vừa xuất bản hôm qua để rà soát lại từng đường dẫn. Xóa bỏ ngay các thẻ mỏ neo còn dùng thuộc tính name cũ kỹ và thay thế bằng định danh id chuẩn xác. Quét sạch những liên kết mang giá trị href=”#” vô nghĩa và trỏ chúng về đúng vị trí phân đoạn tài liệu mà người đọc đang cần. Nếu có bất kỳ liên kết nào mở tab mới, hãy điền ngay thuộc tính rel=”noopener noreferrer” vào để bịt kín lỗ hổng bảo mật. Những thay đổi kỹ thuật nhỏ bé đó, khi được thực hiện nhất quán, sẽ tạo nên một nền móng vững chắc cho cả trải nghiệm người dùng lẫn thứ hạng website của bạn trên bảng tìm kiếm.
Leave a Reply