Meta Tag & OG Preview Generator
Build and preview Open Graph, X Card, and standard HTML meta tags for your web pages — instantly in your browser.
Core
0/60
0/160
Open Graph· X Card
Title & description are reused from Core above.
Your data never leaves your browser — all previews happen locally.
Google Search
example.com
Page Title
Page description will appear here.
Generated HTML
<!-- Primary Meta Tags --> <meta name="robots" content="index, follow" /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <!-- X Card --> <meta name="twitter:card" content="summary_large_image" />
Quick tips
- • OG image: use 1200 × 630 px for best results.
- • Title: keep under 60 chars to avoid truncation.
- • Description: aim for 150–160 chars.
- • OG/X tags fall back to core values if left blank.
How to use it
- 1Fill in the Core section: page title (50–60 chars), meta description (150–160 chars), canonical URL, author, robots directive, and keywords.
- 2Expand the Open Graph section to set the og:title, og:description, og:image (1200 × 630 px recommended), og:type, and site name. Leave fields blank to fall back to the Core values.
- 3Expand the X Card section to choose a card type (summary_large_image or summary) and optionally override the title, description, image, and @site handle.
- 4Switch between the Google, Open Graph, and X Card preview tabs on the right to see how your page will appear across platforms.
- 5Click 'Copy all' on the Generated HTML panel and paste the tags into your page's <head>.
Common use cases
- Prepare meta tags for a new blog post before publishing — preview exactly how the share card will look on LinkedIn and X.
- Audit existing pages by pasting their current metadata and seeing whether title/description lengths are within recommended limits.
- Generate og:image-ready markup for a product launch landing page and test image dimensions before going live.
- Add X Card tags to a portfolio site so shared links display a large hero image instead of a plain URL.
- Create noindex / nofollow directives for staging or admin pages without touching server config.
Frequently asked questions
- What is the difference between og:title and the page title?
- The HTML <title> element controls the browser tab and Google search result headline. og:title is only used when the URL is shared on social platforms like Facebook, LinkedIn, or Slack — it can be a slightly different, more social-friendly version. If og:title is omitted, most platforms fall back to the page title.
- What image size should I use for the OG image?
- 1200 × 630 pixels is the widely recommended size. It renders well on Facebook, LinkedIn, and X's summary_large_image card. For X's compact summary card, 800 × 800 (square) works better. Always use a publicly accessible HTTPS URL — base64 data URIs and localhost URLs are ignored by crawlers.
- Do these tags affect my Google ranking?
- Meta keywords have no ranking effect (Google has ignored them since 2009). The meta description does not directly influence rankings, but a compelling description improves click-through rate, which can indirectly affect visibility. The canonical URL and robots directives do directly affect crawling and indexing — set robots to 'noindex' on pages you don't want in search results.
- What is the X card type and which should I pick?
- 'summary_large_image' shows a large hero image above the title and description — best for articles, launches, and blog posts. 'summary' shows a small square thumbnail beside the text — good for tools, profiles, and short content. 'app' is for mobile app install cards. When in doubt, use summary_large_image and supply a 1200 × 630 image.
- Is any of my data sent to a server?
- No. All tag generation and previews happen entirely in your browser using JavaScript. Nothing you type is transmitted anywhere — safe for private, unreleased, or proprietary page content.
Try next
Favicon Generator
Generate the full favicon set — ICO, PNGs at every size, apple-touch-icon, and PWA manifest — from one image. Free, in your browser.
Sitemap Validator
Paste or upload a sitemap XML and instantly validate it against Google's rules — structure, URL limits, lastmod format, duplicates, priority, and more. Entirely in your browser.
QR Code Generator
Make QR codes for websites, Wi-Fi passwords, contact cards, social handles, email, SMS, and more. Download as PNG or SVG — or as a ZIP with one branded QR per social platform.