Hướng dẫn về Mega Menu SEO

Tóm tắt — mega menu là big navigation dropdown đó hiển thị lots của links tại sau khi, grouped vào các cột. Đối với SEO nó chỉ liên kết nội bộ, so rules là giống nhau: mỗi link nên là thực <a href> so Google có thể reliably follow nó. phần lớn phổ biến mistake là building flyout với JavaScript nhấp handlers thay vì thực links — nó looks fine để person, nhưng các công cụ tìm kiếm có thể’t crawl nó. On mobile ( hamburger menu), hãy đảm bảo bạn kept giống nhau links.

Điều gì mega menu là

mega menu là disclosed navigation panel — hidden cho đến khi bạn hover hoặc nhấp top-cấp độ menu item — đó opens để hiển thị lot của links tại sau khi, arranged trong các cột by category so họ’re easy để scan. thông thường dropdown cho bạn single ngắn list. mega menu cho bạn “Shoes” opening vào Men, Women, và Kids’ các cột, mỗi với của nó own subcategories. Big online stores sử dụng them vì họ let shopper jump để deep category trang từ anywhere on trang web trong một nhấp.

Đó quan trọng điều để understand: một mega menu là chỉ một pile of liên kết nội bộ trong một fancy container. Mọi thứ đó là đúng về liên kết nội bộ generally là đúng ở đây. Nếu bạn haven’t đọc đó liên kết nội bộ ghi-lên trong này cluster, bắt đầu ở đó — này trang là đó practical, “how do I not break it” (bản dịch) «cách làm I không break điều này» companion.

một rule đó matters phần lớn

cho công cụ tìm kiếm để follow link, nó có để là thực HTML link — <a> element với href:

<a href="/shoes/mens/">Men's shoes</a>

đó là điều này. Nếu của bạn mega menu links là real <a href> links, bạn là 90% of đó way ở đó. Đó trouble bắt đầu khi một nhà phát triển xây dựng đó flyout với JavaScript “click to go here” (bản dịch) «nhấp để go ở đây» behavior thay vì thực tế links. Để một person, điều này looks giống hệt — bạn nhấp và đó trang loads. Để Google, có không có gì để follow, so những các trang có thể âm thầm go undiscovered.

Cách kiểm tra yours

Right-nhấp trang và chọn View trang Nguồn (không “Inspect”) và tìm kiếm cho một của bạn menu links. nếu nó hiển thị lên as <a href="..."> trong đó thô nguồn, good. nếu của bạn menu links chỉ xuất hiện Khi bạn sử dụng Inspect Element ( trực tiếp, JavaScript-được xây dựng version) nhưng không trong View Nguồn, đó warning sign để hand của bạn nhà phát triển.

không forget mobile

On phones của bạn mega menu becomes hamburger hoặc accordion menu. Nhóm thường trim đó menu để giữ nó tidy — và accidentally drop links đó chỉ existed ở đó. Google wants của bạn mobile nội dung để match của bạn desktop nội dung, so chạy giống nhau kiểm tra on mobile menu: là giống nhau links ở đó, và là họ thực <a href> links?

Muốn deeper version — JavaScript thất bại chế độ trong detail, liệu hidden-cho đến khi-hover nội dung là discounted, Cách nhiều links là cũng nhiều, và good-so với-bad markup ví dụ? Chuyển để Nâng cao tab.

Tóm tắt — mega menu là liên kết nội bộ wearing bigger UI, so mỗi rule từ liên kết nội bộ ghi-lên áp dụng unchanged — starting với <a href> requirement. #1 thực-world thất bại là JS nhấp/hover flyout whose links không phải thực anchors: nó looks linked để người dùng nhưng Google có thể’t crawl nó, silently orphaning các trang nếu menu là của họ chỉ liên kết nội bộ. Verify với View Nguồn, không Inspect. nội dung hidden cho đến khi hover không phải tự động discounted cho là hidden miễn là nó trong ban đầu HTML và không fetched chỉ on interaction — CSS-hidden là fine; AJAX-on-hover là risk. Google nói nó takes đó nội dung vào account, though nó hasn’t được ghi lại giống hệt xếp hạng weight để luôn-visible nội dung. Không hard link-count ceiling tồn tại ( 100-link rule là myth), nhưng organization là thực lever: group by category với scannable các cột và descriptive anchor text so bạn không pancake của bạn topical structure. Mobile hamburger/accordion cần giống nhau crawlable links, không trimmed version. Dữ liệu có cấu trúc không phải substitute cho thực links.

Bắt đầu ở đây: mega menu là chỉ liên kết nội bộ

I muốn để set expectations trước getting vào đó specifics. Có không có gì magical hoặc tách biệt về “mega menu SEO.” (bản dịch) «mega menu SEO.» MỘT mega menu là một navigation component được xây dựng hoàn toàn từ liên kết nội bộ, và mỗi rule đó governs liên kết nội bộ generally — đó crawlable-link requirement, descriptive anchor text, đó fact đó có không magic link-count limit — áp dụng ở đây với zero modification. I’m không going để re-derive những; đó liên kết nội bộ bài viết trong này cluster covers them, và này trang cross-references điều này repeatedly.

Điều gì làm mega menus worth của họ own trang là đó they làm một điều thông thường navigation không: they cram an unusually lớn number of links vào một single, repeated, sitewide UI element. Đó concentration là điều gì raises hai distinct risks — an implementation risk (JavaScript flyouts đó không bao giờ render real links) và một structural risk (over-flattening trang web của bạn so Google loses đó grouping tín hiệu). Đó structural side — đó flat-so với-deep, pyramid-so với-pancake argument — là đã covered trong đó kiến trúc trang web và website structure các bài viết trong này cluster, including Mueller line đó over-flattening một site với một mega menu có thể làm điều này so “Google can’t recognize which parts of the site belong together.” (bản dịch) «Google không thể recognize mà parts of đó site belong together.» I’m không going để re-litigate đó ở đây. Này trang là về đó practical xây dựng.

single phần lớn phổ biến thất bại: JS handlers thay vì thực links

Ở đây một I see break trong wild nhiều hơn bất kỳ khác. team xây dựng mega menu — thường với older jQuery plugin, hoặc hand-rolled React/Vue component — và flyout “links” là thực ra nhấp handlers, router thuộc tính với không href, hoặc nội dung đó chỉ nhận injected vào DOM sau khi hover hoặc nhấp event fires. Google own list của link formats nó có thể’t reliably crawl maps trực tiếp onto chính xác những điều này patterns:

<a routerLink="products/category">Shoes</a>          <!-- no href -->
<span href="https://example.com">Shoes</span>        <!-- not an anchor -->
<a onclick="goto('https://example.com')">Shoes</a>   <!-- onclick, no href -->

reason điều này một là so dangerous là đó ** thất bại là silent.** các trang look linked — human hovers, sees flyout, clicks, và lands on category trang. Không có gì xuất hiện hỏng. nhưng những điều đó đích các trang nhận zero crawl và zero link-equity credit từ mega menu, và nếu mega menu là của họ chỉ liên kết nội bộ, họ become orphan các trang (see liên kết nội bộ bài viết on Vì sao orphans là phát hiện dead end). Bạn có thể có đểàn bộ category tree đó invisible để Google trong khi looking perfectly navigable để mỗi human ai các kiểm thử nó. Đó là lý làm nó survives QA: humans không experience bug.

Cách verify mega menu là thực ra crawlable

không trust được kết xuất trang — kiểm tra nguồn.

• View trang Nguồn, không Inspect Element. Right-nhấp → View trang Nguồn hiển thị thô HTML máy chủ được gửi. Inspect Element hiển thị trực tiếp DOM sau khi JavaScript có chạy, mà hides chính xác vấn đề bạn’re hunting. nếu của bạn flyout links xuất hiện as <a href="..."> trong View Nguồn, họ’re máy chủ-được kết xuất và safe. nếu họ chỉ hiển thị lên trong Inspect view, đó của bạn red flag.
• URL Inspection tool (GSC). Chạy trang qua Search Console’s URL Inspection và xem xét được kết xuất HTML / được crawl trang. điều này tells bạn Điều gì Googlebot thực ra ended lên với.

nuance worth stating plainly: có, Google renders JavaScript hiện tại, so JS-được xây dựng menu có thể nhận được crawl. nhưng “có thể” là operative word. verifiable, safe pattern là máy chủ-được kết xuất <a href> links, progressively enhanced với JavaScript cho hover animation và interactivity — không links đó phụ thuộc on JS để exist tại all. sử dụng JS để làm menu behave, không để làm links exist.

là hidden-cho đến khi-hover nội dung discounted?

Đây là câu hỏi mọi người eventually asks về mega menus, và nó một place nơi old SEO folklore là genuinely outdated. mega-menu flyout là hidden cho đến khi bạn hover nó — làm Google discount all những điều đó links vì họ’re không visible on load?

Không tự động — nhưng là precise về điều gì đó có nghĩa là, vì này là nơi mọi người overclaim. Hiện tại Google hướng dẫn và John Mueller own statement chẳng hạn nội dung present trong đó HTML nhưng visually hidden — bên trong một hover flyout, một closed accordion, an inactive tab — là taken vào account, không excluded outright. Mueller, asked trực tiếp liệu hidden tab/accordion nội dung là devalued dưới mobile-đầu tiên lập chỉ mục: “No. Specifically when it comes to content on mobile pages we do take into account anything that’s in the HTML. So if there’s something there that might be visible to users at some point we will include that… so that’s completely normal” (bản dịch) «Không. Cụ thể khi điều này xuất hiện để nội dung on mobile các trang we làm take vào account bất cứ điều gì đó là trong đó HTML. So nếu có điều gì đó ở đó có thể là visible để người dùng tại some point we sẽ bao gồm đó… so đó là completely thông thường» (reported by Roger Montti trong Search Engine Journal’s ghi-lên of đó myth). Google mobile-đầu tiên lập chỉ mục tài liệu lại này operationally, telling bạn đây là fine để move nội dung “into accordions or tabs” (bản dịch) «vào accordions hoặc tabs» cho mobile UX miễn là điều này vẫn giữ tương đương để desktop.

Điều gì đó quote thực ra establishes là availability — nội dung nhận được crawl, được kết xuất, và considered, thay vì thrown out. nó không establish đó hover-hidden nội dung carries giống hệt xếp hạng weight để luôn-visible nội dung; Google hasn’t published bất cứ điều gì on đó cụ thể câu hỏi either way, so treat nó as undocumented thay vì assuming sự tương đương. giữ hai các câu hỏi tách biệt: là nó excluded outright (không — settled) versus làm nó xếp hạng chính xác như visible nội dung (không được ghi lại).

Này supersedes đó older (khoảng 2015–2016-era) line đó nội dung behind tabs và nhấp-để-expand boxes carried ít hơn xếp hạng weight — đó cụ thể claim là dead. Điều gì đó record thực ra hỗ trợ là hẹp hơn: hidden-trong-HTML nội dung không discounted out of hand, nhưng không một có được ghi lại đó của nó weighting là giống hệt để visible nội dung. Nếu bạn đã heard đó old “discounted” version, này là điều gì changed — không đổi điều này cho an equally unsupported “definitely equal” (bản dịch) «definitely equal» version.

Nhưng có một nuance đó trips mọi người lên, và đây là đó toàn bộ game: “hidden via CSS” (bản dịch) «hidden qua CSS» và “fetched only on interaction” (bản dịch) «fetched chỉ on interaction» là hai completely khác nhau điều.

• flyout đó display:none cho đến khi hover, với links đã sitting trong DOM, là fine — được lập chỉ mục thông thường.
• flyout whose HTML là fetched qua API call triggered by hover event có thể không bao giờ là được crawl tại all.

đó là không một “hidden content is discounted” (bản dịch) «hidden nội dung là discounted» vấn đề — đây là một crawlability vấn đề. Đó links không exist until một người dùng làm điều gì đó, so một crawler không bao giờ sees them. Conflating những hai các chế độ lỗi là chính xác cách đó myth survives. Giữ them tách biệt: CSS-hidden links = fine; AJAX-on-interaction links = hỏng.

Link budget: group nó, không dump nó

Có không được ghi lại hard limit on cách nhiều links một mega menu có thể có. Đó old “100 links per page” (bản dịch) «100 links theo trang» rule là một flat myth — đó liên kết nội bộ bài viết debunks điều này trong đầy đủ, so I sẽ không re-argue điều này ở đây. Google line là đó có không magical ideal number.

Nhưng “không limit” không có nghĩa là “dump everything in.” (bản dịch) «dump mọi thứ trong.» Đó real lever không thô count — đây là organization. Này là nơi Mueller thực tế mega-menu câu trả lời là hữu ích. Trong một 2021 Tìm kiếm Central hangout (reported by Barry Schwartz), ai đó described một mega menu với over 1 000 links và một traffic drop sau moving những links từ hover-loaded để static HTML. Mueller practical concern đã không đó number — điều này đã là liệu một huge, undifferentiated set of giống nhau-cấp độ links flattens đó topical grouping. As he put điều này, going cũng flat có nghĩa là “we think, oh, all of these are equally important, and we don’t really know which of these are connected to each other,” (bản dịch) «we think, oh, all of những là equally quan trọng, và we không thực sự know mà of những là connected để mỗi other,» whereas “a pyramid structure helps us a lot more to understand the context of individual pages.” (bản dịch) «một pyramid structure helps us một lot hơn để understand đó context of riêng lẻ các trang.» Notably, he cũng treated reverting some of những 1 000 links để hover-loading — trong khi giữ một crawl path để them qua other, hơn relevant các trang — as một legitimate structural cách sửa, không điều gì đó inherently bad.

practical takeaway: well-organized 150-link mega menu với clear cột các header (Men / Women / Kids’, sau đó subcategories dưới mỗi) preserves hierarchy tín hiệu. unorganized wall của 150 links với không grouping không — ngay cả tại giống hệt count. So:

• Group by thực category boundaries. Các cột và headings đó mirror của bạn thực tế trang web hierarchy.
• giữ các cột scannable. handful của items theo group, không alphabetical soup của mọi thứ.
• giữ anchor text descriptive và cụ thể. Link text đó mô tả đích — không “Shop hiện tại” repeated thirty times.
• không làm nó exhaustive. mega menu là cho cao-cấp độ phát hiện paths. của bạn đúng priority các trang nên cũng earn contextual, trong-nội dung links, không rely solely on global menu (mà repeats identically on mỗi trang và spreads giống nhau “importance” tín hiệu mọi nơi).

Mobile equivalents cần giống nhau links, không nhỏ hơn UI

On mobile của bạn mega menu becomes hamburger hoặc accordion. trap là nhóm trimming mobile menu cho UX cleanliness và, trong đang làm so, dropping destinations đó existed chỉ on desktop mega menu. Google mobile-đầu tiên lập chỉ mục hướng dẫn là rõ ràng đó mobile nội dung — navigation được bao gồm — nên là tương đương để desktop. nếu của bạn mobile nav là nơi lập chỉ mục happens (và dưới mobile-đầu tiên lập chỉ mục, nó là), links bạn dropped ở đó có thể là được xem như ít hơn quan trọng, hoặc — nếu mega menu là của họ chỉ liên kết nội bộ — go undiscovered hoàn toàn.

So chạy giống nhau audit on mobile đó bạn chạy on desktop: pull lên mobile nav được kết xuất HTML, xác nhận giống nhau destinations là present, và xác nhận mỗi là thực <a href>. giống nhau crawlability kiểm thử, giống nhau parity kiểm thử — chỉ on nhỏ hơn UI.

đó covers destinations. nó không cover interaction — tách biệt kiểm tra, và một nhóm skip. Mobile-đầu tiên lập chỉ mục requires quan trọng đích đặt để là present, không giống hệt interaction layout, so hamburger/accordion là fine as pattern. nhưng whatever disclosure pattern bạn sử dụng cần của nó own keyboard và focus kiểm thử: có thể keyboard-chỉ người dùng reach trigger, open nó, và tab qua destinations, với chính xác aria-expanded state? WAI-ARIA disclosure navigation pattern là worked ví dụ của đó behavior — treat nó as một conforming implementation, không chỉ một. Kiểm thử đích parity và disclosure/keyboard behavior as hai tách biệt truyền/fail kiểm tra, since menu có thể truyền một và fail khác.

Một nhiều hơn myth: dữ liệu có cấu trúc không phải crawlability khắc phục

Some mega-menu các hướng dẫn present SiteNavigationElement schema markup as nếu điều này làm một menu crawlable. Điều này không. Dữ liệu có cấu trúc có thể mô tả của bạn navigation semantically, nhưng điều này không phải một substitute cho real crawlable links — đó giống nhau principle đó liên kết nội bộ bài viết covers, nơi Mueller notes đó ngay cả khi bạn cung cấp URLs trong dữ liệu có cấu trúc, “we don’t use those URLs in the same way as we would use normal internal links on a page.” (bản dịch) «we không dùng những URLs trong cùng cách as we sẽ dùng thông thường liên kết nội bộ on một trang.» Schema là một layer bạn thêm on top of đã-crawlable <a href> links, không bao giờ thay vì them.

Điều gì những điều này kiểm tra làm — và không — bảo đảm

thực anchors, nguồn-visible links, grouped structure, mobile parity, và keyboard-operable disclosure xóa cụ thể thất bại modes covered trên: undiscovered các trang, flattened topical structure, hỏng parity, và inaccessible navigation. None của nó bảo đảm crawling, lập chỉ mục, cao hơn thứ hạng, nhiều hơn traffic, hoặc AI citation — những điều đó phụ thuộc on far nhiều hơn navigation markup. Treat nguồn/được kết xuất anchors, crawler extraction, desktop/mobile đích parity, và keyboard/focus behavior as tách biệt truyền/fail các kiểm thử, không một bundled khắc phục; mega menu có thể truyền some của những điều này và fail others.

nên của bạn trang web ngay cả có mega menu?

Briefly, vì đầy đủ flat-so với-deep argument lives trong trang web architecture và trang web structure các bài viết: mega menu earns của nó place Khi của bạn trang web là lớn đủ đó cross-category phát hiện là genuine người dùng journey và surfacing deep category các trang từ mọi nơi meaningfully cuts nhấp depth (nó một của best tools cho giữ quan trọng các trang trong một vài clicks của homepage — và cho hitting Bing khoảng three-clicks-từ-home đích). nếu của bạn catalog là nhỏ, hoặc dài tail của menu items barely nhận đã nhấp, mega menu là overhead bạn không cần. quyết định liệu để có một trước khi bạn obsess over Cách để xây dựng nó — cây quyết định lens walks qua nó.

AI summary

condensed take on Nâng cao version:

• ** mega menu là chỉ liên kết nội bộ trong bigger UI.** mỗi internal-link rule áp dụng unchanged — starting với: mỗi link phải là thực <a href>.
• ** #1 thực-world thất bại:** JS nhấp/hover flyout whose links không phải thực anchors (onclick, routerLink với không href, hoặc DOM injected chỉ on interaction). nó looks linked để người dùng nhưng Google có thể’t crawl nó — và nếu mega menu là trang chỉ liên kết nội bộ, đó trang nhận orphaned. thất bại là silent, so nó survives human QA.
• Verify với View Nguồn, không Inspect Element. View Nguồn hiển thị thô máy chủ HTML; nếu links xuất hiện ở đó as <a href>, họ’re safe. cũng sử dụng GSC URL Inspection.
• Safe pattern: máy chủ-được kết xuất <a href> links progressively enhanced với JS cho animation — không links đó phụ thuộc on JS để exist.
• Hidden-cho đến khi-hover không phải excluded outright. Mueller và hiện tại mobile-đầu tiên tài liệu chẳng hạn nội dung trong HTML nhưng visually hidden (flyouts, accordions, tabs) là taken vào account — nhưng Google hasn’t được ghi lại đó nó carries giống hệt xếp hạng weight để luôn-visible nội dung; đó tách biệt, open câu hỏi. nuance: CSS-hidden links = fine, evaluated thông thường; fetched-chỉ-on-interaction (AJAX-on-hover) links = có thể không bao giờ là được crawl. những điều đó là khác thất bại modes.
• Không mega-menu thay đổi bảo đảm outcome. thực anchors, nguồn-visible links, grouped structure, mobile parity, và keyboard-operable disclosure xóa cụ thể thất bại modes — họ không bảo đảm crawling, lập chỉ mục, cao hơn thứ hạng, traffic, hoặc AI citation. Validate mỗi kiểm tra (nguồn/được kết xuất anchors, crawler extraction, desktop/mobile parity, keyboard và focus behavior) riêng.
• Không hard link-count ceiling (100-link rule là myth). thực lever là organization: group by category, scannable các cột, descriptive anchor text. Mueller mega-menu câu trả lời hiển thị concern là flattening grouping tín hiệu, không thô count.
• Mobile cần giống nhau crawlable links, không trimmed hamburger — Google expects mobile nội dung parity.
• Dữ liệu có cấu trúc (SiteNavigationElement) không phải substitute cho thực crawlable links.

Tài liệu chính thức

có không Google hoặc Bing doc scoped cụ thể để “mega menus.” All chính thức hướng dẫn là chung link-crawlability, anchor-text, và mobile-đầu tiên tài liệu applied để điều này UI pattern. Ở đây là relevant chính sources.

Google

• SEO link thực hành tốt nhất — crawlable-<a href> requirement và list của non-được khuyến nghị link formats (không href, onclick, non-anchor tags) đó mega-menu flyouts commonly break. Đây là foundational doc.
• Mobile-đầu tiên lập chỉ mục thực hành tốt nhất — nội dung parity giữa mobile và desktop, và rõ ràng note đó moving nội dung vào accordions hoặc tabs cho mobile là fine miễn là nó vẫn giữ tương đương.
• Trong-Depth Hướng dẫn để Cách Google Search Hoạt động — chung URL-phát hiện context: links là Cách Google tìm thấy phần lớn new các trang.

Bing / Microsoft

• Bing Quản trị viên web Guidelines — không mega-menu-cụ thể nội dung, nhưng Bing chung hướng dẫn (giữ quan trọng các trang trong khoảng three clicks của homepage, và heavier reliance on XML sitemaps cho phát hiện) là relevant backdrop. vì Bing leans nhiều hơn on sitemaps, mega menu đó accidentally orphans các trang là comparatively bigger risk ở đó — ít hơn alternate phát hiện paths làm fallback quan trọng nhiều hơn.

Schema.org

• SiteNavigationElement — navigation schema loại. hữu ích as semantic enhancement layered bên cạnh thực links; không crawlability khắc phục.

Accessibility (WAI-ARIA / WCAG)

• WAI-ARIA disclosure navigation menu ví dụ — worked ví dụ của keyboard-operable disclosure behavior cho chính xác điều này UI pattern. nó ví dụ implementation, không chỉ conforming một.
• WCAG 2,2 — Understanding thành công Criterion 2.1.1: Keyboard — underlying requirement đó mega menu trigger và flyout là operable không có mouse.

Quotes từ nguồn

On—record statements relevant để building crawlable, well-structured mega menu.

Google — crawlable-link requirement (SEO link thực hành tốt nhất)

• “Google can only crawl your link if it’s an <a> HTML element (also known as anchor element) with an href attribute.” (bản dịch) «Google có thể chỉ crawl của bạn link nếu đây là an thẻ một HTML element (cũng known as anchor element) với an href thuộc tính.» Nhảy đến trích dẫn

John Mueller, Google — hidden/tabbed nội dung là được lập chỉ mục giống nhau as visible nội dung

• “No. Specifically when it comes to content on mobile pages we do take into account anything that’s in the HTML. So if there’s something there that might be visible to users at some point we will include that… so that’s completely normal.” (bản dịch) «Không. Cụ thể khi điều này xuất hiện để nội dung on mobile các trang we làm take vào account bất cứ điều gì đó là trong đó HTML. So nếu có điều gì đó ở đó có thể là visible để người dùng tại some point we sẽ bao gồm đó… so đó là completely thông thường.» (asked trực tiếp liệu nội dung hidden behind tabs/accordions là devalued dưới mobile-đầu tiên lập chỉ mục) Đọc bài đưa tin

John Mueller, Google — flat so với. pyramid, trong context của 1 000-link mega menu

• “If it’s very flat, then we think, oh, all of these are equally important, and we don’t really know which of these are connected to each other.” (bản dịch) «Nếu đây là very flat, thì we think, oh, all of những là equally quan trọng, và we không thực sự know mà of những là connected để mỗi other.» Đọc bài đưa tin
• “A pyramid structure helps us a lot more to understand the context of individual pages within the site.” (bản dịch) «MỘT pyramid structure helps us một lot hơn để understand đó context of riêng lẻ các trang trong đó site.» / “I don’t think it would always have a negative effect.” (bản dịch) «I không think điều này sẽ luôn có một negative effect.» (on going từ ~1 000 flat mega-menu links để một deeper structure) Đọc bài đưa tin

John Mueller, Google — dữ liệu có cấu trúc không phải substitute cho thực liên kết nội bộ

• “Even if in the structured data you also provide URLs, we don’t use those URLs in the same way as we would use normal internal links on a page.” (bản dịch) «Ngay cả khi trong đó dữ liệu có cấu trúc bạn cũng cung cấp URLs, we không dùng những URLs trong cùng cách as we sẽ dùng thông thường liên kết nội bộ on một trang.»

nên bạn có mega menu — và là yours safe?

điều này walks hai các câu hỏi đó thực ra quan trọng: nên điều này trang web có mega menu, và nếu nó có một, là nó được xây dựng trong way Google có thể crawl? cho đầy đủ flat-so với-deep structural argument, see trang web architecture và trang web structure các bài viết trong điều này cluster.

Mega menu SEO checklist

Hoạt động nó top để bottom — crawlability đầu tiên, structure thứ hai, mobile cuối cùng:

• mỗi flyout link là thực <a href> — không onclick, không routerLink / router thuộc tính không có href, không non-anchor tag styled as link.
• Links xuất hiện trong View trang Nguồn, không chỉ trong Inspect Element / trực tiếp DOM ( khác biệt giữa máy chủ-được kết xuất và JS-chỉ).
• Flyout HTML là trong ban đầu trang, hidden với CSS — không fetched qua API call on hover/nhấp.
• URL Inspection (GSC) xác nhận menu links là present trong được crawl / được kết xuất HTML.
• JavaScript enhances, không tạo — JS xử lý hover animation và interactivity; links exist không có nó.
• Không orphaned destinations — không quan trọng trang relies on mega menu as của nó chỉ liên kết nội bộ (cross-kiểm tra với contextual trong-nội dung links).
• Links là grouped by category với cột các header đó mirror của bạn trang web hierarchy — không ungrouped wall.
• Các cột là scannable — handful của items theo group, không alphabetical dump của mọi thứ.
• Anchor text là descriptive và cụ thể để mỗi đích — không generic “Shop hiện tại” repeated trên dozens của links.
• ** menu là selective, không exhaustive** — cao-cấp độ phát hiện paths, với priority các trang cũng earning contextual links.
• Mobile hamburger/accordion có giống nhau links as desktop mega menu (nội dung parity).
• Mobile links là cũng thực <a href> — chạy giống nhau View Nguồn / URL Inspection kiểm tra on mobile nav.
• Dữ liệu có cấu trúc (SiteNavigationElement), nếu được sử dụng, sits bên cạnh thực links — không bao giờ as substitute cho them.
• Re-kiểm tra sau khi front-end upgrades — framework thay đổi là nơi thực links âm thầm become nhấp handlers.

Mega menu SEO — bảng tra nhanh

Crawlable so với. không

** hai thất bại modes mọi người conflate**

• CSS-hidden (links trong đó DOM, panel hidden until hover) → được lập chỉ mục thông thường.
• Fetched-on-interaction (links không exist until an event fires) → có thể không bao giờ là được crawl. Này là một crawlability bug, không một “hidden content is discounted” (bản dịch) «hidden nội dung là discounted» vấn đề.

Myth so với. reality

Nhanh verify

• View trang Nguồn (không Inspect) → tìm kiếm cho menu link → là nó <a href>?
• GSC URL Inspection → được crawl/được kết xuất HTML có links?
• Mobile: repeat cả hai kiểm tra on hamburger/accordion menu.

Good so với. bad mega-menu markup

Bad: JS-chỉ flyout

Links đó không exist cho đến khi JavaScript chạy — Google có thể’t reliably follow bất kỳ của những điều này:

<nav class="mega">
  <button class="trigger" onclick="openFlyout('shoes')">Shoes</button>
  <div class="flyout" id="shoes-flyout" hidden>
    <!-- injected by JS after the click; empty in the server HTML -->
    <span class="menu-link" data-url="/shoes/mens/">Men's shoes</span>
    <span class="menu-link" data-url="/shoes/womens/">Women's shoes</span>
    <a routerLink="/shoes/kids/">Kids' shoes</a>          <!-- no href -->
    <a onclick="go('/shoes/sale/')">Sale</a>              <!-- onclick, no href -->
  </div>
</nav>

mỗi đích ở đây là invisible để crawler: <span> “links” không phải anchors, routerLink có không href, và onclick anchor có không có gì để follow. nếu những điều này các trang có không khác liên kết nội bộ, họ’re orphaned.

Good: máy chủ-được kết xuất links, progressively enhanced

links là thực <a href> elements sitting trong máy chủ HTML; JavaScript chỉ adds hover behavior:

<nav class="mega" aria-label="Primary">
  <ul>
    <li>
      <a href="/shoes/">Shoes</a>
      <div class="flyout">          <!-- CSS: display:none until hover/focus -->
        <div class="col">
          <h3>Men's</h3>
          <ul>
            <li><a href="/shoes/mens/running/">Men's running shoes</a></li>
            <li><a href="/shoes/mens/boots/">Men's boots</a></li>
          </ul>
        </div>
        <div class="col">
          <h3>Women's</h3>
          <ul>
            <li><a href="/shoes/womens/running/">Women's running shoes</a></li>
            <li><a href="/shoes/womens/boots/">Women's boots</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</nav>

/* Hidden until hover — links are still in the DOM, so they're crawled normally */
.flyout { display: none; }
.mega li:hover > .flyout,
.mega li:focus-within > .flyout { display: block; }

Mọi thứ ở đây là crawlable trong thô HTML, và hiding panel với CSS không thay đổi đó — CSS-hidden nội dung là được lập chỉ mục giống nhau as visible nội dung.

Tốt hơn vẫn: grouped, không wall

hai markups dưới có giống nhau link count nhưng tell Google rất khác điều. On left, ungrouped dump; on right, giống nhau links grouped dưới headings đó mirror của bạn hierarchy.

<!-- Structurally flat: an ungrouped wall -->
<div class="flyout">
  <a href="/shoes/mens/running/">Men's running</a>
  <a href="/shoes/womens/running/">Women's running</a>
  <a href="/shoes/kids/">Kids'</a>
  <a href="/shoes/mens/boots/">Men's boots</a>
  <a href="/shoes/sale/">Sale</a>
  <a href="/shoes/womens/boots/">Women's boots</a>
  <!-- ...140 more, no structure... -->
</div>

<!-- Grouped: the hierarchy is legible -->
<div class="flyout">
  <div class="col"><h3>Men's</h3>
    <ul><li><a href="/shoes/mens/running/">Running</a></li>
        <li><a href="/shoes/mens/boots/">Boots</a></li></ul></div>
  <div class="col"><h3>Women's</h3>
    <ul><li><a href="/shoes/womens/running/">Running</a></li>
        <li><a href="/shoes/womens/boots/">Boots</a></li></ul></div>
  <div class="col"><h3>Kids &amp; Sale</h3>
    <ul><li><a href="/shoes/kids/">Kids' shoes</a></li>
        <li><a href="/shoes/sale/">Sale</a></li></ul></div>
</div>

Cả hai là crawlable. chỉ grouped version preserves category relationships đó let Google understand mà các trang belong together.

Mega-menu anti-patterns

recurring ways mega menus break, và Điều gì để làm thay vì.

1. Links đó là nhấp handlers, không anchors. kinh điển. onclick, routerLink/router thuộc tính với không href, hoặc <span> styled as link. Looks fine để human; crawler có thể’t follow nó. → sử dụng thực <a href> links, enhanced với JS cho behavior.

2. Flyout HTML fetched on hover. panel nội dung là pulled từ API chỉ sau khi hover/nhấp fires, so links không exist trong trang cho đến khi người dùng acts. → Put links trong ban đầu HTML; hide panel với CSS thay vì.

3. Trusting được kết xuất trang thay vì nguồn. Kiểm tra menu trong Inspect Element ( trực tiếp DOM) hides chính xác JS-chỉ bug bạn nên là hunting. → sử dụng View trang Nguồn và GSC URL Inspection.

4. undifferentiated link wall. Hundreds của giống nhau-cấp độ links dumped vào một panel với không grouping. Không link-count rule là hỏng, nhưng topical grouping tín hiệu là flattened. → Group by category với headings đó mirror của bạn hierarchy; giữ nó selective.

5. Generic, repeated anchor text. “Shop hiện tại,” “View all,” “Nhấp ở đây” repeated trên dozens của destinations tells các công cụ tìm kiếm không có gì về nơi mỗi link goes. → Descriptive anchor text cụ thể để mỗi đích.

6. trimmed mobile menu. Dropping links từ hamburger/accordion cho cleaner mobile UI breaks mobile-đầu tiên nội dung parity — và có thể orphan các trang whose chỉ link là desktop mega menu. → giữ giống nhau links, và verify họ’re thực anchors on mobile cũng.

7. Treating schema as crawlability khắc phục. Thêm SiteNavigationElement markup over JS-chỉ links và assuming nó làm them crawlable. nó không. → Schema là semantic layer bên cạnh đã-crawlable links, không bao giờ replacement.

8. Believing hidden-until-hover là discounted. Building elaborate workarounds làm đó old “hidden content is devalued” (bản dịch) «hidden nội dung là devalued» myth. CSS-hidden links trong đó DOM là được lập chỉ mục thông thường. → không over-engineer khoảng một myth; chỉ hãy bảo đảm đó links là thực ra trong đó HTML.

Mega menu các vấn đề để diagnose

Links xuất hiện để hoạt động, nhưng crawler không thể discover them

Symptom: Clicking menu item trong trình duyệt opens đích, nhưng URL là absent từ crawl đó đã bắt đầu tại home trang. có khả năng nguyên nhân: item là div, button, hoặc JavaScript handler thay vì anchor với href. khắc phục: Render thực <a href="/destination/"> trong HTML, sau đó crawl từ home trang again và xác nhận đích xuất hiện as internal outlink.

Desktop links là crawlable nhưng mobile links disappear

Symptom: quan trọng categories là present trong desktop menu nhưng absent từ mobile DOM. có khả năng nguyên nhân: mobile menu dùng tách biệt, shortened dữ liệu nguồn. khắc phục: Cho mobile accordion giống nhau quan trọng destinations as desktop menu và xác nhận anchors exist trước khi bất kỳ tap.

flyout opens on hover nhưng không với keyboard

Symptom: Mouse người dùng có thể reach panel, trong khi tab và enter không expose nó. có khả năng nguyên nhân: interaction phụ thuộc chỉ on hover. khắc phục: Làm trigger button với keyboard xử lý và chính xác aria-expanded state; giữ đích links as thông thường anchors.

Reach, Render, Restrain framework

sử dụng three kiểm tra Khi reviewing bất kỳ mega menu:

1. Reach: có thể người dùng và crawler reach mỗi quan trọng đích qua thực anchor, on desktop và mobile?
2. Render: là những điều đó anchors present trong delivered hoặc được kết xuất HTML không có requiring hover, nhấp, hoặc API phản hồi?
3. Restrain: là menu limited để destinations đó deserve sitewide links, grouped dưới hữu ích headings thay vì becoming trang web map trong dropdown?

menu fails nếu bất kỳ một của three breaks. Reach bảo vệ phát hiện, Render bảo vệ implementation, và Restrain bảo vệ hierarchy và usability.

Inspect mega-menu links trong trình duyệt

Chạy điều này trong Chrome DevTools Console trong khi menu là closed. nó lists anchors bên trong phổ biến navigation containers và flags entries không có href:

const links = [...document.querySelectorAll('header nav a, [role="navigation"] a')];
console.table(links.map(a => ({ text: a.textContent.trim(), href: a.getAttribute('href'), crawlable: a.hasAttribute('href') })));

Chạy giống nhau snippet tại desktop và mobile viewport widths. đích đó tồn tại trong chỉ một kết quả đặt cần review.

Extract navigation destinations trong crawl

sử dụng điều này XPath trong crawler custom extraction feature để collect menu các URL:

//header//nav//a[@href]/@href | //*[@role='navigation']//a[@href]/@href

union covers semantic nav elements và navigation regions identified với ARIA role. So sánh extracted đặt với approved navigation inventory rather hơn assuming mỗi nhấp đích là link.

các tài nguyên worth của bạn time

My related writing

• Liên kết nội bộ Đối với SEO: Actionable Hướng dẫn — đầy đủ Ahrefs hướng dẫn on Cách liên kết nội bộ truyền PageRank, không-fixed-link-limit cách diễn đạt, và anchor text — tất cả mà là Điều gì mega menu là thực sự đã làm của.
• Người mới bắt đầu Hướng dẫn để kỹ thuật SEO — nơi navigation và crawlability fit vào bigger kỹ thuật picture.
• JavaScript SEO Các vấn đề & Thực hành tốt nhất — kết xuất/JS side đó behind phần lớn hỏng mega-menu flyouts.

Chính thức

• Google SEO link thực hành tốt nhất — canonical reference cho Điều gì làm link crawlable.
• Google Mobile-đầu tiên lập chỉ mục thực hành tốt nhất — nội dung-parity requirement của bạn mobile menu có để đáp ứng.

từ khoảng ngành

• Google Mueller On Myth của Hidden Tab nội dung (công cụ tìm kiếm Journal) — trực tiếp Mueller statement đó hidden-cho đến khi-interaction nội dung là được lập chỉ mục giống nhau as visible nội dung.
• Google Khuyến nghị Pyramid Navigation Structure cho Lớn Các trang (công cụ tìm kiếm Roundtable) — Mueller đầy đủ câu trả lời để 1 000-link mega-menu câu hỏi; nguồn cho link-budget hướng dẫn ở đây.
• Tabbed nội dung: là nó Google Xếp hạng Factor? (công cụ tìm kiếm Journal) — history của hidden-nội dung debate và Vì sao old “discounted” line là outdated.
• Google: nội dung Trong Tabs hoặc Nhấp để Expand Boxes là Discounted (công cụ tìm kiếm Roundtable) — older, hiện tại-superseded hướng dẫn, hữu ích cho understanding nơi myth nghĩ ra từ.
• Mega Menus & SEO (MagsTags) — link-equity-theory-nặng treatment, including worked ví dụ của Cách big menu spreads PageRank; hữu ích background, không Google-sourced.
• r/TechSEO — community cho gỡ lỗi orphaned các trang và crawlability các vấn đề, mà là nơi phần lớn mega-menu các vấn đề thực ra surface.

Tự kiểm tra: Mega Menu SEO

Five nhanh các câu hỏi on building crawlable, well-structured mega menu. Pick câu trả lời cho mỗi, sau đó kiểm tra.

Nhật ký thay đổi