it-swarm.asia

搜索引擎是否会在Bootstrap选项卡中查看我动态创建的内容?

我有一个页面index.php,其中包含3个Bootstrap选项卡,对于每个选项卡,我在用户点击它之后生成其内容。
例如:

  • 当页面加载时,我将执行SQL查询,该查询将仅从第一个选项卡获取数据库中的数据。
  • 当用户点击第二个选项卡时,我正在执行一个查询,该查询将获取数据并在选定的选项卡中显示它。

这是好方法吗?当谷歌索引包含所有这些标签的页面时,Google是否也会看到所有数据?由于性能问题,我不想一次性提取所有数据。

这是我的示例代码,所以请告诉我这是否是一个好方法:

index.php文件:

<!DOCTYPE html>
<html>
<head>
    <title>Tabs demo</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
            <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
            <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
        </ul>
        <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
                <h3>HOME</h3>
                <p>Some content.</p>
            </div>
            <div id="menu1" class="tab-pane fade">
                <?php $model = [
                    0 => ['title' => 'First item', 'content' => 'Some first content'],
                    1 => ['title' => 'Second item', 'content' => 'Some second content']
                ]; ?>
                <?php foreach ($model as $data): ?>
                    <h3><?= $data['title'] ?></h3>
                    <p><?= $data['content'] ?></p>
                <?php endforeach ?>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>Menu 2</h3>
                <p>Some content in menu 2.</p>
            </div>
        </div>
    </div>
<!-- jQuery library -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

我担心搜索引擎不会看到第二个和第三个标签内容。或者至少他们不会将它们与index.php页面联系起来。我错了吗?

57
offline

不,如果选项卡下的内容是动态生成的(即不仅仅是隐藏的),我们(谷歌)将不会看到选项卡背后的内容。

您还可以在Search Console中使用Fetch as Google(以前的网站管理员工具)查看我们“看到”的内容。在我们的标题为 使用Fetch as Google渲染页面 的文章中详细了解该功能。

102
methode

最好的方法是设计网站在没有javascript的情况下工作,只需将所有使用ajax的锚元素替换为将GET变量传递给Web控制器,因此它知道只返回要用javascript插入的html。

3
markush

如果你正在使用JS/AJAX,(我真的没有看到,但我想不出更好的选择)你将很难让谷歌为你的网页编制索引。谷歌有一个很好的文档,这在过去帮助我有类似目标的项目。

https://developers.google.com/webmasters/ajax-crawling/docs/learn-more

在单击选项卡之前,不加载内容真是太大了吗?除非你正在使用一个不可缓存的不断更新的数据库和大规模的HTML输出,这将创建一个长时间的无格式内容,我会说分割选项卡视图代码有点微不足道。

1
tomfordweb

也许这可以帮助:

如果您的问题是性能问题,可能是因为您有强大的数据库查询或共享服务器。如果没有,请忽略这一点。

加载整个页面时,在每个选项卡中放置一个“假的”HTML代码。尝试构建HTML代码,形状为单击每个选项卡时加载的实际代码。将所有这些放在一个看不见的DIV中。每次加载页面时,还要放置一些随机数据(可能是16个字符随机生成的字符串)。通过这种方式,我认为Google会更频繁地抓取您的数据(静态内容不会发生这种情况)。

问候。

0
Gorka Llona