Thẻ anchor HTML thực tế vs liên kết chỉ dùng JavaScript: tại sao Google cần

Một chủ cửa hàng Shopify lắp đặt ứng dụng mega-menu cao cấp vào năm ngoái. Ứng dụng có đánh giá tốt, animation đẹp, và giao diện sạch. Doanh số vẫn ở mức cũ. Ba tháng sau, Google Search Console cho thấy lượng trang crawl giảm 40%. Vấn đề không phải là thiết kế menu — mà là liên kết menu chỉ tồn tại trong JavaScript. Crawler của Google thấy một trang chủ mà không có liên kết nào tới trang danh mục. Các danh mục bị cô lập.

Đây là lỗi SEO navigation phổ biến nhất mà tôi thấy: một menu trông hoàn hảo với người dùng nhưng vô hình với các công cụ tìm kiếm. Cách sửa không phức tạp, nhưng nó đòi hỏi phải hiểu sự khác biệt giữa liên kết HTML thực tế và các mẫu điều hướng chỉ JavaScript — và biết cách kiểm tra trang của riêng bạn để phát hiện vấn đề trước khi nó làm mất lưu lượng.

Google crawler thực sự nhìn thấy cái gì

Khi Google crawl một trang, nó gửi một yêu cầu HTTP tới server của bạn và nhận HTML làm phản hồi. Crawler phân tích cú pháp HTML đó tìm kiếm liên kết — cụ thể là các thẻ <a> với thuộc tính href. Mỗi URL mà nó tìm thấy sẽ được thêm vào hàng đợi crawl.

Đây là lần đầu tiên. Crawler của Google có thể thực thi JavaScript (nó sử dụng một phiên bản Chrome dưới nắp), nhưng khi render JavaScript xảy ra sau đó, trong một lần đầu thứ hai, và nó không được đảm bảo cho mọi trang. Google ưu tiên lần crawl HTML đầu tiên vì nó nhanh và đáng tin cậy. Các trang phụ thuộc hoàn toàn vào JavaScript để điều hướng sẽ gặp bất lợi.

Đây là những gì Google tìm kiếm:

<a href="/collections/summer-shoes">Summer Shoes</a>

Đây là một liên kết thực. Thuộc tính href chứa một URL. Crawler của Google trích xuất /collections/summer-shoes và thêm nó vào hàng đợi crawl. Trang này sẽ được crawl và index.

Đây là những gì Google bỏ qua hoặc bỏ lỡ trong lần đầu tiên:

<div onclick="window.location='/collections/summer-shoes'">Summer Shoes</div>
<a href="javascript:void(0)" onclick="navigate('/collections/summer-shoes')">Summer Shoes</a>
<button data-url="/collections/summer-shoes">Summer Shoes</button>

Không một cái nào trong số này là thẻ anchor với thuộc tính href thực. Các URL tồn tại trong mã (trong các trình xử lý onclick hoặc thuộc tính data), nhưng crawler lần đầu tiên của Google không thực thi JavaScript hoặc phân tích cú pháp thuộc tính data khi khám phá liên kết. Những liên kết này vô hình trong quá trình crawl ban đầu.

Google có thể cuối cùng khám phá những trang này thông qua các phương tiện khác (sitemap, backlink bên ngoài, khi render JavaScript), nhưng chúng sẽ không nhận được ưu tiên crawl hoặc link equity đi kèm với việc được liên kết trong HTML navigation chính.

View Source: bài kiểm tra xác định

Bạn không cần các công cụ đặc biệt để kiểm tra xem navigation của bạn có crawlable hay không. Mọi trình duyệt đều có chức năng “View Source” hiển thị HTML thô được gửi bởi server trước khi JavaScript chạy. Đây chính xác là những gì crawler lần đầu tiên của Google thấy.

Cách kiểm tra

1. Mở trang chủ cửa hàng của bạn trong Chrome, Firefox, hoặc Safari.
2. Nhấp chuột phải ở bất kỳ đâu trên trang và chọn “View Page Source” (hoặc nhấn Ctrl+U trên Windows, Cmd+Option+U trên Mac).
3. Một tab mới sẽ mở hiển thị HTML thô.
4. Nhấn Ctrl+F (Cmd+F trên Mac) và tìm kiếm URL của một trong các trang danh mục chính của bạn — ví dụ: /collections/women.

Nếu bạn tìm thấy URL bên trong một thẻ anchor như thế này:

<a href="/collections/women">Women's Clothing</a>

Navigation của bạn là crawlable. Google có thể theo liên kết đó.

Nếu URL không xuất hiện trong View Source chút nào, hoặc nếu nó chỉ xuất hiện trong một thẻ <script> hoặc thuộc tính data như thế này:

<div class="menu-item" data-url="/collections/women">Women's Clothing</div>

Navigation của bạn không crawlable trong lần đầu tiên. Crawl HTML ban đầu của Google sẽ bỏ lỡ nó.

Mobile vs Desktop

Nhiều cửa hàng sử dụng các cách triển khai navigation khác nhau cho mobile và desktop. Phiên bản desktop có thể sử dụng các thẻ anchor HTML ngữ nghĩa trong khi phiên bản mobile sử dụng menu hamburger chỉ JavaScript. Vì Google sử dụng mobile-first indexing (phiên bản mobile là phiên bản chính mà Google crawl), bạn cần kiểm tra HTML mobile riêng biệt.

Trong Chrome:

1. Mở DevTools (F12 hoặc nhấp chuột phải → Inspect).
2. Nhấp vào biểu tượng thanh công cụ thiết bị (hoặc nhấn Ctrl+Shift+M / Cmd+Shift+M).
3. Chọn một thiết bị di động từ dropdown (ví dụ: iPhone SE).
4. Tải lại trang.
5. Nhấp chuột phải và View Source lại.

Tìm kiếm các URL danh mục của bạn trong HTML mobile. Nếu chúng không xuất hiện, crawler mobile của Google không nhìn thấy liên kết navigation của bạn.

Các mẫu thường gặp thất bại trong bài kiểm tra View Source

Mẫu 1: Mega menu được tạo bằng JavaScript

Nhiều ứng dụng menu hiện đại hoạt động như thế này:

1. Server gửi HTML tối thiểu — chỉ một nút kích hoạt menu.
2. Khi người dùng hover hoặc click, JavaScript lấy dữ liệu menu từ API hoặc phân tích cú pháp một đối tượng JSON.
3. JavaScript xây dựng DOM đầy đủ (bao gồm tất cả các thẻ <a>) và chèn nó vào trang.

Ví dụ HTML được gửi bởi server:

<button id="mega-menu-trigger">Shop</button>
<div id="mega-menu-container"></div>
<script>
  const menuData = {
    "women": {"label": "Women", "url": "/collections/women"},
    "men": {"label": "Men", "url": "/collections/men"}
  };
  // JavaScript xây dựng và chèn liên kết khi người dùng tương tác
</script>

View Source hiển thị nút và container trống. Các liên kết chưa tồn tại. Crawl HTML lần đầu tiên của Google thấy không có liên kết nào tới trang danh mục.

Mẫu 2: Định tuyến ứng dụng một trang

Các cửa hàng được xây dựng bằng React, Vue, hoặc các framework SPA khác thường sử dụng routing phía client. Menu có thể trông như thế này trong mã framework:

<Link to="/collections/summer-shoes">Summer Shoes</Link>

Liệu điều này có crawlable hay không phụ thuộc vào cách framework render nó và liệu ứng dụng có sử dụng server-side rendering hay không. Nếu ứng dụng là một SPA chỉ phía client (server gửi một shell index.html duy nhất và JavaScript render mọi thứ), View Source hiển thị một shell trống mà không có liên kết navigation:

<!DOCTYPE html>
<html>
<head><title>Store</title></head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

Tất cả nội dung, bao gồm navigation, được render bằng JavaScript. Crawl HTML lần đầu tiên của Google thấy không có gì.

Mẫu 3: Các trình xử lý onclick không có href

Một số menu sử dụng thẻ anchor nhưng đặt logic navigation trong các trình xử lý onclick và sử dụng javascript:void(0) làm href:

<a href="javascript:void(0)" onclick="goToCategory('women')">Women</a>

Điều này trông như một liên kết đối với người dùng và thậm chí hoạt động như một liên kết khi click, nhưng javascript:void(0) không phải là một URL thực. Crawler của Google trích xuất javascript:void(0) từ thuộc tính href và loại bỏ nó vì nó không phải là một URL crawlable. Đích đến thực tế (/collections/women) bị chôn trong hàm JavaScript goToCategory(), mà crawler không thực thi trong khi phân tích cú pháp HTML lần đầu tiên.

Mẫu 4: Divs và buttons với thuộc tính data

Các nhà phát triển đôi khi xây dựng navigation sử dụng các phần tử không ngữ nghĩa:

<div class="nav-item" data-url="/collections/women" onclick="navigate(this.dataset.url)">
  Women
</div>

Điều này hoạt động cho người dùng (JavaScript đọc thuộc tính data và điều hướng khi click), nhưng không có thẻ <a> và không có thuộc tính href. Crawler của Google không tìm kiếm URL trong thuộc tính data. Liên kết vô hình.

Cách sửa các liên kết chỉ JavaScript

Sửa 1: Render liên kết trong HTML, tăng cường bằng JavaScript

Cách tiếp cận tốt nhất: server của bạn (hoặc static site generator) xuất HTML hoàn chỉnh với các thẻ anchor thực. JavaScript thêm tương tác lên trên.

HTML được render trên server:

<nav>
  <a href="/collections/women">Women</a>
  <a href="/collections/men">Men</a>
  <a href="/collections/kids">Kids</a>
</nav>

HTML này crawlable. Google thấy các liên kết ngay lập tức.

Sau đó JavaScript tăng cường nó:

document.querySelectorAll('nav a').forEach(link => {
  link.addEventListener('click', (e) => {
    // Thêm chuyển tiếp mượt mà, phân tích, v.v.
    // Để trình duyệt điều hướng bình thường (không preventDefault)
  });
});

Navigation hoạt động không cần JavaScript (graceful degradation), hoạt động hoàn hảo với JavaScript (progressive enhancement), và crawlable trong cả hai trường hợp.

Sửa 2: Sử dụng server-side rendering cho SPAs

Nếu cửa hàng của bạn là một single-page app được xây dựng bằng React, Vue, hoặc tương tự, hãy triển khai server-side rendering (SSR) hoặc static site generation (SSG).

Framework làm cho điều này dễ dàng:

• Next.js cho React
• Nuxt cho Vue
• SvelteKit cho Svelte
• Gatsby cho các trang tĩnh

Các framework này render HTML đầy đủ (bao gồm navigation) trên server. Tải lần đầu tiên của trang cung cấp HTML hoàn chỉnh, crawlable. Sau đó JavaScript hydrate trang và tiếp quản cho điều hướng tiếp theo, mang cho bạn trải nghiệm SPA cho người dùng và HTML crawlable cho các công cụ tìm kiếm.

Sửa 3: Kiểm tra cài đặt ứng dụng menu của bạn

Nếu bạn đang sử dụng một ứng dụng menu Shopify, hãy kiểm tra cài đặt ứng dụng để tìm một tùy chọn “SEO mode” hoặc “server-side rendering”. Nhiều ứng dụng cung cấp điều này như một toggle. Khi bật, ứng dụng render các liên kết navigation trong Liquid (ngôn ngữ mẫu phía server của Shopify) thay vì JavaScript.

Nếu ứng dụng của bạn không cung cấp tùy chọn này và bạn đã xác nhận (qua View Source) rằng navigation của bạn không crawlable, hãy xem xét chuyển sang một ứng dụng có khả năng này. Navi+ AI Menu Builder render tất cả các liên kết trong HTML theo mặc định — các liên kết nằm trong payload HTML ban đầu, và JavaScript chỉ xử lý tương tác và animation.

Sửa 4: Progressive enhancement cho hamburger menu

Menu hamburger mobile thường ẩn navigation cho đến khi người dùng nhấn vào biểu tượng. Menu vẫn có thể crawlable miễn là các liên kết tồn tại trong HTML:

<nav class="mobile-menu" aria-hidden="true">
  <a href="/collections/women">Women</a>
  <a href="/collections/men">Men</a>
</nav>

CSS ẩn menu theo mặc định:

.mobile-menu {
  display: none;
}
.mobile-menu.is-open {
  display: block;
}

JavaScript toggle class khi hamburger được nhấn:

hamburgerButton.addEventListener('click', () => {
  mobileMenu.classList.toggle('is-open');
});

Các liên kết tồn tại trong HTML (View Source hiển thị chúng), vì vậy Google có thể crawl chúng mặc dù chúng bị ẩn bằng CSS. Điều này ổn — Google không phạt nội dung ẩn miễn là nó không phải là thực tế (bạn không ẩn spam tích chất từ khóa).

Điều không hoạt động: xây dựng DOM mobile menu chỉ bằng JavaScript khi hamburger được nhấn:

hamburgerButton.addEventListener('click', () => {
  const menu = document.createElement('nav');
  menu.innerHTML = '<a href="/vi/collections/women">Women</a>...';
  document.body.appendChild(menu);
});

Menu này không tồn tại trong HTML cho đến khi người dùng tương tác. Crawler của Google không nhấn các biểu tượng hamburger. Các liên kết vô hình.

Kiểm tra sửa của bạn

Sau khi bạn đã cập nhật navigation, hãy xác minh rằng nó bây giờ crawlable:

1. Bài kiểm tra View Source: Tải lại trang chủ của bạn và View Source. Tìm kiếm các URL danh mục. Xác nhận chúng xuất hiện trong các thẻ anchor.
2. Bài kiểm tra JavaScript bị vô hiệu hóa: Trong Chrome DevTools, vô hiệu hóa JavaScript (Settings → Debugger → Disable JavaScript). Tải lại trang chủ của bạn. Xác nhận rằng các liên kết navigation có thể nhìn thấy và click được. Click một liên kết sẽ điều hướng tới trang danh mục (trang sẽ trông bị hỏng mà không có JavaScript, nhưng navigation sẽ hoạt động).
3. Google Search Console: Chờ vài ngày, sau đó kiểm tra báo cáo Coverage (Pages → Indexed). Nếu các trang danh mục trước đây bị cô lập bắt đầu hiển thị là indexed, sửa của bạn đã hoạt động.

Kiểm tra cả desktop và mobileChạy bài kiểm tra View Source trên cả phiên bản desktop và mobile của trang web của bạn. Nếu navigation mobile của bạn sử dụng một cách triển khai khác (hamburger menu, ứng dụng khác, cấu trúc đơn giản hóa), hãy kiểm tra nó riêng biệt. Mobile-first indexing của Google có nghĩa là phiên bản mobile là những gì quan trọng cho xếp hạng.

Tại sao điều này quan trọng hơn bạn nghĩ

Navigation không chỉ là một trong nhiều liên kết nội bộ trên trang web của bạn — đó là tập hợp liên kết nổi bật nhất, nhất quán mà Google thấy. Navigation chính xuất hiện trên mọi trang. Nó ở trong header, gần đầu tài liệu HTML, nơi Google kỳ vọng tìm thấy các liên kết quan trọng. Khi Google crawl trang chủ của bạn, navigation là tập hợp liên kết đầu tiên mà nó gặp phải.

Nếu những liên kết đó không crawlable, Google không chỉ bỏ lỡ một vài trang. Nó mất tín hiệu chính để hiểu kiến trúc trang web của bạn. Các trang danh mục trở thành cô lập. Các sản phẩm được liên kết chỉ từ những trang danh mục đó trở thành cô lập một cấp độ sâu hơn. Toàn bộ cấu trúc trang web sụp đổ từ góc nhìn của Google.

Và vì navigation rất nhất quán (menu giống nhau trên mọi trang), tác động tăng gấp đôi. Nếu navigation trang chủ của bạn chỉ JavaScript, mọi trang trên trang web của bạn đều có vấn đề tương tự. Google crawl 100 trang và tìm thấy không có liên kết navigation nào trên tất cả 100 trang. Đó không phải là một vấn đề SEO nhỏ — đó là một lỗi crawlability cơ bản.

Bài kiểm tra View Source mất 30 giây. Nếu các URL danh mục của bạn không xuất hiện trong HTML thô, bạn đã tìm thấy sửa SEO quan trọng nhất mà bạn có thể làm. Mọi thứ khác — tối ưu hóa từ khóa, backlink, cải tiến kỹ thuật — dựa trên giả định rằng Google có thể crawl các trang của bạn. Nếu không có navigation crawlable, giả định đó là sai.