[Feature] Enable Social Media Preview for Public Shareable Links

[faizananwerali]

Is there an existing issue for this feature?

• Yes, I have searched the existing issues and it doesn't exist.

Feature Description

Description

Currently, when sharing a CV via a public shareable link, social media sites such as WhatsApp, Facebook, and LinkedIn do not display a preview of the content. This makes it less convenient for users to share their CVs effectively on these platforms.

Proposal

I propose implementing a feature that enables social media previews for public shareable links of CVs generated through https://rxresu.me/ or similar platforms. This would enhance the user experience and make it easier for individuals to share their CVs on various social media platforms.

Details

• Current Behavior: When sharing a CV link (e.g., https://rxresu.me/xxx/ggg) on social media, no preview is displayed.
• Expected Behavior: Upon sharing the CV link on platforms like WhatsApp, Facebook, LinkedIn, etc., a preview should be generated automatically, displaying relevant information from the CV.
• Reference: socialsharepreview.com showcases the importance and usefulness of social media previews for shared links.

Benefits

1. Improved user experience: Users will be able to share their CVs more effectively on social media platforms.
2. Enhanced visibility: Social media previews will attract more attention to shared CV links, potentially increasing views and engagement.
3. Competitive advantage: Implementing this feature will differentiate the platform from others that lack social media preview functionality.

Additional Notes

I recommend checking the preview link on socialsharepreview.com to verify whether the links are previewable or not. Integrating with services like socialsharepreview.com could streamline the development process and ensure compatibility with various social media platforms.

Thank you for considering this feature request. Please let me know if you need any further information or clarification.

[PrajwalVBharadwaj]

@faizananwerali this was something I was thinking as well recently when I was sharing the link over WhatsApp. @AmruthPillai I will be very happy to contribute to Reactive Resume! The tool has helped me a lot. If you think this enhancement aligns with the direction of the tool, please let me know, I will take up this enhancement. In parallel, I will go through the application code base and see how this can be implemented and post it here.

[faizananwerali]

This requires Server Side Rendering SSR. I have checked and I don't think SSR is implemented yet.

[AmruthPillai]

@faizananwerali Exactly, as far as I know about generating social open-graph images, it requires SSR or at least SSG. This is not possible with the current implementation of Reactive Resume. If it has to be dynamic (image of the resume), it's just not possible. But I'd still be open to adding OG tags to displaying the logo of Reactive Resume, if someone wants to look into it.

This image can be used as a open-graph header:

[faizananwerali]

While you're right @AmruthPillai that the current client-side rendering (CSR) implementation of Reactive Resume makes generating dynamic social media previews challenging, I believe exploring a server-side rendering (SSR) approach could be a viable solution.

SSR allows us to programmatically generate the social media preview on the server side, incorporating relevant information from the user's CV. This preview can then be cached for improved performance on subsequent visits.

Here are two potential SSR options that could minimize code changes:

1. React - Native Server-Side Rendering (SSR): Utilizing React's built-in SSR functionality (https://medium.com/simform-engineering/how-to-implement-ssr-server-side-rendering-in-react-18-e49bc43e9531), (https://react.dev/reference/react-dom/server) would enable us to render the CV components on the server and generate the social media preview accordingly.

2. Astro.js - Hybrid Rendering: This approach leverages Astro.js's hybrid rendering capabilities (https://astro.build/blog/hybrid-rendering/), allowing for a mix of SSR and CSR. We could leverage SSR specifically for generating social media previews on public CV links while maintaining CSR for faster initial page loads.

Both options offer the flexibility to selectively implement SSR for public CV URLs, ensuring optimal performance for other parts of the application. Additionally, services like Cloudflare Pages provide a free option for hosting the SSR implementation.

While transitioning to an SSR approach would require architectural changes and potential deployment complexities, it presents a promising avenue to achieve our goal of dynamic social media previews.

I understand SSG (Static Site Generation) wouldn't be suitable due to the dynamic nature of CV information. However, SSR presents a promising avenue to achieve our goal.