Guides JP

Meta Tag & OGP Generator

Generate SEO title, description, OGP and Twitter Card meta tags from a simple form, with live search-result and social-card previews.

Last updated: 2026/10/16 Developer Feedback & bug reports
Preview

Preview

Google Search Result
example.com
Your page title appears here
Your meta description appears here. Check how it looks in search results.
Facebook / OGP
No image (og:image / twitter:image not set)
example.com
Your page title appears here
Your meta description appears here. Check how it looks in search results.
X (Twitter) Card
No image (og:image / twitter:image not set)
example.com
Your page title appears here
Your meta description appears here. Check how it looks in search results.
Generated meta tags (paste inside <head>) 
Fill in the form above to generate meta tags here.

How to Use

1

Enter Title & Description

On the "Basic SEO" tab, enter your page title and description. The character counters help you stay within recommended lengths.

2

Set OGP & Twitter Info

On the "OGP" and "Twitter Card" tabs, set image URLs and card type. Turn on auto-fill to share title & description in one click.

3

Preview & Copy

Check the search-result and social-card previews, then copy the generated meta tags and paste them inside your <head>.

About the Meta Tag & OGP Generator

A web tool that generates accurate HTML meta tags — title, description, canonical, OGP (Open Graph Protocol) and Twitter Card — from a simple form. It shows live previews of how your page looks in Google search results and when shared on social media, so you can verify the appearance before publishing. It builds everything from base meta (charset / viewport) to OGP and Twitter Card in one go, ready to copy with a single click. Character counters next to the title and description help you tune lengths for SEO. All processing happens in your browser; your input is never sent to any server.

You can also pair this with the OGP image generator to improve your social share image, the favicon generator for browser-tab icons, and the slug generator to optimize your URLs. To learn how OGP works from the ground up, read our guide: The Basics of OGP Meta Tags.

Features

  • Live PreviewMeta tags are generated as you type, with instant Google, Facebook and X card previews.
  • OGP & Twitter CardCovers key properties like og:title, og:image and twitter:card. Auto-fill speeds up input.
  • Length GuidanceCharacter counters show recommended lengths for title and description for better SEO.
  • Privacy ProtectedAll processing happens in your browser. Your input is never sent to servers.

Use Cases

  • Build all meta tags before publishing a new page
  • Check OGP image & description for social sharing
  • Optimize title / description length for SEO
  • Set canonical URLs per landing page or article
  • Verify X (Twitter) card type and appearance

FAQ

Is the Meta Tag & OGP Generator free to use?
Yes, it is completely free. No registration required — just open it in your browser and start using it.
Is my input sent to a server?
No. All processing happens locally in your browser (JavaScript). Your titles, URLs and image URLs are never sent to or stored on any server.
What are the recommended lengths for title and meta description?
As a guideline, keep the title around 60 characters and the meta description around 120–160 characters. Actual display varies by device and width, so place important keywords near the beginning.
What is OGP (Open Graph Protocol)?
OGP defines how a page is displayed when shared on social networks like Facebook, X (Twitter) and LINE. Setting og:title, og:description, og:image and og:url produces a rich card that can improve click-through rates on shares.
What is the ideal image size for og:image?
The recommended size is 1200×630px (1.91:1 aspect ratio), which also works for the summary_large_image Twitter Card. Keep the file under 8MB and use PNG or JPEG. Always specify the image as an absolute URL (https://…).
Should I always set a canonical URL?
If duplicate content exists (e.g. parameterized URLs), a canonical tag is strongly recommended to tell search engines the preferred page. Even without duplicates, a self-referencing canonical is a safe practice.
Where do I paste the generated meta tags?
Paste them inside the <head>…</head> of your HTML. If you use a CMS like WordPress, you can also enter the corresponding values in an SEO plugin (Yoast SEO, All in One SEO, etc.).
Can I use it on my smartphone?
Yes, it works on all devices including smartphones, tablets and PCs.
Are the social share previews identical to the real display?
The previews reproduce how Google search results, Facebook (OGP) and X (Twitter) cards typically look, as a guide. Actual rendering can change due to platform updates, caching or image loading. Use a 1200×630px (1.91:1) absolute URL for og:image. After publishing, we recommend a final check with Facebook's Sharing Debugger and X's Card Validator.
How should I use the title / description character counters?
The counters next to the title and description fields change color when you exceed the recommended length (around 60 characters for the title, 120–160 for the description). Place important keywords near the beginning and stay within the guideline to avoid truncation and improve SEO and click-through rate. Base meta, OGP and Twitter Card are generated together as you type, and you can copy everything with one click.

Related Tools

JSON Formatter Format and validate JSON with syntax highlighting Password Generator Generate secure random passwords with one click UUID Generator Generate UUID v4 in bulk with format options ASCII Converter Convert between text and ASCII/Unicode codes Base64 Encoder Encode and decode text or files to Base64

Popular Tools

Character Counter Count characters, words, and lines in real-time QR Code Generator Create custom QR codes with logo, colors & styles IP Address Checker Check your global IP address Percent Calculator Calculate percentages easily Image Converter Convert between PNG, JPG, and WebP formats Image Compressor Compress PNG, JPEG, WebP images to reduce file size

Related Guides

What Is OGP? Meta Tag Basics, og:image Size, and How Social Cards Work A beginner-friendly guide to OGP (Open Graph Protocol) and meta tags: the roles of title and description, the meaning of og:title, og:image, og:type, and twitter:card, how social platforms build share cards, the recommended 1200x630 image size, and how to verify your settings. HTML5 Semantic Tags Explained: header, nav, main, article, section, and SEO A beginner-friendly guide to HTML5 semantic tags: the role of header, nav, main, article, section, aside, and footer, how they differ from div, their effect on SEO and accessibility (screen readers), and how to think about correct markup.