Toolcroft

Meta Tag Generator - OG & Twitter Card Builder

SEO & Marketing

Generate SEO, canonical, Open Graph, and Twitter Card tags. Preview search and social cards, check counts, and copy HTML. Processing stays local.

Your inputs are saved in this browser only. No data is ever sent to a server, and saved values won't be visible in other browsers or devices.

0 / 60 characters

0 / 160 characters

HTML output
<meta name="robots" content="index, follow" />

<!-- Open Graph -->
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />

Live preview

Search result · approximate

https://example.com/your-page

Your page title

Your page description

These are approximate text layouts. Image URLs are not loaded here, so they stay in your browser; check the live platform debugger after publishing.

How to use this tool

  1. Fill in the Basic tab. Enter your page title, description, and canonical URL.
  2. Complete the Open Graph tab. Add og:title, og:description, og:image, og:type, and og:url.
  3. Set the Twitter Card tab. Choose a card type. Twitter fields inherit from Open Graph by default; turn inheritance off to enter overrides.
  4. Copy the output. Click "Copy HTML" and paste the block into your <head>.

What are HTML meta tags?

Meta tags are HTML elements placed inside the <head> section that pass structured metadata to browsers, search engines, and social platforms. Unlike visible page content, they are not displayed to users but directly influence how your page is indexed and shared.

Open Graph tags explained

The Open Graph protocol (developed by Facebook, now an open standard) lets you control the title, description, image, and URL that appear when someone shares a link on social media. Every major platform - Facebook, LinkedIn, Slack, Discord - reads OG tags when generating link previews.

  • og:title - The title shown in the card (can differ from your page <title>).
  • og:description - A short description; aim for 100–200 characters.
  • og:image - The preview image. Minimum 1200 × 630 px recommended.
  • og:url - The canonical URL of the resource being shared.
  • og:type - Content type: website, article, product, etc.

Twitter Card tags

Twitter reads OG tags as a fallback, but its own twitter: meta properties let you choose between card styles. summary_large_image shows a prominent banner image and is the most engaging format for articles and blog posts. summary shows a small square thumbnail beside the text.

This generator includes the selected twitter:card when Open Graph details are present. Title, description, and image inherit from Open Graph by default, so the output avoids duplicate tags; turn inheritance off when X needs separate copy or artwork. The character counts below the fields are soft guides, not platform limits, and the previews approximate common layouts rather than reproducing every platform's styling.

Tips for better click-through rates

  • Keep og:title under 60 characters to prevent truncation in most previews.
  • Write og:description as an action-oriented sentence, not just a synopsis.
  • Always provide a unique og:image per page - generic images perform poorly.
  • Set rel="canonical" to prevent duplicate content issues when the same content is accessible at multiple URLs.

Character limit reference

TagRecommended limitNotes
<title>50–60 charsGoogle truncates at ~55–60 in SERPs
meta description150–160 charsGoogle may rewrite; aim for natural sentences
og:title40–60 charsFacebook truncates around 60
og:description100–200 charsLinkedIn shows ~160, Facebook ~120
twitter:title70 charsTruncated with ellipsis beyond 70
twitter:description200 charsTruncated in most card types

Meta tag validation tools

  • Facebook Sharing Debugger (developers.facebook.com/tools/debug/): shows exactly how Facebook reads your OG tags and lets you force a cache refresh.
  • Twitter Card Validator (cards-dev.twitter.com/validator): previews how your page looks when shared as a tweet.
  • LinkedIn Post Inspector (linkedin.com/post-inspector/): shows the LinkedIn card preview and clears the LinkedIn cache for your URL.

Canonical URL

The canonical tag tells search engines which version of a page is the "master" when the same content is accessible at multiple URLs (e.g., with/without trailing slash, HTTP vs HTTPS, www vs non-www, or paginated versions). Without it, search engines may split link equity across duplicates or choose the wrong version to rank. 

<link rel="canonical" href="https://example.com/my-page" />

Preview and publish

Use the live Google, Facebook, X, and LinkedIn text previews to catch missing titles or long descriptions before copying your tags. Image URLs are not fetched by this page, which keeps your draft in the browser; the card layout therefore uses a placeholder until the tags are published. To check a real image, create one with the Open Graph Image Generator, then validate the deployed page with the Open Graph Preview or SERP Preview.

Frequently asked questions

What are meta tags?

Meta tags are HTML elements in the <head> section of a page that provide metadata to search engines and social platforms. Key ones include title, description, canonical, and Open Graph tags.

What is Open Graph?

Open Graph (OG) is a protocol created by Facebook that controls how a URL appears when shared on social media. The og:title, og:description, og:image, and og:url properties are most important.

Do Twitter Card tags replace Open Graph tags?

Twitter falls back to Open Graph values for many card fields, so the two sets complement each other. This generator emits the selected twitter:card when Open Graph data is present and inherits the OG title, description, and image by default; turn inheritance off to add Twitter-specific overrides.

What image size should I use for og:image?

The recommended minimum is 1200 × 630 px (1.91:1 ratio) for Facebook and LinkedIn. Twitter summary_large_image also looks best at 1200 × 628 px.

More seo & marketing

Browse all seo & marketing