Here is how to add Open Graph tags: place a small set of og: meta tags inside the <head> of your page, give them a title, description, and a 1200x630 image, then validate the result before you share. Open Graph is the protocol that controls what Facebook, LinkedIn, Discord, Slack, and most other platforms show when someone pastes your link. Without it, your link looks like naked text or a broken thumbnail.
This guide gives you the exact copy-paste tag set (no plugin, no CMS required), the image sizes that actually render correctly on each platform, and the fix for the single most common problem: the preview that refuses to update because a platform cached the old one. By the end you will know how to add Open Graph tags by hand and verify them on all the major networks.
What Open Graph Tags Actually Do#
Open Graph (often shortened to OG) is a markup protocol Facebook introduced in 2010. It lets you, the page owner, decide exactly how your URL is represented when it gets shared. Instead of a crawler guessing at a title and grabbing a random image, it reads your declared values.
When someone pastes your link into a post, message, or chat, the platform fetches your page, reads the og: tags from the <head>, and builds a preview card from them. That card is your first impression. A clean card with a sharp image gets clicked. A bare URL gets scrolled past.
Key point: Open Graph tags do not directly affect your Google rankings. They affect click-through and shares on social and chat platforms, which is a different and very real traffic channel.
Which platforms read Open Graph#
Almost all of them, with one historical exception. The list below covers the eight surfaces most people care about and what protocol each one reads.
| Platform | Reads Open Graph? | Notes |
|---|---|---|
| Yes | The original consumer of OG; uses the Sharing Debugger to refresh | |
| Yes | Reads og:title, og:description, og:image; has its own Post Inspector | |
| X (Twitter) | Yes, with Twitter Card fallback | Prefers twitter: tags, falls back to og: |
| Discord | Yes | Builds rich embeds from OG tags |
| Slack | Yes | Unfurls links using OG tags |
| Yes | Small thumbnail preview from og:image | |
| iMessage | Yes | Rich link preview from OG |
| Yes, plus its own | Reads OG but also supports Rich Pins metadata |
The practical takeaway: get your Open Graph tags right and you cover the overwhelming majority of sharing surfaces with one block of markup.
The Essential Open Graph Tags You Need#
You do not need dozens of tags. Five core OG tags plus a small Twitter Card block handle nearly every real-world case. Here is the minimal, correct set to drop into your <head>.
<!-- Open Graph core -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A 1 to 2 sentence summary that earns the click." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:type" content="website" />
<!-- Twitter Card (X reads these, falls back to og: if absent) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A 1 to 2 sentence summary that earns the click." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
A few things worth understanding about that block, because the details are where previews break:
og:tags useproperty, Twitter tags usename. This trips up a lot of people.<meta property="og:title">is correct;<meta name="og:title">is technically wrong and some crawlers ignore it.og:urlshould be the canonical, absolute URL. Use the fullhttps://address, not a relative path. This becomes the link the preview points to.og:imagemust be an absolute URL too. A relative path like/og.jpgwill not resolve when an external crawler fetches your page.twitter:cardset tosummary_large_imagegives you the big banner-style card. Leave it off and X shows a tiny square thumbnail instead.
Optional tags worth adding for articles#
If the page is a blog post or article rather than a generic page, two extra tags add polish and unlock richer embeds on some platforms.
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Brand" />
<meta property="article:published_time" content="2026-06-25T08:00:00Z" />
Set og:type to article for posts and website for home pages, landing pages, and tools. The og:site_name shows your brand above or below the title on several platforms, which builds recognition across shares.
The og:image Size That Renders Correctly Everywhere#
The image is the part people get wrong most often, and it is the part that matters most visually. There is one safe specification that works across every major platform.
Use 1200 x 630 pixels at a 1.91:1 aspect ratio. This is the size Facebook recommends, and it renders cleanly on LinkedIn, X (as a large image card), Discord, and Slack without awkward cropping. Keep important text and faces away from the very edges, because some platforms apply a slight crop.
Here is a quick cheatsheet for the platforms with stricter or different expectations.
| Use case | Recommended size | Aspect ratio | Notes |
|---|---|---|---|
| Universal OG image | 1200 x 630 | 1.91:1 | The default that works almost everywhere |
| X large summary card | 1200 x 628 | ~1.91:1 | Effectively the same as the universal size |
| X small summary card | 144 x 144 minimum | 1:1 | Only if you set twitter:card to summary |
| 1200 x 627 | ~1.91:1 | Treat 1200 x 630 as safe | |
| Discord / Slack | 1200 x 630 | 1.91:1 | Scales the universal image down cleanly |
A few image rules that prevent broken or fuzzy previews:
- Keep the file under about 5 MB. Facebook and others may skip images that are too large, leaving you with no preview image at all.
- Use JPG or PNG. WebP support is inconsistent across crawlers, so for OG images specifically, stick to the safe formats even if your site uses WebP elsewhere.
- Serve it over HTTPS. A mixed-content
http://image inside an HTTPS page can be dropped. - Make the dimensions explicit. Adding
og:image:widthandog:image:heighthelps platforms reserve the right space and render faster.
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
If you want to lay out a branded card the right size without opening a design tool, the free meta tag and Open Graph generator builds the full tag block and shows you exactly how the 1200x630 image will sit inside the preview.
How to Add Open Graph Tags Step by Step#
This procedure works for any site where you can edit the HTML <head>: a hand-coded site, a static site generator, a custom template, or a framework like Next.js or Astro. No plugin required. Follow these steps to add Open Graph tags from scratch and confirm they work.
Step 1: Write your title and description#
Decide the exact text first. Your og:title can differ from your <title> tag and your SEO meta description, and often should. The OG title and description are written for a human scrolling a social feed, so make them punchy and benefit-led.
Keep og:title under roughly 60 to 90 characters so it does not get truncated, and og:description to about 110 to 200 characters depending on platform. Shorter is safer. If you want to see how length plays out for the search snippet too, our guide on meta description length and pixel width covers the truncation thresholds in detail.
Step 2: Create and host your og:image#
Design a 1200x630 image with your headline, logo, and a clean background. Export it as JPG or PNG, then upload it somewhere with a stable, public HTTPS URL. That can be your own server, an /images/ folder, or a CDN.
Copy the full absolute URL of the uploaded image. You will paste it into both og:image and twitter:image. Open the URL directly in a browser to confirm it loads with no login wall or redirect, because crawlers cannot log in.
Step 3: Paste the tags into your head#
Drop the full tag block from the section above into the <head> of your page, ideally near the top alongside your other meta tags. Replace the placeholder values with your real title, description, image URL, and canonical page URL.
<head>
<meta charset="utf-8" />
<title>Your Page Title Here</title>
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A summary that earns the click." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
</head>
If you use a framework, set these in the framework's head or metadata API rather than editing raw HTML. The tag names stay identical regardless of how you inject them.
Step 4: Validate before you share#
Do not assume it works. Each platform exposes a debugging tool that fetches your page and shows you the exact card it will render. Run your URL through these before you post anywhere:
- Facebook Sharing Debugger for Facebook and most generic OG consumers.
- LinkedIn Post Inspector for LinkedIn previews.
- The X (Twitter) Card preview, visible by pasting the link into a draft post.
These validators also report missing or malformed tags, so they double as your error checker. If the card looks wrong, fix the tag they flag and re-run.
Step 5: Preview across every platform at once#
Running three separate debuggers for every link gets tedious fast. To see how a URL will look on all the major platforms in one view, paste it into a multi-platform preview tool. The SERP and social preview tool renders your title, description, and OG image side by side so you can catch a cropped image or truncated headline in seconds, not after a failed post.
Fixing the "Image Not Updating" Cache Problem#
This is the single most frustrating Open Graph issue, and almost nobody documents the real fix. You updated your og:image, you reshared the link, and the old image (or no image) still shows. The tags are correct. So why is it broken?
The answer is caching. When a platform first fetches your URL, it stores the OG data on its own servers so it does not have to re-crawl every time someone shares the link. Change the tags later and the platform keeps serving its stale copy until that cache expires, which can take days.
The fix is to force the platform to re-scrape your page. You do not wait it out; you tell the cache to refresh.
Here is how to clear the cache on the platforms that hold one:
- Facebook: Open the Facebook Sharing Debugger, paste your URL, and click "Scrape Again." This forces a fresh fetch and updates the cached preview immediately.
- LinkedIn: Use the LinkedIn Post Inspector. Running your URL through it triggers a re-fetch. LinkedIn historically caches for around 7 days otherwise.
- X (Twitter): X expires card caches on its own, usually within a few days. There is no public manual refresh button anymore, so changing the image URL is the reliable workaround.
- Discord and Slack: Both cache embeds. The dependable trick is to change the image filename or append a query string (for example
og-image.jpg?v=2), which the platform treats as a brand-new URL with no cache.
The query-string trick (?v=2, ?v=3) is the universal fallback. Because the cache is keyed to the exact image URL, a new URL bypasses the stale entry on every platform at once. Pair that with a manual re-scrape on Facebook and LinkedIn and your preview updates everywhere.
Why your image might never have appeared#
If the preview was broken from the very first share, caching is not the cause. Check these in order:
- Relative image URL.
og:imagemust be absolute (https://...), not/og.jpg. - Image behind auth or a redirect. Crawlers cannot follow logins. Open the image URL in an incognito window to confirm.
- File too large or wrong format. Stay under ~5 MB and use JPG or PNG.
- Tag using
nameinstead ofproperty. Remember:og:tags needproperty, notname. - Tags injected by JavaScript after load. Many crawlers do not run JS, so OG tags must be in the server-rendered HTML, not added client-side.
That last one catches a lot of single-page apps. If your tags only appear after React or Vue hydrates, server-render them or pre-render the page so the crawler sees them in the initial HTML response.
Generating the Whole Tag Block Without Hand-Coding#
Writing the tags by hand once is good for understanding. Doing it for every page is repetitive and easy to get subtly wrong (a missing property, a relative URL, a forgotten Twitter Card). A generator removes the busywork while keeping you in control of the values.
The Open Graph and meta tag generator lets you type your title, description, and image URL, then outputs the complete, correct block with og: and twitter: tags ready to paste. It uses property and name correctly, makes URLs absolute, and includes the image dimension tags so platforms render faster.
Then run the result through the social and SERP preview tool to confirm the card looks right before it goes live. That two-step loop, generate then preview, is how you ship link previews that work the first time instead of debugging them in public after a post already went out looking broken.
Conclusion#
Learning how to add Open Graph tags comes down to a short, repeatable routine: drop the five core og: tags plus a Twitter Card block into your <head>, point og:image at an absolute 1200x630 JPG or PNG, then validate with each platform's debugger before you share. When a preview refuses to update, the cause is almost always a cached copy, and the cure is a forced re-scrape or a fresh image URL, not patience.
Get those fundamentals right and every link you share, on Facebook, LinkedIn, X, Discord, Slack, and beyond, shows a clean, branded card that earns clicks. Generate the tags, preview the card, and ship with confidence.
Frequently Asked Questions#
Where do Open Graph tags go in my HTML?
Open Graph tags go inside the <head> section of your page, alongside your other meta tags. They must be present in the server-rendered HTML so external crawlers can read them, because most crawlers do not execute JavaScript that adds tags after the page loads.
What is the correct og:image size? Use 1200 x 630 pixels at a 1.91:1 aspect ratio. This single size renders cleanly on Facebook, LinkedIn, X, Discord, and Slack without awkward cropping. Keep the file under about 5 MB, use JPG or PNG, and serve it over HTTPS with an absolute URL.
Why is my link preview not showing an image?
The most common causes are a relative og:image URL instead of an absolute https:// one, an image behind a login or redirect, a file that is too large, or using name instead of property on the og: tags. If the image was right but changed and will not update, the platform cached the old version and you need to force a re-scrape.
How do I update a cached Open Graph preview?
Use Facebook's Sharing Debugger and click "Scrape Again," and run the URL through LinkedIn's Post Inspector to trigger a re-fetch. For Discord, Slack, or any stubborn cache, change the image filename or append a version query string like ?v=2, which the platform treats as a new URL with no stale cache.
Do I need Twitter Card tags if I already have Open Graph tags?
Not strictly, because X falls back to your og: tags when Twitter Card tags are absent. But adding twitter:card set to summary_large_image is worth it, since it forces the large banner-style image card instead of a small thumbnail, which performs noticeably better in the feed.
Do Open Graph tags help my Google rankings? No, Open Graph tags do not directly influence Google rankings. They control how your links appear on social and chat platforms, which drives clicks and shares. That referral and brand traffic is valuable on its own, but it is a separate channel from organic search ranking signals.
