Toolcroft

SEO & Marketing

Meta Tag Generator - OG & Twitter Card Builder

Generate complete HTML <head> meta tags: title, description, canonical, Open Graph, and Twitter Card. Preview and copy the ready-to-paste code block. All processing is 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.
HTML output
<meta name="robots" content="index, follow" />

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

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.

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" />