[BUG][SEO] Web link preview does not work for published posts

[NayamAmarshe]

Summary

Currently, when links to published posts are shared on platforms like Telegram or Twitter, no preview is shown. This indicates that the SEO head tags in Next.js are not functioning correctly for public posts pages. The goal of this project is to ensure that these tags are correctly implemented and that web link previews display properly across various platforms.

Objectives

1. Fix the issue with SEO head tags in Next.js to ensure they work correctly for public posts.
2. Ensure that web link previews display correctly when shared on Telegram, Twitter, and other social platforms.
3. Improve the overall SEO and visibility of published posts through correct metadata implementation.

Scope

• In-Scope:

  • Identifying and fixing the issue with the current implementation of SEO head tags in Next.js.
  • Testing and verifying the display of web link previews on multiple platforms (e.g., Telegram, Twitter, Facebook).
  • Updating the SEO metadata strategy to adhere to best practices.

• Out-of-Scope:

  • Changes to the content or structure of the published posts themselves.
  • Enhancements to the visual design of the post pages not related to SEO.

Functional Requirements

1. SEO Metadata Implementation:

   • Ensure all published posts include the following SEO head tags:
     • title
     • meta description
     • og:title
     • og:description
     • og:image
     • og:url
     • twitter:card
     • twitter:title
     • twitter:description
     • twitter:image
     • canonical link

2. Dynamic Data Handling:

   • Ensure that SEO metadata dynamically reflects the content of each published post.
   • Implement server-side rendering (SSR) where necessary to ensure SEO tags are correctly read by social media platforms.

3. Testing:

   • Test the link previews on multiple platforms (Telegram, Twitter, Facebook) to ensure they display correctly.
   • Validate the SEO metadata using tools like Google's Structured Data Testing Tool, Open Graph Debugger, and Twitter Card Validator.

4. Fallback Mechanism:

   • Implement a fallback mechanism to provide default SEO metadata for posts that might be missing specific details.

Non-Functional Requirements

1. Performance:

   • Ensure that the implementation of SEO tags does not negatively impact the page load times.

2. Scalability:

   • The solution should be scalable and work seamlessly as the number of published posts grows.

3. Compatibility:

   • Ensure compatibility across all major browsers and devices.

Risks and Mitigations

• Risk: Inaccurate or missing metadata for some posts.

  • Mitigation: Implement robust testing and a fallback mechanism for default metadata.

• Risk: Negative impact on page performance.

  • Mitigation: Optimize SEO tags implementation and conduct performance testing.

• Risk: Changes might not reflect immediately due to platform caching.

  • Mitigation: Use tools to manually refresh previews on platforms if necessary.

Metrics for Success

• Increase in the number of posts showing correct previews on social media platforms.
• Improvement in click-through rates from social media platforms.
• Positive feedback from users regarding the visibility and sharing of posts.