This is an example page with a perfect Open Graph setup. Use it as a reference for configuring your own pages.
Every meta tag in this page's <head> is annotated with comments
explaining what it does, why it matters, and which platforms use it. You can
view the source of this page to see the full annotated markup, or
read the summary below.
The headline in your link preview. Every platform reads this. Keep it under 60 characters to avoid truncation. Use your page title, not your site name.
The snippet text below the title. Aim for 120–160 characters. Facebook truncates around 300 chars, Twitter around 200, LinkedIn around 150. Front-load the important stuff.
The preview image. This is the single most impactful tag for social engagement. Must be an absolute URL (not relative). Recommended: 1200×630px, under 5MB, JPG or PNG. This one dimension (1200×630 at 1.91:1 ratio) works well across all major platforms.
The canonical URL. Platforms use this to deduplicate shares — if the same article is shared via different URLs (http vs https, with/without query params), they'll count as one piece of content.
Tells platforms the image dimensions before they download it. Without these, some platforms (especially Facebook) must fetch the image first, which can delay or break the preview entirely on first share. Always include them.
Alt text for the preview image. Screen readers use this in social feeds. Critical for accessibility — without it, visually impaired users get no context about your preview image.
The most important Twitter-specific tag. Without it, Twitter defaults to
summary (a tiny square thumbnail). Set to summary_large_image
for the large above-the-text image preview that gets much higher engagement.
twitter:site is your publication's handle; twitter:creator
is the author's. Twitter shows these as attribution on the card. Useful for multi-author
sites where the author and site are different accounts.
Your brand/site name (not the page title). Facebook shows it as a small label above the title. Slack shows it as a header in the unfurled link. Nice for branding but not critical.
Content type classification. Common values: website (default),
article, video.other, profile.
Facebook may show extra fields (like publish date) for articles.
Discord uses this to color the left sidebar of its embed preview. Some mobile browsers also use it to tint the address bar. Not an OG tag, but a nice detail for Discord-heavy audiences.