Werden meine dynamisch erstellten Inhalte in den Bootstrap-Registerkarten von Suchmaschinen angezeigt?

Ich habe eine Seiteindex.php mit 3 Bootstrap-Registerkarten, und für jede Registerkarte erstelle ich den Inhalt, nachdem der Benutzer darauf geklickt hat.
Beispielsweise

wenn die Seite geladen wird, führe ich eine SQL-Abfrage aus, die nur für die erste Registerkarte Daten aus der Datenbank abruft.Wenn der Benutzer auf die zweite Registerkarte klickt, wird eine Abfrage ausgeführt, die Daten aufnimmt und in der ausgewählten Registerkarte anzeigt.

Ist das ein guter Ansatz? Wird Google all diese Daten auch sehen, wenn es die Seite mit all diesen Registerkarten indiziert? Ich möchte aus Performance-Gründen nicht alle Daten auf einmal abrufen.

Hier ist mein Beispielcode, also sag mir bitte, ob dies ein guter Ansatz ist:

index.php Datei

<!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>

Ich fürchte, Suchmaschinen sehen den Inhalt der zweiten und dritten Registerkarte nicht. Oder sie werden sie zumindest nicht mit der index.php Seite in Verbindung bringen. Liege ich falsch