How Open Graph Tags Turn a Plain Link Into a Click-Worthy Preview
By the Super Simple Digital Tools Team · Updated June 2026
Every time someone shares one of your links, a social platform sends a crawler to fetch the page and read a small set of meta tags. Those tags, not your visible page design, decide the headline, description, and image that appear in the preview card. The Open Graph protocol, introduced by Facebook in 2010, gave the web a shared vocabulary for this, and today Facebook, LinkedIn, Pinterest, Slack, Discord, and WhatsApp all read it. A generator helps because the syntax is unforgiving: one misspelled property name or a relative image path quietly produces a blank card.
Start with the four required properties. og:title is the headline the card shows, og:type is usually 'website' for a landing page or 'article' for a blog post, og:url is the canonical address of the page, and og:image is the picture. Add og:description for the one- or two-sentence snippet beneath the title, and og:site_name so the card is attributed to your brand. Because platforms truncate titles differently (Facebook around 100 characters, X around 70, WhatsApp as few as 40), keep titles concise so they survive on every surface.
The image deserves the most care, since it occupies the largest part of the card. Target 1200 by 630 pixels, declare og:image:width and og:image:height with those exact numbers, and add og:image:alt for accessibility. Always use an absolute https URL: the crawler does not know your domain, so a path like /og.png will fail. The 1200x630 size is the de facto standard even though the protocol itself does not mandate a dimension, and it covers X's large-image card despite X's own slightly different 1200x675 recommendation.
X (formerly Twitter) layers its own twitter: namespace on top. Set twitter:card to summary_large_image to get the big-image layout, and add twitter:site with your @handle. You generally do not need to duplicate every field: when a twitter: tag is absent, X reuses your og:title, og:description, and og:image. The pragmatic rule is to implement Open Graph completely, then add just twitter:card and twitter:site, which together cover the vast majority of platforms with minimal extra markup.
Once the tags are generated, paste them into the page's <head> and deploy. Then verify, because tags that look right in code can still fail in the wild. Platforms cache the first card they see, so changes will not appear until you re-scrape the URL in each one's official debugger. Confirm the image loads over https, the URL is canonical, and nothing depends on client-side rendering the crawler will skip. A two-minute validation pass is the difference between a polished preview and a grey box that makes your link look broken.
- Always set og:image to a full absolute https URL; relative paths like /image.png produce blank previews because the crawler does not know your domain.
- Export your share image at exactly 1200x630 and keep headlines and logos inside a centered safe zone so nothing gets cropped on different platforms.
- Add twitter:card set to summary_large_image plus twitter:site, then let X fall back to your og:title, og:description, and og:image for everything else.
- After deploying, paste the URL into each platform's official debugger to clear cached previews and confirm the image and text resolve correctly.