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>

请参阅fiddle。

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

没有证据表明这会影响搜索内容，因为内容仍然可见。

或者，您需要使用JavaScript函数在click事件上运行并转到指定的链接。然而，这会导致搜索机器人出现问题，因为他们不会故意阅读/关注JavaScript。如果您确实选择了JS路线，我建议在其他地方的页面上提供该链接以确保其被跟踪。

使锚文本可复制

1 个答案: