desarrollo-web-br-bd.com

¿Los motores de búsqueda van a ver mi contenido creado dinámicamente en las pestañas de Bootstrap?

Tengo una página index.php con 3 pestañas Bootstrap en ella, y para cada pestaña estoy generando su contenido después de que el usuario haga clic en ella.
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á los datos y los mostrará en la pestaña seleccionada.

¿Es este buen enfoque? ¿Google también va a ver todos esos datos cuando indexa 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 por favor dígame si este es un buen enfoque:

index.php file:

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

javascripttwitter-bootstraptabsseosearch-engine
57
offline

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" utilizando Fetch como Google en la Consola de búsqueda (anteriormente, Herramientas para webmasters de Google); lea más sobre la función en nuestra publicación titulada Rendering pages with Fetch as Google .

102
methode

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, por lo que sabe que solo debe devolver el código html para insertar con javascript.

3
markush

Si está utilizando JS/AJAX, (realmente no veo ninguno, pero no puedo pensar en una mejor alternativa) le va a resultar difícil conseguir 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 una gran cosa no cargar el contenido hasta que se haga clic en la pestaña? A menos que esté trabajando con una base de datos que no se pueda almacenar en caché que se actualiza constantemente y una salida HTML masiva que crearía un largo destello de contenido sin estilo, diría que dividir el código de vista de las pestañas es algo trivial.

1
tomfordweb

Tal vez esto pueda ayudar:

Si su problema es el rendimiento, es posible que tenga consultas de base de datos sólidas o un servidor compartido. Si no, por favor ignora esto.

Al cargar la página completa, coloque un código HTML "falso" en cada pestaña. Intente generar 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, ponga también algunos datos aleatorios (tal vez una cadena generada aleatoriamente de 16 caracteres). De esta manera, creo que Google utilizará sus datos con mayor frecuencia (esto no ocurre con el contenido estático).

Saludos.

0
Gorka Llona