Panduan Mega Menu SEO

TL;DR — sebuah mega menu adalah sebuah big navigation dropdown itu menampilkan lots dari tautan di setelah, 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.

Apa 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 setelah, arranged di columns oleh category so mereka’re easy untuk scan. sebuah wajar dropdown memberikan Anda sebuah single pendek list. sebuah mega menu memberikan Anda “Shoes” (terjemahan) “Shoes” opening ke Men’s, Women’s, dan Kids’ columns, setiap dengan -nya own subcategories. Big online stores gunakan them karena mereka let sebuah shopper jump untuk sebuah deep category halaman dari anywhere pada situs di satu click.

penting hal untuk memahami: sebuah mega menu adalah hanya sebuah pile dari tautan internal di sebuah fancy container. Semuanya itu’s benar tentang tautan internal umumnya adalah benar di sini. jika Anda haven’t baca tautan internal tulis-up di ini cluster, mulai di sana — ini halaman adalah practical, “bagaimana lakukan I tidak break it” (terjemahan) “bagaimana melakukan I tidak break ini” companion.

satu 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 di sana. trouble dimulai ketika sebuah developer membangun flyout dengan JavaScript “click untuk go di sini” (terjemahan) “click untuk go di sini” perilaku alih-alih sebenarnya tautan. untuk sebuah person, ini looks identical — Anda click dan halaman memuat. untuk Google, ada tidak ada apa pun untuk ikuti, so itu halaman dapat diam-diam go undiscovered.

cara periksa yours

Right-click halaman dan choose View halaman Sumber (tidak “Inspect” (terjemahan) “Inspect”) dan penelusuran untuk satu dari Anda menu tautan. jika ini menampilkan up sebagai <a href="..."> di itu mentah sumber, baik. jika Anda menu tautan hanya muncul ketika Anda gunakan Inspect Element ( langsung, JavaScript-dibangun versi) tetapi tidak di View Sumber, itu’s warning sign untuk hand Anda developer.

jangan forget mobile

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

ingin deeper versi — JavaScript failure mode di detail, apakah hidden-until-hover konten adalah discounted, bagaimana 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 tulis-up applies unchanged — starting dengan <a href> requirement. #1 dunia nyata failure adalah sebuah JS click/hover flyout milik siapa tautan tidak 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 Sumber, tidak Inspect. konten hidden until hover tidak secara otomatis discounted untuk menjadi hidden sebagai panjang sebagai ini adalah di awal HTML dan tidak 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 terdokumentasi identical peringkat weight untuk selalu-terlihat konten. Tidak hard tautan-count ceiling ada ( 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, tidak sebuah trimmed versi. data terstruktur adalah tidak sebuah substitute untuk nyata tautan.

Mulai di sini: sebuah mega menu adalah hanya tautan internal

I ingin untuk set expectations sebelum getting ke specifics. ada tidak ada apa pun magical atau terpisah 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 ada Tidak magic tautan-count limit — applies di sini dengan zero modification. I’m tidak going untuk re-derive itu; tautan internal artikel di ini cluster covers them, dan ini halaman cross-references ini repeatedly.

Apa membuat mega menus worth mereka own halaman adalah itu mereka melakukan satu hal wajar navigation tidak: mereka cram sebuah unusually besar angka dari tautan ke sebuah single, repeated, sitewide UI element. itu concentration adalah apa raises dua 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 sinyal). 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 tidak dapat recognize yang parts dari itu site belong together.” (terjemahan) “Google dapat’t recognize yang bagian dari situs belong together.” I’m tidak going untuk re-litigate itu di sini. ini halaman adalah tentang practical bangun.

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

Di sini’s satu I see break di wild lebih 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 sebenarnya click handlers, sebuah router attribute dengan Tidak href, atau konten itu hanya mendapatkan injected ke DOM setelah sebuah hover atau click event fires. Google’s own list dari tautan formats ini dapat’t reliably crawl maps secara langsung onto persis 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 satu adalah so dangerous adalah itu ** failure adalah silent.** halaman look ditautkan — sebuah human hovers, sees flyout, clicks, dan lands pada category halaman. Tidak ada apa pun muncul rusak. tetapi itu destination halaman mendapatkan 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 mengapa orphans adalah sebuah penemuan dead end). Anda dapat memiliki sebuah entire category tree itu’s invisible untuk Google sementara looking perfectly navigable untuk setiap human siapa tests ini. itu’s mengapa ini survives QA: humans jangan experience bug.

cara verify sebuah mega menu adalah sebenarnya dapat di-crawl

jangan trust dirender halaman — periksa sumber.

• View halaman Sumber, tidak Inspect Element. Right-click → View halaman Sumber menampilkan mentah HTML server dikirim. Inspect Element menampilkan langsung DOM setelah JavaScript memiliki jalankan, yang hides persis masalah Anda’re hunting. jika Anda flyout tautan muncul sebagai <a href="..."> di View Sumber, mereka’re server-dirender dan safe. jika mereka hanya tampilkan up di Inspect view, itu’s Anda red flag.
• pemeriksaan URL alat (GSC). Jalankan halaman melalui Search Console’s pemeriksaan URL dan lihat dirender HTML / di-crawl halaman. ini tells Anda apa Googlebot sebenarnya ended up dengan.

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

adalah hidden-until-hover konten discounted?

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

Tidak secara otomatis — tetapi menjadi precise tentang apa itu berarti, karena ini adalah di mana orang overclaim. saat ini Google guidance dan John Mueller’s own statement say konten present di HTML tetapi visually hidden — di dalam sebuah hover flyout, sebuah closed accordion, sebuah inactive tab — adalah taken ke account, tidak excluded outright. Mueller, ditanyakan secara langsung apakah hidden tab/accordion konten adalah devalued di bawah mobile-pertama pengindeksan: “Tidak. Secara khusus ketika it muncul untuk konten pada mobile halaman we lakukan take menjadi account apa pun itu di itu HTML. So jika ada sesuatu di sana itu mungkin menjadi visible untuk users di some point we akan include itu… so itu completely wajar” (terjemahan) “Tidak. Secara khusus ketika ini muncul untuk konten pada mobile halaman kami melakukan take ke account apa pun itu’s di HTML. So jika ada sesuatu di sana itu mungkin menjadi terlihat untuk pengguna di beberapa poin kami akan sertakan itu… so itu’s completely wajar” (reported oleh Roger Montti di mesin pencari Journal’s tulis-up dari myth). Google’s pengindeksan mobile-pertama docs back ini operationally, telling Anda ini adalah fine untuk move konten “menjadi accordions atau tabs” (terjemahan) “ke accordions atau tabs” untuk mobile UX sebagai panjang sebagai ini tetap equivalent untuk desktop.

Apa itu quote sebenarnya establishes adalah availability — konten mendapatkan di-crawl, dirender, dan considered, alih-alih thrown out. ini tidak establish itu hover-hidden konten carries identical peringkat weight untuk selalu-terlihat konten; Google hasn’t published apa pun pada itu spesifik pertanyaan either cara, so treat ini sebagai undocumented alih-alih assuming equivalence. pertahankan dua pertanyaan terpisah: adalah ini excluded outright (Tidak — settled) versus melakukan ini peringkat persis like terlihat konten (tidak terdokumentasi).

«This supersedes the older (roughly 2015–2016-era) line that content behind tabs and click-to-expand boxes carried less ranking weight — that specific claim is dead. What the record actually supports is narrower: hidden-in-HTML content isn’t discounted out of hand, but no one has documented that its weighting is identical to visible content. If you’ve heard the old “discounted” version, this is what changed — don’t swap it for an equally unsupported “definitely equal” version. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh lima, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

tetapi ada sebuah nuance itu trips orang up, dan ini adalah seluruh game: “hidden melalui CSS” (terjemahan) “hidden melalui CSS” dan “fetched only on interaction” (terjemahan) “fetched hanya pada interaction” adalah dua completely berbeda hal.

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

itu’s tidak sebuah “hidden content is discounted” (terjemahan) “hidden konten adalah discounted” masalah — ini adalah sebuah crawlability masalah. tautan jangan exist until sebuah pengguna melakukan sesuatu, so sebuah crawler tidak pernah sees them. Conflating itu dua failure modes adalah persis bagaimana myth survives. pertahankan them terpisah: CSS-hidden tautan = fine; AJAX-pada-interaction tautan = rusak.

tautan budget: group ini, jangan dump ini

ada Tidak terdokumentasi hard limit pada bagaimana 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 penuh, so I tidak akan re-argue ini di sini. Google’s line adalah itu ada Tidak magical ideal angka.

tetapi “Tidak limit” (terjemahan) “Tidak limit” tidak berarti “dump semuanya di.” (terjemahan) “dump semuanya di.” nyata lever tidak mentah count — ini adalah organization. ini adalah di mana Mueller’s sebenarnya mega-menu jawaban adalah berguna. di sebuah 2021 Penelusuran Central hangout (reported oleh Barry Schwartz), seseorang 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 tidak angka — ini adalah apakah sebuah huge, undifferentiated set dari sama-tingkat tautan flattens topical grouping. sebagai he put ini, going too flat berarti “we think, oh, all dari ini adalah equally important, dan we jangan benar-benar know yang dari ini adalah connected untuk setiap other,” (terjemahan) “kami think, oh, semua dari ini adalah equally penting, dan kami jangan benar-benar know yang 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 lebih untuk memahami context dari individual halaman.” Notably, he juga treated reverting beberapa dari itu 1 000 tautan untuk hover-memuat — sementara mempertahankan sebuah crawl path untuk them melalui lainnya, lebih relevant halaman — sebagai sebuah legitimate structural perbaiki, tidak sesuatu 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 sinyal. sebuah unorganized wall dari 150 tautan dengan Tidak grouping tidak — bahkan di identical count. So:

«- Group by real category boundaries. Columns and headings that mirror your actual site hierarchy.

• Keep columns scannable. A handful of items per group, not an alphabetical soup of everything.
• Keep anchor text descriptive and specific. Link text that describes the destination — not “Shop now” repeated thirty times.
• Don’t make it exhaustive. A mega menu is for high-level discovery paths. Your true priority pages should also earn contextual, in-content links, not rely solely on the global menu (which repeats identically on every page and spreads the same “importance” signal everywhere). » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Mobile equivalents perlu yang sama tautan, tidak sebuah lebih kecil UI

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

So jalankan sama audit pada mobile itu Anda jalankan pada desktop: pull up mobile nav’s dirender HTML, konfirmasi yang sama destinations adalah present, dan konfirmasi setiap adalah sebuah nyata <a href>. sama crawlability test, sama parity test — hanya pada lebih kecil UI.

itu covers destinations. ini tidak cover interaction — sebuah terpisah periksa, dan satu tim skip. pengindeksan mobile-pertama memerlukan penting destination atur ke menjadi present, tidak 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 satu conforming implementation, tidak satu-satunya satu. Test destination parity dan disclosure/keyboard perilaku sebagai dua terpisah lulus/fail memeriksa, since sebuah menu dapat lulus satu dan fail lainnya.

Satu lebih myth: data terstruktur tidak sebuah crawlability perbaiki

beberapa mega-menu guides present SiteNavigationElement schema markup sebagai jika ini membuat sebuah menu dapat di-crawl. ini tidak. data terstruktur dapat deskripsikan Anda navigation semantically, tetapi ini adalah tidak sebuah substitute untuk nyata dapat di-crawl tautan — yang sama principle tautan internal artikel covers, di mana Mueller notes itu bahkan ketika Anda menyediakan URLs di data terstruktur, “we jangan gunakan itu URLs di itu sama way sebagai we akan gunakan wajar internal links pada a halaman.” (terjemahan) “kami jangan gunakan itu URLs di yang sama cara sebagai kami akan gunakan wajar 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.

Apa ini memeriksa melakukan — dan jangan — jaminan

nyata anchors, sumber-terlihat tautan, grouped structure, mobile parity, dan keyboard-operable disclosure hapus spesifik failure modes covered di atas: undiscovered halaman, flattened topical structure, rusak parity, dan inaccessible navigation. None dari ini jaminan crawling, pengindeksan, lebih tinggi rankings, lebih traffic, atau sebuah AI citation — itu bergantung pada far lebih daripada navigation markup. Treat sumber/dirender anchors, crawler extraction, desktop/mobile destination parity, dan keyboard/focus perilaku sebagai terpisah lulus/fail tests, tidak satu bundled perbaiki; sebuah mega menu dapat lulus beberapa dari ini dan fail others.

seharusnya Anda situs bahkan memiliki sebuah mega menu?

Briefly, karena penuh flat-vs-deep argument lives di situs architecture dan situs web structure artikel: sebuah mega menu earns -nya place ketika Anda situs adalah besar cukup itu cross-category penemuan adalah sebuah genuine pengguna journey dan surfacing deep category halaman dari di mana-mana meaningfully cuts click depth (ini adalah satu dari best alat untuk mempertahankan penting halaman di dalam sebuah sedikit 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 mendapatkan clicked, sebuah mega menu adalah overhead Anda tidak perlu. Decide apakah untuk memiliki satu sebelum Anda obsess di atas bagaimana 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 milik siapa tautan tidak nyata anchors (onclick, routerLink dengan Tidak 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 mendapatkan orphaned. failure adalah silent, so ini survives human QA.
• Verify dengan View Sumber, tidak Inspect Element. View Sumber menampilkan mentah server HTML; jika tautan muncul di sana sebagai <a href>, mereka’re safe. juga gunakan GSC’s URL Inspection.
• Safe pattern: server-dirender <a href> tautan progressively enhanced dengan JS untuk animation — tidak tautan itu bergantung pada JS untuk exist.
• Hidden-until-hover tidak 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 terdokumentasi itu ini carries identical peringkat weight untuk selalu-terlihat konten; itu’s sebuah terpisah, open pertanyaan. nuance: CSS-hidden tautan = fine, evaluated biasanya; fetched-hanya-pada-interaction (AJAX-pada-hover) tautan = dapat tidak pernah menjadi di-crawl. itu adalah berbeda failure modes.
• Tidak mega-menu perubahan jaminan sebuah outcome. nyata anchors, sumber-terlihat tautan, grouped structure, mobile parity, dan keyboard-operable disclosure hapus spesifik failure modes — mereka jangan jaminan crawling, pengindeksan, lebih tinggi rankings, traffic, atau sebuah AI citation. Validate setiap periksa (sumber/dirender anchors, crawler extraction, desktop/mobile parity, keyboard dan focus perilaku) secara terpisah.
• Tidak 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 sinyal, tidak mentah count.
• Mobile perlu yang sama dapat di-crawl tautan, tidak sebuah trimmed hamburger — Google expects mobile konten parity.
• data terstruktur (SiteNavigationElement) adalah tidak sebuah substitute untuk nyata dapat di-crawl tautan.

Dokumentasi resmi

ada Tidak Google atau Bing doc scoped secara khusus untuk “mega menus.” (terjemahan) “mega menus.” semua official guidance adalah umum tautan-crawlability, anchor-text, dan mobile-pertama docs applied untuk ini UI pattern. Di sini adalah relevant utama sources.

Google

• SEO tautan best practices — dapat di-crawl-<a href> requirement dan list dari non-recommended tautan formats (Tidak 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 jelas note itu moving konten ke accordions atau tabs untuk mobile adalah fine sebagai panjang sebagai ini tetap equivalent.
• di-Depth Guide untuk Bagaimana Google Search berfungsi — umum URL-penemuan context: tautan adalah bagaimana Google menemukan sebagian besar baru halaman.

Bing / Microsoft

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

Schema.org

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

Accessibility (WAI-ARIA / WCAG)

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

Quotes dari sumber

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.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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) “Tidak. Secara khusus ketika ini muncul untuk konten pada mobile halaman kami melakukan take ke account apa pun itu’s di HTML. So jika ada sesuatu di sana itu mungkin menjadi terlihat untuk pengguna di beberapa poin kami akan sertakan itu… so itu’s completely wajar.” (ditanyakan secara langsung apakah konten hidden behind tabs/accordions adalah devalued di bawah pengindeksan mobile-pertama) Baca 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 jangan benar-benar know yang dari ini adalah connected untuk setiap lainnya.” Baca 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 lebih untuk memahami context dari individual halaman di dalam situs.” / “I don’t think it would always have a negative effect.” (terjemahan) “I jangan think ini akan selalu memiliki sebuah negative effect.” (pada going dari ~1 000 flat mega-menu tautan untuk sebuah deeper structure) Baca coverage

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

• “Even jika di itu structured data Anda juga sediakan URLs, we jangan gunakan itu URLs di itu sama way sebagai we akan gunakan wajar internal links pada a halaman.” (terjemahan) “bahkan jika di data terstruktur Anda juga menyediakan URLs, kami jangan gunakan itu URLs di yang sama cara sebagai kami akan gunakan wajar tautan internal pada sebuah halaman.”

«Note: the Mueller statements above were made in Google Search Central hangouts/office-hours and are quoted here via trade-press transcriptions (Search Engine Journal, Search Engine Roundtable) rather than a first-party Google page; the Search Engine Roundtable source is a JavaScript-hydrated page, so those links point to the article rather than a text-fragment anchor. The <a href> crawlability quote is from Google’s live developer docs. Confirm any JS-rendered passage against the live source before treating it as final. Older commentary that hidden tab/accordion content is “discounted” (circa 2015–2016) is superseded by the Mueller statement above and is treated here as an outdated myth, not current guidance. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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

ini walks dua pertanyaan itu sebenarnya penting: seharusnya ini situs memiliki sebuah mega menu, dan jika ini memiliki satu, adalah ini dibangun di sebuah cara Google dapat crawl? untuk penuh 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 terakhir:

• setiap flyout tautan adalah sebuah nyata <a href> — tidak onclick, tidak sebuah routerLink / router attribute tanpa href, tidak sebuah non-anchor tag styled sebagai sebuah tautan.
• tautan muncul di View halaman Sumber, tidak hanya di Inspect Element / langsung DOM ( perbedaan antara server-dirender dan JS-hanya).
• Flyout HTML adalah di awal halaman, hidden dengan CSS — tidak fetched melalui sebuah API panggil pada hover/click.
• pemeriksaan URL (GSC) mengonfirmasi menu tautan adalah present di di-crawl / dirender HTML.
• JavaScript enhances, tidak buat — JS menangani hover animation dan interactivity; tautan exist tanpa ini.
• Tidak orphaned destinations — Tidak 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 — tidak sebuah ungrouped wall.
• Columns adalah scannable — sebuah handful dari items per group, tidak sebuah alphabetical dump dari semuanya.
• teks jangkar adalah descriptive dan spesifik untuk setiap destination — Tidak generic “Shop now” (terjemahan) “Shop now” repeated di seluruh dozens dari tautan.
• ** menu adalah selective, tidak 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> — jalankan yang sama View Sumber / 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 — kerangka kerja perubahan adalah di mana nyata tautan diam-diam become click handlers.

«## Mega menu SEO — cheat sheet » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus satu, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

dapat di-crawl vs. tidak

** dua failure modes orang conflate**

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

Myth vs. reality

Quick verify

• View halaman Sumber (tidak Inspect) → penelusuran untuk sebuah menu tautan → adalah ini <a href>?
• GSC pemeriksaan URL → di-crawl/dirender HTML memiliki tautan?
• Mobile: repeat keduanya memeriksa pada hamburger/accordion menu.

baik vs. buruk mega-menu markup

buruk: sebuah JS-hanya flyout

tautan itu jangan exist until JavaScript berjalan — 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 di sini adalah invisible untuk sebuah crawler: <span> “links” (terjemahan) “tautan” tidak anchors, routerLink memiliki Tidak href, dan onclick anchor memiliki tidak ada apa pun untuk ikuti. jika ini halaman memiliki Tidak lainnya internal tautan, mereka’re orphaned.

baik: server-dirender 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; }

Semuanya di sini adalah dapat di-crawl di mentah HTML, dan hiding panel dengan CSS tidak perubahan itu — CSS-hidden konten adalah terindeks yang sama sebagai terlihat konten.

Better masih: grouped, tidak sebuah wall

dua markups di bawah memiliki sama tautan count tetapi tell Google very berbeda hal. 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>

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

Mega-menu anti-patterns

recurring cara mega menus break, dan apa untuk melakukan alih-alih.

1. tautan itu adalah click handlers, tidak anchors. classic. onclick, sebuah routerLink/router attribute dengan Tidak 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 jangan exist di halaman until sebuah pengguna acts. → Put tautan di awal HTML; hide panel dengan CSS alih-alih.

3. Trusting dirender halaman alih-alih sumber. memeriksa menu di Inspect Element ( langsung DOM) hides persis JS-hanya bug Anda seharusnya menjadi hunting. → gunakan View halaman Sumber dan GSC pemeriksaan URL.

4. undifferentiated tautan wall. Hundreds dari sama-tingkat tautan dumped ke satu panel dengan Tidak grouping. Tidak tautan-count aturan adalah rusak, tetapi topical grouping sinyal adalah flattened. → Group oleh category dengan heading itu mirror Anda hierarchy; pertahankan ini selective.

«5. Generic, repeated anchor text. “Shop now,” “View all,” “Click here” repeated across dozens of destinations tells search engines nothing about where each link goes. → Descriptive anchor text specific to each destination. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus tiga puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

6. sebuah trimmed mobile menu. Dropping tautan dari hamburger/accordion untuk sebuah cleaner mobile UI breaks mobile-pertama konten parity — dan dapat orphan halaman milik siapa 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 perbaiki. menambahkan SiteNavigationElement markup di atas JS-hanya tautan dan assuming ini membuat them dapat di-crawl. ini tidak. → 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 konten adalah devalued” (terjemahan) “hidden konten adalah devalued” myth. CSS-hidden tautan di DOM adalah terindeks biasanya. → jangan di atas-engineer sekitar sebuah myth; hanya pastikan tautan adalah sebenarnya di HTML.

Mega menu masalah untuk diagnose

tautan muncul 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 dimulai di home halaman. mungkin penyebab: item adalah sebuah div, button, atau JavaScript handler alih-alih sebuah anchor dengan sebuah href. Perbaiki: Render sebuah nyata <a href="/destination/"> di HTML, lalu crawl dari home halaman again dan konfirmasi destination muncul 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 penyebab: mobile menu menggunakan sebuah terpisah, shortened data sumber. Perbaiki: Memberikan mobile accordion yang sama penting destinations sebagai desktop menu dan konfirmasi anchors exist sebelum apa pun tap.

sebuah flyout opens pada hover tetapi tidak dengan sebuah keyboard

Symptom: Mouse pengguna dapat reach panel, sementara tab dan enter melakukan tidak expose ini. mungkin penyebab: interaction bergantung hanya pada hover. Perbaiki: membuat trigger sebuah button dengan keyboard menangani dan sebuah accurate aria-expanded state; pertahankan destination tautan sebagai wajar anchors.

Reach, Render, Restrain kerangka kerja

gunakan three memeriksa ketika 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 dirender HTML tanpa 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 satu dari three breaks. Reach melindungi penemuan, Render melindungi implementation, dan Restrain melindungi hierarchy dan usability.

Inspect mega-menu tautan di browser

Jalankan ini di Chrome DevTools Console sementara menu adalah closed. ini lists anchors di dalam umum navigation containers dan flags entries tanpa 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') })));

Jalankan yang sama snippet di desktop dan mobile viewport widths. sebuah destination itu ada di hanya satu 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. Bandingkan 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 — penuh Ahrefs guide pada bagaimana tautan internal lulus PageRank, Tidak-fixed-tautan-limit framing, dan teks jangkar — semua dari yang adalah apa sebuah mega menu adalah benar-benar dibuat dari.
• Beginner’s Guide untuk SEO teknis — di mana navigation dan crawlability fit ke bigger teknis picture.
• JavaScript SEO Issues & Best Practices — rendering/JS side itu’s behind sebagian besar rusak mega-menu flyouts.

Official

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

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 penuh jawaban untuk 1 000-tautan mega-menu pertanyaan; sumber untuk tautan-budget guidance di sini.
• Tabbed konten: adalah ini sebuah Google peringkat Factor? (mesin pencari Journal) — history dari hidden-konten debate dan mengapa 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 di mana myth came dari.
• Mega Menus & SEO (MagsTags) — sebuah tautan-equity-theory-berat treatment, including sebuah worked contoh dari bagaimana sebuah big menu spreads PageRank; berguna background, tidak Google-sourced.
• r/TechSEO — community untuk debugging orphaned halaman dan crawlability issues, yang adalah di mana sebagian besar mega-menu masalah sebenarnya surface.

Uji pemahaman Anda: 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