nextjs - 💡(How to fix) Fix OG rendering SVG title element [3 comments, 2 participants]

TL;DR

The issue can be fixed by adjusting the CSS to hide the title element from being rendered in the OpenGraph image.

Guidance

• Review the CSS styles applied to the title element within the SVG to ensure it is not being inadvertently displayed.
• Verify that the opacity workaround previously applied is correctly hiding the title element in the OpenGraph image.
• Check the Next.js configuration and the SVG rendering logic to ensure that the title element is not being explicitly rendered.
• Consider adding a CSS rule to specifically target and hide the title element within the OpenGraph image context.

Example

No specific code example can be provided without more details on the current implementation, but a possible solution could involve adding a CSS rule like .opengraph-image title { display: none; } to hide the title element.

Notes

The issue seems to be related to the rendering of the title element within the OpenGraph image, which is intended for accessibility purposes but should not be visually displayed. The provided information does not specify the exact CSS or rendering logic in use, so the guidance is focused on general troubleshooting steps.

Recommendation

Apply a targeted CSS workaround to hide the title element in the OpenGraph image context, as the issue does not seem to be version-specific and was present in previous versions of Next.js.