Header guide
GitHub social preview / OG card header size: 1280×640
Everything you need to design a GitHub social preview / OG card banner that looks great on every device — exact dimensions, safe areas to avoid, and how the image actually crops on phones, tablets, and desktops.
Recommended size
1280 × 640px
Aspect ratio
2.00:1
Devices we audit
4
How GitHub social preview / OG card crops your header
GitHub social preview / OG card renders the same image differently across devices. We test 4 unique device profiles (1 phone) (3 desktop).
| Device | Type | Display size | Safe areas |
|---|---|---|---|
| Twitter unfurl | desktop | 1280×640 | Twitter URL Strip (bottom) |
| Slack unfurl | desktop | 800×400 | Slack title strip |
| Discord unfurl | desktop | 480×240 | None |
| iMessage rich link | phone | 380×190 | None |
Design tips for GitHub social preview / OG card
- •Keep critical content centered. Mobile and desktop crop different portions of your image. Putting your key visual or text in the center buys you the most safety.
- •Mind the profile picture overlay. Most platforms place a profile photo on top of the lower-left of your banner. Don't put logos or text there.
- •Watch the Dynamic Island & status bar. On iPhones the top of your banner sits behind the status bar and (on Pro models) the Dynamic Island.
- •Export at 2× or 3×. Save at twice the recommended size and let the platform downscale, so the image stays crisp on retina displays.
Test your GitHub social preview / OG card header
Upload your banner and Better Header will check it against every GitHub social preview / OG card device profile. First audit's on us.
One token · Tokens never expire · Refund if no issues found