javascript - attribute - tooltip bootstrap 4 example
¿Los motores de búsqueda verán mi contenido creado dinámicamente en las pestañas Bootstrap? (4)
Tengo una página
index.php
con 3 pestañas Bootstrap, y para cada pestaña estoy generando su contenido después de que el usuario hace clic en él.
Por ejemplo:
- cuando se cargue la página, ejecutaré una consulta SQL que obtendrá datos de la base de datos solo para la primera pestaña.
- cuando el usuario hace clic en la segunda pestaña, estoy ejecutando una consulta que tomará datos y los mostrará en la pestaña seleccionada.
¿Es este un buen enfoque? ¿Google también verá todos esos datos cuando indexe la página que contiene todas estas pestañas? No quiero extraer todos los datos a la vez debido a problemas de rendimiento.
Aquí está mi código de muestra, así que dígame si este es un buen enfoque:
archivo
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>
Me temo que los motores de búsqueda no verán el contenido de las pestañas segunda y tercera. O al menos no los relacionarán con la página index.php. ¿Me equivoco?
El mejor enfoque es diseñar el sitio web para que funcione sin javascript, y simplemente reemplazar todos los elementos de anclaje que funcionan con ajax para pasar una variable GET a su controlador web, de modo que sepa devolver el html que se insertará con javascript.
No, nosotros (Google) no veremos el contenido detrás de las pestañas si el contenido debajo de la pestaña se genera dinámicamente (es decir, no solo oculto).
También puede ver lo que "vemos" usando Fetch como Google en Search Console (anteriormente Herramientas para webmasters); Lea más sobre la función en nuestra publicación titulada Rendering pages with Fetch as Google .
Quizás esto pueda ayudar:
Si su problema es el rendimiento, quizás sea porque tiene fuertes consultas de base de datos o un servidor compartido. Si no, ignora esto.
Al cargar toda la página, coloque un código HTML "falso" en cada pestaña. Intente construir el código HTML con la forma del código real que se carga cuando se hace clic en cada pestaña. Pon todo esto dentro de un DIV invisible. Cada vez que se carga la página, coloque también algunos datos aleatorios (tal vez una cadena generada aleatoriamente de 16 caracteres). De esta manera, creo que Google arañará sus datos con mayor frecuencia (esto no sucede con el contenido estático).
Saludos.
Si está utilizando JS / AJAX, (realmente no veo ninguno, pero no puedo pensar en una alternativa mejor), tendrá dificultades para que Google indexe sus páginas. Google tiene una buena documentación sobre esto que me ha ayudado en el pasado en proyectos con objetivos similares.
https://developers.google.com/webmasters/ajax-crawling/docs/learn-more
¿Es realmente tan importante no cargar el contenido hasta que se haga clic en la pestaña? A menos que esté trabajando con una base de datos que se actualiza constantemente y que no se puede almacenar en caché, y una salida masiva de HTML que crearía un destello largo de contenido sin estilo, diría que dividir el código de vista de pestañas es algo trivial.