如何在不干扰搜索优化的情况下定位html密集型小部件

How do I position html intense widget without interfering with search optimization

本文关键字：定位 情况下 html 密集型 小部 优化 干扰 搜索      更新时间：2023-09-26

我有一个小部件，它由很多div组成。然后，我使用javascript让小部件栩栩如生，并做它应该做的事情

它位于主要内容上方的页面上。

客户端觉得所有的小部件html都位于关键字丰富的内容之上不利于排名，但从视觉上看，这就是我们想要的页面设置方式。

这里有哪些选项可以让小部件保持我们想要的位置，但在爬行时不会弄乱页面顶部？

当前设置：

-javascript文件在head中调用-小部件html，它是几个div、文本、图像等。-其他页面内容divs

您可以在页面底部包含小部件，然后使用css将其定位在顶部。确保你的主要内容有一个与小部件大小相等的页边空白。正如您在评论中提到的，您还需要将小部件放置在页面下方足够远的位置，以避免出现标题内容。这取决于您的页眉和小部件是否具有指定的高度。你的html应该是这样的：

<body>
    <div class="header">The header</div>
    <div class="main-content">The main content</div>
    <div class="widget">widget</div>
</body>

那么你的css可能是这样的：

.header, .main-content, .widget {
    height: 40px;
}
.header {
    background-color: red;
}
.main-content {
    background-color: blue;
    margin-top: 40px; /* height of widget */
}
.widget {
    background-color: yellow;
    position: absolute;
    top: 40px; /* height of header */
}

你可以在这里看到这一点：http://jsfiddle.net/W3RzU/

正如bardiir所指出的，将小部件代码放在正确的位置会简单得多，并且对seo的影响最小（如果有的话）。

相关文章：