The playground

More information here

Angular Universal: Lo que necesitas saber para SEO

Suscríbete a nuestros resúmenes diarios del cambiante panorama del marketing de búsqueda. Nota: Al enviar este formulario, usted acepta los términos de Third Door Media. Respetamos su privacidad. John E Lincoln el 1 de febrero de 2019 a las 9:53 a.m. Categorías:Todo lo relacionado con SEO Columna, Canal: SEO Si usas Angular para potenciar tu […]

Suscríbete a nuestros resúmenes diarios del cambiante panorama del marketing de búsqueda.

Nota: Al enviar este formulario, usted acepta los términos de Third Door Media. Respetamos su privacidad.

John E Lincoln el 1 de febrero de 2019 a las 9:53 a.m.

  • Categorías:Todo lo relacionado con SEO Columna, Canal: SEO
  • Si usas Angular para potenciar tu sitio web, entonces tienes un obstáculo adicional que cruzar cuando se trata de SEO. Afortunadamente, Angular Universal hace que sea fácil saltar sobre él.

    Tenga en cuenta que «fácil» es un término relativo aquí. Hay un poco de magia técnica involucrada.

    Es casi seguro que necesitarás involucrar a un equipo de desarrollo.

    Pero una vez que se entrega el producto terminado, su sitio ofrecerá páginas optimizadas que los motores de búsqueda localizarán e indexarán fácilmente.

    En esta guía, explicaré Angular Universal y por qué es importante para los marketers.

    El problema de SEO

    Angular es un marco fantástico para ofrecer aplicaciones web modulares y fáciles de usar. Desafortunadamente, es un poco hostil al SEO.

    Eso es por dos razones.

    En primer lugar, Angular depende en gran medida del script para entregar contenido. Como resultado, algunos bots de búsqueda no» ven » el contenido que ve un usuario.

    Eche un vistazo a la documentación de Angular Universal. Como era de esperar, esa página está renderizada con Angular.

    Mientras te desplazas hacia abajo, verás bastante contenido. Pensarías que todo es indexable.

    No necesariamente. Haga clic con el botón derecho en la página y seleccione «Ver fuente de página» en el menú contextual que aparece.

    Solo hay 100 líneas de código fuente. En ninguna parte de ahí verás el contenido que viste cuando viste la página normalmente.

    Eso, en pocas palabras, es el problema con Angular. Los visitantes humanos verán el contenido, pero los bots de búsqueda verán la fuente.

    Y la fuente no tiene el contenido!

    Hay otro problema de SEO: la velocidad. Las aplicaciones de Angular a menudo no se cargan rápidamente.

    Algunos sitios mostrarán una pantalla en blanco durante un par de segundos antes de mostrar la página de inicio. Eso puede hacer que los visitantes se echen bajo fianza a medida que se impacientan.

    La velocidad del sitio es un factor de clasificación móvil, por lo que tu rango se verá afectado si tu sitio no se carga rápidamente en plataformas móviles.

    Pero Google dice

    Google afirma que su bot puede indexar sitios basados en scripts. Hay mucha evidencia que lo respalda, pero no significa que pueda evitar hacer un esfuerzo adicional al optimizar un sitio angular.

    Para empezar, Google no es el único motor de búsqueda de la ciudad. Si quieres que tu aplicación Angular se posicione en Bing y DuckDuckGo, tendrás que tomar medidas para que eso suceda.

    A continuación, puede ser el caso de que Google pueda indexar algunos sitios Angulares, pero no el suyo. No todas las aplicaciones de Angular se crean de la misma manera. El tuyo puede ser la excepción al algoritmo de indexación de Google.

    En mi experiencia, los sitios que pasan de HTML a Angular pierden tráfico masivo de los motores de búsqueda la mayoría del tiempo. De hecho, he tenido tres clientes en el último año donde tuvimos que arreglar el sitio después de las caídas debido a Angular.

    Hay soluciones

    Afortunadamente, hay formas de hacer que tu sitio Angular sea amigable con el SEO.

    Una de las opciones más populares es usar renderizado dinámico. Es cuando usas una herramienta como Puppeteer para generar archivos HTML estáticos que los rastreadores web pueden consumir más fácilmente.

    Luego, configure su servidor web para dirigir los bots de búsqueda a las páginas pre-renderizadas mientras los visitantes humanos navegan por la aplicación Angular normal.

    Esa es una solución decente, pero aún no aborda el problema de la velocidad. Para eso, probablemente querrás ir con Angular Universal.

    ¿Qué es Angular Universal?

    Angular Universal ejecuta su aplicación web en el servidor en lugar de ejecutarla en el navegador.

    Esa es una distinción importante. Normalmente, las aplicaciones Angulares son aplicaciones del lado del cliente.

    El problema de los bots de búsqueda es que no siempre «procesan» código del lado del cliente como lo hace su navegador cuando le sirve una página web. Es por eso que vio una discrepancia entre la página de documentación de Angular Universal y su código fuente.

    Angular Universal maneja el renderizado del lado del servidor (SSR). Pre-renderiza el contenido HTML y CSS mostrado al usuario con anticipación.

    Eso significa que un usuario cargará una página HTML estática en lugar de código del lado del cliente. Como resultado, la página se cargará más rápidamente.

    Además, debido a que es HTML estático, los bots de búsqueda pueden indexar el contenido.

    Todos ganan.

    Por qué es importante

    Si te gusta el marketing digital, entonces ya sabes que gran parte de la batalla implica ganar exposición en línea. Es por eso que te comunicas con influencers, publicas actualizaciones en las redes sociales y optimizas tu sitio para posicionarte bien.

    En pocas palabras: tu sitio no se puede clasificar si no se puede indexar. Si Angular está impulsando su sitio web, debe tomar medidas adicionales para asegurarse de que su contenido aparezca en los motores de búsqueda.

    Es por eso que necesita una solución universal Angular.

    La desventaja, por supuesto, es que va a costar dinero. Necesitará contratar a un equipo de desarrollo calificado para agregar SSR a su sitio web.

    Ese es un gasto que debería pagarse a sí mismo con el tiempo si tu sitio se clasifica bien para términos de búsqueda clave relacionados con tu nicho.

    Cómo ejecutar una aplicación Angular en Angular Universal

    Si eres alguien a quien le gusta ensuciarse las manos con el código, o simplemente quieres ahorrar en costos de desarrollo, puedes implementar una aplicación del lado del servidor por tu cuenta.

    Antes de hacer eso, es mejor si tiene un conocimiento básico de Angular, la interfaz de línea de comandos (CLI), TypeScript y los servidores web. De lo contrario, es probable que luches.

    Los pasos para implementar una aplicación Angular Universal son los siguientes:

    • Instalar las dependencias necesarias
    • Actualizar la aplicación Angular
    • Usar la interfaz de línea de comandos para crear un paquete Universal
    • Configurar el servidor para ejecutar un paquete Universal
    • Ejecutar la aplicación en el servidor

    Hay mucho que hacer en esos cinco pasos, por lo que los cubriré a su vez en las siguientes secciones.

    Instale las dependencias

    Si tiene alguna experiencia con Angular, entonces ya conoce Node.js. Ese es el tiempo de ejecución que transpila el código TypeScript en una aplicación JavaScript.

    Nodo.js viene con un gestor de paquetes, llamado inimaginablemente Node Package Manager o npm para abreviar. Lo usarás para instalar las dependencias.

    Abre la ventana de línea de comandos y ejecuta el siguiente código:

    npm install –save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader

    Dale unos momentos (o muchos) para instalar todo.

    Actualice su aplicación Angular

    A continuación, deberá preparar su aplicación Angular para la implementación universal. Eso implica cuatro pasos:

    • Añadir soporte universal. Abra su módulo raíz (generalmente AppModule) y agregue un ID de aplicación a la importación de BrowserModule. Lo harás en la sección» importaciones » justo debajo de la declaración @NgModule.
    • Crear el módulo raíz del servidor.A continuación, debe crear un nuevo módulo llamado AppServerModule. Asegúrese de que importa ServerModule desde la dependencia plataforma-servidor que agregó en el paso anterior.
    • Crear el archivo principal. Necesitarás un archivo principal para tu paquete Universal. Cree eso en la raíz (en la carpeta src) y exporte la clase AppServerModule desde ese archivo.
    • Crear un archivo de configuración. La clase AppServerModule necesita un archivo de configuración. Cree uno en formato JSON. Debería verse algo como esto:

    Crear un nuevo destino de compilación

    Su directorio de origen Angular debería incluir un archivo llamado angular.json. Tendrás que actualizar ese archivo en la sección «arquitecto».

    se verá algo como esto:

    «el arquitecto»: {
    «construir»: { … }
    «servidor»: {
    «constructor»: «@angular-devkit / build-angular: server»,
    » options»: {
    » OutputPath»:»dist/my-project-server»,
    » main»: «src/main.servidor.ts»,
    «tsConfig»: «src / tsconfig.servidor.json»
    }
    }
    }

    tenga en cuenta el «constructor» atributo cuatro líneas más abajo. El valor después de los dos puntos («servidor») es el nombre del servidor. Puedes actualizarlo si quieres darle otro nombre.

    Ahora, puedes crear tu aplicación. Asumiendo que mantuvo el servidor llamado «servidor», simplemente diríjase a la línea de comandos y escriba lo siguiente:

    ng ejecutar mi proyecto:servidor

    Debería ver una salida que se vea algo como esto:

    Fecha: 2018-12-12T12:42:09.601 Z
    Hash: 1caced0e9434007fd7ac
    Time: 4122ms
    chunk {0} main.js (main) 9.49 kB
    estilos de fragmentos {1}.css (estilos) 0 bytes

    Configurar el servidor

    A continuación, debe configurar un servidor Universal para ejecutar el paquete. Eso es cómo va a serializar la aplicación y volver al navegador.

    Para que esto suceda, cree un nuevo archivo llamado servidor.ts. Dentro de ese archivo, definirás el motor de tu aplicación.

    Los detalles de ese código están un poco fuera del alcance de este tutorial. No dude en echar un vistazo al ejemplo de los documentos universales Angulares.

    Ejecute la aplicación en el servidor

    Después de todo esto, finalmente se encuentra en un punto en el que puede ejecutar la aplicación en el servidor.

    Para hacer eso, configure un paquete web que maneje el servidor.archivo ts que creó en el paso anterior.

    Nombre el paquete web del archivo de configuración.servidor.config.js. Una vez más, echa un vistazo a los documentos de Angular Universal para el tipo exacto de código que pertenece al archivo. Es posible que deba adaptar ese código a su propia convención de nomenclatura.

    Una vez que haya terminado con el archivo, tendrá dos carpetas debajo de la carpeta dist: navegador y servidor.

    Para ejecutar el código del servidor, simplemente escriba lo siguiente en la línea de comandos:

    node dist/server.js

    ¡Felicitaciones! Ahora está ejecutando código del lado del servidor.

    Envolverlo

    Aunque Angular permite a los desarrolladores producir rápidamente aplicaciones de alta calidad, no siempre funciona bien con los bots de los motores de búsqueda.

    Afortunadamente, Angular Universal puede pre-renderizar páginas de aplicaciones de Angular como HTML estático para que sean detectables e indexables. También cargarán más rápido.

    Siempre he recomendado tener una base HTML y usar Angular para entregar los otros elementos de la página. He estado haciendo esta recomendación sobre cualquier cosa relacionada con JavaScript desde 2010. Este proceso de Angular Universal es el mismo principio. No puedo decir que tenga muchos sitios que los rediseños de Angular y JavaScript hayan destruido. Ten cuidado con el tuyo y siempre haz que una empresa de SEO lo investigue antes del lanzamiento.

    Inscríbase en nuestros resúmenes diarios del cambiante panorama del marketing de búsqueda.

    Nota: Al enviar este formulario, usted acepta los términos de Third Door Media. Respetamos su privacidad.

    Sobre El Autor

    Juan E Lincoln

    John Lincoln es el CEO de Encender la Visibilidad, una agencia de marketing digital y un Inc. compañía 5000. Lincoln es nombrado constantemente uno de los mejores expertos en marketing de la industria. Ha sido galardonado con el premio «Search Marketer of the Year» de Search Engine Land, nombrado el consultor SEO #1 en los EE. Clutch.co, CEO más admirado y 40 menores de 40 años. Lincoln ha escrito dos libros (The Forecaster Method y Digital Influencer) y ha hecho dos películas (SEO: The Movie y Social Media Marketing: The Movie) sobre marketing digital.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.