Question

我有一个由很多div组成的小部件。然后我使用javascript将小部件变为现实，并按照它应该做的去做。

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

客户认为关键字丰富的内容上方的所有小部件html对排名都不利，但在视觉上这是我们想要页面设置的方式。

这里有哪些选项可以让窗口小部件按照我们的意愿定位，但在抓取时不会使页面顶部混乱？

当前设置：

-javascript文件在头部调用 -widget html，这是几个div，文本，图像等。 - 其他页面内容divs

Answer 1

您可以在页面底部包含小部件，然后使用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的影响很小（如果有的话）。

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

1 个答案: