Search code examples
jqueryhtmlsearch-engine

Modifying HTML structure using Javascript and the effects on Search Engines

I have a nested ul menu structure that starts off like this:

<div id="left">
    <ul id="left-nav">
        <li>
            <a href="#">Link 1</a>
            <ul class=".sub-nav">
                <li><a href="#">Sublink 1</a></li>
                <li><a href="#">Sublink 2</a></li>
                <li><a href="#">Sublink 3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Link 2</a>
            <ul class=".sub-nav">
                <li><a href="#">Sublink 1</a></li>
                <li><a href="#">Sublink 2</a></li>
                <li><a href="#">Sublink 3</a></li>
            </ul>
        </li>
    </ul>
</div>

Due to a design requirement, I have to have all subnavs outside of their parent <li>s and append them to the #left container using jQuery.
I also keep a reference to each subnav using ids/data attributes

var $left = $("#left");
$(".sub-nav").each(function(index) {
    $(this).attr("id", "subnav" + index);
    $(this).parent().data("subnav", index);
    var offsetTop = $(this).parent().position().top;
    $(this).css("top", offsetTop);
    $(this).appendTo($left);
});

Here's the resulting HTML

<div id="left">
    <ul id="left-nav">
        <li>
            <a href="#" data-subnav="subnav1">Link 1</a>
        </li>
        <li>
            <a href="#" data-subnav="subnav2">Link 2</a>
        </li>
    </ul>
    <ul class=".sub-nav" id="subnav1">
        <li><a href="#">Sublink 1</a></li>
        <li><a href="#">Sublink 2</a></li>
        <li><a href="#">Sublink 3</a></li>
    </ul>
    <ul class=".sub-nav" id="subnav2">
        <li><a href="#">Sublink 1</a></li>
        <li><a href="#">Sublink 2</a></li>
        <li><a href="#">Sublink 3</a></li>
    </ul>
</div>

The menu now works perfectly but I have concerns about the fact that I'm changing the HTML structure and that the semantics are now off. Will this have any impact on Search Engines? Should I have any other concerns?

Solution

  • Google's Webmaster tools has the option to 'fetch as googlebot' - which will show you the document after Google's indexer has parsed it. Run it through there and check for yourself, if you can.

    Googlebot definitely doesn't execute javascript. There's some evidence that it can read inline javascript in order to extract URLs to be crawled (for instance, to follow links that have 'onclick' attributes attached to them). You don't need to be concerned about it running your DOM manipulation code.