搜索引擎会在 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

不，如果选项卡下的内容是动态生成的（即不只是隐藏），我们 (Google) 将看不到选项卡后面的内容。

您还可以在 Search Console（以前的网站站长工具）中使用 Fetch as Google 查看我们 "see" 的内容；在标题为 Rendering pages with Fetch as Google 的 post 中阅读有关该功能的更多信息。

Answer 2

如果您正在使用 JS/AJAX，（我真的没有看到，但我想不出更好的选择）您将很难 Google索引你的页面。 Google 有一个很好的文档，在过去帮助我完成具有类似目标的项目。

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

在单击选项卡之前不加载内容真的有那么重要吗？除非你正在使用一个不可缓存的不断更新的数据库和大量 HTML 输出，这会产生大量无样式的内容，否则我会说拆分选项卡视图代码有点微不足道。

Answer 3

最好的方法是将网站设计为在没有 javascript 的情况下工作，只需替换所有使用 ajax 的锚元素，将 GET 变量传递给您的网络控制器，这样它就知道return 只是 html 与 javascript 一起插入。

Answer 4

也许这可以帮助：

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

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

此致。

搜索引擎会在 Bootstrap 标签中看到我动态创建的内容吗？

Are search engines going to see my dynamically created content in Bootstrap tabs?

javascript

twitter-bootstrap

tabs

seo

search-engine