Panduan Mega Menu SEO

TL;DR — sebuah mega menu adalah sebuah big navigation dropdown itu menampilkan lots dari tautan di once, grouped ke columns. untuk SEO ini adalah hanya tautan internal, so aturan adalah sama: setiap tautan seharusnya menjadi sebuah nyata <a href> so Google dapat reliably ikuti ini. paling umum mistake adalah membangun flyout dengan JavaScript click handlers alih-alih nyata tautan — ini looks fine untuk sebuah person, tetapi mesin pencari dapat’t crawl ini. pada mobile ( hamburger menu), pastikan Anda dipertahankan yang sama tautan.

What sebuah mega menu adalah

sebuah mega menu adalah sebuah disclosed navigation panel — hidden until Anda hover atau click sebuah top-tingkat menu item — itu opens untuk tampilkan sebuah lot dari tautan di once, arranged di columns oleh category so mereka’re easy untuk scan. sebuah normal dropdown gives Anda sebuah single pendek list. sebuah mega menu gives Anda “Shoes” (terjemahan) “Shoes” opening ke Men’s, Women’s, dan Kids’ columns, setiap dengan -nya own subcategories. Big online stores gunakan them because mereka let sebuah shopper jump untuk sebuah deep category halaman dari anywhere pada situs di one click.

penting thing untuk memahami: sebuah mega menu adalah hanya sebuah pile dari tautan internal di sebuah fancy container. Everything itu’s benar tentang tautan internal umumnya adalah benar here. jika Anda haven’t read tautan internal write-up di ini cluster, start there — ini halaman adalah practical, “how do I not break it” (terjemahan) “how melakukan I not break ini” companion.

one aturan itu penting sebagian besar

untuk sebuah mesin pencari untuk ikuti sebuah tautan, ini memiliki untuk menjadi sebuah nyata HTML tautan — sebuah <a> element dengan sebuah href:

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

itu’s ini. jika Anda mega menu’s tautan adalah nyata <a href> tautan, Anda’re 90% dari cara there. trouble starts when sebuah developer membangun flyout dengan JavaScript “click to go here” (terjemahan) “click untuk go here” perilaku alih-alih actual tautan. untuk sebuah person, ini looks identical — Anda click dan halaman memuat. untuk Google, there’s nothing untuk ikuti, so itu halaman dapat quietly go undiscovered.

cara periksa yours

Right-click halaman dan choose View halaman Source (not “Inspect” (terjemahan) “Inspect”) dan search untuk one dari Anda menu tautan. jika ini menampilkan up sebagai <a href="..."> di itu raw source, baik. jika Anda menu tautan hanya appear when Anda gunakan Inspect Element ( live, JavaScript-dibangun versi) tetapi not di View Source, itu’s warning sign untuk hand Anda developer.

Don’t forget mobile

pada phones Anda mega menu becomes sebuah hamburger atau accordion menu. Teams sering trim itu menu untuk pertahankan ini tidy — dan accidentally drop tautan itu hanya existed there. Google ingin Anda mobile konten untuk match Anda desktop konten, so run yang sama periksa pada mobile menu: adalah yang sama tautan there, dan adalah mereka nyata <a href> tautan?

ingin deeper versi — JavaScript failure mode di detail, whether hidden-until-hover konten adalah discounted, how banyak tautan adalah too banyak, dan sebuah baik-vs-buruk markup contoh? Switch untuk Advanced tab.

TL;DR — sebuah mega menu adalah tautan internal wearing sebuah bigger UI, so setiap aturan dari tautan internal write-up applies unchanged — starting dengan <a href> requirement. #1 dunia nyata failure adalah sebuah JS click/hover flyout whose tautan aren’t nyata anchors: ini looks ditautkan untuk sebuah pengguna tetapi Google dapat’t crawl ini, silently orphaning halaman jika menu adalah mereka hanya internal tautan. Verify dengan View Source, not Inspect. konten hidden until hover isn’t automatically discounted untuk menjadi hidden sebagai panjang sebagai ini adalah di initial HTML dan not fetched hanya pada interaction — CSS-hidden adalah fine; AJAX-pada-hover adalah risk. Google says ini takes itu konten ke account, though ini hasn’t documented identical peringkat weight untuk selalu-terlihat konten. No hard tautan-count ceiling exists ( 100-tautan aturan adalah sebuah myth), tetapi organization adalah nyata lever: group oleh category dengan scannable columns dan descriptive teks jangkar so Anda tidak pancake Anda topical structure. Mobile hamburger/accordion perlu sama dapat di-crawl tautan, not sebuah trimmed versi. data terstruktur adalah not sebuah substitute untuk nyata tautan.

Start here: sebuah mega menu adalah hanya tautan internal

I ingin untuk set expectations sebelum getting ke specifics. ada nothing magical atau separate tentang “mega menu SEO.” (terjemahan) “mega menu SEO.” sebuah mega menu adalah sebuah navigation component dibangun entirely dari tautan internal, dan setiap aturan itu governs tautan internal umumnya — dapat di-crawl-tautan requirement, descriptive teks jangkar, fact itu there’s no magic tautan-count limit — applies here dengan zero modification. I’m not going untuk re-derive itu; tautan internal artikel di ini cluster covers them, dan ini halaman cross-references ini repeatedly.

What membuat mega menus worth mereka own halaman adalah itu mereka melakukan one thing normal navigation doesn’t: mereka cram sebuah unusually besar angka dari tautan ke sebuah single, repeated, sitewide UI element. itu concentration adalah what raises two distinct risks — sebuah implementation risk (JavaScript flyouts itu tidak pernah render nyata tautan) dan sebuah structural risk (di atas-flattening Anda situs so Google loses grouping signal). structural side — flat-vs-deep, pyramid-vs-pancake argument — adalah sudah covered di situs architecture dan situs web structure artikel di ini cluster, including Mueller’s line itu di atas-flattening sebuah situs dengan sebuah mega menu dapat membuat ini so “Google can’t recognize which parts of the site belong together.” (terjemahan) “Google dapat’t recognize which bagian dari situs belong together.” I’m not going untuk re-litigate itu here. ini halaman adalah tentang practical bangun.

single sebagian besar umum failure: JS handlers alih-alih nyata tautan

Here’s one I see break di wild more daripada apa pun lainnya. sebuah team membangun sebuah mega menu — sering dengan sebuah older jQuery plugin, atau sebuah hand-rolled React/Vue component — dan flyout’s “links” (terjemahan) “tautan” adalah actually click handlers, sebuah router attribute dengan no href, atau konten itu hanya gets injected ke DOM setelah sebuah hover atau click event fires. Google’s own list dari tautan formats ini dapat’t reliably crawl maps directly onto exactly ini 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 -->

alasan ini one adalah so dangerous adalah itu ** failure adalah silent.** halaman look ditautkan — sebuah human hovers, sees flyout, clicks, dan lands pada category halaman. Nothing appears broken. tetapi itu destination halaman get zero crawl dan zero tautan-equity credit dari mega menu, dan jika mega menu adalah mereka hanya internal tautan, mereka become orphan halaman (see tautan internal artikel pada why orphans adalah sebuah penemuan dead end). Anda dapat memiliki sebuah entire category tree itu’s invisible untuk Google while looking perfectly navigable untuk setiap human who tests ini. itu’s why ini survives QA: humans don’t experience bug.

cara verify sebuah mega menu adalah actually dapat di-crawl

Don’t trust rendered halaman — periksa source.

• View halaman Source, not Inspect Element. Right-click → View halaman Source menampilkan raw HTML server dikirim. Inspect Element menampilkan live DOM setelah JavaScript memiliki run, which hides exactly masalah Anda’re hunting. jika Anda flyout tautan appear sebagai <a href="..."> di View Source, mereka’re server-rendered dan safe. jika mereka hanya tampilkan up di Inspect view, itu’s Anda red flag.
• pemeriksaan URL alat (GSC). Run halaman melalui Search Console’s pemeriksaan URL dan lihat rendered HTML / di-crawl halaman. ini tells Anda what Googlebot actually ended up dengan.

nuance worth stating plainly: yes, Google renders JavaScript now, so sebuah JS-dibangun menu mungkin get di-crawl. tetapi “might” (terjemahan) “mungkin” adalah operative kata. verifiable, safe pattern adalah server-rendered <a href> tautan, progressively enhanced dengan JavaScript untuk hover animation dan interactivity — not tautan itu depend pada JS untuk exist di semua. gunakan JS untuk membuat menu behave, not untuk membuat tautan exist.

adalah hidden-until-hover konten discounted?

ini adalah pertanyaan everyone eventually menanyakan tentang mega menus, dan ini adalah one place where old SEO folklore adalah genuinely outdated. sebuah mega-menu flyout adalah hidden until Anda hover ini — melakukan Google discount semua itu tautan because mereka’re not terlihat pada muat?

Not automatically — tetapi menjadi precise tentang what itu berarti, because ini adalah where people overclaim. saat ini Google guidance dan John Mueller’s own statement say konten present di HTML tetapi visually hidden — inside sebuah hover flyout, sebuah closed accordion, sebuah inactive tab — adalah taken ke account, not excluded outright. Mueller, ditanyakan directly whether hidden tab/accordion konten adalah devalued di bawah mobile-pertama pengindeksan: “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” (terjemahan) “No. Specifically when ini comes untuk konten pada mobile halaman kami melakukan take ke account anything itu’s di HTML. So jika there’s something there itu mungkin menjadi terlihat untuk pengguna di beberapa poin kami akan sertakan itu… so itu’s completely normal” (reported oleh Roger Montti di mesin pencari Journal’s write-up dari myth). Google’s pengindeksan mobile-pertama docs back ini operationally, telling Anda ini adalah fine untuk move konten “into accordions or tabs” (terjemahan) “ke accordions atau tabs” untuk mobile UX sebagai panjang sebagai ini stays equivalent untuk desktop.

What itu quote actually establishes adalah availability — konten gets di-crawl, rendered, dan considered, alih-alih thrown out. ini doesn’t establish itu hover-hidden konten carries identical peringkat weight untuk selalu-terlihat konten; Google hasn’t published anything pada itu spesifik pertanyaan either cara, so treat ini sebagai undocumented alih-alih assuming equivalence. pertahankan two pertanyaan separate: adalah ini excluded outright (no — settled) versus melakukan ini peringkat exactly like terlihat konten (not documented).

ini supersedes older (roughly 2015–2016-era) line itu konten behind tabs dan click-untuk-expand boxes carried less peringkat weight — itu spesifik claim adalah dead. What record actually mendukung adalah narrower: hidden-di-HTML konten isn’t discounted out dari hand, tetapi no one memiliki documented itu -nya weighting adalah identical untuk terlihat konten. jika Anda’ve heard old “discounted” (terjemahan) “discounted” versi, ini adalah what changed — don’t swap ini untuk sebuah equally unsupported “definitely equal” (terjemahan) “definitely equal” versi.

tetapi there’s sebuah nuance itu trips people up, dan ini adalah whole game: “hidden via CSS” (terjemahan) “hidden via CSS” dan “fetched only on interaction” (terjemahan) “fetched hanya pada interaction” adalah two completely berbeda things.

• sebuah flyout itu’s display:none until hover, dengan tautan sudah sitting di DOM, adalah fine — terindeks normally.
• sebuah flyout whose HTML adalah fetched via sebuah API panggil triggered oleh hover event dapat tidak pernah menjadi di-crawl di semua.

itu’s not sebuah “hidden content is discounted” (terjemahan) “hidden konten adalah discounted” masalah — ini adalah sebuah crawlability masalah. tautan don’t exist until sebuah pengguna melakukan something, so sebuah crawler tidak pernah sees them. Conflating itu two failure modes adalah exactly how myth survives. pertahankan them separate: CSS-hidden tautan = fine; AJAX-pada-interaction tautan = broken.

tautan budget: group ini, don’t dump ini

ada no documented hard limit pada how banyak tautan sebuah mega menu dapat memiliki. old “100 links per page” (terjemahan) “100 tautan per halaman” aturan adalah sebuah flat myth — tautan internal artikel debunks ini di full, so I won’t re-argue ini here. Google’s line adalah itu there’s no magical ideal angka.

tetapi “no limit” (terjemahan) “no limit” tidak berarti “dump everything in.” (terjemahan) “dump everything di.” nyata lever isn’t raw count — ini adalah organization. ini adalah where Mueller’s actual mega-menu jawaban adalah berguna. di sebuah 2021 Search Central hangout (reported oleh Barry Schwartz), someone described sebuah mega menu dengan di atas 1 000 tautan dan sebuah traffic drop setelah moving itu tautan dari hover-dimuat untuk static HTML. Mueller’s practical concern wasn’t angka — ini adalah whether sebuah huge, undifferentiated set dari sama-tingkat tautan flattens topical grouping. sebagai he put ini, going too flat berarti “we think, oh, all of these are equally important, and we don’t really know which of these are connected to each other,” (terjemahan) “kami think, oh, semua dari ini adalah equally penting, dan kami don’t really know which dari ini adalah connected untuk setiap lainnya,” whereas “a pyramid structure helps us a lot more to understand the context of individual pages.” (terjemahan) “sebuah pyramid structure helps us sebuah lot more untuk memahami context dari individual halaman.” Notably, he juga treated reverting beberapa dari itu 1 000 tautan untuk hover-memuat — while keeping sebuah crawl path untuk them via lainnya, more relevant halaman — sebagai sebuah legitimate structural fix, not something inherently buruk.

practical takeaway: sebuah well-organized 150-tautan mega menu dengan jelas column headers (Men’s / Women’s / Kids’, lalu subcategories di bawah setiap) preserves hierarchy signal. sebuah unorganized wall dari 150 tautan dengan no grouping doesn’t — bahkan di identical count. So:

• Group oleh nyata category boundaries. Columns dan heading itu mirror Anda actual situs hierarchy.
• pertahankan columns scannable. sebuah handful dari items per group, not sebuah alphabetical soup dari everything.
• pertahankan teks jangkar descriptive dan spesifik. tautan text itu describes destination — not “Shop now” (terjemahan) “Shop now” repeated thirty times.
• Don’t membuat ini exhaustive. sebuah mega menu adalah untuk tinggi-tingkat penemuan paths. Anda benar priority halaman seharusnya juga earn contextual, di-konten tautan, not rely solely pada global menu (which repeats identically pada setiap halaman dan spreads yang sama “importance” (terjemahan) “importance” signal everywhere).

Mobile equivalents perlu yang sama tautan, not sebuah smaller UI

pada mobile Anda mega menu becomes sebuah hamburger atau accordion. trap adalah teams trimming mobile menu untuk UX cleanliness dan, di doing so, dropping destinations itu existed hanya pada desktop mega menu. Google’s pengindeksan mobile-pertama guidance adalah explicit itu mobile konten — navigation disertakan — seharusnya menjadi equivalent untuk desktop. jika Anda mobile nav adalah where pengindeksan happens (dan di bawah mobile-pertama pengindeksan, ini adalah), tautan Anda dropped there dapat menjadi treated sebagai less penting, atau — jika mega menu adalah mereka hanya internal tautan — go undiscovered entirely.

So run sama audit pada mobile itu Anda run pada desktop: pull up mobile nav’s rendered HTML, confirm yang sama destinations adalah present, dan confirm setiap adalah sebuah nyata <a href>. sama crawlability test, sama parity test — hanya pada smaller UI.

itu covers destinations. ini doesn’t cover interaction — sebuah separate periksa, dan one teams skip. pengindeksan mobile-pertama memerlukan penting destination atur ke menjadi present, not sebuah identical interaction layout, so sebuah hamburger/accordion adalah fine sebagai sebuah pattern. tetapi whatever disclosure pattern Anda gunakan perlu -nya own keyboard dan focus test: dapat sebuah keyboard-hanya pengguna reach trigger, open ini, dan tab melalui destinations, dengan sebuah accurate aria-expanded state? WAI-ARIA disclosure navigation pattern adalah sebuah worked contoh dari itu perilaku — treat ini sebagai one conforming implementation, not satu-satunya one. Test destination parity dan disclosure/keyboard perilaku sebagai two separate pass/fail memeriksa, since sebuah menu dapat pass one dan fail lainnya.

One more myth: data terstruktur isn’t sebuah crawlability fix

beberapa mega-menu guides present SiteNavigationElement schema markup sebagai jika ini membuat sebuah menu dapat di-crawl. ini doesn’t. data terstruktur dapat describe Anda navigation semantically, tetapi ini adalah not sebuah substitute untuk nyata dapat di-crawl tautan — yang sama principle tautan internal artikel covers, where Mueller notes itu bahkan when Anda menyediakan URLs di data terstruktur, “we don’t use those URLs in the same way as we would use normal internal links on a page.” (terjemahan) “kami don’t gunakan itu URLs di yang sama cara sebagai kami akan gunakan normal tautan internal pada sebuah halaman.” Schema adalah sebuah layer Anda tambahkan pada top dari sudah-dapat di-crawl <a href> tautan, tidak pernah alih-alih them.

What ini memeriksa melakukan — dan don’t — guarantee

nyata anchors, source-terlihat tautan, grouped structure, mobile parity, dan keyboard-operable disclosure hapus spesifik failure modes covered above: undiscovered halaman, flattened topical structure, broken parity, dan inaccessible navigation. None dari ini guarantees crawling, pengindeksan, higher rankings, more traffic, atau sebuah AI citation — itu depend pada far more daripada navigation markup. Treat source/rendered anchors, crawler extraction, desktop/mobile destination parity, dan keyboard/focus perilaku sebagai separate pass/fail tests, not one bundled fix; sebuah mega menu dapat pass beberapa dari ini dan fail others.

seharusnya Anda situs bahkan memiliki sebuah mega menu?

Briefly, because full flat-vs-deep argument lives di situs architecture dan situs web structure artikel: sebuah mega menu earns -nya place when Anda situs adalah besar enough itu cross-category penemuan adalah sebuah genuine pengguna journey dan surfacing deep category halaman dari everywhere meaningfully cuts click depth (ini adalah one dari best alat untuk keeping penting halaman di dalam sebuah few clicks dari homepage — dan untuk hitting Bing’s roughly three-clicks-dari-home target). jika Anda catalog adalah kecil, atau panjang tail dari menu items barely gets clicked, sebuah mega menu adalah overhead Anda tidak perlu. Decide whether untuk memiliki one sebelum Anda obsess di atas how untuk bangun ini — decision tree lens walks melalui ini.

AI summary

sebuah condensed take pada Advanced versi:

• sebuah mega menu adalah hanya tautan internal di sebuah bigger UI. setiap internal-tautan aturan applies unchanged — starting dengan: setiap tautan harus menjadi sebuah nyata <a href>.
• ** #1 dunia nyata failure:** sebuah JS click/hover flyout whose tautan aren’t nyata anchors (onclick, routerLink dengan no href, atau DOM injected hanya pada interaction). ini looks ditautkan untuk sebuah pengguna tetapi Google dapat’t crawl ini — dan jika mega menu adalah sebuah halaman’s hanya internal tautan, itu halaman gets orphaned. failure adalah silent, so ini survives human QA.
• Verify dengan View Source, not Inspect Element. View Source menampilkan raw server HTML; jika tautan appear there sebagai <a href>, mereka’re safe. juga gunakan GSC’s URL Inspection.
• Safe pattern: server-rendered <a href> tautan progressively enhanced dengan JS untuk animation — not tautan itu depend pada JS untuk exist.
• Hidden-until-hover isn’t excluded outright. Mueller dan saat ini mobile-pertama docs say konten di HTML tetapi visually hidden (flyouts, accordions, tabs) adalah taken ke account — tetapi Google hasn’t documented itu ini carries identical peringkat weight untuk selalu-terlihat konten; itu’s sebuah separate, open pertanyaan. nuance: CSS-hidden tautan = fine, evaluated normally; fetched-hanya-pada-interaction (AJAX-pada-hover) tautan = dapat tidak pernah menjadi di-crawl. itu adalah berbeda failure modes.
• No mega-menu perubahan guarantees sebuah outcome. nyata anchors, source-terlihat tautan, grouped structure, mobile parity, dan keyboard-operable disclosure hapus spesifik failure modes — mereka don’t guarantee crawling, pengindeksan, higher rankings, traffic, atau sebuah AI citation. Validate setiap periksa (source/rendered anchors, crawler extraction, desktop/mobile parity, keyboard dan focus perilaku) separately.
• No hard tautan-count ceiling (100-tautan aturan adalah sebuah myth). nyata lever adalah organization: group oleh category, scannable columns, descriptive teks jangkar. Mueller’s mega-menu jawaban menampilkan concern adalah flattening grouping signal, not raw count.
• Mobile perlu yang sama dapat di-crawl tautan, not sebuah trimmed hamburger — Google expects mobile konten parity.
• data terstruktur (SiteNavigationElement) adalah not sebuah substitute untuk nyata dapat di-crawl tautan.

Official documentation

ada no Google atau Bing doc scoped specifically untuk “mega menus.” (terjemahan) “mega menus.” semua official guidance adalah umum tautan-crawlability, anchor-text, dan mobile-pertama docs applied untuk ini UI pattern. Here adalah relevant primary sources.

Google

• SEO tautan best practices — dapat di-crawl-<a href> requirement dan list dari non-recommended tautan formats (no href, onclick, non-anchor tags) itu mega-menu flyouts commonly break. ini adalah foundational doc.
• pengindeksan mobile-pertama best practices — konten parity antara mobile dan desktop, dan explicit note itu moving konten ke accordions atau tabs untuk mobile adalah fine sebagai panjang sebagai ini stays equivalent.
• di-Depth Guide untuk How Google Search berfungsi — umum URL-penemuan context: tautan adalah how Google menemukan sebagian besar baru halaman.

Bing / Microsoft

• Bing Webmaster Guidelines — no mega-menu-spesifik konten, tetapi Bing’s umum guidance (pertahankan penting halaman di dalam roughly three clicks dari homepage, dan sebuah heavier reliance pada sitemap XML untuk penemuan) adalah relevant backdrop. Because Bing leans more pada sitemaps, sebuah mega menu itu accidentally orphans halaman adalah sebuah comparatively bigger risk there — fewer alternate penemuan paths membuat fallback penting more.

Schema.org

• SiteNavigationElement — navigation schema jenis. berguna sebagai sebuah semantic enhancement layered pada top dari nyata tautan; not sebuah crawlability fix.

Accessibility (WAI-ARIA / WCAG)

• WAI-ARIA disclosure navigation menu contoh — sebuah worked contoh dari keyboard-operable disclosure perilaku untuk exactly ini UI pattern. ini adalah sebuah contoh implementation, not satu-satunya conforming one.
• WCAG 2,2 — Understanding Success Criterion 2.1.1: Keyboard — underlying requirement itu sebuah mega menu’s trigger dan flyout menjadi operable without sebuah mouse.

Quotes dari source

pada—record statements relevant untuk membangun sebuah dapat di-crawl, well-structured mega menu.

Google — dapat di-crawl-tautan requirement (SEO tautan best practices)

• “Google can only crawl your link if it’s an <a> HTML element (also known as anchor element) with an href attribute.” (terjemahan) “Google dapat hanya crawl Anda tautan jika ini adalah sebuah undefined HTML element (juga known sebagai anchor element) dengan sebuah href attribute.” Jump untuk quote

John Mueller, Google — hidden/tabbed konten adalah terindeks yang sama sebagai terlihat konten

• “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.” (terjemahan) “No. Specifically when ini comes untuk konten pada mobile halaman kami melakukan take ke account anything itu’s di HTML. So jika there’s something there itu mungkin menjadi terlihat untuk pengguna di beberapa poin kami akan sertakan itu… so itu’s completely normal.” (ditanyakan directly whether konten hidden behind tabs/accordions adalah devalued di bawah pengindeksan mobile-pertama) Read coverage

John Mueller, Google — flat vs. pyramid, di context dari sebuah 1 000-tautan 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.” (terjemahan) “jika ini adalah very flat, lalu kami think, oh, semua dari ini adalah equally penting, dan kami don’t really know which dari ini adalah connected untuk setiap lainnya.” Read coverage
• “A pyramid structure helps us a lot more to understand the context of individual pages within the site.” (terjemahan) “sebuah pyramid structure helps us sebuah lot more untuk memahami context dari individual halaman di dalam situs.” / “I don’t think it would always have a negative effect.” (terjemahan) “I don’t think ini akan selalu memiliki sebuah negative effect.” (pada going dari ~1 000 flat mega-menu tautan untuk sebuah deeper structure) Read coverage

John Mueller, Google — data terstruktur adalah not sebuah substitute untuk nyata tautan internal

• “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.” (terjemahan) “bahkan jika di data terstruktur Anda juga menyediakan URLs, kami don’t gunakan itu URLs di yang sama cara sebagai kami akan gunakan normal tautan internal pada sebuah halaman.”

seharusnya Anda memiliki sebuah mega menu — dan adalah yours safe?

ini walks two pertanyaan itu actually penting: seharusnya ini situs memiliki sebuah mega menu, dan jika ini memiliki one, adalah ini dibangun di sebuah cara Google dapat crawl? untuk full flat-vs-deep structural argument, see situs architecture dan situs web structure artikel di ini cluster.

Mega menu SEO checklist

berfungsi ini top untuk bottom — crawlability pertama, structure kedua, mobile last:

• setiap flyout tautan adalah sebuah nyata <a href> — not onclick, not sebuah routerLink / router attribute without href, not sebuah non-anchor tag styled sebagai sebuah tautan.
• tautan appear di View halaman Source, not hanya di Inspect Element / live DOM ( difference antara server-rendered dan JS-hanya).
• Flyout HTML adalah di initial halaman, hidden dengan CSS — not fetched via sebuah API panggil pada hover/click.
• pemeriksaan URL (GSC) confirms menu tautan adalah present di di-crawl / rendered HTML.
• JavaScript enhances, doesn’t buat — JS handles hover animation dan interactivity; tautan exist without ini.
• No orphaned destinations — no penting halaman relies pada mega menu sebagai -nya hanya internal tautan (cross-periksa dengan contextual di-konten tautan).
• tautan adalah grouped oleh category dengan column headers itu mirror Anda situs hierarchy — not sebuah ungrouped wall.
• Columns adalah scannable — sebuah handful dari items per group, not sebuah alphabetical dump dari everything.
• teks jangkar adalah descriptive dan spesifik untuk setiap destination — no generic “Shop now” (terjemahan) “Shop now” repeated di seluruh dozens dari tautan.
• ** menu adalah selective, not exhaustive** — tinggi-tingkat penemuan paths, dengan priority halaman juga earning contextual tautan.
• Mobile hamburger/accordion memiliki yang sama tautan sebagai desktop mega menu (konten parity).
• Mobile tautan adalah juga nyata <a href> — run yang sama View Source / URL Inspection periksa pada mobile nav.
• data terstruktur (SiteNavigationElement), jika digunakan, sits pada top dari nyata tautan — tidak pernah sebagai sebuah substitute untuk them.
• Re-periksa setelah front-end upgrades — framework perubahan adalah where nyata tautan quietly become click handlers.

Mega menu SEO — cheat sheet

dapat di-crawl vs. not

** two failure modes people conflate**

• CSS-hidden (tautan di DOM, panel hidden until hover) → terindeks normally.
• Fetched-pada-interaction (tautan don’t exist until sebuah event fires) → dapat tidak pernah menjadi di-crawl. ini adalah sebuah crawlability bug, not sebuah “hidden content is discounted” (terjemahan) “hidden konten adalah discounted” issue.

Myth vs. reality

Quick verify

• View halaman Source (not Inspect) → search untuk sebuah menu tautan → adalah ini <a href>?
• GSC pemeriksaan URL → di-crawl/rendered HTML memiliki tautan?
• Mobile: repeat both memeriksa pada hamburger/accordion menu.

baik vs. buruk mega-menu markup

buruk: sebuah JS-hanya flyout

tautan itu don’t exist until JavaScript runs — Google dapat’t reliably ikuti apa pun dari ini:

<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>

setiap destination here adalah invisible untuk sebuah crawler: <span> “links” (terjemahan) “tautan” aren’t anchors, routerLink memiliki no href, dan onclick anchor memiliki nothing untuk ikuti. jika ini halaman memiliki no lainnya internal tautan, mereka’re orphaned.

baik: server-rendered tautan, progressively enhanced

tautan adalah nyata <a href> elements sitting di server HTML; JavaScript hanya menambahkan hover perilaku:

<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; }

Everything here adalah dapat di-crawl di raw HTML, dan hiding panel dengan CSS doesn’t perubahan itu — CSS-hidden konten adalah terindeks yang sama sebagai terlihat konten.

Better masih: grouped, not sebuah wall

two markups below memiliki sama tautan count tetapi tell Google very berbeda things. pada left, sebuah ungrouped dump; pada right, yang sama tautan grouped di bawah heading itu mirror Anda 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>

Both adalah dapat di-crawl. hanya grouped versi preserves category relationships itu let Google memahami which halaman belong together.

Mega-menu anti-patterns

recurring cara mega menus break, dan what untuk melakukan instead.

1. tautan itu adalah click handlers, not anchors. classic. onclick, sebuah routerLink/router attribute dengan no href, atau sebuah <span> styled sebagai sebuah tautan. Looks fine untuk sebuah human; sebuah crawler dapat’t ikuti ini. → gunakan nyata <a href> tautan, enhanced dengan JS untuk perilaku.

2. Flyout HTML fetched pada hover. panel’s konten adalah pulled dari sebuah API hanya setelah hover/click fires, so tautan don’t exist di halaman until sebuah pengguna acts. → Put tautan di initial HTML; hide panel dengan CSS instead.

3. Trusting rendered halaman alih-alih source. memeriksa menu di Inspect Element ( live DOM) hides exactly JS-hanya bug Anda seharusnya menjadi hunting. → gunakan View halaman Source dan GSC pemeriksaan URL.

4. undifferentiated tautan wall. Hundreds dari sama-tingkat tautan dumped ke one panel dengan no grouping. No tautan-count aturan adalah broken, tetapi topical grouping signal adalah flattened. → Group oleh category dengan heading itu mirror Anda hierarchy; pertahankan ini selective.

5. Generic, repeated teks jangkar. “Shop now,” (terjemahan) “Shop now,” “View all,” (terjemahan) “View semua,” “Click here” (terjemahan) “Click here” repeated di seluruh dozens dari destinations tells mesin pencari nothing tentang where setiap tautan goes. → Descriptive teks jangkar spesifik untuk setiap destination.

6. sebuah trimmed mobile menu. Dropping tautan dari hamburger/accordion untuk sebuah cleaner mobile UI breaks mobile-pertama konten parity — dan dapat orphan halaman whose hanya tautan adalah desktop mega menu. → pertahankan yang sama tautan, dan verify mereka’re nyata anchors pada mobile too.

7. Treating schema sebagai sebuah crawlability fix. menambahkan SiteNavigationElement markup di atas JS-hanya tautan dan assuming ini membuat them dapat di-crawl. ini doesn’t. → Schema adalah sebuah semantic layer pada top dari sudah-dapat di-crawl tautan, tidak pernah sebuah replacement.

8. Believing hidden-until-hover adalah discounted. membangun elaborate workarounds karena old “hidden content is devalued” (terjemahan) “hidden konten adalah devalued” myth. CSS-hidden tautan di DOM adalah terindeks normally. → Don’t di atas-engineer sekitar sebuah myth; hanya pastikan tautan adalah actually di HTML.

Mega menu masalah untuk diagnose

tautan appear untuk berfungsi, tetapi sebuah crawler cannot menemukan them

Symptom: Clicking sebuah menu item di sebuah browser opens destination, tetapi URL adalah absent dari sebuah crawl itu started di home halaman. mungkin cause: item adalah sebuah div, button, atau JavaScript handler alih-alih sebuah anchor dengan sebuah href. Fix: Render sebuah nyata <a href="/destination/"> di HTML, lalu crawl dari home halaman again dan confirm destination appears sebagai sebuah internal outlink.

desktop tautan adalah dapat di-crawl tetapi mobile tautan disappear

Symptom: penting categories adalah present di desktop menu tetapi absent dari mobile DOM. mungkin cause: mobile menu menggunakan sebuah separate, shortened data source. Fix: Give mobile accordion yang sama penting destinations sebagai desktop menu dan confirm anchors exist sebelum apa pun tap.

sebuah flyout opens pada hover tetapi not dengan sebuah keyboard

Symptom: Mouse pengguna dapat reach panel, while tab dan enter melakukan not expose ini. mungkin cause: interaction depends hanya pada hover. Fix: membuat trigger sebuah button dengan keyboard handling dan sebuah accurate aria-expanded state; pertahankan destination tautan sebagai normal anchors.

Reach, Render, Restrain framework

gunakan three memeriksa when reviewing apa pun mega menu:

1. Reach: dapat sebuah pengguna dan crawler reach setiap penting destination melalui sebuah nyata anchor, pada desktop dan mobile?
2. Render: adalah itu anchors present di delivered atau rendered HTML without requiring sebuah hover, click, atau API respons?
3. Restrain: adalah menu limited untuk destinations itu deserve sitewide tautan, grouped di bawah berguna heading alih-alih becoming sebuah peta situs di sebuah dropdown?

sebuah menu fails jika apa pun one dari three breaks. Reach protects penemuan, Render protects implementation, dan Restrain protects hierarchy dan usability.

Inspect mega-menu tautan di browser

Run ini di Chrome DevTools Console while menu adalah closed. ini lists anchors inside umum navigation containers dan flags entries without sebuah 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') })));

Run yang sama snippet di desktop dan mobile viewport widths. sebuah destination itu exists di hanya one hasil set perlu review.

Extract navigation destinations di sebuah crawl

gunakan ini XPath di sebuah crawler’s custom extraction fitur untuk collect menu URLs:

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

union covers semantic nav elements dan navigation regions identified dengan sebuah ARIA role. Compare extracted set dengan approved navigation inventory rather daripada assuming setiap click target adalah sebuah tautan.

Resources worth Anda time

My related writing

• tautan internal untuk SEO: sebuah Actionable Guide — full Ahrefs guide pada how tautan internal pass PageRank, no-fixed-tautan-limit framing, dan teks jangkar — semua dari which adalah what sebuah mega menu adalah really dibuat dari.
• Beginner’s Guide untuk SEO teknis — where navigation dan crawlability fit ke bigger technical picture.
• JavaScript SEO Issues & Best Practices — rendering/JS side itu’s behind sebagian besar broken mega-menu flyouts.

Official

• Google’s SEO tautan best practices — canonical reference untuk what membuat sebuah tautan dapat di-crawl.
• Google’s pengindeksan mobile-pertama best practices — konten-parity requirement Anda mobile menu memiliki untuk meet.

dari sekitar industry

• Google’s Mueller pada Myth dari Hidden Tab konten (mesin pencari Journal) — direct Mueller statement itu hidden-until-interaction konten adalah terindeks yang sama sebagai terlihat konten.
• Google Recommends Pyramid Navigation Structure untuk besar situs (mesin pencari Roundtable) — Mueller’s full jawaban untuk 1 000-tautan mega-menu pertanyaan; source untuk tautan-budget guidance here.
• Tabbed konten: adalah ini sebuah Google peringkat Factor? (mesin pencari Journal) — history dari hidden-konten debate dan why old “discounted” (terjemahan) “discounted” line adalah outdated.
• Google: konten di dalam Tabs atau Click untuk Expand Boxes adalah Discounted (mesin pencari Roundtable) — older, now-superseded guidance, berguna untuk understanding where myth came dari.
• Mega Menus & SEO (MagsTags) — sebuah tautan-equity-theory-heavy treatment, including sebuah worked contoh dari how sebuah big menu spreads PageRank; berguna background, not Google-sourced.
• r/TechSEO — community untuk debugging orphaned halaman dan crawlability issues, which adalah where sebagian besar mega-menu masalah actually surface.

Test yourself: Mega Menu SEO

Five quick pertanyaan pada membangun sebuah dapat di-crawl, well-structured mega menu. Pick sebuah jawaban untuk setiap, lalu periksa.

Log perubahan