Menu
I am building an Angular 2 app using the Angular-Meteor framework.
I would like to achieve fast and consistent indexing by google and other search engines, and allow Facebook sharer and other scrapers to generate previews of my JS-generated content.
Usually SPAs use the PhantomJS to render the page server-side and send the static HTML to the client.
Of course I can spawn PhantomJS myself when I intercept an _escaped_fragment_ or when I see the google or scraper user agent, but I always experienced memory leaks and orphan Phantom instances when spawning PhantomJS directly on websites with a big traffic (I used NodeJS and this module ).
For Angular 1 apps, I used to solve this with angular modules like Angular-SEO, but it seems hard to convert such module to angular 2.
I did not find any appropriate Angular 2 module for this yet. Should I build it myself, or is there any other good way to achieve this as of today ?
543
Similar to any other JavaScript framework, Angular requires using special tools to optimize SPAs for search engines. Those tools allow you to implement SSR (server-side rendering) and meet all technical SEO requirements for correct page indexation and good ranking.
Server-side rendering with Angular Universal Another method to make angularjs SEO friendly can use Angular Universal Extension to create static versions of web pages that can be rendered on the server-side. Google's bots can easily reach and crawl them and provide indexes to your pages.
No, but you can make it SEO-friendly by using some special tools. Like other JavaScript frameworks, Angular requires special tools to be used to optimize search engine SPAs.
The great thing about Angular2 is that when fired up, all content inside your root app-element goes away. This means that you can put whatever you want in there from the server which you want to be picked up by crawlers.
You can generate this content by using a server-rendered version of the content in your app, or have custom logic.
You can find some more information here: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering and here: https://github.com/angular/universal
99
I just created ng2-meta, an Angular2 module that can change meta tags based on the current route.
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' } } } ]; You can update meta tags from components, services etc as well.
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); } } While this caters to Javascript-enabled crawlers (like Google), you can set fallback meta tags for non-Javascript crawlers like Facebook and 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> Support for server-side rendering is in progress.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
