我有一个页面 index.php，里面有 3 个 Bootstrap 选项卡，对于每个选项卡，我都会在用户点击它后生成其内容。
例如:
- 当页面加载时，我将执行 SQL 查询，该查询将从数据库中仅获取第一个选项卡的数据。
- 当用户单击第二个选项卡时，我正在执行一个查询，该查询将获取数据并将其显示在选定的选项卡中。
这是好方法吗？当谷歌索引包含所有这些标签的页面时，它是否也会看到所有这些数据？由于性能问题，我不想一次提取所有数据。
这是我的示例代码，所以请告诉我这是否是一个好方法:
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 页面相关联。我错了吗？
最佳答案
不，如果选项卡下的内容是动态生成的(即不只是隐藏)，我们 (Google) 将看不到选项卡后面的内容。
您还可以在 Search Console(以前的网站站长工具)中使用 Fetch as Google 查看我们“看到”的内容；在我们标题为 Rendering pages with Fetch as Google 的帖子中阅读有关该功能的更多信息.
关于javascript - 搜索引擎会在 Bootstrap 选项卡中看到我动态创建的内容吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31637880/