Open Graph Tags: Control Your Social Link Previews
When someone shares your page, the preview card is your headline, your thumbnail and your ad. Open Graph tags decide what it shows. Here is how to set them up so every share looks great.
Open Graph tags are <meta property="og:…"> tags in a page's HTML that tell Facebook, LinkedIn, WhatsApp, Slack, Discord and other apps which title, description and image to show when the link is shared. X (Twitter) reads them too, plus its own twitter:card tags. Without them, platforms guess — often picking the wrong image or a cookie notice as the description.
Key takeaways: set og:title, og:description, og:image, og:url and og:type on every page · use a 1200 × 630 image with an absolute HTTPS URL · add twitter:card = summary_large_image · refresh platform caches after changes · test with the Open Graph Checker.
The essential tags
<meta property="og:title" content="How to Brew Cold Brew Coffee at Home">
<meta property="og:description" content="A 5-minute guide with ratios, steeping times and tips.">
<meta property="og:image" content="https://example.com/img/cold-brew-1200x630.jpg">
<meta property="og:url" content="https://example.com/cold-brew">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example Coffee">
<meta name="twitter:card" content="summary_large_image">What each tag does
| Tag | Purpose | Tip |
|---|---|---|
| og:title | Headline of the card | Can be more conversational than your SEO title |
| og:description | One or two lines of context | Many apps show only the first line |
| og:image | The thumbnail | The biggest factor for clicks |
| og:url | The canonical address | Consolidates shares of tagged URLs |
| og:type | website, article, product… | Use article for blog posts |
| twitter:card | X card layout | summary_large_image for the big image |
The perfect share image
- 1200 × 630 pixels (1.91:1) works on Facebook, LinkedIn, X and WhatsApp.
- Absolute HTTPS URL — relative paths such as
/img/og.jpgare ignored by several platforms. - Under 5 MB, JPG or PNG.
- Safe zone: keep text and faces in the centre; WhatsApp and some apps crop to a square.
- Big, short text — 5 to 8 words that still read at thumbnail size.
Platform quirks
- Facebook caches previews. After changing tags, open the Sharing Debugger and click "Scrape again".
- LinkedIn caches for about seven days; use the Post Inspector to refresh.
- X needs
twitter:cardfor the large image and falls back to Open Graph for everything else. - WhatsApp needs the image to be reasonably small (under ~300 KB loads most reliably) and served quickly.
- Slack and Discord read Open Graph and show the site name prominently.
Step-by-step setup
- Write the tags with the Open Graph Generator and the Twitter Card Generator — both show live previews.
- Paste them into the page
<head>, or fill in the "Social" tab of your SEO plugin. - Make
og:urlmatch the page's canonical URL. - Publish and run the URL through the Open Graph Checker. If the image appears there, platforms can fetch it too.
- Refresh Facebook and LinkedIn caches if the page was shared before.
Do Open Graph tags help SEO?
Not as a direct ranking factor. But better previews raise click-through from social feeds and messaging apps, which brings more visitors, more brand searches and more chances to earn links. They also help AI assistants and chat apps display your pages accurately — a small but growing part of discovery.
Frequently asked questions
What size should an Open Graph image be?
1200 × 630 pixels with a 1.91:1 ratio, under 5 MB, as JPG or PNG, referenced with an absolute HTTPS URL.
Why is Facebook still showing my old image?
Facebook caches previews. Use the Sharing Debugger and click Scrape Again to load your new tags.
Do I need Twitter cards if I have Open Graph?
X falls back to Open Graph for title, description and image, but you still need twitter:card set to summary_large_image for the large layout.
Can og:title differ from the page title?
Yes. The SEO title targets search results, while og:title can be written for social feeds.
How do I test Open Graph tags?
Paste the URL into an Open Graph checker. It shows the tags, the image platforms will use and a checklist of what is missing.
Shorten links & create QR codes free
Clean fvj.io links, dynamic QR codes and click analytics — plus 90 free SEO tools.
