When you share a link to your Jottings site on Twitter, LinkedIn, or Discord, something magical happens in the background. A thumbnail appears—colors, images, maybe your face or a beautiful illustration. That's your site banner at work. And honestly, it's one of the simplest ways to get more clicks on your shares.
But here's the thing: most creators don't set one up. They default to whatever their site generates automatically, which usually looks... generic. I wanted to fix that in Jottings, so I built in native support for site banners that actually work.
What's a Site Banner? (And Why You Need One)
A site banner is a single image that represents your entire site on social media. It's technically called an "Open Graph image" or "OG image"—the standard that Facebook, Twitter, LinkedIn, Discord, and basically every social platform use to display rich previews.
When someone shares your Jottings site, here's what happens:
- They paste the link into Twitter (or Facebook, LinkedIn, Discord, Slack, etc.)
- The platform crawls your site and looks for OG metadata
- It finds your site banner and displays it as a thumbnail
- The preview looks professional and inviting → more clicks
Without a banner, platforms fall back to generic icons or blank space. With one, your site gets a visual identity that stops the scroll.
The Magic Dimensions: 1200×630px
When I was building this feature, one question kept coming up: "What size should my banner be?"
The answer: 1200 pixels wide by 630 pixels tall. That's a ratio of roughly 1.91:1 (almost 2:1 if you're doing quick math).
Why this specific size? Because it's the OpenGraph standard that works across all major platforms:
- Twitter: Uses 1200×630px (shows as 1.91:1 cards)
- Facebook: Prefers 1200×630px (or 1.91:1 ratio)
- LinkedIn: Works with 1200×627px
- Discord: Scales it down but uses the same ratio
- Slack: Same ratio
- iMessage: Same ratio
If you use this size, your banner looks crisp and professional everywhere. If you use something smaller (like 800×420px), it'll work but might look pixelated on larger screens. If you use something larger, most platforms will just scale it down.
Pro tip from my own experience: I recommend designing at 1200×630px natively. It's easier than designing bigger and hoping it scales well. Upload as JPEG (usually smallest file size), PNG (if you need transparency), or WebP (if you want modern compression).
Where Your Banner Shows Up
In Jottings, your site banner appears as the social preview on:
- Home page: Every time someone shares your latest jots
- Tag pages: When someone links to your tag archives
- Info page: If you have an about/info page
- Jot detail pages: As a fallback (if the individual jot doesn't have its own photo)
This means one image does a lot of work. It's your site's visual signature.
The Fallback Logic
Here's how Jottings handles which image appears where:
- Jot pages: If that specific jot has a photo, use that. Otherwise, use your site banner. Otherwise, use a generic jottings logo.
- All other pages: Use your site banner, or fall back to a generic image.
This means when someone shares a specific jot with its own gorgeous photo, that photo takes center stage. Your site banner is the backup—but on 80% of pages, it's the star.
Designing a Banner That Works
I've seen hundreds of site banners at this point, and the best ones follow a simple pattern:
Keep it simple. Your banner has maybe 2 seconds of attention as someone scrolls. Avoid walls of text. Use:
- A solid color background (complements your site's vibe)
- Your name or site title in a clear, large font
- Optionally: a small logo, icon, or illustration
- Plenty of whitespace (empty space is your friend)
Use readable fonts. Serif, sans-serif, whatever matches your brand. But make sure it's large enough that someone scrolling quickly can read it. Minimum 36pt if it's text.
Choose colors that pop. Bland backgrounds don't stop the scroll. Use contrast. Black text on white works. White text on deep blue works. Neon on dark gray? Sure, if that's your thing.
Test on all platforms. After you upload, share your site on Twitter, check it on LinkedIn, send it to Discord. The image might look slightly different on each platform (Discord rounds corners, Twitter adds a border sometimes), so a quick test takes the guess-work out.
Make it timeless. Trendy designs age fast. Pick colors and styles that'll look good in 6 months.
How to Upload Your Banner
In the Jottings dashboard, head to Settings > SEO Configuration and look for "Site Banner." Click it and:
- Select or drag an image (JPEG, PNG, or WebP)
- Keep it under 5MB (usually 1-2MB is fine)
- The system resizes it to 1200px wide automatically
- Upload
- Done. It appears everywhere immediately.
If you change it later, the system automatically clears the old version after 6 hours. No cleanup needed on your end.
A Quick Design Shortcut
If you don't feel like designing from scratch, there are tons of free tools:
- Canva: Free templates for "social media banners" (search 1200x630)
- Figma: Create custom designs or use community templates
- Piktochart: Great for infographic-style banners
- Unsplash + a text editor: Find a beautiful background photo, add your name in large text
The easiest path: Pick a beautiful photo from Unsplash (1200px wide), add your name in white text with a shadow, done.
The Cache-Busting Detail (Skip This If You Want)
Here's a technical detail that matters if you're the type who cares: Jottings adds a timestamp to your banner URL (?v=1234567890) every time you update it. This tells browsers and social platforms to fetch the newest version instead of using a cached old one.
Why? Because social platforms love caching images. If they didn't, they'd re-crawl millions of sites constantly. The timestamp forces a refresh without making you do anything.
If you've uploaded a banner and Twitter still shows the old one? Wait a few hours. Social platforms recrawl periodically.
Why This Matters
I built site banners into Jottings because I realized something: if you're taking the time to write on your site and share it, you deserve to control what that looks like on social media. A thoughtful banner image is the difference between someone stopping to click and someone scrolling past.
It's the same reason I spent time optimizing photo uploads, adding SEO fields, and making the design system flexible. The details matter.
Your Jottings site is your thing. Make it look like it.
Next Steps
If you don't have a site banner yet, grab a photo or use Canva to make one this week. It takes 15 minutes and will show up on every social share going forward.
Already using Jottings? Update your banner this week and share a link on Twitter. I'd love to see how creators are using this feature.
Still building your Jottings site? Create a free account and add a banner in Settings. Share your first jot and watch the preview come to life.