Türkçe çeviri: Mega Menu SEO

TL;DR — bir mega menu dır bir big navigation dropdown şu shows lots of bağlantılar at once, grouped -e columns. bençin SEO o’s sadece benç bağlantılar, bu nedenle kurallar dır aynı: her bağlantı -meli olmak bir gerçek <a href> bu nedenle Google -ebilir reliably izle o. en çok yaygın mistake dır building flyout ile JavaScript click handlers yerine gerçek bağlantılar — o görünür fine -e bir kişben, ama arama motorları -ebilir’t tarama o. On mobile ( hamburger menu), emin olun siz kept aynı bağlantılar.

ne bir mega menu dır

bir mega menu dır bir disclosed navigation panel — hidden until siz hover veya click bir top-level menu item — şu opens -e göster bir lot of bağlantılar at once, arranged in columns tarafından category bu nedenle onlar’re easy -e scan. bir olağbir dropdown verir siz bir tek kısa liste. bir mega menu verir siz “Shoes” opening -e Men’s, Women’s, ve Kids’ columns, her ile onun kendi subcategories. Big online stores kullan them çünkü onlar izin ver bir shopper jump -e bir deep category sayfa -den anywhere on site in bir click.

önemli thing -e understand: bir mega menu dır sadece bir pile of benç bağlantılar in bir fancy container. Everything şu’s true hakkında benç bağlantılar generally dır true burada. -erseniz haven’t okuyun benç bağlantılar yaz-up in bu küme, başla orada — bu sayfa dır practical, “how do I not break it” companion.

bir kural şu önem taşır en çok

bençin bir arama motoru -e izle bir bağlantı, o sahiptir -e olmak bir gerçek HTML bağlantı — bir <a> element ile bir href:

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

şu’s o. eğer sizin mega menu’s bağlantılar dır gerçek <a href> bağlantılar, siz’re 90% of way orada. trouble starts ne zaman bir developer builds flyout ile JavaScript “click to go here” behavior yerine gerçek bağlantılar. -e bir kişben, o görünür identical — siz click ve sayfa loads. -e Google, orada’s nothing -e izle, bu nedenle şunlar sayfalar -ebilir quietly go undiscovered.

nasıl -e kontrol et yours

yapğru-click sayfa ve seç View sayfa kaynak (değil “Inspect”) ve arama bençin bir of sizin menu bağlantılar. eğer o shows up olarak <a href="..."> in şu raw kaynak, good. eğer sizin menu bağlantılar yalnızca görün -dığınızda kullan Inspect Element ( live, JavaScript-oluşturulmuş sürüm) ama değil in View kaynak, şu’s warning sign -e hand sizin developer.

yapmayın forget mobile

On phones sizin mega menu olur bir hamburger veya accordion menu. ekipler çoğu zaman trim şu menu -e koru o tidy — ve accidentally drop bağlantılar şu yalnızca existed orada. Google ister sizin mobile bençerik -e match sizin desktop bençerik, bu nedenle çalıştır aynı kontrol et on mobile menu: dır aynı bağlantılar orada, ve dır onlar gerçek <a href> bağlantılar?

iste deeper sürüm — JavaScript başarısızlık mode in detail, whether hidden-until-hover bençerik dır discounted, nasıl çok söyleıda bağlantılar dır de çok söyleıda, ve bir good-vs-bad markup örnek? Switch -e Advanced tab.

TL;DR — bir mega menu dır benç bağlantılar wearing bir bigger UI, bu nedenle her kural -den benç bağlantılar yaz-up uygulanır unchanged — başlangıç ile <a href> requirement. #1 gerçek-world başarısızlık dır bir JS click/hover flyout whose bağlantılar değildir gerçek anchors: o görünür linked -e bir kullanıcı ama Google -ebilir’t tarama o, silently orphaning sayfalar eğer menu idi onların yalnızca internal bağlantı. Verify ile View kaynak, değil Inspect. bençerik hidden until hover değildir automatically discounted bençin olma hidden olarak uzun olarak o’s in initial HTML ve değil fetched yalnızca on interaction — CSS-hidden dır fine; AJAX-on-hover dır risk. Google şunu söylüyor o takes şu bençerik -e account, gerçben o hasn’t documented identical sıralama weight -e her zaman-visible bençerik. No hard bağlantı-count ceiling vardır ( 100-bağlantı kural dır bir myth), ama organizasyon dır gerçek lever: grup tarafından category ile scannable columns ve descriptive anchor text bu nedenle siz yapmayın pancake sizin topical structure. Mobile hamburger/accordion gerektirir aynı crawlable bağlantılar, değil bir trimmed sürüm. Structured data değildir bir substitute bençin gerçek bağlantılar.

başla burada: bir mega menu dır sadece benç bağlantılar

ben iste -e ayarla expectations önce getting -e specifics. orada dır nothing magical veya separate hakkında “mega menu SEO.” bir mega menu dır bir navigation component oluşturulmuş entirely -den benç bağlantılar, ve her kural şu governs benç bağlantılar generally — crawlable-bağlantı requirement, descriptive anchor text, fact şu orada’s no magic bağlantı-count limit — uygulanır burada ile zero modification. ben’m değil going -e re-derive şunlar; benç bağlantılar article in bu küme kapsar them, ve bu sayfa cross-references o repeatedly.

ne yapar mega menus worth onların kendi sayfa dır şu onlar yap bir thing olağbir navigation yapmaz: onlar cram bir unusually büyük number of bağlantılar -e bir tek, repeated, sitewide UI element. şu concentration dır ne raises two distinct risks — bir implementation risk (JavaScript flyouts şu never render gerçek bağlantılar) ve bir structural risk (üzerinde-flattening sizin site bu nedenle Google loses grouping sinyal). structural side — flat-vs-deep, pyramid-vs-pancake argument — dır zaten covered in site architecture ve web sitesi structure articles in bu küme, dahil Mueller’s line şu üzerinde-flattening bir site ile bir mega menu -ebilir yap o bu nedenle “Google can’t recognize which parts of the site belong together.” ben’m değil going -e re-litigate şu burada. bu sayfa dır hakkında practical oluştur.

tek en çok yaygın başarısızlık: JS handlers yerine gerçek bağlantılar

burada’s bir ben see break in wild -den fazla herhangi bir diğer. bir ekip builds bir mega menu — çoğu zaman ile bir older jQuery plugin, veya bir hand-rolled React/Vue component — ve flyout’s “links” dır aslında click handlers, bir router attribute ile no href, veya bençerik şu yalnızca alır injected -e DOM sonra bir hover veya click event fires. Google’ın kendi liste of bağlantı formats o -ebilir’t reliably tarama maps yapğrudan üzerine tam olarak bunlar 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 -->

neden bu bir dır bu nedenle dangerous dır şu ** başarısızlık dır silent.** sayfalar bak linked — bir human hovers, sees flyout, tıklamalar, ve lands on category sayfa. Nothing görünür broken. ama şunlar destination sayfalar al zero tarama ve zero bağlantı-equity credit -den mega menu, ve eğer mega menu idi onların yalnızca internal bağlantı, onlar ol orphan sayfalar (see benç bağlantılar article on neden orphans dır bir discovery dead end). -ebilirsiniz sahip bir entire category tree şu’s invisible -e Google -iken looking perfectly navigable -e her human kim testler o. şu’s neden o survives QA: humans yapmayın experience bug.

nasıl -e verify bir mega menu dır aslında crawlable

yapmayın trust rendered sayfa — kontrol et kaynak.

• View sayfa kaynak, değil Inspect Element. yapğru-click → View sayfa kaynak shows raw HTML server sent. Inspect Element shows live DOM sonra JavaScript sahiptir çalıştır, hangi hides tam olarak sorun siz’re hunting. eğer sizin flyout bağlantılar görün olarak <a href="..."> in View kaynak, onlar’re server-rendered ve safe. eğer onlar yalnızca göster up in Inspect view, şu’s sizin red flag.
• URL Inspection araç (GSC). çalıştır sayfa aracılığıyla arama Console’s URL Inspection ve bak at rendered HTML / tarandı sayfa. bu söyler siz ne Googlebot aslında ended up ile.

nuance worth stating plainly: yes, Google renders JavaScript now, bu nedenle bir JS-oluşturulmuş menu -ebilir al tarandı. ama “might” dır operative word. verifiable, safe pattern dır server-rendered <a href> bağlantılar, progressively enhanced ile JavaScript bençin hover animation ve interactivity — değil bağlantılar şu depend on JS -e var ol at tümü. kullan JS -e yap menu behave, değil -e yap bağlantılar var ol.

dır hidden-until-hover bençerik discounted?

bu soru everyone eventually asks hakkında mega menus, ve o’s bir place nerede eski SEO folklore dır genuinely outdated. bir mega-menu flyout dır hidden until siz hover o — yapar Google discount tümü şunlar bağlantılar çünkü onlar’re değil visible on load?

Not automatically — but be precise about what that means, because this is where people overclaim. Current Google guidance and John Mueller’s own statement say content present in the HTML but visually hidden — inside a hover flyout, a closed accordion, an inactive tab — is taken into account, not excluded outright. Mueller, asked directly whether hidden tab/accordion content is devalued under mobile-first indexing: “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” (reported by Roger Montti in Search Engine Journal’s write-up of the myth). Google’s mobile-first indexing docs back this operationally, telling you it’s fine to move content “into accordions or tabs” for mobile UX as long as it stays equivalent to desktop.

ne şu quote aslında establishes dır availability — bençerik alır tarandı, rendered, ve kabul edilen, yerine thrown out. o yapmaz establish şu hover-hidden bençerik carries identical sıralama weight -e her zaman-visible bençerik; Google hasn’t published anything on şu specific soru either way, bu nedenle ele al o olarak undocumented yerine assuming equivalence. koru two questions separate: dır o excluded outright (no — settled) versus yapar o rank tam olarak like visible bençerik (değil documented).

bu supersedes older (kabaca 2015–2016-era) line şu bençerik behind tabs ve click—e-expand boxes carried daha az sıralama weight — şu specific claim dır dead. ne record aslında supports dır narrower: hidden-in-HTML bençerik değildir discounted out of hand, ama no bir sahiptir documented şu onun weighting dır identical -e visible bençerik. -erseniz’ve heard eski “discounted” sürüm, bu ne changed — yapmayın swap o bençin bir equally unsupported “definitely equal” sürüm.

ama orada’s bir nuance şu trips kişiler up, ve o’s whole game: “hidden via CSS” and “fetched yalnızca on interaction” dır two completely farklı things.

• bir flyout şu’s display:none until hover, ile bağlantılar zaten sitting in DOM, dır fine — dizine eklenmiş normally.
• bir flyout whose HTML dır fetched via bir API çbirğrı triggered tarafından hover event -ebilir never olmak tarandı at tümü.

şu’s değil bir “hidden content is discounted” sorun — o’s bir crawlability sorun. bağlantılar yapmayın var ol until bir kullanıcı yapar something, bu nedenle bir crawler never sees them. Conflating şunlar two başarısızlık modes dır tam olarak nasıl myth survives. koru them separate: CSS-hidden bağlantılar = fine; AJAX-on-interaction bağlantılar = broken.

bağlantı budget: grup o, yapmayın dump o

orada dır no documented hard limit on nasıl çok söyleıda bağlantılar bir mega menu -ebilir sahip. eski “100 links per page” kural dır bir flat myth — benç bağlantılar article debunks o in full, bu nedenle ben won’t re-argue o burada. Google’s line dır şu orada’s no magical ideal number.

ama “no limit” yapmaz anlamına gel “dump everything in.” gerçek lever değildir raw count — o’s organizasyon. bu nerede Mueller’s gerçek mega-menu yanıt dır yararlı. In bir 2021 arama Central hangout (reported tarafından Barry Schwartz), someone described bir mega menu ile üzerinde 1 000 bağlantılar ve bir trafik drop sonra moving şunlar bağlantılar -den hover-loaded -e static HTML. Mueller’s practical concern wasn’t number — o idi whether bir huge, undifferentiated ayarla of aynı-level bağlantılar flattens topical grouping. olarak he put o, going de flat anlamına gelir “biz think, oh, tümü of bunlar dır equally önemli, ve biz yapmayın gerçekten know hangi of bunlar dır connected -e her diğer,” whereas “bir pyramid structure yardımcı olur us bir lot daha -e understand context of individual sayfalar.” Notably, he ayrıca ele alınır reverting bazı of şunlar 1 000 bağlantılar -e hover-loading — -iken tutma bir tarama path -e them via diğer, daha relevant sayfalar — olarak bir legitimate structural düzelt, değil something inherently bad.

practical takeaway: bir well-organized 150-bağlantı mega menu ile clear column headers (Men’s / Women’s / Kids’, o hâlde subcategories altında her) preserves hierarchy sinyal. bir unorganized wall of 150 bağlantılar ile no grouping yapmaz — hatta at identical count. bu nedenle:

• grup tarafından gerçek category boundaries. Columns ve headings şu mirror sizin gerçek site hierarchy.
• koru columns scannable. bir handful of items per grup, değil bir alphabetical soup of everything.
• koru anchor text descriptive ve specific. bağlantı text şu describes destination — değil “Shop now” repeated thirty times.
• yapmayın yap o exhaustive. bir mega menu dır bençin high-level discovery paths. sizin true priority sayfalar -meli ayrıca earn contextual, in-bençerik bağlantılar, değil rely solely on global menu (hangi repeats identically on her sayfa ve spreads aynı “importance” sinyal everywhere).

Mobile equivalents ihtiyaç duy aynı bağlantılar, değil bir smaller UI

On mobile sizin mega menu olur bir hamburger veya accordion. trap dır ekipler trimming mobile menu bençin UX cleanliness ve, in doing bu nedenle, dropping destinations şu existed yalnızca on desktop mega menu. Google’s mobile-ilk dizine ekleme rehberlik dır explicit şu mobile bençerik — navigation included — -meli olmak eşdeğeri -e desktop. eğer sizin mobile nav dır nerede dizine ekleme olur (ve altında mobile-ilk dizine ekleme, o dır), bağlantılar siz dropped orada -ebilir olmak ele alınır olarak daha az önemli, veya — eğer mega menu idi onların yalnızca internal bağlantı — go undiscovered entirely.

bu nedenle çalıştır aynı denetim on mobile şu siz çalıştır on desktop: pull up mobile nav’s rendered HTML, yapğrula aynı destinations dır present, ve yapğrula her dır bir gerçek <a href>. aynı crawlability test et, aynı parity test et — sadece on smaller UI.

şu kapsar destinations. o yapmaz kapsa interaction — bir separate kontrol et, ve bir ekipler skip. Mobile-ilk dizine ekleme requires önemli destination ayarla -e olmak present, değil bir identical interaction layout, bu nedenle bir hamburger/accordion dır fine olarak bir pattern. ama whatever disclosure pattern siz kullan gerektirir onun kendi keyboard ve focus test et: -ebilir bir keyboard-yalnızca kullanıcı ulaş trigger, open o, ve tab aracılığıyla destinations, ile bir accurate aria-expanded state? WAI-ARIA disclosure navigation pattern dır bir worked örnek of şu behavior — ele al o olarak bir conforming implementation, değil yalnızca bir. test et destination parity ve disclosure/keyboard behavior olarak two separate geç/başarısız ol kontroller, since bir menu -ebilir geç bir ve başarısız ol diğer.

bir daha myth: structured data değildir bir crawlability düzelt

bazı mega-menu guides present SiteNavigationElement schema markup olarak eğer o yapar bir menu crawlable. o yapmaz. Structured data -ebilir describe sizin navigation semantically, ama o değildir bir substitute bençin gerçek crawlable bağlantılar — aynı principle benç bağlantılar article kapsar, nerede Mueller notes şu hatta -dığınızda provide URLs in structured data, “biz yapmayın kullan şunlar URLs aynı şekilde olarak biz -irdi kullan olağbir benç bağlantılar on bir sayfa.” Schema dır bir layer siz ekle on top of zaten-crawlable <a href> bağlantılar, never yerine them.

ne bunlar kontroller yap — ve yapmayın — guarantee

gerçek anchors, kaynak-visible bağlantılar, grouped structure, mobile parity, ve keyboard-operable disclosure kaldır specific başarısızlık modes covered above: undiscovered sayfalar, flattened topical structure, broken parity, ve inaccessible navigation. None of o guarantees tarama, dizine ekleme, higher sıralamalar, daha trafik, veya bir AI citation — şunlar depend on far -den fazla navigation markup. ele al kaynak/rendered anchors, crawler extraction, desktop/mobile destination parity, ve keyboard/focus behavior olarak separate geç/başarısız ol testler, değil bir bundled düzelt; bir mega menu -ebilir geç bazı of bunlar ve başarısız ol others.

-meli sizin site hatta sahip bir mega menu?

Briefly, çünkü full flat-vs-deep argument lives in site architecture ve web sitesi structure articles: bir mega menu earns onun place ne zaman sizin site dır büyük enough şu cross-category discovery dır bir genuine kullanıcı journey ve surfacing deep category sayfalar -den everywhere meaningfully cuts click depth (o’s bir of en iyi araçlar bençin tutma önemli sayfalar bençinde bir few tıklamalar of homepage — ve bençin hitting Bing’s kabaca three-tıklamalar—den-home target). eğer sizin catalog dır küçük, veya uzun tail of menu items barely alır clicked, bir mega menu dır overhead siz yapmayın ihtiyaç duy. Decide whether -e sahip bir önce siz obsess üzerinde nasıl -e oluştur o — decision tree lens walks aracılığıyla o.

AI özet

bir condensed take on Advanced sürüm:

• bir mega menu dır sadece benç bağlantılar in bir bigger UI. her internal-bağlantı kural uygulanır unchanged — başlangıç ile: her bağlantı -meli olmak bir gerçek <a href>.
• ** #1 gerçek-world başarısızlık:** bir JS click/hover flyout whose bağlantılar değildir gerçek anchors (onclick, routerLink ile no href, veya DOM injected yalnızca on interaction). o görünür linked -e bir kullanıcı ama Google -ebilir’t tarama o — ve eğer mega menu idi bir sayfa’s yalnızca internal bağlantı, şu sayfa alır orphaned. başarısızlık dır silent, bu nedenle o survives human QA.
• Verify ile View kaynak, değil Inspect Element. View kaynak shows raw server HTML; eğer bağlantılar görün orada olarak <a href>, onlar’re safe. ayrıca kullan GSC’s URL Inspection.
• Safe pattern: server-rendered <a href> bağlantılar progressively enhanced ile JS bençin animation — değil bağlantılar şu depend on JS -e var ol.
• Hidden-until-hover değildir excluded outright. Mueller ve güncel mobile-ilk docs söyle bençerik in HTML ama visually hidden (flyouts, accordions, tabs) dır taken -e account — ama Google hasn’t documented şu o carries identical sıralama weight -e her zaman-visible bençerik; şu’s bir separate, open soru. nuance: CSS-hidden bağlantılar = fine, evaluated normally; fetched-yalnızca-on-interaction (AJAX-on-hover) bağlantılar = -ebilir never olmak tarandı. şunlar dır farklı başarısızlık modes.
• No mega-menu change guarantees bir outcome. gerçek anchors, kaynak-visible bağlantılar, grouped structure, mobile parity, ve keyboard-operable disclosure kaldır specific başarısızlık modes — onlar yapmayın guarantee tarama, dizine ekleme, higher sıralamalar, trafik, veya bir AI citation. Validate her kontrol et (kaynak/rendered anchors, crawler extraction, desktop/mobile parity, keyboard ve focus behavior) separately.
• No hard bağlantı-count ceiling (100-bağlantı kural dır bir myth). gerçek lever dır organizasyon: grup tarafından category, scannable columns, descriptive anchor text. Mueller’s mega-menu yanıt shows concern dır flattening grouping sinyal, değil raw count.
• Mobile gerektirir aynı crawlable bağlantılar, değil bir trimmed hamburger — Google expects mobile bençerik parity.
• Structured data (SiteNavigationElement) değildir bir substitute bençin gerçek crawlable bağlantılar.

resmî dokümantasyon

orada dır no Google veya Bing doc scoped specifically -e “mega menus.” tümü resmî rehberlik dır general bağlantı-crawlability, anchor-text, ve mobile-ilk docs applied -e bu UI pattern. burada dır relevant birincil kaynaklar.

Google

• SEO bağlantı en iyi practices — crawlable-<a href> requirement ve liste of non-recommended bağlantı formats (no href, onclick, non-anchor tags) şu mega-menu flyouts commonly break. bu foundational doc.
• Mobile-ilk dizine ekleme en iyi practices — bençerik parity arasında mobile ve desktop, ve explicit note şu moving bençerik -e accordions veya tabs bençin mobile dır fine olarak uzun olarak o stays eşdeğeri.
• In-Depth rehber -e nasıl Google arama çalışır — general URL-discovery context: bağlantılar dır nasıl Google bulur en çok yeni sayfalar.

Bing / Microsoft

• Bing Webmaster Guidelines — no mega-menu-specific bençerik, ama Bing’s general rehberlik (koru önemli sayfalar bençinde kabaca three tıklamalar of homepage, ve bir heavier reliance on XML sitemaps bençin discovery) dır relevant backdrop. çünkü Bing leans daha on sitemaps, bir mega menu şu accidentally orphans sayfalar dır bir comparatively bigger risk orada — fewer alternate discovery paths yap fallback önem taşır daha.

Schema.org

• SiteNavigationElement — navigation schema type. yararlı olarak bir semantic enhancement layered on top of gerçek bağlantılar; değil bir crawlability düzelt.

Accessibility (WAI-ARIA / WCAG)

• WAI-ARIA disclosure navigation menu örnek — bir worked örnek of keyboard-operable disclosure behavior bençin tam olarak bu UI pattern. o’s bir örnek implementation, değil yalnızca conforming bir.
• WCAG 2,2 — Understanding Success Criterion 2.1.1: Keyboard — underlying requirement şu bir mega menu’s trigger ve flyout olmak operable olmadan bir mouse.

Quotes -den kaynak

On—record statements relevant -e building bir crawlable, well-structured mega menu.

Google — crawlable-bağlantı requirement (SEO bağlantı en iyi practices)

• “Google can only crawl your link if it’s an <a> HTML element (also known as anchor element) with an href attribute.” Jump -e quote

John Mueller, Google — hidden/tabbed bençerik dır dizine eklenmiş aynı olarak visible bençerik

• “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.” (asked yapğrudan whether bençerik hidden behind tabs/accordions dır devalued altında mobile-ilk dizine ekleme) okuyun coverage

John Mueller, Google — flat vs. pyramid, in context of bir 1 000-bağlantı 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.” okuyun coverage
• “A pyramid structure helps us a lot more to understand the context of individual pages within the site.” / “I don’t think it would always have a negative effect.” (on going -den ~1 000 flat mega-menu bağlantılar -e bir deeper structure) okuyun coverage

John Mueller, Google — structured data değildir bir substitute bençin gerçek benç bağlantılar

• “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.” (Türkçe gloss: Yapılandırılmış veride URL’ler sağlasanız bile bu URL’leri sayfadaki normal iç bağlantılarla aynı şekilde kullanmayız.)

-meli siz sahip bir mega menu — ve dır yours safe?

bu walks two questions şu aslında önem taşır: -meli bu site sahip bir mega menu, ve eğer o sahiptir bir, dır o oluşturulmuş in bir way Google -ebilir tarama? bençin full flat-vs-deep structural argument, see site architecture ve web sitesi structure articles in bu küme.

Mega menü SEO kontrol listesi

çalışır o top -e bottom — crawlability ilk, structure ikinci, mobile son:

• her flyout bağlantı dır bir gerçek <a href> — değil onclick, değil bir routerLink / router attribute olmadan href, değil bir non-anchor tag styled olarak bir bağlantı.
• bağlantılar görün in View sayfa kaynak, değil sadece in Inspect Element / live DOM ( difference arasında server-rendered ve JS-yalnızca).
• Flyout HTML dır in initial sayfa, hidden ile CSS — değil fetched via bir API çbirğrı on hover/click.
• URL Inspection (GSC) confirms menu bağlantılar dır present in tarandı / rendered HTML.
• JavaScript enhances, yapmaz oluştur — JS handles hover animation ve interactivity; bağlantılar var ol olmadan o.
• No orphaned destinations — no önemli sayfa relies on mega menu olarak onun yalnızca internal bağlantı (cross-kontrol et ile contextual in-bençerik bağlantılar).
• bağlantılar dır grouped tarafından category ile column headers şu mirror sizin site hierarchy — değil bir ungrouped wall.
• Columns dır scannable — bir handful of items per grup, değil bir alphabetical dump of everything.
• Anchor text dır descriptive ve specific -e her destination — no generic “Shop now” repeated genelinde dozens of bağlantılar.
• ** menu dır selective, değil exhaustive** — high-level discovery paths, ile priority sayfalar ayrıca earning contextual bağlantılar.
• Mobile hamburger/accordion sahiptir aynı bağlantılar olarak desktop mega menu (bençerik parity).
• Mobile bağlantılar dır ayrıca gerçek <a href> — çalıştır aynı View kaynak / URL Inspection kontrol et on mobile nav.
• Structured data (SiteNavigationElement), eğer kullanılan, sits on top of gerçek bağlantılar — never olarak bir substitute bençin them.
• Re-kontrol et sonra front-end upgrades — framework changes dır nerede gerçek bağlantılar quietly ol click handlers.

Mega menü SEO — kısa başvuru

Crawlable vs. değil

** two başarısızlık modes kişiler conflate**

• CSS-hidden (bağlantılar in DOM, panel hidden until hover) → dizine eklenmiş normally.
• Fetched-on-interaction (bağlantılar yapmayın var ol until bir event fires) → -ebilir never olmak tarandı. bu bir crawlability bug, değil bir “hidden content is discounted” sorun.

Mit ve gerçek karşılaştırması

Quick verify

• View sayfa kaynak (değil Inspect) → arama bençin bir menu bağlantı → dır o <a href>?
• GSC URL Inspection → tarandı/rendered HTML sahiptir bağlantılar?
• Mobile: repeat her ikisi kontroller on hamburger/accordion menu.

İyi ve kötü mega menü işaretlemesi karşılaştırması

Bad: bir JS-yalnızca flyout

bağlantılar şu yapmayın var ol until JavaScript runs — Google -ebilir’t reliably izle herhangi bir of bunlar:

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

her destination burada dır invisible -e bir crawler: <span> “links” değildir anchors, routerLink sahiptir no href, ve onclick anchor sahiptir nothing -e izle. eğer bunlar sayfalar sahip no diğer internal bağlantı, onlar’re orphaned.

Good: server-rendered bağlantılar, progressively enhanced

bağlantılar dır gerçek <a href> elements sitting in server HTML; JavaScript yalnızca 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; }

Everything burada dır crawlable in raw HTML, ve hiding panel ile CSS yapmaz change şu — CSS-hidden bençerik dır dizine eklenmiş aynı olarak visible bençerik.

daha iyi hâlâ: grouped, değil bir wall

two markups below sahip aynı bağlantı count ama söyle Google çok farklı things. On left, bir ungrouped dump; on yapğru, aynı bağlantılar grouped altında headings şu mirror sizin 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>

her ikisi dır crawlable. yalnızca grouped sürüm preserves category relationships şu izin ver Google understand hangi sayfalar belong together.

Mega menü anti-pattern’leri

recurring ways mega menus break, ve ne yapılacağı instead.

1. bağlantılar şu dır click handlers, değil anchors. classic. onclick, bir routerLink/router attribute ile no href, veya bir <span> styled olarak bir bağlantı. görünür fine -e bir human; bir crawler -ebilir’t izle o. → kullan gerçek <a href> bağlantılar, enhanced ile JS bençin behavior.

2. Flyout HTML fetched on hover. panel’s bençerik dır pulled -den bir API yalnızca sonra hover/click fires, bu nedenle bağlantılar yapmayın var ol in sayfa until bir kullanıcı acts. → Put bağlantılar in initial HTML; hide panel ile CSS instead.

3. Trusting rendered sayfa yerine kaynak. Checking menu in Inspect Element ( live DOM) hides tam olarak JS-yalnızca bug siz -meli olmak hunting. → kullan View sayfa kaynak ve GSC URL Inspection.

4. undifferentiated bağlantı wall. Hundreds of aynı-level bağlantılar dumped -e bir panel ile no grouping. No bağlantı-count kural dır broken, ama topical grouping sinyal dır flattened. → grup tarafından category ile headings şu mirror sizin hierarchy; koru o selective.

5. Generic, repeated anchor text. “Shop now,” “View all,” “Click here” repeated genelinde dozens of destinations söyler arama motorları nothing hakkında nerede her bağlantı goes. → Descriptive anchor text specific -e her destination.

6. bir trimmed mobile menu. Dropping bağlantılar -den hamburger/accordion bençin bir cleaner mobile UI breaks mobile-ilk bençerik parity — ve -ebilir orphan sayfalar whose yalnızca bağlantı idi desktop mega menu. → koru aynı bağlantılar, ve verify onlar’re gerçek anchors on mobile de.

7. Treating schema olarak bir crawlability düzelt. Adding SiteNavigationElement markup üzerinde JS-yalnızca bağlantılar ve assuming o yapar them crawlable. o yapmaz. → Schema dır bir semantic layer on top of zaten-crawlable bağlantılar, never bir replacement.

8. Believing hidden-until-hover dır discounted. Building elaborate workarounds çünkü of eski “hidden content is devalued” myth. CSS-hidden bağlantılar in DOM dır dizine eklenmiş normally. → yapmayın üzerinde-engineer yaklaşık bir myth; sadece emin olun bağlantılar dır aslında in HTML.

Mega menu problems -e diagnose

bağlantılar görün -e çalışır, ama bir crawler cannot discover them

Symptom: Clicking bir menu item in bir browser opens destination, ama URL dır absent -den bir tarama şu started at home sayfa. muhtemel neden ol: item dır bir div, button, veya JavaScript handler yerine bir anchor ile bir href. düzelt: Render bir gerçek <a href="/destination/"> in HTML, o hâlde tarama -den home sayfa yeniden ve yapğrula destination görünür olarak bir internal outlink.

Desktop bağlantılar dır crawlable ama mobile bağlantılar disappear

Symptom: önemli categories dır present in desktop menu ama absent -den mobile DOM. muhtemel neden ol: mobile menu kullanır bir separate, shortened data kaynak. düzelt: ver mobile accordion aynı önemli destinations olarak desktop menu ve yapğrula anchors var ol önce herhangi bir tap.

bir flyout opens on hover ama değil ile bir keyboard

Symptom: Mouse kullanıcılar -ebilir ulaş panel, -iken tab ve enter yapmayın expose o. muhtemel neden ol: interaction depends yalnızca on hover. düzelt: yap trigger bir button ile keyboard handling ve bir accurate aria-expanded state; koru destination bağlantılar olarak olağbir anchors.

ulaş, Render, Restrain framework

kullan three kontroller ne zaman reviewing herhangi bir mega menu:

1. ulaş: -ebilir bir kullanıcı ve crawler ulaş her önemli destination aracılığıyla bir gerçek anchor, on desktop ve mobile?
2. Render: dır şunlar anchors present in delivered veya rendered HTML olmadan requiring bir hover, click, veya API response?
3. Restrain: dır menu limited -e destinations şu deserve sitewide bağlantılar, grouped altında yararlı headings yerine becoming bir site map in bir dropdown?

bir menu fails eğer herhangi bir bir of three breaks. ulaş protects discovery, Render protects implementation, ve Restrain protects hierarchy ve usability.

Inspect mega-menu bağlantılar in browser

çalıştır bu in Chrome DevTools Console -iken menu dır closed. o listeler anchors bençinde yaygın navigation containers ve flags entries olmadan bir 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') })));

çalıştır aynı snippet at desktop ve mobile viewport widths. bir destination şu vardır in yalnızca bir sonuç ayarla gerektirir review.

Extract navigation destinations in bir tarama

kullan bu XPath in bir crawler’s custom extraction feature -e collect menu URLs:

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

union kapsar semantic nav elements ve navigation regions identified ile bir ARIA role. Compare extracted ayarla ile approved navigation inventory rather -den assuming her click target dır bir bağlantı.

kaynaklar worth sizin time

benim related yazma

• benç bağlantılar bençin SEO: bir Actionable rehber — full Ahrefs rehber on nasıl benç bağlantılar geç PageRank, no-düzeltilmiş-bağlantı-limit framing, ve anchor text — tümü of bu da ne bir mega menu dır gerçekten yapılmış of.
• Beginner’s rehber -e teknik SEO — nerede navigation ve crawlability fit -e bigger teknik picture.
• JavaScript SEO sorunlar & en iyi Practices — rendering/JS side şu’s behind en çok broken mega-menu flyouts.

resmî

• Google’s SEO bağlantı en iyi practices — canonical reference bençin ne yapar bir bağlantı crawlable.
• Google’s Mobile-ilk dizine ekleme en iyi practices — bençerik-parity requirement sizin mobile menu sahiptir -e meet.

-den yaklaşık industry

• Google’s Mueller On Myth Of Hidden Tab bençerik (arama motoru Journal) — direct Mueller statement şu hidden-until-interaction bençerik dır dizine eklenmiş aynı olarak visible bençerik.
• Google Recommends Pyramid Navigation Structure bençin büyük siteler (arama motoru Roundtable) — Mueller’s full yanıt -e 1 000-bağlantı mega-menu soru; kaynak bençin bağlantı-budget rehberlik burada.
• Tabbed bençerik: dır o bir Google sıralama faktörü? (arama motoru Journal) — history of hidden-bençerik debate ve neden eski “discounted” line dır outdated.
• Google: bençerik bençinde Tabs veya Click -e Expand Boxes dır Discounted (arama motoru Roundtable) — older, now-superseded rehberlik, yararlı bençin understanding nerede myth came -den.
• Mega Menus & SEO (MagsTags) — bir bağlantı-equity-theory-heavy treatment, dahil bir worked örnek of nasıl bir big menu spreads PageRank; yararlı background, değil Google-sourced.
• r/TechSEO — community bençin debugging orphaned sayfalar ve crawlability sorunlar, bu da nerede en çok mega-menu problems aslında surface.

test et yourself: Mega Menu SEO

Five quick questions on building bir crawlable, well-structured mega menu. seç bir yanıt her biri bençin, o hâlde kontrol et.

Değişiklik günlüğü