setting og-tags

[fulls1z3]

setting og-tags

[fulls1z3]

Hi @meorfi,

Thanks for your interest in ng2-metadata.

You can use the setTag method to dynamically create meta tags, as well as you can define metadata right at the route definitions.

og: title and og:description are automatically duplicated using values from meta title and meta description.

In order to dynamically create any other og tag, you can use the following syntax within NgOnInit method of your components:

metadata.setTag('og:something', 'some value');

Generated metadata is not currently accessible by bots except Google crawler. For now, the only method to generate meta tags at the server-side in order to be crawl-able by bots such as facebook.

However, I'm keeping track of developments with those crawlers/bots and will publish updates as things become available.

[mihai-gritcan]

Hello @fulls1z3 ,
Thank you for answer!

[kodeine]

@fulls1z3
Any idea if Facebook crawler can now read the meta tags set by, metadata.setTag('og:something', 'some value');

[chrillewoodz]

Generated metadata is not currently accessible by bots except Google crawler. For now, the only method to generate meta tags at the server-side in order to be crawl-able by bots such as facebook.

This does not seem to be the case, how would you explain that the dynamically set ones are read perfectly fine then?

[chrillewoodz]

@kodeine This does seem to be the case, but I do not understand why that one works but the static ones doesn't.

@fulls1z3 Can you explain?

[fulls1z3]

@chrillewoodz have a look at @angular/universal docs, you can find there in-depth information and the necessity to create server-side re-rendering.

[chrillewoodz]

@fulls1z3 That's not the issue here, and universal is not available in the CLI at this point so I can't do that unfortunately. I've tried for the last 4 months. The issue is that by setting tags with setTag function it works but when you define via router definition it doesn't. Are you doing anything differently when you apply the tags?

[fulls1z3]

Sorry @chrillewoodz but that's not the topic of this issue, let's please discuss it under the appropriate one.

[chrillewoodz]

@fulls1z3 Which is?

[fulls1z3]

This issue is about the readability of meta tags generated by @nglibs/meta on Google crawler and Facebook crawler which uses different technologies.

Google crawler is configured to read meta tags generated on client-side (ex: Angular). However Facebook crawler (and many other such crawlers) do not have such a function yet. To cope with this, the idea of angular-universal had born, and been developed for SEO purposes.

You're talking about some other topic:

The issue is that by setting tags with setTag function it works but when you define via router definition it doesn't

So, please check the repository (README, issues, etc) and make your post below the appropriate one. If none exists, feel free to open a new issue.

Btw we're all glad about your feedbacks right here. Reporting issues are always a great contribution to this project. Thanks again :)

[chrillewoodz]

@fulls1z3 Then my point is totally related to this topic. Metas set via setTag on client side can be read by Facebook without any problems. But if the same meta is set in the router definition, Facebook cannot read that. So no server-side rendering is needed when using setTag, but when setting via the router definition, it seems to be needed. I'm confused as to why the methods gives different results.

[fulls1z3]

The meta tags provided in route definitions are rendered when Angular fires the NavigationEnd event, because the url after redirects can only be retrieved then. However, invoking setTitle/setTag does render them immediately. That's why it shows different behaviours on these two different methods.

Earlier, Facebook crawler did not process immediate rendering, but it seems they made some progress though.

I need to check this in details, to provide crawling availability both with and without universal. Feel free to provide your thoughts.

Also, if you notice further issues, feel free to report them.

[chrillewoodz]

Ok then I understand better. Perhaps you can call the methods on NavigationEnd as well? So that either way renders them immediately.

[fulls1z3]

Actually, it depends on Angular Router. But I see that they're enhancing the features all the time and am keeping an eye on it. When another event (fired much before than the NavigationEnd) is offered (with the same results that @nglibs/meta needs), then I can simply subscribe on that.