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 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.

[aeworxet]

@sambhavgupta0705, please provide an update to the PR.

[aeworxet]

Requesting an extension of 2 weeks more as I am busy with my intern project for now

[aeworxet]

Upon request of the Bounty Program Participant (@sambhavgupta0705), all remaining target dates of the Bounty Issue's Timeline are extended by two 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-06-14	2024-04-12	2024-05-31	2024-06-14

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.

[aeworxet]

Taking into account the comments in the PR and that removal of internationalization is not an option, should the reconfiguration of the i18n library be considered out of scope for this Bounty Issue and a separate GitHub issue created, or should this Bounty Issue be reclassified to Advanced, its Timeline extended, and it pushed through until completion? @derberg @akshatnema @sambhavgupta0705 @anshgoyalevil

[akshatnema]

@sambhavgupta0705 If we extend this issue to Advanced, will you be able to reconfigure the i18n library in the given timeline?

[sambhavgupta0705]

Well it is a hit and trial issue Don't know the exact solution as it is an error in the i18n library only I can try working on this one but don't know the exact solution to solve this

[akshatnema]

@sambhavgupta0705 Communicate with @aeworxet about new guidelines, if the issue is extended for Advanced, and then make a decision on whether you are willing to take up or not.

Also @sambhavgupta0705, I would prefer to think of a way before taking a Bounty issue, as this is not a mentorship program. So you should be clear with your ways.

[aeworxet]

Since there are clearly difficulties with this Bounty Issue, I would propose taking an incremental approach: to consider reconfiguration of the i18n library exceeding the scope of this Bounty Issue and to close it as completed, and I will continue working on this issue as on a usual GitHub issue driving it to full completion.

[aeworxet]

I presume the error is caused by improper configuration/implementation of I18nextProvider of the react-i18next.

Next.js has its own built-in support for internationalized (i18n) routing since v10.0.0 (website uses Next.js v14.1.1)

The simplest guess is that these two functionalities are conflicting and what would solve the issue is migration of the website to internal built-in Next.js' i18n support, which is logical because react-i18next is a legacy from the times when website was a plain React SPA and Next.js should be using built-in mechanisms whenever possible.

@akshatnema Do you have thoughts on this subject?

[akshatnema]

@aeworxet I think @anshgoyalevil already explored that part in his Mentorship project last year, and there were some configuration errors. Also, we can't have built-in support of Next js inside our website, because this will lead us to have different page components for different languages. We actually decided to go with global variable and locales based i18n configuration, where this content will be rendered via useTranslation Hook and we will then have fallback mechanism for each language as well. So, I think instead of using built in configuration, we should think to use https://www.npmjs.com/package/next-i18next in place of current one. Moreover, we can think of using ssr via Netlify functions using next-on-netlify package.

[aeworxet]

@sambhavgupta0705, if this Bounty Issue is reclassified (upgraded) to Advanced, would you take it and will two months be enough to implement the change @akshatnema is suggesting above?

[akshatnema]

Yeah it will be enough but @sambhavgupta0705 do you have enough bandwidth to resolve this in 2 months?

[aeworxet]

@sambhavgupta0705, please respond to @akshatnema's very doable proposal.

[sambhavgupta0705]

Well can I get time for this weekend to think about this, because I don't know the exact solution for this issue and picking up this issue and dropping it later would not be good?

[aeworxet]

@sambhavgupta0705 Please provide the answer before 2024-06-23 23:59:59 UTC-12:00 because this Bounty Issue is starting to take an unreasonably long time.

[aeworxet]

@sambhavgupta0705 Please repeat your comment about this Bounty Issue, because it was received by email but is not visible in the web UI.

[sambhavgupta0705]

@aeworxet I will be working on this issue for the next 2 months from now

[sambhavgupta0705]

Sorry for the delay I am free from next week so I will be back contributing to asyncapi

[aeworxet]

Upon the joint decision of two AsyncAPI Maintainers, one of whom is responsible for the resolution of this Bounty Issue from the AsyncAPI's side (@akshatnema) and the second one is the Bounty Program Participant (@sambhavgupta0705), this Bounty Issue is reclassified (upgraded) to Advanced and its Timeline is extended by thirteen weeks.

Bounty Issue has been Reclassified and its Timeline Changed

Complexity Level	Assignment Date (by GitHub)	Start Date (by BP Rules)	End Date (by BP Rules)	Draft PR Submission	Final PR Merge Start	Final PR Merge End
Advanced	2024-03-21	2024-04-01	2024-08-23	2024-07-19	2024-08-09	2024-08-23

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.