Categoría: Javascript

Diferencias entre “original HTML”​ y “rendered HTML”​ en Javascript y SEO.

Si hacemos uso de javascript para ciertos aspectos como buscadores en la web debemos tener cuidado con las diferencias entre el archivo original que descarga el navegador y la interpretación de dicho archivo que hace Google en sus bots mediante Chromiun.

Como podemos observar en https://www.xxxxxx.com/ aparece un buscador en principio de lo más inocente…

Si nos observamos en las secciones principales del buscador, se crean urls como https://www.xxxxxxxx.com/#destinationTab_0, las cuales duplican contenido y son accesibles desde Google. Aunque no las indexa y toma como canonical la url hasta la # si que es idóneo restringir el acceso a las mismas bien por robots.txt o mediante “nofollow”.

Si vemos el código fuente inicial, la llamada al código javascript no contiene dichos enlaces ni elementos.

<script type="text/javascript">
													jQuery(document).ready(function () {
													            var jsonAjax = {"renderAjax": true};
													            var url = "/stage/00/gridSystemArea/0";
													            jQuery.get(url, jsonAjax, function (data) {
													               jQuery('.phx-searcher-container-a438d722-58cf-40b4-be02-cc8ed3a8573d').html(data);
													            });
													         });
												</script>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="gridSystemWrapper " style=" ">
							<div class="hTt-container-fluid">
								<div class="row"> </div>
							</div>
						</div>

Pero en la interpretación y construcción del DOM de dicho código javascript mediante Chromiun, se añaden cientos de líneas crawleables e interpretables por los bots que no aparecían en el código HTML inicial.

Entre el inicio del código anterior con <script type=”text/javascript”> y el final <div class=”gridSystemWrapper ” style=” “> se añaden líneas de código que no aparecían en el HTML sin renderizar.

<li data-type="Location" data-code="ESAND04"> <a href="#destinationTab_1" data-toggle="tab" data-type="Location" data-code="ESAND04" data-name="ALMERÍA">ALMERÍA</a> </li>

Creando urls del tipo:

  1. https://www.xxxxxxx.com/#destinationTab_0
  2. https://www.xxxxxxx.com/#destinationTab_1
  3. https://www.xxxxxxxxxx.com/#destinationTab_2
  4. https://www.xxxxxxxx.com/#destinationTab_3

que dan status 200 OK.

Así que siempre se recomienda:

  1. Deshabilitar Javascript.
  2. Crawlear con Screaming Frog un site que utilice Javascript.
  3. Utilizar la extensión para Google Chrome View Rendered Source (https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob)
  4. Buscar la procedencia de dichos enlaces y actuar en consecuencia.