SEO for links duplicated and hidden for responsive design

Question

I would like to know if duplicating some links in the menu for responsive purposes (display:none in some cases) can affect SEO.

Simple example:

<ul>
  <li><a href="/one">one</a></li>
  <li><a href="/two">two</a></li>
  <li class="hidden only-tablet">More +
    <ul>
      <li><a href="/two">two</a></li>
    </ul>
  </li>
</ul>

Answer 1

I'd suggest minimizing the amount of duplicate links. If this is not possible, then consider using different labeling for each link.

For example, have the business logo at the top of your site as a link to the home page, and at the very bottom of the page, have a text link to the home page.

Also, you will want to configure your page so that code that isn't necessary right away should load AFTER the necessary code has loaded.

For example, Try something like this:

<!-- necessary code -->
<ul>
<li><a href="/one">one</a></li>
<li><a href="/two">two</a></li>
<li class="tablet">
</li>
</ul>
<!-- enhancing code -->
<script>
   document.getElementByClassName("tablet").innerHTML="More<ul><li><a href="/two">two</a></li></ul>";
</script>

I may have slightly messed up my javascript, but the objective is to load the necessary content first without downloading other junk first. Once that is done then load the code that enables the unordered list menu inside the unordered list of links. More crawlers will appreciate this and the crawlers that don't understand javascript won't see your code as having duplicate links.