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

Question

我有一个页面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页面联系起来。 我错了吗？

Answer 1

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

您还可以在Search Console中使用Fetch as Google（以前的网站管理员工具）查看我们“看到”的内容。 在我们的帖子标题为使用Fetch as Google渲染页面的帖子中阅读有关该功能的更多信息。

Answer 2

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

Answer 3

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

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

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

Answer 4

也许这可以帮助：

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

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

问候。

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

问题描述

4 个解决方案

解决方案1
102 已采纳 2015-07-26 15:49:56

解决方案2
3 2015-07-28 09:21:18

解决方案3
1 2015-07-27 16:18:03

解决方案4
0 2015-07-29 01:22:18

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

问题描述

4 个解决方案

解决方案1 102 已采纳 2015-07-26 15:49:56

解决方案2 3 2015-07-28 09:21:18

解决方案3 1 2015-07-27 16:18:03

解决方案4 0 2015-07-29 01:22:18

解决方案1
102 已采纳 2015-07-26 15:49:56

解决方案2
3 2015-07-28 09:21:18

解决方案3
1 2015-07-27 16:18:03

解决方案4
0 2015-07-29 01:22:18