OpenGraph meta tags are not rendered and when rendered, URLs are wrong

[smoya]

Describe the bug

Open Graph meta tags are not rendered whenever you access the site but rather it seems it is postrendered somehow (sorry but I'm not familiar with NextJS, etc).

Additionally, once rendered, the URLs of the meta tags are pointing to localhost:3000

How to Reproduce

1. curl --stderr - https://www.asyncapi.com | grep "og\|twitter" looks the meta tags into the first rendered version. The output is empty.
2. To see the final rendered meta tags of the site, go to https://www.asyncapi.com, open a developer tools bar and inspect the meta tags.

You can additionally test the Open Graph metas via https://www.opengraph.xyz/url/https%3A%2F%2Fwww.asyncapi.com

Expected behavior

1. Open Graph meta tags are rendered in the first render and not postponed. Meaning curl --stderr - https://www.asyncapi.com | grep "og|twitter"` should return those meta tags.
2. The URL of those meta tags should point to the right URL.

[JeelRajodiya]

I found that this bug was introduced in this commit

If we remove the <I18nProvider> from the _app.js, the og tags becomes visible again

I think the cause of it is, that we have implemented nexti18next library incorrectly.

[sambhavgupta0705]

I would like to work on this under bounty program

[JeelRajodiya]

I would like to work on this

They don't assign issues here, you can just start working and open a PR

[smoya]

Happy to know you are gonna work on this anyway @sambhavgupta0705 👍

[aeworxet]

Bounty Issue's service comment

Text labels: bounty/2024-Q2, bounty/medium, bounty/coding First assignment to third-party contributors: 2024-03-22 00:00:00 UTC+12:00 End Of Life: 2024-08-31 23:59:59 UTC-12:00

@asyncapi/bounty_team

[bupd]

I like to be assigned to this bounty issue and start working.!

I have previous experience working with the og meta tags specifically and I believe I am suitable to do this job and ready to tackle the challenge.

Thanks.

Edit: https://github.com/search?q=is%3Apr+is%3Amerged+author%3Abupd+-org%3Abupd

[aeworxet]

@bupd Adding https://github.com/search?q=is%3Apr+is%3Amerged+author%3Abupd+-org%3Abupd to your comment would make the decision much easier.

[bupd]

Hello @aeworxet,

Could you please assign the #2639 to me? I'm eager to dedicate my full attention to resolving it.

Is there anything else that I need to do before this.?

Thank you!

[aeworxet]

@bupd, I cannot assign the issue to you because it is Akshat Nema who submitted it for the Bounty Program, so it is him who is responsible for it (and thus is the point of contact about it.) @akshatnema, can you please take a look at @bupd's contributions and make a decision?

[sambhavgupta0705]

@aeworxet I would like to work on this during the bounty program

[aeworxet]

@akshatnema, and at @sambhavgupta0705's 45 merged PRs throughout the AsyncAPI Organization, except for the fact that he is an AsyncAPI Maintainer thus could have been assigned immediately after the addition of the label bounty.

[akshatnema]

@aeworxet Assigned @sambhavgupta0705 for this issue.

thus could have been assigned immediately after the addition of the label bounty.

Sure, I'll take care of this next time.

[aeworxet]

Bounty Issue's Timeline

Complexity Level	Assignment date (by GitHub)	Start date (by BP rules)	End date (by BP rules)	Draft PR submission	Final PR submission	Final PR merge
Medium	2024-03-21	2024-04-01	2024-05-10	2024-04-12	2024-04-26	2024-05-10

Please note that the dates given represent deadlines, not specific dates, so if the goal is reached sooner, it's better.

[bupd]

Ok that's great to get to know about How this works.

Maintainers > Contributors > Newbies. as mentioned in the doc.

Looking forward put my time and effort to the async api.

Thanks.

[aeworxet]

@bupd You can take a look at other Bounty Issues for 2024-Q2: https://github.com/orgs/asyncapi/projects/36/views/4?sliceBy%5Bvalue%5D=bounty%2F2024-Q2

[akshatnema]

@sambhavgupta0705 The Bounty program has been started for this quarter. Please make sure that you share your updates on this issue every week.

[sambhavgupta0705]

Yes @akshatnema I was just busy with my exams Will do it by tomorrow Sorry for the delay

[aeworxet]

Technically, @sambhavgupta0705 has time until April 12 before submission of the Draft PR. Some Bounty Program Participants do submit it on the day they were assigned, but this is their own goodwill, and submission of the Draft PR before the assigned date is totally optional. After the submission on the assigned date, it should be updated each week indeed (Bounty Issues of type Design usually have no PR (they are commonly solved in Figma), so weekly updates are posted in the Bounty Issue's comments.)

[sambhavgupta0705]

If we remove the <I18nProvider> from the _app.js, the og tags becomes visible again I think the cause of it is, that we have implemented nexti18next library incorrectly.

@JeelRajodiya can you please explain how you removed it as I am unable to see it after remove it the tags also

[JeelRajodiya]

If we remove the from the _app.js, the og tags becomes visible again I think the cause of it is, that we have implemented nexti18next library incorrectly.

@JeelRajodiya can you please explain how you removed it as I am unable to see it after remove it the tags also

Sure! please refer to the video below to see how removing the <I18nProvider> tag solves the issue.

https://github.com/asyncapi/website/assets/63534268/46787f9d-b0ac-4dc5-95d9-dc3814857fa1

Possible solution

Removing the <I18nProvider> tag is not the solution, as we need i18n for language translations.

You can refer to next-i18next project setup guide, compare it with asyncAPI codebase and check if there is anything wrong with the configuration in asyncAPI codebase.

One thing that differs in next-i18next setup and asyncAPI codebase is that there is no serverSideTranslations setup in asyncAPI codebase. You can start with configuring serverSideTranslations I believe it can resolve the issue. If it does not, you can follow the above mentioned procedure of comparing the configuration of asyncAPI and next-i18next.

[sambhavgupta0705]

stderr command consol log the errors I think so it is good if it doesn't

[JeelRajodiya]

stderr command consol log the errors I think so it is good if it doesn't

As far as I understood, if the command returns empty output means there are no meta tags, and if the command returns something means the meta tags are present.

I am not sure about it. You might be right, I might be wrong.

[sambhavgupta0705]

Got it

[sambhavgupta0705]

We can't use next-18next instead of that we can only use react-i18next and i18next

[sambhavgupta0705]

currently I am investigating it and will post the an update by end of this week

[aeworxet]

@sambhavgupta0705, please provide an update to the PR.

[sambhavgupta0705]

Currently I am having my exams so I won't be able to devote that much time till 13th may so can the deadline of this issue be increased by 2-3 weeks

For the update : We have identified the root cause of the issue and working on its solution

[aeworxet]

Upon request of the Bounty Program Participant (@sambhavgupta0705), all remaining target dates of the Bounty Issue's Timeline are extended by three calendar weeks.

Bounty Issue's Timeline Extended

Complexity Level	Assignment date (by GitHub)	Start date (by BP rules)	End date (by BP rules)	Draft PR submission	Final PR submission	Final PR merge
Medium	2024-03-21	2024-04-01	2024-05-31	2024-04-12	2024-04-26	2024-05-31

Please note that the dates given represent deadlines, not specific dates, so if the goal is reached sooner, it's better.

Keep in mind the responsibility for violations of the Timeline.