You just published something brilliant on your Jottings site. You're ready to share it on Twitter. You paste the link into a post... and watch a generic preview appear.
Flat. Boring. Forgettable.
Then someone else shares their Jottings site and their preview stops you mid-scroll. Sharp image. Your eye drawn right to it. You click.
The difference? They optimized their site banner.
And I'm going to walk you through exactly how to do it.
The 1200×630px Standard Explained
Let me start with the unglamorous part: dimensions.
The Open Graph specification recommends 1200 pixels wide by 630 pixels tall. That's a 1.91:1 ratio—close to 2:1. This works everywhere because it's what the people who built social platforms chose.
Here's why this matters:
- 1200 pixels is wide enough to look sharp on high-resolution displays (Retina, 2x DPI)
- 630 pixels is tall enough to avoid being cropped on mobile displays
- This ratio is what Twitter, Facebook, LinkedIn, Discord, and Slack all optimized their image rendering for
If you use this exact size, your banner will display at full quality on every platform. If you use something smaller (like 800×420), it might look pixelated when scaled up. If you use something larger, platforms will just shrink it down and you've wasted bandwidth.
Think of it like this: the platforms already did the math. 1200×630 is the sweet spot. Just use it.
Designing for Impact
Dimensions are just the foundation. The design is what stops the scroll.
Keep Text Readable
When your banner appears in a preview, it's often thumbnail-sized on mobile. Someone might be scrolling at 2x speed. You need maybe one second of attention.
This means:
Use large text. Your main message (usually your name or site title) should be at least 48pt, ideally 60pt or larger. When Twitter scales it down to a thumbnail, you want every letter still readable.
Use contrast. Black text on white. White text on dark blue. Neon green on charcoal. What doesn't work: gray text on light gray. Navy on black. Low-contrast text disappears.
Limit your text. Your name. Your tagline (max 5 words). That's it. A wall of text reads like spam. Even if it's readable, it feels overwhelming.
Brand Colors Matter
Your banner should feel like you. Use colors that show up on your actual site.
If your site uses a warm, earthy palette (browns, creams, rust), your banner should too. If you're high-contrast and modern (black and white with one pop color), carry that forward. The consistency makes you memorable.
I use cool blues and whites on my personal site, so any banner I design leans that direction. Someone who knows my work sees that blue and knows it's me before they read the text.
Pro tip: Use a color picker tool to grab your site's primary color and build your banner around it. Coolors.co is great for generating palettes.
Leave Whitespace
Whitespace is the most underrated design element. It's empty space, but it creates breathing room. Your eye knows where to focus.
A banner packed with elements—logos, icons, gradients, textures—feels chaotic. A banner with clear negative space feels intentional.
Think luxury. Think premium. Think "this person has taste."
Testing Your Banner Before Upload
Before you upload to Jottings, test how it actually looks.
Use the Open Graph Debugger
Meta (Facebook) provides a free tool: the Open Graph Debugger. Paste your Jottings site URL and it'll show you exactly how your banner will render on Facebook.
You might see: "Image dimensions: 1200x630. Check."
Or you might see: "Image aspect ratio not ideal." Now you know to adjust.
Twitter Card Validator
Twitter has its own tool: the Card Validator. Same idea. Paste your URL and see a preview of exactly how your link will look in a Twitter feed.
This is where I catch most issues. Sometimes a banner I designed looks great in Figma but once I see it in Twitter's preview, I realize the text needs to be bigger, or the color needs more contrast.
Share It Yourself
The real test: actually share your Jottings link on Twitter, LinkedIn, or Discord and look at it.
I do this before publishing. I share the link, screenshot the preview, and if it doesn't make me want to click it, I go back and tweak. Usually it's small stuff—a bit more contrast, slightly larger text.
Takes 5 minutes. Saves you from shipping something that doesn't convert.
The Technical Side (Still Simple)
When you upload a banner to Jottings, a few things happen behind the scenes:
Format: Upload as JPEG (smallest file), PNG (if you need transparency), or WebP (modern compression). Anything above 5MB gets rejected—aim for 1-2MB.
Resizing: Jottings automatically handles resizing to 1200px wide if needed. But design at 1200×630 to avoid any scaling weirdness.
Cache busting: Jottings adds a timestamp to your banner URL every time you update it. This tells social platforms to fetch the new version instead of showing a cached old one. You don't do anything—it happens automatically.
Storage: Your banner lives on a global CDN, served fast from servers near your readers. No slowdowns.
Common Mistakes I See
Mistake #1: Text Too Small
You designed your banner on a 27-inch monitor. It looked great. Then you posted it and realized the text is barely readable at thumbnail size.
Fix: Design on a smaller screen. Or just commit to 48pt minimum for main text. You can't go wrong.
Mistake #2: Trying to Cram Everything
Your logo. Your tagline. A photo of you. Three icons representing your services. Your social handles.
Stop. Pick one or two elements. Let the rest go.
Mistake #3: Trending Fonts and Colors
That metallic gradient? Those chunky rounded fonts? Trendy designs feel dated within 6 months.
Use timeless colors and fonts that'll look good in 2027. You probably won't redesign your banner for a while. Make it age well.
Mistake #4: Not Testing on Mobile
You designed a gorgeous 1200×630 banner on your laptop. But most people see it as a 300×160 thumbnail on their phone.
Test small. That's the real test.
Uploading to Jottings
Once you've designed and tested your banner, uploading takes 30 seconds:
- Go to your Jottings dashboard
- Click Settings (in the sidebar)
- Click SEO Configuration
- Find Site Banner and click Upload
- Select your image (or drag and drop)
- Jottings handles the rest
Your banner now appears on every social share of your site. Home page, tag pages, info page—it's everywhere.
If you change it later, Jottings orphans the old version and cleans it up after 6 hours. No manual cleanup needed.
Why This Actually Matters
Here's the honest truth: a well-designed banner can increase click-through rate on social shares by 20-30%. That's not a guess. That's what the data shows across major platforms.
If you share your Jottings site twice a week, a better banner means an extra 20-30 clicks per month from the same amount of effort.
More clicks means more readers. More readers means more engagement. That's the whole reason you started a site in the first place, right?
A site banner is free. It takes an hour to design. And it compounds every single time you share.
Next Steps
This week, design a banner. Use 1200×630 pixels. Use your brand colors. Make the text big. Keep it simple.
Test it with the Open Graph Debugger and Twitter Card Validator. Share it on one platform and look at the preview. If it makes you want to click, upload it to Jottings.
Then share your site. Watch the preview pop up. And enjoy knowing that every person who sees it stops just a little longer.
That's all optimization is, really: making small things so good that people can't help but notice.
Ready to optimize your site? Log into your Jottings dashboard and add a banner in SEO Configuration. Share a jot and watch your preview come to life.