语义 UI - 使用响应式 类 避免重复链接（SEO 麻烦）

Question

我正在开发一个网站，我正在使用 SemanticUI。 我准备了这个例子来解释问题：

<header>
    <div class="ui vertical large menu red item page fluid grid">
        <div class="mobile only row">
            <div class="ui icon dropdown fluid center align massive button">
                <i class="content icon"></i>
                Menú
                <div class="ui vertical menu">
                    <a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
                </div>
            </div>
        </div>
    </div>
    <div class="ui six menu red item fluid grid">
        <div class="tablet only row">
            <img src="http://goo.gl/ToQcwM" width="20px"/>
            <a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
        </div>

        <div class="computer only row">
            <img src="http://goo.gl/ljDWQ7" width="20px"/>
            <a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
        </div>
    </div>
</header>

麻烦（SEO问题）是我必须复制上面的三个链接，当然，我不想这样做。实际上，该站点是使用 PHP 构建的，我并没有真正加倍代码（它包含在 PHP 中）。

我也准备了一个fiddle。要测试它，您必须重新调整 window 以查看效果。

当然，这不是真实情况。如果你愿意，你可以看到real web。

所以，有人有解决方案吗？关于此的最佳实践？

PD：对不起我的英语！ :)

Answer 1

最后，我只维护了一个 div，所有链接都没有重复，然后用 CSS 风格的手机菜单。