web-dev-qa-db-ja.com

検索エンジンは、動的に作成されたコンテンツをBootstrapタブに表示しますか？

ページがありますindex.php 3 Bootstrapタブがあり、各タブに対してユーザーがクリックした後にコンテンツを生成しています。
例えば：

  • ページがロードされると、最初のタブについてのみデータベースからデータを取得するSQLクエリを実行します。
  • ユーザーが2番目のタブをクリックすると、データを取得して選択したタブに表示するクエリを実行しています。

これは良いアプローチですか？ 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>

検索エンジンには2番目と3番目のタブの内容が表示されないのではないかと思います。または、少なくともindex.phpページに関連付けません。私が間違っている？

javascripttwitter-bootstraptabsseosearch-engine
57
offline

いいえ、タブの下のコンテンツが動的に生成される（つまり、非表示にならない）場合、タブの背後にあるコンテンツは表示されません。

Search Console（以前のウェブマスターツール）でFetch as Googleを使用して「見る」こともできます。 Fetch as Googleでページをレンダリングする というタイトルの投稿でこの機能の詳細をご覧ください。

102
methode

最良のアプローチは、JavaScriptなしで動作するようにWebサイトを設計し、ajaxで動作するすべてのアンカー要素を置き換えてGET変数をWebコントローラーに渡すだけです。そのため、JavaScriptで挿入されるHTMLのみを返すことがわかります。

3
markush

JS/AJAXを使用している場合（実際には何も表示されませんが、より良い代替案は考えられません）、Googleにページのインデックスを作成させるのに苦労するでしょう。 Googleにはこれに関する優れたドキュメントがあり、過去に同様の目標を持つプロジェクトで役立っています。

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

タブがクリックされるまでコンテンツをロードしないのは本当に大したことでしょうか？キャッシュ不可能な絶えず更新されるデータベースと大量のHTML出力を使用してスタイルのないコンテンツの長いフラッシュを作成している場合を除き、タブビューコードの分割はやや些細なことです。

1
tomfordweb

多分これは助けることができます：

問題がパフォーマンスである場合は、おそらく強力なDBクエリまたは共有サーバーがあるためです。そうでない場合は、これを無視してください。

ページ全体をロードするとき、各タブに「偽の」HTMLコードを配置します。各タブがクリックされたときに読み込まれる実際のコードの形をしたHTMLコードを作成してみてください。これらすべてを目に見えないDIVの中に入れます。ページがロードされるたびに、いくつかのランダムデータ（16文字のランダムに生成された文字列など）も入れます。このようにして、Googleはデータをより頻繁にスパイダーすることになると思います（これは静的コンテンツでは発生しません）。

よろしく。

0
Gorka Llona