node.js - friendly - Angular2 SEO-Cómo hacer una aplicación angular 2 rastreable
seo en angular 4 (3)
Estoy construyendo una aplicación Angular 2 usando el marco de Meteo angular .
Me gustaría lograr una indexación rápida y consistente por parte de google y otros motores de búsqueda, y permitir que el compartidor de Facebook y otros raspadores generen vistas previas de mi contenido generado por JS.
Por lo general, los SPA usan PhantomJS para mostrar la página del servidor y enviar el HTML estático al cliente.
Por supuesto, puedo engendrar PhantomJS cuando intercepto un _escaped_fragment_ o cuando veo el agente de usuario google o scraper, pero siempre he experimentado pérdidas de memoria y casos de Phantom huérfanos al generar PhantomJS directamente en sitios web con un gran tráfico (utilicé NodeJS y este módulo )
Para aplicaciones Angular 1, solía resolver esto con módulos angulares como Angular-SEO , pero parece difícil convertir dicho módulo en angular 2.
No he encontrado ningún módulo Angular 2 apropiado para esto todavía. ¿Debo construirlo yo mismo, o hay alguna otra buena forma de lograrlo a partir de hoy?
Acabo de crear ng2-meta , un módulo Angular2 que puede cambiar metaetiquetas según la ruta actual.
const routes: Routes = [
{
path: ''home'',
component: HomeComponent,
data: {
meta: {
title: ''Home page'',
description: ''Description of the home page''
}
}
},
{
path: ''dashboard'',
component: DashboardComponent,
data: {
meta: {
title: ''Dashboard'',
description: ''Description of the dashboard page'',
''og:image'': ''http://example.com/dashboard-image.png''
}
}
}
];
Puede actualizar metaetiquetas a partir de componentes, servicios, etc. también.
class ProductComponent {
...
constructor(private metaService: MetaService) {}
ngOnInit() {
this.product = //HTTP GET for product in catalogue
metaService.setTitle(''Product page for ''+this.product.name);
metaService.setTag(''og:image'',this.product.imageURL);
}
}
Si bien esto se aplica a los rastreadores habilitados para Javascript (como Google), puede establecer metaetiquetas secundarias para los rastreadores que no son de JavaScript, como Facebook y Twitter.
<head>
<meta name="title" content="Website Name">
<meta name="og:title" content="Website Name">
<meta name="og:image" content="http://example.com/fallback-image.png">
...
</head>
El soporte para la representación del lado del servidor está en progreso.
La representación en el servidor no es un requisito para una clasificación decente de Google ...
Tuve un foro con aproximadamente 33,000 entradas en sus archivos de google sitemap. Este sitio web fue escrito usando formularios web asp.net, y tuvo un flujo decente de solicitudes entrantes de Google. Este sitio web tenía muy mala legibilidad móvil (algo que es penalizado por Google, de hecho lo mencionó en mi "consola de búsqueda" de google)
Reescribí todo con angular (versión desplegada es angular5). Estoy usando los servicios de Título y Meta para establecer mi título y metaetiquetas. Todas las rutas contienen palabras clave extraídas del contenido real. También me aseguré de que cada elemento con un atributo [routeLink] era una etiqueta A en la que también especificaba el elemento href (eso es lo que busca un rastreador ...) Y, por supuesto, presté mucha atención a la legibilidad del móvil.
Resultado: en realidad recibo más tráfico entrante que antes, y en la consola de búsqueda veo claramente que mis páginas indexadas aumentaron: de las 30k + páginas, solo alrededor de 10K se incluyeron en el índice. Ahora tengo casi 25k páginas en el índice.
No estoy diciendo que la representación en el servidor sea irrelevante. El uso de métodos universales u otros dará como resultado tiempos de descarga más rápidos, lo que probablemente genere una puntuación más alta. Pero Google definitivamente puede indexar correctamente un SPA angular.
edit: alguna prueba: si googleas "3ds max threadripper", verás que realmente supera a uno de los mayores sitios de hardware en Internet.
Lo mejor de Angular2 es que cuando se activa, todo el contenido dentro de su elemento de aplicación raíz desaparece. Esto significa que puede poner lo que quiera allí desde el servidor que desea que recojan los rastreadores.
Puede generar este contenido utilizando una versión procesada por el servidor del contenido en su aplicación o tener una lógica personalizada.
Puede encontrar más información aquí: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering y aquí: https://github.com/angular/universal