Will Google follow links created in JavaScript?

[csdude55]

Let's say that I have a series of links that are created in JavaScript. Something like:

<script>
var navArr = (
 "link_1",
 "link_2"
);

function createLinks(x) {
 document.getElementById('main').href = navArr[x] + '.html';
}
</script>

<a id="main" href="link.html" onMouseOver="createLinks(1)" onMouseOut="createLinks(0)">

That's just dummy code, of course. In practice I have something closer to the hierarchical menu used on this site.

But the question is, would Google be smart enough to index link_1.html and link_2.html? And if so, would they be considered just as important as link.html (the one that's linked in the original href without relying on JS)?

[rainborick]

We know that Google has significant capabilities in processing JavaScript, and I would expect this kind of code to be easily interpreted by them, but I doubt they'd do much more with it than do URL discovery because you're relying on 'onmouseover'. On the surface, I think the most likely result is that they only treat 'link.html' as the linked URL.

However, I would be slightly concerned that this approach might be flagged as a deceptive link/button at some point. It would probably pass any subsequent manual review, but you could possibly run into some temporary ranking issues in the meantime. Why are you using this code?

[csdude55]

My navigation is a type of hierarchical menu, with 9 menus and around 50 submenus (5 or 6 under each category). I'm trying to speed up delivery of the page, and move valid content up a bit in the source code (something we discussed in an earlier thread; I don't know that it will really matter, but while I'm rebuilding I figure that it can't hurt).

My navigation looks like:

____________
| CATEGORY |__ Category 2 ____ Category 3 _____
|                                          |
| Subcat | Subcat 2 | Subcat 3 | Subcat 4 | Subcat 5  |
|__________________________________________|

and the code is sort of like:

<script>
function navMenu(x) {
 for (var i=0; i <= 2; i++) {
  var j = document.getElementById('sub_' + x).style.display;

  if (x == i) j = 'block';
  else j = 'none';
 }
}
</script>

<div id="main_0" onMouseOver="navMenu(0)" onMouseOut="navMenu(0)" style="float: left">
 CATEGORY
</div>

<div id="main_1" onMouseOver="navMenu(1)" onMouseOut="navMenu(0)" style="float: left">
 CATEGORY 2
</div>

<div id="main_2" onMouseOver="navMenu(2)" onMouseOut="navMenu(0)" style="float: left">
 CATEGORY 3
</div>
<div style="clear: both"></div>

<div id="sub_0" style="display: block">
 <span>Subcat</span>
 <span>Subcat 2</span>
 <span>Subcat 3</span>
 <span>Subcat 4</span>
 <span>Subcat 5</span>
</div>

<div id="sub_1" style="display: none">
 <span>Subcat</span>
 <span>Subcat 2</span>
 <span>Subcat 3</span>
 <span>Subcat 4</span>
 <span>Subcat 5</span>
</div>

<div id="sub_2" style="display: none">
 <span>Subcat</span>
 <span>Subcat 2</span>
 <span>Subcat 3</span>
 <span>Subcat 4</span>
 <span>Subcat 5</span>
</div>

That's obviously not exact, I just typed it up for this post, but I think it gives you the idea. I have 9 sections of subnavigation (one for each category), with 8 of them set to display: none by default. When you mouse over one of the main categories, the respective subcategory changes from display: none to display: block. And when you mouse out, the default comes back to display: block.

It works well and fast, but there's almost 1,000 lines of HTML output, not counting the JavaScript! My thought was that, if I could change it to something similar to what I wrote in the first post, I could cut it down to 107 lines of code.

In theory, that would make the page load faster, and could potentially put relevant content closer to the top of the page for Google. But if Google can't read those links, or worse, penalizes me for it, then that obviously defeats the purpose :-(

[rainborick]

What concerned me was that your JavaScript was changing the 'href' values to URLs other than the original/default. I'm still on my first cup of coffee here, and so I haven't completely absorbed your code, but I think you would be best off if your onmouseout() functions restored the default URL. It's going to be interesting to find out if you see any positive effects. Good luck!

[csdude55]

You're right, in the first example the JS never reverted back to the default. It started with link.html, onMouseOver set it to link1.html, and onMouseOut set it to link2.html.

That was just an example for the sake of discussion, though. In the actual code, onMouseOut would restore the default URL. But it would be re-generated by JS to duplicate the original so I'm not 100% sure whether that would "technically" be considered going back to the default. I don't know if there's a document.getElementById('whatever').href = document.getElementById('whatever').href.defaultHref; type of command? I've used this.defaultValue for input tags, but I don't know of similar defaults. Or does it really matter?

[rainborick]

No, there isn't a 'default' property that would allow you to recover the original URL. You'd need to incorporate it into your code. Naturally, there are any number of ways to do that. I'm sure you could can write it yourself, but PM me if you'd like some suggestions.

[csdude55]

I've been playing with it, and if I do this then it might end up being more like the code below. This would generate the entire submenu in a JS array, then onMouseOver / Out would use innerHTML to update the single element.

onMouseOut would default back to 0, which re-generates the same thing as the default.

This ends up taking up less space in the HTML source code than having multiple hidden elements, anyway. So as long as Google would follow the links then it might be the way to go.

<script>
var subnavArr = (
 "<a href='link_1.html'>Link A1</a> | <a href='link_2.html'>Link A2</a>",

 "<a href='link_3.html'>Link B1</a> | <a href='link_4.html'>Link B2</a>",

 "<a href='link_5.html'>Link C1</a> | <a href='link_6.html'>Link C2</a>"
);

function navMenu(x) {
 document.getElementById('subnav').innerHTML = subnavArr[x];
}
</script>

<div id="main_0" onMouseOver="navMenu(0)" onMouseOut="navMenu(0)" style="float: left">
 CATEGORY
</div>

<div id="main_1" onMouseOver="navMenu(1)" onMouseOut="navMenu(0)" style="float: left">
 CATEGORY 2
</div>

<div id="main_2" onMouseOver="navMenu(2)" onMouseOut="navMenu(0)" style="float: left">
 CATEGORY 3
</div>
<div style="clear: both"></div>

<div id="subnav">
 <a href='link_1.html'>Link A1</a> |
 <a href='link_2.html'>Link A2</a>
</div>

[Butes]

Yes, google does follow javascript links whether in the source or pushed into the DOM. This is being done to a fault where they will see long-tail objects in JS arrays and attempt to render them as URLs because of the similar structure.

more info over here to the successes (rather than failures) of JS links: [searchengineland.com...]