搜索引擎会在 Bootstrap 选项卡中看到我动态创建的内容吗？答案

【问题标题】：Are search engines going to see my dynamically created content in Bootstrap tabs?搜索引擎会在 Bootstrap 选项卡中看到我动态创建的内容吗？
【发布时间】：2015-07-26 14:06:57
【问题描述】：

我有一个页面index.php，其中包含 3 个引导选项卡，对于每个选项卡，我都会在用户单击它后生成其内容。
例如：

当页面加载时，我将执行 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 页面相关联。我错了吗？

【问题讨论】：

Does Google crawl AJAX content? 的可能重复项

标签： javascript twitter-bootstrap tabs seo search-engine

【解决方案1】：

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

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

【讨论】：

HTML 中已经存在但隐藏的内容（因为它位于选项卡后面）怎么办？
这很好。我们会将其编入索引，但内容的权重会较低，因为它是隐藏的。
@methode iframe 内容会被索引吗？
是的，iframe 内容通常被引入父页面
如果“Fetch as Google”确实显示了想要的页面，但该文本的任何内容都不会被编入索引，那是什么情况？ - 在我的情况下，“Fetch as Google”显示了我在上传到 Google 的站点地图和我的网络服务器的服务器日志中输入的每个 URL 的正确结果，我看到 googlebot 已经访问了每个链接。但是我仍然在我的页面上找不到任何内容，并且“内容关键字”仍然显示“没有可用数据”。谷歌真正索引了什么？ “Fetch as Google”中显示的页面内容或从网络服务器获取的“html 快照”？

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果您使用的是 JS/AJAX，（我真的没有看到任何东西，但我想不出更好的选择）您将很难让 Google 为您的网页编制索引。 Google 在这方面有很好的文档，过去曾帮助我完成具有类似目标的项目。

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

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

【讨论】：

我们不再推荐这种方法。我们能够以与浏览器相同的方式呈现页面，并且不再需要增加预呈现的复杂性，至少对 Google 而言是这样。
@methode 那么推荐的方法是什么？为什么文档还在？
文档仍然存在，因为我们正在进行索引实验，以确保在我们删除对 _escaped_fragment 的支持时不会破坏世界。一旦我们完成（可能在本季度），我们也将删除文档，并发布一篇博文，其中基本上会说“做任何对你来说更容易的事情，而不是 escaped_fragment”

【解决方案4】：

也许这会有所帮助：

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

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

问候。

【讨论】：