Repository navigation
feat: add og:image for Project Transformers post - #14
Conversation
- Add og:image, twitter:card meta to the MDX frontmatter using ark-zainf-dev-screenshot.jpg (already in /public/assets/) - Update root.tsx meta function to skip global og:image when a child route provides its own, preventing override
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Per amp deep review: og:image alone wasn't enough — without also overriding og:title, og:description, and og:url, social cards would show the correct image but the homepage title/description/URL. - MDX: add og:title, og:description, og:url to frontmatter meta - root.tsx: extend child-wins logic to all four OG tags, not just og:image
There was a problem hiding this comment.
Pull request overview
This PR adds custom Open Graph and Twitter Card metadata to the "Project Transformers" blog post, enabling a custom social preview image (screenshot of the Ark directory) instead of the default portrait photo when the post is shared on social media platforms.
Changes:
- Added comprehensive Open Graph tags (title, description, URL, image with dimensions and alt text) to the blog post MDX frontmatter
- Added Twitter Card metadata (card type and image) to optimize sharing on X/Twitter
- Refactored root.tsx meta function to conditionally render default OG tags only when child routes don't provide their own, enabling per-post customization
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| app/routes/blog.project-transformers-building-personal-ai-army.mdx | Added OG and Twitter Card meta tags pointing to ark-zainf-dev-screenshot.jpg with proper dimensions (1200x630) and descriptive alt text |
| app/root.tsx | Refactored meta function to check for child route OG tags and skip default portrait image when child provides custom image |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const hasChild = (property: string) => | ||
| childMeta.some((m) => m.property === property); |
There was a problem hiding this comment.
The hasChild function only checks for meta tags with the property attribute, but the blog post also adds meta tags with the name attribute (such as twitter:card and twitter:image on lines 24-27 of the MDX file). This means the function won't detect these Twitter-specific meta tags from child routes.
Consider updating the hasChild function to check both property and name attributes to ensure comprehensive detection of child meta tags.
| const hasChild = (property: string) => | |
| childMeta.some((m) => m.property === property); | |
| const hasChild = (key: string) => | |
| childMeta.some((m) => m.property === key || m.name === key); |
Per amp smart review: - charset and viewport were being emitted twice (once from meta fn via <Meta />, once hardcoded in JSX <head>) — remove from meta fn since the JSX template already covers them - links fn had a hardcoded canonical pointing to homepage for every route, which would tell crawlers all blog posts are duplicates of the homepage — removed; canonical should be set per-route
What
Adds a proper social preview image for the Project Transformers blog post.
Changes
og:image,og:image:alt,og:image:width/height,twitter:card, andtwitter:imagepointing to the existing/assets/ark-zainf-dev-screenshot.jpgmetafunction to skip the defaultog:image(portrait photo) when a child route already provides its own, so per-post images aren't overriddenResult
When this post is shared on X, WhatsApp, or Telegram, it'll show the Ark directory screenshot instead of Zain's portrait.