Member Avatar for jewboy

We all know (or should know) the value of internal link building. And each link should have your keywords anchored within. I am working on a site that is linked together using Javascript dropdowns. The site is visually attractive, clean, and user friendly.

The question is: How can I keep the Javascript drop menu interface, while at the same time use my keywords to anchor the links?

Thanks all.

  • 3 Contributors
  • 3 Replies
  • 213 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Short answer: keep the dropdown UI, but make each menu item a real link with your keyword text in the anchor. That preserves the visual DHTML dropdown mentioned while giving crawlers and users real, descriptive internal links (don’t hide navigation behind onclick-only elements). (developer.mozilla.org)

Do it by progressive enhancement: output the full navigation as HTML anchors and use CSS/JS only to show/hide the submenus. This ensures the important link text and URLs exist in the page source even if JavaScript fails or is slow to render. Also avoid anchors like href="#" or javascript:void(0) for real navigation—use <button> for non-navigation controls and real href values for pages. (developer.mozilla.org)

If your site currently builds links entirely in client-side code (SPA style), consider server-side rendering or pre-rendering for SEO-critical pages so crawlers reliably see the same URLs and anchor text you show users. Google will render JavaScript, but rendering is queued and can be delayed; important links are safer in the initial HTML, and you must not block JS/CSS resources in robots.txt. Use history-based URLs rather than hash-only routes so each page has a crawlable URL. (developers.google.com)

Practical example (semantic, crawlable dropdown skeleton):

<nav>
  <ul>
    <li>
      <a href="/products/widgets" title="widgets">Widgets</a>
      <ul class="submenu">
        <li><a href="/products/widgets/blue" title="blue widgets">Blue widgets</a></li>
        <li><a href="/products/widgets/red" title="red widgets">Red widgets</a></li>
      </ul>
    </li>
  </ul>
</nav>

Test each page with the URL Inspection / Live Test and Rich Results / Mobile-Friendly tools in Search Console to confirm crawlers see your rendered links and metadata. Small changes to JS or routing can hide links unexpectedly—verify after deploys. (developers.google.com)

(Thanks to for the question and to and for the UI pointers — the UX can stay intact while keeping links crawlable and keyword-rich.)

Recommended Answers

All 3 Replies

Member Avatar for Dani

Use DHTML - similar to the dropdowns that appears in certain areas here on DaniWeb. For example, see the Thread Tools menu just above? Check out www.dynamicdrive.com for some handy DHTML things you can do. Also, sometimes a little bit of CSS is all you need!

Member Avatar for selbourne

wow dynamic drive is really very usefull

Member Avatar for Dani

Yup, the site's been around for a long while.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.