Javascript Girl
  1. Javascript Girl
  3. Les moteurs de recherche vont-ils voir mon contenu créé de manière dynamique dans les onglets Bootstrap?
Intereting Posts
Jquery ajax appel renvoie une erreur avec readystate 4, status 200, statustext ok Backbone model.save () envoie PUT au lieu de POST Créer une barre de progression de téléchargement de fichier ASP.NET et JavaScript JQuery: Parse / Manipulate HTML sans exécuter de scripts Valider la zone de texte en cliquant sur Submit IE toLocaleString a des personnages étranges dans les résultats D3.js Taille automatique de la police en fonction des noeuds rayon / diamètre individuel Connexion Google en utilisant l'API Javascript sans déclencher de popup Contexte pour utiliser l'appel et postuler en Javascript? Détection des événements de modification DOM Calculer la somme dynamiquement avec javascript Comment éliminer les erreurs de minification lorsque vous utilisez un contrôleur $ chez AngularJS Comment trier un tableau JavaScript d'objets par une propriété d'objet imbriquée? React.js problème de focus de curseur de texte contrôlé Comment puis-je envoyer une réponse json dans le contrôleur symfony2?

Les moteurs de recherche vont-ils voir mon contenu créé de manière dynamique dans les onglets Bootstrap?

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

  • Lorsque la page est chargée, je vais exécuter 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 des données et l'affichera dans l'onglet sélectionné.

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

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

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

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

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

Vous pouvez également voir ce que nous "voyons" en utilisant Fetch comme Google dans Search Console (anciens Outils pour les webmasters); En savoir plus sur la fonctionnalité dans notre publication intitulée Rendre les pages avec Fetch comme Google .

La meilleure approche est de concevoir le site Web pour fonctionner 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, donc il sait renvoyer simplement le html à insérer avec javascript.

Si vous utilisez JS / AJAX (je ne vois pas vraiment, mais je ne peux pas penser à une meilleure alternative), vous allez avoir de la difficulté à 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 ayant des objectifs similaires.

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

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

Peut-être que cela peut aider:

Si votre problème est une performance, c'est peut-être parce que vous avez des requêtes DB solides ou un serveur partagé. Sinon, ignorez cela.

Lorsque vous chargez la page entière, mettez un code HTML «faux» dans chaque onglet. Essayez de créer le code HTML en forme de code réel qui est chargé lorsque chaque onglet est cliqué. Mettez tout cela dans un 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 au hasard de 16 caractères). De cette façon, je pense que Google explorera vos données plus fréquemment (cela n'arrive pas pour le contenu statique).

Cordialement.