El SEO nos trae de cabeza en más de una ocasión a todos los profesionales del Desarrollo Web y, generalmente, es una de nuestras principales preocupaciones cuando nos enfrentamos a un nuevo proyecto en Internet que ponemos en marcha con una tecnología que se sale de lo habitual. En caso de utilizar Polymer, la librería para agilizar el desarrollo con Web Components de la que hemos hablado en más de una ocasión, hay algunas recomendaciones que conviene seguir para que Google interprete bien su contenido y nuestros proyectos indexen de forma óptima en sus resultados.
Antes de empezar, sólo comentar que, lógicamente, todo esto puede evolucionar con el tiempo y que sí efectivamente, Google sí indexa las páginas que usan el sistema de routing de Polymer, incluyendo las páginas de aplicaciones SPA… Y además, tiene en cuenta la información que llega desde la base de datos Firebase.
Polymer y Web Components son SEO Friendly
Con Polymer se pueden crear Custom Elements de Web Components como etiquetas nuevas que expanden el HTML y que podemos usar en cualquier proyecto web. Por lo que se puede usar en cualquier sitio, incluyendo en las páginas que tienen un CMS ya optimizado para buscadores, como por ejemplo WordPress. Si Polymer es bueno o no para el SEO va depender de cómo sea el sitio donde se aplique y no de la librería o de Web Components en general.
Server Side Rendering, la mejor opción
Lo deseable para el SEO en Polymer es que el sitio disfrute de server side rendering. Es decir, que la página se fabrique del lado del servidor y que se sirva el contenido en cada URL. Así funciona cualquier lenguaje de cara al servidor, pues en HTML se realiza la página y el contenido se envía al cliente, tal y como hacen la mayoría de los CMS. El problema es que cada vez más servicios se basan en las páginas SPA para realizar aplicaciones y usan sistemas de routing basados en JavaScript, por lo que el propio navegador se encarga de procesar la URL y obtener los datos con los que construir por el HTML y pintar la página, así que ya no dispondríamos del deseado server side rendering.
Las páginas que usan el routing de Polymer se ejecutan siempre sobre la principal o el mismo index.html. Las rutas se comunican desde ese Javascript y muestran unos componentes u otros, y como no hay realmente contenido original en cada ruta (lo genera javascript) no es tan beneficioso para el SEO. La solución para resolver esto pasa por utilizar frameworks JavaScript más avanzados, como pueden ser Angular, VueJS o los basados en la librería React. Con esta nueva capa podremos crear una página del lado del servidor con contenido original y así Google será capaz de indexar mejor nuestro sitio.
Aunque no existe una solución genérica para facilitar el server side sendering en una app realizada con el sistema de routing de Polymer, existen algunas alternativas:
- Polymer en sitios clásicos. Usar Polymer en un sitio habitual, que tenga programación del lado del servidor y genere HTML para cada URL.
- Hacer uso de frameworks que faciliten el server side rendering. Usar frameworks, como Angular o React, puede parecer retórico y poco óptimo al cargar librerías distintas, pero resulta viable y funcional si queremos resolver el problema del SEO.
- Herramientas de terceros. Probando herramientas de terceros, incluso si dispones de Server Components o artículos de blogs, puedes desarrollar por tu cuenta el sistema de renderizado del lado del servidor.