How to Add Open Graph Tags to Your Website (2026)
By Rui Barreira · Last updated: 18 June 2026
Open Graph tags are meta tags that control how your page looks when shared on social platforms — Facebook, LinkedIn, Twitter/X, Slack, iMessage, and anywhere else that generates link previews. Without them, platforms fall back to guessing: they pick a random image, truncate the title awkwardly, and often show the wrong description. Adding a small set of <meta> tags to your page's <head> gives you full control over that preview. Use the Open Graph Tag Generator to build the correct markup without memorising every property name.
The Essential Tags
You only need six tags to cover the vast majority of share surfaces. The og:title, og:description, and og:image tags drive the visual preview. The og:url tag sets the canonical link (important when the same content is served at multiple URLs). The og:type tag tells platforms whether the page is an article, a product, a video, or a generic website. The og:site_name tag adds your brand name below the preview card.
| Tag | What It Controls | Recommended Value |
|---|---|---|
og:title | Preview headline | Page title, 60–90 characters |
og:description | Preview body text | 1–2 sentences, under 160 characters |
og:image | Preview image | 1200×630 px, absolute URL, under 1 MB |
og:url | Canonical page URL | Full absolute URL with protocol |
og:type | Content type signal | website or article |
og:site_name | Brand label in preview | Your site or product name |
Where to Place the Tags
All Open Graph tags go inside the <head> element of your HTML, using the <meta property="og:..." content="..."> format. For static HTML sites, paste them directly into the template. For WordPress, most SEO plugins (Yoast, Rank Math) expose Open Graph fields per post — fill those in and the plugin handles rendering. For Next.js, return them from the metadata export or via <Head> in your page component. After deploying, paste the page URL into the Facebook Sharing Debugger or LinkedIn Post Inspector to force a cache refresh and confirm the preview looks correct.
Twitter Cards and og:image Size
Twitter/X reads Open Graph tags but also has its own twitter:card meta tag that must be set explicitly — summary_large_image is the most common value and shows a full-width image card. If twitter:card is missing, Twitter falls back to a small thumbnail even when og:image is set correctly. For the image itself, 1200×630 pixels at 2:1 aspect ratio renders sharply across all platforms. Keep the file under 1 MB and always use an absolute URL — relative paths are ignored by crawlers fetching the page out of context.
Use the Open Graph Tag Generator to do this instantly.
Frequently Asked Questions
- Is this tool free?
- Yes — completely free, no signup required. All processing happens in your browser.
- Does the tool work offline?
- Once loaded, most features work without an internet connection since everything runs client-side.