Estoy usando ng2-metadata con mi aplicación angular y Google solo parece mostrar el título predeterminado y la meta descripción.
Mi tecnología: Angular versión 4, webpack, mecanografiado y firebase para hosting.
Estoy implementando una compilación AOT y he agregado la función ng2-metadata aot como sugiere el siguiente enlace.
Este es el paquete que estoy usando: https://www.npmjs.com/package/ng2-metadata
Problema actual:
El código parece funcionar visualmente en el navegador, pero los bots de Google no parecen mostrar el título de otras páginas ni las metaetiquetas en los resultados de búsqueda de Google.
*He realizado una solicitud de rastreo de las herramientas para webmasters de Google para indexar las páginas a pesar de que es un SPA.
Esta es una de mis rutas para la página de mi blog (he eliminado parte del texto):
import { Route} from '@angular/router'; import { BlogComponent } from './blog.component'; export const BlogRoutes: Route[] = [ { path: 'blog', component: BlogComponent, data : { metadata : { title : 'My Website | Blog', override : true, description : "The latest news & blog post....", keywords: "blog, reading, posts" } } } ];Muchos de los rastreadores no funcionan bien con las aplicaciones de una sola página. Puede usar una solución de procesamiento previo como https://prerender.io/ o https://www.prerender.cloud/ . Estoy usando https://www.prerender.cloud/ con Netlify y funciona bien.
Si desea permanecer con Firebase Hosting, intente minimizar el código que se llama cuando un bot llega a la página. No cargue ninguna biblioteca ni ejecute nada excepto lo que sea necesario para representar las etiquetas y los datos que necesita para los bots y rastreadores. Ejemplo a continuación.
índice.html
<script> (function(w,d){ w.myApp = w.myApp || {}; w.myApp.robot = false; var AM_I_ROBOTS = ['googlebot', 'twitterbot', 'facebookexternalhit', 'google.com/bot.html', 'facebook.com/externalhit_uatext.php', 'tweetmemebot', 'sitebot', 'msnbot', 'robot', 'bot', 'spider', 'crawl']; var ua = navigator.userAgent.toLowerCase(); w.myApp.userAgent = ua; for (var i = 0, len = AM_I_ROBOTS.length; i < len; i++) { if(ua.indexOf(AM_I_ROBOTS[i]) !== -1 ) { w.myApp.robot = true; break; }} })(window,document); </script> <script> if(!window.myApp.robot){ // Google Analytics code } </script> <script> if(!window.myApp.robot){ // Facebook Connect code } </script>aplicación.componente.ts
export class AppComponent implements OnDestroy, OnInit, AfterViewInit { ... public webRobot: boolean = false; private static AM_I_ROBOTS:[string] = ['googlebot', 'twitterbot', 'facebookexternalhit', 'google.com/bot.html', 'facebook.com/externalhit_uatext.php', 'tweetmemebot', 'sitebot', 'msnbot', 'robot', 'bot', 'spider', 'crawl']; ... constructor(private auth: Auth, private localStorage: LocalStorageService, private meta: MetaService, ... private otherService: OtherService, ) { } ngOnInit(): void { this.init(); } init() { const robots = AppComponent.AM_I_ROBOTS; const ua = navigator.userAgent.toLowerCase(); for (var i = 0, len = robots.length; i < len; i++) { if(ua.indexOf(robots[i]) !== -1 ) { this.webRobot = true; break; } } // for service that should be informed to // run minimally with robots this.otherService.init(this.webRobot); // for service that should not be called with robots if (!this.webRobot) { this.auth.init(); // etc. } }Angular 4 viene con meta servicio y Angular Universal, puedes probarlo.