Home›Generators›Developer Tools›Open Graph & Twitter Card Generator

Open Graph & Twitter Card Generator

Developer Tools

Generate Open Graph and Twitter Card meta tags for any web page. Paste into your HTML <head> for rich previews on Facebook, X, LinkedIn, and WhatsApp.

example.com
My Awesome Page
A helpful page about something interesting and useful.
Meta Tags HTMLhtml

What is a OG Meta Tags?

When someone shares a link on Facebook, LinkedIn, WhatsApp, or X/Twitter, the platform does not display the raw URL — it displays a rich preview card built from <meta> tags embedded in the page's <head>. If those tags are absent or incomplete, the platform guesses: it might pull the wrong image from your page, use your <title> verbatim (site name suffix and all), or show nothing at all. Open Graph and Twitter Card meta tags are the mechanism you use to take control of that preview.

Open Graph (OG) is an open protocol originally developed by Facebook in 2010. It uses property="og:*" attributes in <meta> tags to define six core properties for a page: its type, title, description, canonical URL, image, and site name. Every major social platform — Facebook, LinkedIn, Pinterest, Slack, Telegram, and WhatsApp — reads OG tags natively when generating link previews.

X/Twitter maintains its own parallel system called Twitter Cards, using name="twitter:*" attributes. Twitter does fall back to OG values, but the twitter:card property — which determines the visual layout of the card in the timeline — has no OG equivalent and must be set explicitly. A summary_large_image card displays a full-width banner image above the title; a summary card shows a small square thumbnail. Choosing the right card type is as important as the image itself.

The Open Graph & Twitter Card Generator takes your page details — title, description, URL, image, site name, page type, and Twitter card preference — and outputs a complete, copy-paste-ready HTML block for your <head>. There is nothing to install: paste the output into your HTML template, WordPress theme, Next.js metadata export, or CMS SEO settings and you are done.

For structured data that helps search engines understand your page, use the Schema Markup Generator alongside this tool. For tracking social traffic back into your analytics, generate UTM-tagged versions of your shared URLs with the UTM Link Generator.

How to use this OG Meta Tags calculator

  1. Enter your Page Title — this becomes both og:title and twitter:title. Write it as you want it to appear in the social preview card: compelling and complete without a site name suffix, under 60 characters to prevent truncation on most platforms.
  2. Enter your Description — becomes og:description and twitter:description. Aim for 150–160 characters. Write it as a call to action or value statement: this is the text displayed under the title in every link card.
  3. Enter your Page URL in the Page URL field — the canonical URL of the page without UTM parameters or session tokens. Use the full URL including https://.
  4. Enter your Image URL in the Image URL field — the direct URL to your OG image (not a page URL, but the image file itself ending in .jpg or .png). Use a 1200 × 630 pixel image hosted at a publicly accessible HTTPS URL for best results.
  5. Enter your Site Name — your brand or website name as you want it to appear in the card (e.g. "thecalcu.com"). This populates og:site_name.
  6. Select your Page Type from the Page Type dropdown — choose website for general pages and landing pages, article for blog posts, product for e-commerce product pages, profile for user profile pages, or video.other for pages whose primary content is a video.
  7. Select your Twitter Card Type — use summary_large_image for articles, landing pages, and product pages where a large visual makes an impact. Use summary for tools, utilities, and profile pages. Use app only for pages that are primarily promoting a mobile app with App Store and Google Play links.
  8. Optionally enter your Twitter / X Handle in the Twitter Handle field (e.g. @yoursite) — this adds the twitter:site tag, which attributes the card to your account. Leave blank if you do not have a site Twitter account.
  9. Review the output block in the Meta Tags HTML panel and click the copy button to copy the full block to clipboard. Paste it inside your HTML <head>, before the closing </head> tag.

Formula & Methodology

### Open Graph Properties

Each og: property maps to a specific HTML <meta> tag using the property attribute:

| Property | Tag | Purpose |
|---|---|---|
| og:type | <meta property="og:type" content="website" /> | Tells platforms how to categorise the page. Affects display features on Facebook. |
| og:title | <meta property="og:title" content="..." /> | The headline shown in the preview card. Truncated at ~60–65 characters on most platforms. |
| og:description | <meta property="og:description" content="..." /> | The body text under the title. Truncated at ~155 characters. Rendered on Facebook, LinkedIn, Telegram. Twitter does not always display it. |
| og:url | <meta property="og:url" content="..." /> | The canonical URL. All shares of this page are aggregated under this URL in Facebook's like and share counts. |
| og:image | <meta property="og:image" content="..." /> | The image displayed in the preview. Must be an absolute HTTPS URL. |
| og:site_name | <meta property="og:site_name" content="..." /> | The site brand name. Shown in smaller text under the title on Facebook cards. |

### Twitter Card Properties

Twitter Card tags use the name attribute (not property):

| Property | Effect |
|---|---|
| twitter:card | Determines card layout. summary_large_image shows a full-width banner. summary shows a small square thumbnail. app shows an install card for mobile apps. |
| twitter:title | Card headline. Twitter recommends under 70 characters. If absent, falls back to og:title. |
| twitter:description | Card body. Under 200 characters. Not always shown depending on card type and rendering context. |
| twitter:image | Card image. If absent, falls back to og:image. Must be under 5 MB for summary_large_image. |
| twitter:site | Your site's Twitter/X handle (e.g. @thecalcu). Optional but recommended — enables card attribution. |

### Recommended Image Specifications

The standard 1200 × 630 pixel image at the 1.91:1 aspect ratio covers every major platform without cropping or letter-boxing:

- Facebook: minimum 600 × 315 px; renders at 1200 × 630 on desktop
- LinkedIn: recommends 1200 × 627 px
- Twitter summary_large_image: 1200 × 628 px, cropped to 2:1
- WhatsApp: uses the OG image at 300 × 157 px thumbnail; the full image is shown on tap
- Slack / Telegram: renders at approximately 500 × 261 px

Keep the primary subject of the image centred and away from the edges to survive crops across different platform aspect ratios. Use JPEG for photographs (smaller file size) and PNG for graphics with text or logos. Host the image at a stable, publicly accessible HTTPS URL — social crawlers do not follow redirects reliably.

### What Happens When og:image Is Missing

| Platform | Behaviour |
|---|---|
| Facebook | Scans the page for any crawlable image; often finds a logo, sidebar graphic, or ad pixel — or shows a text-only card with no image. |
| LinkedIn | Omits the image entirely; renders a smaller, less prominent text card. |
| WhatsApp | No thumbnail alongside the link; just the page title and domain in plain text. |
| X/Twitter | With summary_large_image, shows a large grey placeholder box. With summary, shows a broken image icon in the thumbnail position. |
| Slack | Shows a plain URL unfurl without an image pane. |
| Telegram | Shows the page title and description with no image attachment. |

### How og:type Affects Card Rendering

- website — the universal default. Produces a standard link card on all platforms. Use this when no other type applies.
- article — Facebook reads additional article: namespace tags (publish time, author, section) when this type is set. No visual difference on other platforms, but correct semantically for blog posts.
- product — enables price and availability display on platforms that support the product schema (Facebook Shops, Pinterest). Without supplementary product: tags, it behaves like website on most platforms.
- profile — intended for personal profile pages. LinkedIn and Facebook may display first and last name fields from profile:first_name and profile:last_name tags.
- video.other — triggers video card treatment on Facebook and LinkedIn when a video is embedded. Without an actual embeddable video on the page, it degrades to a standard link card.

Frequently Asked Questions

Open Graph meta tags are HTML `<meta>` elements placed in a page's `<head>` that tell social platforms — Facebook, LinkedIn, WhatsApp, and others — exactly how to present a link when it is shared. They define the page title, description, image, URL, and type. Without them, platforms guess at these values from whatever text and images they find on the page, often producing truncated titles, wrong images, or blank previews.
A Twitter Card is X/Twitter's own set of meta tags (prefixed with `twitter:`) that control how a link appears when tweeted. While Twitter does fall back to `og:` values when `twitter:` tags are absent, the Twitter Card spec gives you explicit control over the card layout — specifically the `twitter:card` type, which determines whether the preview shows a large banner image (`summary_large_image`), a small thumbnail (`summary`), or an app install prompt (`app`). Open Graph is used by every other major platform; Twitter Cards are Twitter-specific but coexist in the same `<head>` block.
The widely accepted standard is 1200 × 630 pixels at a 1.91:1 aspect ratio. This size renders crisply on high-DPI (Retina) screens without appearing stretched on standard displays. Facebook enforces a minimum of 200 × 200 pixels and will not scrape images smaller than 600 × 315 pixels for the large card format. LinkedIn recommends 1200 × 627 pixels. Using 1200 × 630 covers all major platforms with a single image asset.
Each platform handles a missing `og:image` differently. Facebook falls back to crawling the page for the largest image it can find — often a logo, an inline article photo, or nothing at all, producing an unstyled text-only link card. LinkedIn omits the image entirely and shows a smaller text-based preview. WhatsApp shows no thumbnail alongside the link. X/Twitter, if `summary_large_image` is set, may show a blank grey image box. A missing OG image consistently reduces click-through rates on shared links because visually rich previews outperform text-only cards.
Yes. Setting `og:type` to `article` signals to Facebook that the page has a publication date and author, enabling article-specific display features in some contexts. `product` enables structured product data and price display on platforms that support it. `profile` is for user profile pages. `website` is the safe default for any page that does not fit a specific type — it produces a standard link card on all platforms. `video.other` enables richer video card treatment on Facebook and LinkedIn when a video embed is present.
Copy the output block from the Meta Tags HTML output field — it contains both the `<!-- Open Graph -->` and `<!-- Twitter / X Card -->` comment sections. Paste the entire block inside the `<head>` element of your HTML page, before the closing `</head>` tag. In WordPress, this is typically done through an SEO plugin's social settings (Yoast, Rank Math) rather than by editing templates directly. In Next.js, add the tags to the `<Head>` component or the `metadata` export of your page.
Open Graph tags are not a direct ranking signal for Google Search. Google does not use `og:` meta tags when building its search index — it prefers structured data via JSON-LD and standard HTML meta tags like `<meta name='description'>`. However, OG tags indirectly affect SEO by improving click-through rates on shared social links: a well-crafted OG title and image drives more traffic to your page, which can improve engagement signals Google factors into rankings over time.
`summary_large_image` displays the OG image as a full-width banner above the title and description — it occupies significantly more space in the timeline and catches the eye when scrolling. `summary` shows the image as a small square thumbnail to the left of the title text. `summary_large_image` is recommended for blog posts, articles, and landing pages where the visual impact matters. `summary` is better for small-image or icon-based content like tools, profiles, or short updates where a large image would not add value.
Yes, and this is a common practice. The HTML `<title>` tag is optimised for search engines and browser tabs — often including the site name (e.g. 'Best SIP Calculator — thecalcu.com'). The `og:title` is optimised for social sharing — typically shorter and more compelling without the site suffix (e.g. 'SIP Calculator: See Your Wealth Grow in 30 Seconds'). The generator populates both `og:title` and `twitter:title` from the same Page Title field; you can edit the output block manually to differentiate them if needed.
Facebook provides the Sharing Debugger at developers.facebook.com/tools/debug/ — paste your URL and it shows exactly how Facebook will render the card, plus any scraping errors. LinkedIn has a Post Inspector at linkedin.com/post-inspector/. X/Twitter provides a Card Validator at cards-dev.twitter.com/validator. Note that these tools cache previews, so after updating OG tags you may need to use the 'Scrape Again' or 'Clear Cache' option. For general validation of your HTML meta structure, use the [Schema Markup Generator](/schema-markup-generator/) alongside this tool.
Yes. Setting `og:url` explicitly to the canonical URL of the page prevents platforms from storing multiple versions of the same link under different URLs — for example, tracking and UTM-tagged versions. When users share `https://example.com/page/?utm_source=twitter`, setting `og:url` to `https://example.com/page/` ensures all engagement (likes, shares, comments) on Facebook aggregates under a single canonical entry rather than being split across every variant URL. Pair `og:url` with the HTML canonical link tag for consistent cross-platform and cross-search-engine behaviour. Use the [UTM Link Generator](/utm-link-generator/) to track campaign links while keeping your OG tags pointed at the clean canonical URL.
Also known as
open graph meta tags generatorog:title generatortwitter card generatorsocial media meta tagsfacebook og tags html