SEO JavaScript VS Programación en el Servidor

El porque de esta cuestión.

Desarrollando una aplicación con las APIs de las redes sociales, nos topamos con un asunto. Os pongo en precedentes, las APIs mandan un JSON con los datos que les pedimos, es un archivo xml que corresponde con un objeto, en definitiva un texto (.txt) plano y sin formato donde podemos pasar esos datos a una variable objeto tanto con JavaScrip como con lenguajes de servidor (PHP, Python, Java…) podemos convertirlo en una variable o un grupo de variables y trabajar con ellas. La cuestión es posteriormente crear un listado html. Ejemplo práctico, con la API de Instagram obtenemos datos de su servidor, nos lo envia en JSON, podemos tratar los datos con un lenguaje de servidor (en nuestro caso estamos desarrollando con PHP) y escribir en el html, o bien captarlo con JavaScript y «reescribir» en la sección deseada donde queremos insertarlo.

HTML inicial

Con programación en el Servidor

(ejemplo en PHP)

Cuando inspeccionamos la página y leemos su codigo fuente, con html tendremos una cosa tal que así.

<div class="panel-body" style=" overflow:hidden; height: 95px;">
 <div style=" float: left; display: inline-block; padding = 5px; marging = 10px; width:2000px">
 <a target="_blank" title="Cambio de cámara por pérdida de luminosidad infrarroja #videovigilancia #cctv" href="https://instagram.com/p/6K9aCtqEIh/ ">
 <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11420731_1471233169866257_1219449444_n.jpg" alt="Cambio de cámara por pérdida de luminosidad infrarroja #videovigilancia #cctv" WIDTH=90 HEIGHT=90 class="instagram-photo"
 />
 </a>
 <a target="_blank" title="Cuanto más alto más vemos #cctv" href="https://instagram.com/p/6K8xCmqEHD/ ">
 <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11419254_1649781311904901_1905851353_n.jpg" alt="Cuanto más alto más vemos #cctv" WIDTH=90 HEIGHT=90 class="instagram-photo" />
 </a>
 </div>
</div>

Ejemplo en JavaScrip

Este html muestra ciertas fotos de un perfil de Instagram, lo mismo serviría para mostrar últimos tuits o algo de facebook… si ahora actuamos con JavaScrip nuestro html se verá de la siguiente forma.

<div id=»instagram» class=»panel-body» style=» overflow:hidden; height: 95px;»> </div>

y posteriormente un script de JavaScrip leerá el Json y añadirá en esta caja algo similar a lo que se vio arriba.

Ventajas del JavaScrip

El tiempo de carga para Google es mucho más rápido, mientras que en el primero hay que esperar que el servidor acceda a la API la procese y envié el html y posteriormente cargue las fotos, con JavaScrip recibirá la web en html y Google al no tener encuenta los scrip cargará la página mucho más rápido.

Ventajas de la programación en Servidor

Como hemos dicho Google no lee ni procesa los JavaScrip por lo que en nuestro caso si leerá las imágenes, sus textos alternativos y urls (hemos de decir que todas tienen el mismo tag que es nuestra palabra clave y aparece en el alt de la foto) . Ventaja de este método es que hemos insertado una mayor cantidad de palabras claves y dentro de imagenes, a Google no solo le mola que tu artículo tenga varias veces la palabra, si no que este en urls y en imágenes. Por lo que tendremos una mayor concentración de la Keyword que queramos posicionar.

Conclusión

La velocidad de carga del servidor siempre puede mejorarse con otras técnicas y sobre todo pagando, pero aumentar las palabras clave en nuestra experiencia mejora notablemente el SEO,  antes de añadir una cabecera con las últimas fotos publicadas en Instagram teníamos webs peor posicionadas, si comparamos el tiempo de carga vacio, con scrip y con programación web. Vemos que el primero será el más rapido y casi similar al segundo, programación JavaScrip en cliente y el de programación web tendrá el tiempo de carga más grande, no es tan interesante el que dure un poco más o un poco menos como el que realmente nuestra web tenga más número de palabras clave.

Por ultimo mencionar que ese listado se convierte en un slider horizontal, lógicamente no queda más remedio que programarlo en JavaScrip.