web-dev-qa-db-fra.com

Les moteurs de recherche vont-ils voir mon contenu créé dynamiquement dans les onglets Bootstrap?

J'ai une page index.php avec 3 Bootstrap, et pour chaque onglet, je génère son contenu après que l'utilisateur ait cliqué dessus.
Par exemple:

  • lorsque la page est chargée, j'exécute une requête SQL qui obtiendra les données de la base de données uniquement pour le premier onglet.
  • lorsque l'utilisateur clique sur le deuxième onglet, j'exécute une requête qui prendra les données et les affichera dans l'onglet sélectionné.

Est-ce une bonne approche? Est-ce que Google va aussi voir toutes ces données quand il indexe la page contenant tous ces onglets? Je ne veux pas extraire toutes les données à la fois en raison de problèmes de performances.

Voici mon exemple de code, alors dites-moi s'il s'agit d'une bonne approche:

index.php fichier:

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

J'ai peur que les moteurs de recherche ne voient pas le contenu des deuxième et troisième onglets. Ou du moins, ils ne les relieront pas à la page index.php. Ai-je tort?

javascripttwitter-bootstraptabsseosearch-engine
57
offline

Non, nous (Google) ne verrons pas le contenu derrière les onglets si le contenu sous l'onglet est généré dynamiquement (c'est-à-dire non seulement caché).

Vous pouvez également voir ce que nous "voyons" en utilisant Fetch en tant que Google dans la Search Console (anciennement Webmaster Tools); en savoir plus sur la fonctionnalité dans notre article intitulé Rendu des pages avec Fetch as Google .

102
methode

La meilleure approche consiste à concevoir le site Web pour qu'il fonctionne sans javascript, et il suffit de remplacer tous vos éléments d'ancrage qui fonctionnent avec ajax pour passer une variable GET à votre contrôleur Web, afin qu'il sache ne renvoyer que le html à insérer avec javascript.

3
markush

Si vous utilisez JS/AJAX, (je n'en vois pas vraiment, mais je ne vois pas de meilleure alternative), vous aurez du mal à faire en sorte que Google indexe vos pages. Google a une bonne documentation à ce sujet qui m'a aidé dans le passé sur des projets avec des objectifs similaires.

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

Est-ce vraiment si important de ne pas charger le contenu jusqu'à ce que l'onglet soit cliqué? À moins que vous ne travailliez avec une base de données constamment mise à jour et non mise en cache et une sortie HTML massive qui créerait un long flash de contenu sans style, je dirais que diviser le code de vue des onglets est quelque peu trivial.

1
tomfordweb

Cela peut peut-être aider:

Si votre problème est lié aux performances, c'est peut-être parce que vous avez des requêtes DB fortes ou un serveur partagé. Sinon, veuillez ignorer cela.

Lors du chargement de la page entière, mettez un "faux" code HTML dans chaque onglet. Essayez de créer le code HTML en forme de code réel chargé lorsque chaque onglet est cliqué. Mettez tout cela à l'intérieur d'une DIV invisible. Chaque fois que la page est chargée, mettez également des données aléatoires (peut-être une chaîne générée aléatoirement de 16 caractères). De cette façon, je pense que Google araignera vos données plus fréquemment (cela ne se produit pas pour le contenu statique).

Cordialement.

0
Gorka Llona