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.

Reviewed by the thecalcu.com team · Last updated July 21, 2026

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.

Why Use an OG Meta Tag Generator?

Writing Open Graph tags by hand is simple once you know the properties, but it is error-prone at scale. The most common mistakes, omitting og:url, using a non-canonical URL, forgetting twitter:card entirely, or leaving image dimensions below the 600 × 315 pixel minimum, are invisible until a share fails to render correctly. By the time you notice in a Facebook Debugger, the link has already been shared and cached with the broken preview.

A generator eliminates this by providing a structured form: each field maps to exactly one meta property, required fields are clearly labelled, and the output is a consistently formatted, comment-annotated block that any developer or content manager can read and maintain.

Consider a practical scenario: a content team at a D2C brand publishes two to three blog posts per week. Without a generator, each author copies the OG block from the previous post and edits the values manually, a workflow that regularly results in posts going live with the previous article's image URL still in og:image, or og:url still pointing to the previous post. With a generator embedded in the publishing checklist, each post gets a fresh, validated OG block in under a minute.

For more technically complete page setups, pair this generator with the Schema Markup Generator to add JSON-LD structured data, the combination ensures rich previews on social platforms and enhanced results in Google Search simultaneously.

Who Should Use This Generator?

Front-end developers and full-stack engineers, when building new pages or templates, generating and verifying the OG block before launch ensures social sharing works on day one. This is especially important for programmatically generated pages (e-commerce product pages, blog posts, profile pages) where the OG tags must be dynamically populated.

Content writers and SEO practitioners, for teams where content authors manage their own publishing workflow, this generator is a self-service tool that removes the need to ask a developer every time a new article needs its social meta. Fill in the fields, copy the block, paste into the CMS.

WordPress and CMS site owners, even if you use a plugin like Yoast or Rank Math, understanding the underlying tags helps you debug why a post is not showing the right image on LinkedIn or why your WhatsApp preview looks different from Facebook. This generator lets you prototype the correct tag values before configuring them in the plugin UI.

Digital marketers running social campaigns, every link you post with a compelling, correctly sized image outperforms one with a broken or missing preview. If you do not control the underlying HTML, send the generated block to your developer with clear instructions. If you do control the HTML, add it yourself in two minutes.

Indie developers and solopreneurs, if you are launching a product, landing page, or SaaS tool and sharing it on X/Twitter or LinkedIn, the visual quality of the link card is your first impression. Use summary_large_image with a purpose-built 1200 × 630 banner, not whatever image happened to appear first on your homepage.

What Insights Does the Open Graph & Twitter Card Generator Give You?

The generator produces one output: Meta Tags HTML, a copy-paste-ready code block structured in two clearly commented sections.

The first section, <!-- Open Graph -->, contains six tags: og:type, og:title, og:description, og:url, og:image, and og:site_name. These cover all platforms that read the OG spec: Facebook, LinkedIn, WhatsApp, Pinterest, Slack, and Telegram.

The second section, <!-- Twitter / X Card -->, contains three required tags, twitter:card, twitter:title, twitter:description, plus twitter:image, and optionally twitter:site when a Twitter handle is provided. The twitter:site tag links the card to your site's Twitter account, enabling verified attribution in some card display contexts.

Reading the block teaches you which properties exist and what each does, a useful reference even if you later move to dynamically generating these tags via a framework's metadata API.

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.
Show formula & methodology ↓Show less ↑

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

What are Open Graph meta tags?
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.
What is a Twitter Card, and how does it differ from Open Graph?
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.
What is the recommended image size for Open Graph?
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.
What happens if I omit og:image?
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.
Does og:type affect how my page is rendered on social platforms?
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.
How do I add these meta tags to my website?
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.
Do Open Graph tags affect my Google search rankings?
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.
What is the difference between summary and summary_large_image Twitter Card types?
`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.
Can I use different titles for OG and Twitter versus my HTML page title?
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.
How do I test whether my Open Graph tags are working?
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.
Should I include the og:url tag even if it matches the page's actual URL?
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