feat: Add social media preview images and Open Graph meta tags#5
Merged
feat: Add social media preview images and Open Graph meta tags#5
Conversation
Add dynamic Open Graph and Twitter Card images using Next.js ImageResponse API. The social preview features: - Dark theme with KnowAll.ai brand colors (#00D26A green accent) - Clock icon logo with "Thyme by KnowAll.ai" branding - "Time Tracking, Perfectly Synced" tagline - Microsoft Dynamics 365 Business Central badge Also enhances layout.tsx metadata with: - Complete Open Graph tags (title, description, url, siteName, locale) - Twitter Card configuration for summary_large_image - Author, creator, and publisher information - SEO-friendly robots configuration
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds dynamic social media preview images for Open Graph and Twitter Card integrations, along with enhanced SEO metadata. The implementation uses Next.js ImageResponse API to generate on-the-fly preview images with KnowAll.ai branding.
Key changes:
- Adds dynamic social media preview image generation with brand-consistent dark theme design
- Enhances metadata configuration with comprehensive Open Graph and Twitter Card tags
- Implements proper SEO configuration including robots, author, and publisher information
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/app/twitter-image.tsx | Generates Twitter Card preview image using Next.js edge runtime with branded design |
| src/app/opengraph-image.tsx | Generates Open Graph preview image with identical design to Twitter image |
| src/app/layout.tsx | Expands metadata configuration with Open Graph, Twitter Card, author information, and SEO settings |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Address Copilot review feedback by eliminating code duplication between opengraph-image.tsx and twitter-image.tsx. The shared image generation logic is now in src/components/social/SocialImageContent.tsx.
Contributor
Author
Social Media Preview ImageOnce deployed, the social preview will be available at:
Preview DesignThe 1200x630 image features: Colors:
To test locally, run |
Contributor
Author
Social Preview Image
This is the design that will be dynamically generated for Open Graph and Twitter Card previews when the site is shared on social media. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add dynamic Open Graph and Twitter Card images using Next.js ImageResponse
API. The social preview features:
Also enhances layout.tsx metadata with: