I’ve spent more than 2 months but could not found a clear solution of how to proceed with angular universal.
I’ve already spent about 6 months in implementing angular universal on a project for which I don’t get a much time and now I’m stuck with this issue. Can anyone help me with this as it seems the whole world want to know a solution for Angular SSR.
Here’s my code(Meta tag service):
import {Injectable} from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import {commonMetas} from './meta-data.model';
@Injectable()
export class SeoService {
public commonMetas = commonMetas;
constructor(public meta: Meta, public title: Title) {}
setAutomatically (key = 'none') {
const detail = this.commonMetas[key];
/** setting defaults */
this.setTitle(detail.title);
this.setAuthor();
this.setDescription(detail.description);
this.setKeywords(detail.keyword);
}
setFromJson(key: {
title: any,
description: any,
image: any,
keyword: any,
author: any
}) {
key.title = key.title ? key.title : this.commonMetas['none'].title;
key.description = key.description ? key.description : this.commonMetas['none'].description;
}
setTitle(titleToSet = '') {
this.title.setTitle(titleToSet);
}
setAuthor (nameToSet = '') {
this.meta.addTag({ name: 'author', content: 'havemybooks.com'});
}
setKeywords (keyword = '') {
this.meta.addTag({ name: 'keywords', content: keyword});
}
}
}
And my component.ts
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = +params['id'];
this.api.getParticular({id: this.id}).subscribe((response) => {
this.content = response.blog_data[0];
this.content.main_image = this.getImage(this.content.main_image);
this.content.metaCreatedAt = moment(this.content.created_at).format('YYYY-MM-DD');
this.content.displayCreatedAt = moment.utc(new Date(this.content.created_at)).fromNow();
this.content.name = this.handleName(this.content.name);
this.seo.setFromJson({
title: this.content.title,
image: this.content.main_image,
description: this.content.blog,
author: this.content.name,
keyword: ''
});
});
});
}
Here are some linked StackOverflow questions and GitHub issues:
Angular universal Server Side Rendering, Meta tags
Updating meta tags for SEO using angular universal
Angular Universal + External API
https://github.com/fulls1z3/ngx-meta/issues/101
Angular Universal – OG meta tags not working with child routes
https://github.com/fulls1z3/ngx-meta/issues/118(I tried to get help here from someone who successfully implemented but got no help)
https://github.com/maciejtreder/ng-toolkit/issues/460 (I opened it)
The list goes on I’ve seen a number of discussions which were never concluded. Anyone who can suggest how to make an API call before rendering in ng-express.
I have implemented SSR and use ngx-meta tag but still, fb crawler shows the default meta tags I used in the head tag.
UPDATE: I’m able to get the source updated with view source option in
chrome but the Facebook and Google crawler show the default meta tags
which are there by default. It’s very tough to launch my website with
it remaining any help is appreciated. @Brandon guided me a lot I spent
quite some time on implementing node with Jade and Nunchucks but since
angular universal use angular-express by default so I wasn’t able to
use the above-mentioned render engines.
So is there a way to render meta tags using ng express engine.
Like this <title>{{meta.title}}</title>...
5
Answers
Couldn't find an easy way to do it but here's a temporary/hacky solution provided by a GitHub user here and I'm quoting his answer directly:
And in index.html, create template values as below:
First Add all required meta tags in index.html file like this
Then update the meta tags in each required component, use meta.updateTag() as below
This one worked for me.
I try to create service to update but that not worked, its working only when meta update added in the same component.
I implemented setting title on Angular 2 Universal. It should be done using Renderer, like this:
1.Import Renderer inside of component:
2.Add dependency inside of constructor:
3.Use it now for setting title:
Stumbled upon this looking for same solution. Using a setTimeout worked for me. Make sure to refresh cache or use incognito mode or you’ll miss seeing the metadata (I made this mistake). My research suggests that subscribe for API data must be waited upon before SSR renders page so observable must stay open (but I’m not an expert). https://angular.io/guide/observables. Also, the only way to make it work is to put the response from subscription right into metaService. I’ll show what I mean in my code.
My code with solution:
Solution you can call it!
A yoda master recipe
As someone who tried to achieve a SEO friendly angular using SSR and utilities angular has to offer regarding meta tags, I would like to share an idea about this question.
I was so focused on this topic that I failed to see the obvious and how simple it was to solve it!
As you may know HTML would be rendered first, then CSS and only THEN JavaScript.
In addition, index bots mostly care about raw HTML!
There for whether bots should be made to make decisions after they rendered JS
which by the way is not efficient and cost for companies like google and they have their own reasons for doing so, or …
We can embed single page apps inside specific backend programs compatible of changing the html before sending it to client-side.
Think about it …
single page application was introduced for a specific new problem and is not opt to be analyzed by only the raw HTML!
So the specific answer to "Update meta tags in angular universal with external API call" has already been answered.
How ever, if you would like a real SEO friendly angular app, you must embed them together.
Approach
You are not required to build it with angular universal, it’s primary idea is to distribute the same index.html page to replicase with folder structure based on your routing with the help of node runners so that you can change the meta tag of each page. I’m sure with enough information you can find a way to embed the app with even that but does it worth it? I leave it up to you.
Tip: with this approach you can have Thymeleaf templates and also manage multiple single page apps together with only routing!
Implementation
Now if you simply go to the route page
localhost:port
you can find the meta with "your site name". You go to the pagelocalhost:port/post/some
name , you’ll get the meta with the content, "some name".