Skip to content

Add Open Graph Preview Image #11

@youngcoder45

Description

@youngcoder45

Summary*

Add a proper Open Graph preview image (og:image) for social media sharing support.


Context*

The SEO audit detected that the website is missing an og:image meta tag.

This causes poor previews when sharing links on:

  • Discord
  • Twitter/X
  • LinkedIn
  • WhatsApp
  • Telegram

Why is this needed?

Social preview images:

  • improve branding
  • increase click-through rates
  • improve social sharing appearance
  • make the project look more professional

Tasks

  • Design/create social preview image
  • Add og:image metadata
  • Add twitter:image metadata
  • Verify preview rendering on social platforms
  • Ensure proper image dimensions and optimization

Acceptance criteria*

  • Website generates proper preview cards
  • Preview image renders correctly on Discord and Twitter/X
  • Metadata validates successfully
  • Image is optimized for web delivery

Suggested approach

Recommended dimensions:

  • 1200×630px

Helpful tools:

  • OpenGraph preview validators
  • Twitter Card Validator
  • Next.js metadata configuration

Out of scope

  • Full branding redesign
  • Animated preview cards

Remember, contributions to this repository should follow its contributing guidelines, security policy and code of conduct.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Priority: HighImportant issue that should be handled soon.Status : OpenIssue is open and ready for work.good first issueGood for newcomers

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions