longitud - Angular2-SEO-cómo manipular la meta descripción
meta keywords (4)
Actualmente no hay una solución lista para usar, solo un problema abierto para implementarlo https://github.com/angular/angular/issues/7438 .
Por supuesto, usted mismo puede implementar algo como el servicio de títulos, solo use TitleService como plantilla
Un servicio Meta similar al servicio de Title está en las obras (actualmente solo es una solicitud de extracción).
Los resultados de la búsqueda en google se muestran a través de TitleTag y la etiqueta <meta name="description"..."/> . La etiqueta <title> se puede editar a través de Angular2 cómo cambiar el título de la página en el enrutador angular2
Lo que queda es la descripción.
¿Es posible escribir una directiva en angular2, que manipula las meta-etiquetas en la parte <head> de mi página?
Entonces, dependiendo de la ruta seleccionada, la meta descripción cambia como:
<meta name="description" content="**my description for this route**"/>
Desde Angular4, puedes usar el servicio Angular Meta .
import { Meta } from ''@angular/platform-browser'';
// [...]
constructor(private meta: Meta) {}
// [...]
this.meta.addTag({ name: ''robots'', content: ''noindex'' });
Es posible. Lo implementé en mi aplicación y a continuación ofrezco la descripción de cómo se hace.
La idea básica es usar Meta desde @angular/platform-browser
Para cambiar dinámicamente una metaetiqueta en particular, tienes que:
- Elimine el método
removeTag(attrSelector: string) : voidcon elremoveTag(attrSelector: string) : void. - Agregue el nuevo usando
addTag(tag: MetaDefinition, forceCreation?: boolean) : HTMLMetaElement.
Y tienes que hacerlo cuando el enrutador dispare un evento de cambio de ruta.
Aviso: De hecho, también es necesario tener <title>...</title> y <meta name="description"..." content="..."/> predeterminados en el encabezado de index.html, así que antes Se establece dinámicamente ya hay algún contenido estático.
Mi contenido de app-routing.module.ts :
import ''rxjs/add/operator/filter'';
import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/mergeMap'';
import { NgModule } from ''@angular/core'';
import { RouterModule, Routes, Router, NavigationEnd, ActivatedRoute } from ''@angular/router'';
import { StringComparisonComponent } from ''../module-string-comparison/string-comparison.component'';
import { ClockCalculatorComponent } from ''../module-clock-calculator/clock-calculator.component'';
import { Title, Meta } from ''@angular/platform-browser'';
const routes: Routes = [
{
path: '''', redirectTo: ''/string-comparison'', pathMatch: ''full'',
data: { title: ''String comparison title'', metaDescription: ''String comparison meta description content'' }
},
{
path: ''string-comparison'', component: StringComparisonComponent,
data: { title: ''String comparison title'', metaDescription: ''String comparison meta description content'' }
},
{
path: ''clock-time-calculator'', component: ClockCalculatorComponent,
data: { title: ''Clock time calculator title'', metaDescription: ''Clock time calculator meta description content'' }
}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private titleService: Title,
private metaService: Meta
){
//Boilerplate code to filter out only important router events and to pull out data object field from each route
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map(route => {
while (route.firstChild) route = route.firstChild;
return route;
})
.filter(route => route.outlet === ''primary'')
//Data fields are merged so we can use them directly to take title and metaDescription for each route from them
.mergeMap(route => route.data)
//Real action starts there
.subscribe((event) => {
//Changing title
this.titleService.setTitle(event[''title'']);
//Changing meta with name="description"
var tag = { name: ''description'', content: event[''metaDescription''] };
let attributeSelector : string = ''name="description"'';
this.metaService.removeTag(attributeSelector);
this.metaService.addTag(tag, false);
});
}
}
- Como puede verse, hay un campo de objeto de
dataadicional para cada ruta. Contiene cadenas detitleymetaDescriptionque se utilizarán como contenido de título y etiqueta meta. - En el constructor, filtramos los eventos del enrutador y nos suscribimos al evento del enrutador filtrado. Rxjs se usa allí, pero en realidad no es necesario usarlo. Regular
if statementsy losloopspodrían utilizarse en lugar de flujo, filtro y mapa. - También fusionamos nuestro campo de objeto de datos con nuestro evento para que podamos usar fácilmente información como cadenas de
titleymetaDescription. - Cambiamos dinámicamente las etiquetas
<title>...</title>y<meta name="description"..." content="..."/>.
Efectos:
De hecho, actualmente utilizo una versión un poco más sofisticada de esta solución que también utiliza ngx-translate para mostrar diferentes títulos y meta descripciones para diferentes idiomas.
El código completo está disponible en el proyecto angular2-bootstrap-translate-website-starter .
El app-routing.module.ts con la solución ngx-translate está exactamente allí: app-routing.module.ts .
También está la aplicación de producción que utiliza la misma solución: http://www.online-utils.com .
Seguro que no es la única manera y podría haber mejores maneras de hacerlo. Pero he probado esta solución y funciona.
De hecho, la solución es muy similar a esta de la publicación correspondiente sobre el cambio de título: cómo cambiar el título de la página en el enrutador angular2 .
Meta documentos angulares: https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html . De hecho, no son muy informativos y tuve que experimentar y buscar en el código .js real para hacer que este cambio dinámico de metadatos funcione.
He desarrollado y recién lanzado el @ngx-meta/core , que manipula las metaetiquetas en el nivel de la ruta y permite configurar las metaetiquetas mediante programación dentro del constructor del componente.
Puede encontrar instrucciones detalladas en @ngx-meta/core github repositorio. Además, los archivos de origen pueden ser útiles para introducir una lógica personalizada.