off*_*ine 57 javascript seo tabs search-engine twitter-bootstrap
我有一个页面,index.php其中包含3个Bootstrap选项卡,对于每个选项卡,我在用户点击它之后生成其内容.
例如:
这是好方法吗？当谷歌索引包含所有这些标签的页面时,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页面联系起来.我错了吗？
met*_*ode 102
不,如果选项卡下的内容是动态生成的(即不仅仅是隐藏的),我们(谷歌)将不会看到选项卡背后的内容.
您还可以在Search Console中使用Fetch as Google(以前的网站管理员工具)查看我们"看到"的内容.在我们的帖子标题为使用Fetch as Google渲染页面的帖子中阅读有关该功能的更多信息.
| 归档时间： |
|
| 查看次数： |
9325 次 |
| 最近记录： |