HTML

Open Graph + Twitter Card Tags

admin by @admin ADMIN
4d ago
May 31, 2026
Public
0 0 up · 0 down Sign in to vote
How your page renders when shared to Facebook, LinkedIn, Slack, Discord, X. Every public page needs these — they dramatically improve click-through on shares.
HTML
Raw
<!-- Open Graph (Facebook, LinkedIn, Slack, iMessage, most others) -->
<meta property="og:type"        content="article">
<meta property="og:title"       content="How We Cut Page Load Time in Half">
<meta property="og:description" content="Five practical performance wins from our last sprint, with numbers.">
<meta property="og:url"         content="https://example.com/blog/perf-wins">
<meta property="og:image"       content="https://example.com/blog/perf-wins/cover.png">
<meta property="og:image:width"  content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt"   content="A line chart showing page load time dropping over 6 weeks.">
<meta property="og:site_name"   content="Example Blog">
<meta property="og:locale"      content="en_US">

<!-- Twitter / X Card -->
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:site"        content="@example">
<meta name="twitter:creator"     content="@alice">
<meta name="twitter:title"       content="How We Cut Page Load Time in Half">
<meta name="twitter:description" content="Five practical performance wins from our last sprint, with numbers.">
<meta name="twitter:image"       content="https://example.com/blog/perf-wins/cover.png">

<!-- Image guidelines:
     1200×630 (1.91:1)  Facebook, LinkedIn, Twitter summary_large_image
     1200×1200 (1:1)    iMessage / Discord round previews
     Always set og:image:alt for screen readers. -->
Tags

Save your own code snippets

Create a free account and build your private vault. Share publicly whenever you want.