Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Meta Class not adding Meta lines to DOM timely enough for Discord Link-type Embed #34744

Closed
Nephera opened this issue Jan 12, 2020 · 2 comments
Closed

Comments

@Nephera
Copy link

@Nephera Nephera commented Jan 12, 2020

馃悶 bug report

Affected Package

The issue is caused by package @angular/....

I believe the issue lies in @angular/platform-browser, but I'm not sure that anything can be done.

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

I've never been able to get this to work.

Description

A clear and concise description of the problem...

Discord supports Open Graph to display rich embed for links. The 4 properties that it works with are: og:title, og:site_name, og:description, and og:image. I've not been able to successfully use Meta.addTag(...) or Meta.addTags(...) to get these properties to add to the DOM in a timely enough manner for the Discord crawler -- which they use to gather the rich embed meta data -- to catch said data. The only way I've been able to get it to catch the meta data is when it's hard-coded into index.html; and I'd rather not do that, as I'd like it to be possible to display rich embed data in Discord that changes based on the state of the application for a better user experience. Maybe this issue isn't with Angular as much as it's a problem with the Discord crawler bot, but I don't see the Discord team being willing to make changes to their bot to account for Angular applications.

馃敩 Minimal Reproduction

https://angular-issue-repro2-g7yj9k.stackblitz.io

Though pasting this link into discord doesn't display any metadata; if I were to host it on my personal web server, all I would see is "SITE NAME", as it's hard coded into index.html

馃敟 Exception or Error





馃實 Your Environment

Angular Version:






Angular CLI: 8.3.21
Node: 10.15.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.21
@angular-devkit/core         8.3.21
@angular-devkit/schematics   8.3.21
@schematics/angular          8.3.21
@schematics/update           0.803.21
rxjs                         6.4.0

But the project is on 7.3.9, as we have some issues with forms that are not Angular 8 ready.

Anything else relevant?

@pshurygin

This comment has been minimized.

Copy link

@pshurygin pshurygin commented Jan 12, 2020

Crawlers typically do not execute any Javascript code on a website, that is why we need SSR for them to work correctly with any Javascript based app.
I suggest you to use Angular Universal to implement server side rendering for your application. It will also help with Google crawler and SEO meta tags.

@Nephera

This comment has been minimized.

Copy link
Author

@Nephera Nephera commented Jan 12, 2020

Thank you; I'm confident that SSR will resolve this issue.

@Nephera Nephera closed this Jan 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can鈥檛 perform that action at this time.