使锚文本可复制

Question

我有一个关于链接和div的问题。我希望整个div是可点击的，同时文本应该是可复制的，这样谷歌机器人就可以将它们作为文本读取。

有人有什么想法吗？

我的代码如下：

<div id="menubutton1"><br>
  SOTNING</div>

#menubutton1{ width:149px; height:77px; float:left;margin-left:290px; text-align:center;
  -webkit-transition: background-color 1s ease-out;
  -moz-transition: background-color 1s ease-out;
   -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

#menubutton1:hover{  
background-color: #F93;
 cursor: pointer;
}

Answer 1

最好创建一个锚点元素，将其设置为display:block和position:absolute。见下文：

<div id="menubutton1">
    <a href="#" class="fill"></a>
    <p>You text which you want read by search engine bots.</p>
</div>

添加以下样式的

<style>
    #menubutton1{
        position:relative;
    }
    .fill{
        position:absolute;
        display:block;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
    }
</style>

见小提琴。

由于锚块浮动在顶部，因此无法直接从DIV中选择文本，但如果选择页面或从DIV外部选择，则仍然可以选择文本。

没有证据表明这会影响搜索机器人读取内容，因为内容仍然可见

或者，您需要使用JavaScript函数在单击事件上运行并转到指定的链接。然而，这会给搜索机器人带来问题，因为他们不会故意阅读/遵循JavaScript。如果你确实选择了JS路线，我建议在其他地方的页面上也有链接，以确保它被遵循。