4 min readcode.live
Why Your Links Look Broken When Shared on Slack or Twitter
Missing or malformed og:image tags are the usual culprit. Here's what a correct Open Graph image setup actually needs.
The preview isn't automatic
When a link gets shared on Slack, Twitter/X, LinkedIn, or iMessage, the preview card is built from Open Graph meta tags on the page — not a screenshot the platform takes itself. If og:image is missing, wrong-sized, or blocked by robots rules, you get a blank or broken preview.
What a correct setup needs
- og:image at 1200x630 — the aspect ratio most platforms crop to consistently
- An absolute URL, not relative — some crawlers won't resolve relative paths
- og:image:width and og:image:height set explicitly speeds up rendering on some platforms
- The image must be publicly accessible — no auth wall, no robots.txt block on the image path
Try it on code.live
code.live's OG Image Generator builds a correctly-sized social preview image from a title and background, so you're not fighting aspect ratios in a general image editor.
Key takeaways
- Apply one concrete change from this post before collecting more reading.
- Prefer browser-side tools when the work involves secrets, tokens, or PII.
- Document the why next to the how so the next reviewer inherits context.
FAQ
- Who is this guide on seo for?
- Working developers who need a practical take on why your links look broken when shared on slack or twitter — not a marketing overview. Skim the sections, apply one tip, then come back when you hit an edge case.
- Do I need an account to use the related tools?
- No. code.live tools run in your browser with no signup. Nothing you paste is uploaded to a server for the client-side utilities linked from this post.
- How often is this article updated?
- This post was published September 7, 2026. Fundamentals stay stable; check linked tool pages and official docs when version-specific behavior matters.