SEO · SEO & preview
last updated 2026-10-05 · built by edy appenzeller · open source
Published 2026-10-05
When you paste a link into Slack, Twitter, LinkedIn, Discord, or iMessage, the network fetches the Open Graph tags and renders a preview card. If your tags are missing or wrong, you get an empty card, a broken image, or a wrong title. /og-preview/ shows you exactly how your link looks on each platform.
The minimum Open Graph tags
for the preview title. for the preview description. for the preview image URL. for the canonical URL. for the content type (article, website, product). Without these, most platforms will fall back to the
tag and a generic favicon.</p>
<h2>Image dimensions per platform</h2>
<p>Slack: 1200×630. Twitter: summary_large_image uses 1200×628, summary uses 240×240. LinkedIn: 1200×627. Discord: 1200×630 with the title shown below. Facebook: 1200×630. The safe default is 1200×630 with text readable at 600×315 (thumbnail size). Keep file size under 5 MB for most platforms; under 1 MB is safer.</p>
<h2>The Twitter Card override</h2>
<p>Twitter does not use Open Graph by default. You need <meta name="twitter:card"> with a value of summary or summary_large_image, plus <meta name="twitter:image"> pointing to the image. If you omit these, Twitter uses OG tags and the result is usually acceptable but not pixel-perfect.</p>
<h2>How the preview tool works</h2>
<p>/og-preview/ fetches the URL server-side, parses the meta tags, and renders a side-by-side preview of how Slack, Twitter, LinkedIn, and Discord will display the link. This lets you iterate on the meta tags without manually pasting the URL into each platform. The tool also surfaces validation errors (missing image, image too small, no description).</p>
</section>
<section class="mt-8 card p-5 border-brand-400/30" style="border-color: rgba(34, 211, 238, 0.30);">
<h2 class="text-base font-bold mb-2 text-brand-300">Try it →</h2>
<p class="text-slate-300 text-sm leading-relaxed mb-3">Run the OG preview tool on sitetrace.it.com — paste a value and get an instant answer.</p>
<a href="/og-preview/" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-brand-gradient text-ink-900 font-semibold text-sm hover:opacity-90 transition">
Open OG preview
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
</a>
</section>
<div class="mt-8 text-sm text-slate-500">
<a href="/blog/" class="hover:text-brand-300">← Back to all articles</a>
</div>
</article>
</main>
<footer class="border-t border-white/5 mt-12">
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-10 grid sm:grid-cols-[2fr_1fr_1fr] gap-8 text-sm">
<div>
<div class="flex items-center gap-2 mb-3">
<span class="w-7 h-7 rounded-lg bg-brand-gradient"></span>
<span class="font-bold">SiteTrace</span>
</div>
<p class="text-slate-400 text-xs leading-relaxed max-w-md">Free, no-login network tools. No accounts, no tracking, no nonsense.</p>
</div>
<div>
<div class="text-slate-500 text-xs uppercase tracking-widest mb-2">About</div>
<ul class="space-y-1 text-slate-300">
<li><a href="/about/" class="hover:text-white">About</a></li>
<li><a href="/blog/" class="hover:text-white">Blog</a></li>
<li><a href="/privacy/" class="hover:text-white">Privacy</a></li>
</ul>
</div>
<div>
<div class="text-slate-500 text-xs uppercase tracking-widest mb-2">Language</div>
<ul class="space-y-1 text-slate-300 text-sm">
<li><button class="lang-link hover:text-white" data-lang="en">English</button></li>
<li><button class="lang-link hover:text-white" data-lang="es">Español</button></li>
</ul>
</div>
</div>
<div class="border-t border-white/5">
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-2">
<span>© 2026 SiteTrace. All rights reserved.</span>
<span class="font-mono">v1.0.0</span>
</div>
</div>
</footer>
<script src="/js/i18n.js?v=32"></script>
<script src="/js/layout.js?v=32"></script>
</body>
</html>