Social Meta Tag Generator

Generate Open Graph, Twitter Card, and SEO meta tags with live Google, Facebook, and LinkedIn previews.

Social Meta Tag Generator

Generate Open Graph, Twitter Card, and SEO meta tags with live preview

0/60
0/160

Fill in the page details above and click "Generate"

What is a Social Meta Tag Generator?

A social meta tag generator creates the HTML meta tags that control how your web pages appear when shared on social media platforms like Facebook, LinkedIn, and Twitter, and in Google search results. Open Graph (OG) tags define the title, description, and image for Facebook and LinkedIn, while Twitter Card tags do the same for Twitter.

CodeHelper's Social Meta Tag Generator lets you fill in your page details and instantly see how the page will look on Google, Facebook, and LinkedIn, then copy the generated HTML meta tags.

Key Features

  • Open Graph Tags: Generate og:title, og:description, og:image, og:url, and og:site_name tags.
  • Twitter Cards: Generate twitter:card, twitter:title, twitter:description, and twitter:image tags.
  • Live Previews: See how your page will appear on Google search results and social media platforms.
  • Character Warnings: Get warned when title (>60 chars) or description (>160 chars) exceed recommended lengths.
  • Copy HTML: One-click copy of all generated meta tags ready to paste into your HTML head.

How to use the Social Meta Tag Generator

  1. Enter your page title, description, URL, and image URL.
  2. Select the OG type and Twitter Card type.
  3. Preview how the page will appear on Google and social media.
  4. Click Generate and copy the HTML meta tags.

Meta tag character limits and best practices

  • og:title: Keep under 60 characters to avoid truncation in Facebook and LinkedIn previews.
  • og:description: 150-200 characters is ideal. Longer descriptions may be cut off.
  • og:image: Use at least 1200x630px for the best display across platforms. JPG or PNG format recommended.
  • twitter:card: Use summary_large_image to display a large image preview on Twitter/X.
  • Canonical URL: Always include og:url pointing to the canonical version of the page.

Whether you are launching a new website, optimizing existing pages for social sharing, or debugging why your links look wrong on Facebook, this free meta tag generator produces correct, standards-compliant meta tags instantly.

Frequently Asked Questions

Why does Facebook or LinkedIn show an old image after I changed the tags?

Social networks cache the first scrape of a URL. After updating the tags, request a re-scrape: Facebook Sharing Debugger, LinkedIn Post Inspector, or the X Card Validator each have a button for it. Changing the image file name also forces a fresh fetch.

Which image size should I use for og:image?

1200 by 630 pixels, under 1 MB, as JPG or PNG, with the important content in the middle because some placements crop the sides. The generator adds og:image:width and og:image:height so the first share already renders at the right size instead of falling back to a small thumbnail.

Do I need both Open Graph and Twitter Card tags?

X falls back to Open Graph for title, description and image, so the minimum is the og tags plus twitter:card to choose the card layout. Adding the twitter:title and twitter:image tags lets you give X a different image or shorter title when you want to.

Should the Twitter tags use name or property?

X documents the name attribute (meta name=twitter:card). Many generators emit property=twitter:card and it happens to work, but name is the documented form and what this tool outputs. Open Graph tags use property, as the OG protocol specifies.

Related

toolXML FormatterProfessional XML formatter with syntax highlighting, statistics, XML to JSON conversion, and XPath query tester.toolHTML OptimizerProfessional HTML optimizer with minify and beautify modes. Compress, format, and optimize HTML with advanced whitespace control.toolBase64 Encoder/DecoderEncode and decode Base64 strings, files, images with data URL support. Upload files or paste text for instant conversion.toolJWT Decoder & ValidatorDecode, validate, and inspect JSON Web Tokens (JWT). Parse header, payload, verify signatures with HMAC algorithms, and check token expiration: all client-side.

Free forever, no ads, no tracking. Support the project