Normalmente se considera Angular como uno de los frameworks más difíciles para el posicionamiento SEO debido a que se basa principalmente en single-page app. Sin embargo, características como su tiempo de carga, la alta escalabilidad, o la calidad de experiencia de usuario y de performance de la web, la convierten en uno de los frameworks ideales para el SEO.
Por ello, grandes empresas apuestan por Angular cada vez más para sus desarrollos, pues es uno de los frameworks de JavaScript más recomendados. Una de las preocupaciones más frecuentes en estas corporaciones es el posicionamiento que conseguirán en Google. Si bien en este aspecto influyen factores como la calidad de su web o incluso las actividades de SEM que realicen, desde los departamentos de comunicación y marketing se advierte de la necesidad de contar con una estrategia de optimización orgánica (SEO).
El SEO no se reduce simplemente a elegir una palabra clave y generar contenidos, sino que está respaldado también por aspectos como la estructura de la web. Y, a menudo, surgen dudas sobre cómo afrontar esta necesidad con una web construida sobre Angular.
Hoy os compartimos, desde nuestra experiencia en el trabajo con grandes multinacionales y como expertos en Angular, algunos de los puntos que consideramos más relevantes para tener en cuenta. También añadimos ejemplos de cómo seguir mejorando y explorando las posibilidades de este framework.
Angular como Single-Page App: ventajas e implicaciones en el SEO
Tal y como os hemos comentado en otras ocasiones, en las SPA únicamente existe un archivo de entrada, el index, y todas las pantallas de la aplicación se encontrarán dentro de esa misma página. Esta característica supone diferentes ventajas como la rapidez para mostrar el contenido, mejora en la experiencia del usuario, y tiene un mejor rendimiento.
Pese a esto, el inconveniente más sonado de las SPA, y que genera dudas a quienes están menos familiarizados, es el SEO, que se debe optimizar teniendo en cuenta otros aspectos.
El principal funcionamiento del bot de Google es indexar las páginas en su buscador, para ello se recoge el HTML de nuestra aplicación junto con todos los recursos de esta. Ahí comienza el problema de las SPA, y es que estas aplicaciones carecen de HTML indexable, lo que podría perjudicar al SEO si no se trata correctamente.
¿Se puede mejorar el SEO en Angular?
Y ahora bien, ¿qué podemos hacer para que esto no ocurra?
Como punto básico, podemos considerar el Server Side Rendering. En las SPA, la renderización se realiza por el lado del cliente, así que una de las soluciones para optimizar el SEO va a ser aplicarla también por el lado del servidor. De esta forma, cuando el bot de Google visite nuestra aplicación encontrará un HTML con contenido para cada ruta de aplicación y el SEO no se verá afectado.
La forma más sencilla y rápida para esto es usar Angular Universal, que nos va a permitir crear aplicaciones con las ventajas de una SPA combinadas con las características SEO que tendría una página estática.
Consejos para mejorar el SEO en Angular
A la hora de desarrollar, lo primero que hacemos siempre es sentar las bases y aplicar distintas técnicas que faciliten el SEO, pero el trabajo de verdad empieza una vez la página ya esté hecha, ya que la calidad del contenido final de la página será lo que condicione al posicionamiento.
Mejorar el posicionamiento SEO es uno de los grandes dilemas dentro del mundo del marketing digital y el desarrollo, y no es ningún secreto que existen herramientas y tareas que nos permiten conseguirlo de forma más sencilla. Basándonos en nuestra experiencia en Angular, hoy compartimos contigo nuestras preferidas para proyectos que están realizados en Angular:
- Crear una versión PWA (Progressive Web App) del proyecto mejorará la velocidad de carga de la página al almacenar los datos en caché en el dispositivo desde el que nos visitó el usuario.
- Define bien el título y las etiquetas meta como addTag( ) :, updateTag( ) :, addTags( ) :…..
- Usa datos estructurados. El motor de búsqueda de Google destaca estas páginas ya que su uso proporciona metadatos adicionales.
- Optimiza las imágenes y las URL canónicas.
- Usa la librería JSON-LD.
- Lazy loading. Nos permite aumentar el rendimiento de la aplicación y por tanto aumentar la velocidad de carga, aunque si el contenido que se aloja en la página es excesivo puede ser contraproducente y tener un efecto negativo en el posicionamiento.
Además, uno de los puntos más claves siempre va a ser gestionar el SEO con el departamento de marketing, ya que nadie mejor que ellos sabrán las palabras clave que se quieren posicionar.
SEO para grandes empresas con Angular
Entonces, ¿es recomendable usar Angular en grandes proyectos que requieran del mejor posicionamiento SEO?
Obviamente sí, y, de hecho, podemos observar grandes resultados en gigantes multinacionales como Microsoft o Ryanair, que han hecho uso de esta tecnología para sus aplicaciones, ya que nos permite aplicar el diseño guiado por dominio (domain-driven design).
El diseño guiado por dominio son técnicas que nos permiten trabajar con empresas grandes con varios dominios y gestionarlo todo desde el mismo repositorio de código. Se divide el proyecto en varios proyectos pequeños que se trabajan juntos y que van interactuando entre ellos, y gracias a esto reducimos costes de mantenimiento y la complejidad de actualizar proyectos que a priori podían estar separados, facilitando de esta forma el trabajo para empresas internacionales.
Consejos para dirigirse a un público internacional
Otros aspectos que las grandes compañías deben tener en cuenta para el SEO con Angular son, por ejemplo:
- Evita URL duplicados.
- Asegúrate de evitar redireccionamientos erróneos, para ello puedes acudir a la ayuda de una herramienta de extensión de seguimiento de redireccionamiento.
- Tener presencia local en aquellos países en los que operas supondrá un aumento de la relevancia para el bot de Google.
- En caso de que ya cuentes con presencia local, la mejor opción es trabajar con dominios locales (.com, .es, .mx…)
- Adapta culturalmente tu web. Esto no solo va a suponer un cambio de idioma, si no un cambio de necesidades, información…
- Si haces uso de diferentes idiomas es importante usar hreflang. Estos son elementos de enlace que indican a los robots la presencia de un cambio de idioma.
- Usa métricas y herramientas de clasificación.
