SEO and java script question

June 11th, 2007, 8:34 pm

I have changed from ugly basic menus that where very search engine friendly to nicer menus for the user, but I've found a problem. It seems that because my new menus use java script all of the links that they contain are not seen by the search engines. I have read about some ways to fix this such as linking a sitemap file on each page. This is fine and will ensure that all the pages included in the sitemap will be included, but this will not at all be the same as far as the internal structure of the site. Every page would link to the sitemap, and the sitemap would then link to everypage instead of every page linking to every page. In this way because every page is relevant to the overall subject of the site it would help to add relevance to each page. For example a page that contains things about a particular game would still lend relevance to every other page that it links to that pertains to games.

My question is this. Is there a way to still have the java based menus while still having the search engine friendly internal site structure? A site with the java menu is in my signature. Thank you for your time and help.

[joebert]

June 11th, 2007, 8:53 pm

Easiest thing to do in this scenario, is create a patch with Javascript that grabs a normal HTML menu section of links, & transforms them into what your new menu can use.

You'ld be using the same HTML type menu that you were before, but the added Javascript patch would replace that menu with the new formatting/transitions when a browser or somthing that understands Javascript loads the page.

This leaves the section screen readers & search engines understand, while still having the bells & whistles for thoose who would benefit from them.

June 11th, 2007, 10:54 pm

Thats makes sense. I am looking around for some examples that may help me in making this work around. I usually find pieces of code that are close to what I'm doing and then edit them. In doing so I've picked up enough html to work from scratch, but I have almost no java scripting experience. I wonder where would be a good place to get started. Perhaps a place that would have examples of something that maybe similar. If anyone out there has any ideas of some places to look for these types of javascript work arounds I would greatly appreciate it. Thank you and I will continue my search in the mean time.

[righteous_trespasser]

June 11th, 2007, 11:24 pm

What about hotscripts.com ...

[joebert]

June 11th, 2007, 11:39 pm

All you need to do is place your old menu in a container element that has an ID attribute, then place this after that element, but before where the menu starts.

The menu starts here.

Code: [ Download ] [ Select ]

<script language="JavaScript" src="menu.js"></script>

Place your old menu inside of this DIV element.

Code: [ Download ] [ Select ]

<div id="accessiblemenu">

</div>
<script type="text/javascript">document.getElementById('accessiblemenu').style.display = 'none';</script>

1. <div id="accessiblemenu">
3. </div>
4. <script type="text/javascript">document.getElementById('accessiblemenu').style.display = 'none';</script>

Then place all of it before where the JS menu starts so it looks somthing like this.

Code: [ Download ] [ Select ]

<div id="accessiblemenu">
<a href='...'>One</a>
<a href='...'>Two</a>
</div>
<script type="text/javascript">document.getElementById('accessiblemenu').style.display = 'none';</script>
<script language="JavaScript" src="menu.js"></script>

1. <div id="accessiblemenu">
2. <a href='...'>One</a>
3. <a href='...'>Two</a>
4. </div>
5. <script type="text/javascript">document.getElementById('accessiblemenu').style.display = 'none';</script>
6. <script language="JavaScript" src="menu.js"></script>

Simple fix, just hides the HTML version & displays the JS version.
Not the most elegant way to do it, but it works.

June 12th, 2007, 9:09 am

thank you very much I will get to work implememnting the changes. Again that you very very much.

June 12th, 2007, 10:02 am

It worked perfectly. Anyone else who has a problem like this will now have an easy work around. If anyone has any questions about any of this I would be happy to share what I have. Thank you again.

[joebert]

June 12th, 2007, 1:33 pm

Note, do not use CSS to hide the element in this situation, using JS to hide the element only works if JS is enabled.
If JS is disabled then the JS menu wont work, if the JS menu doesn't work you don't want CSS hiding the default menu.